HTML §2. | Egérkövető - hulló csillagok, Két hasáb egy oldalon

Sziasztok!

Úgy vettem észre, hogy az első ilyen bejegyzés elnyerte a tetszéseteket és van is rá igény, úgyhogy most két új kódot hozok nektek! Az egyik egy eléggé keresett kód, a másik pedig esztétikai és helyspórolási szempontból hasznos! Most is mellékelek hozzá képet, ami megmutatja hova kell beilleszteni! Használjátok bátran őket, ha pedig valami nem sikerült vagy nem világos, írjatok nyugodtan és igyekszem segíteni! 

xx, Diush

------------------------------------------------------------------------------------------------------------------------

Egérkövető - Hulló csillagok

(katt a képre és nagyobb lesz)

Itt a kód! A harmadik sorban félkövérré kiemelt színkódot változtathatod meg, az a hulló csillag színe! A többit ne írd át, mert akár az egész blogod átíródhat tőle! A színkódokért katt IDE!

<script type="text/javascript">
// <![CDATA[
var colour="#f4dd98";
var sparkles=50;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
  var i, rats, rlef, rdow;
  for (var i=0; i<sparkles; i++) {
    var rats=createDiv(3, 3);
    rats.style.visibility="hidden";
    document.body.appendChild(tiny[i]=rats);
    starv[i]=0;
    tinyv[i]=0;
    var rats=createDiv(5, 5);
    rats.style.backgroundColor="transparent";
    rats.style.visibility="hidden";
    var rlef=createDiv(1, 5);
    var rdow=createDiv(5, 1);
    rats.appendChild(rlef);
    rats.appendChild(rdow);
    rlef.style.top="2px";
    rlef.style.left="0px";
    rdow.style.top="0px";
    rdow.style.left="2px";
    document.body.appendChild(star[i]=rats);
  }
  set_width();
  sparkle();
}}
function sparkle() {
  var c;
  if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<sparkles; c++) if (!starv[c]) {
      star[c].style.left=(starx[c]=x)+"px";
      star[c].style.top=(stary[c]=y)+"px";
      star[c].style.clip="rect(0px, 5px, 5px, 0px)";
      star[c].style.visibility="visible";
      starv[c]=50;
      break;
    }
  }
  for (c=0; c<sparkles; c++) {
    if (starv[c]) update_star(c);
    if (tinyv[c]) update_tiny(c);
  }
  setTimeout("sparkle()", 40);
}
function update_star(i) {
  if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
  if (starv[i]) {
    stary[i]+=1+Math.random()*3;
    if (stary[i]<shigh+sdown) {
      star[i].style.top=stary[i]+"px";
      starx[i]+=(i%5-2)/5;
      star[i].style.left=starx[i]+"px";
    }
    else {
      star[i].style.visibility="hidden";
      starv[i]=0;
      return;
    }
  }
  else {
    tinyv[i]=50;
    tiny[i].style.top=(tinyy[i]=stary[i])+"px";
    tiny[i].style.left=(tinyx[i]=starx[i])+"px";
    tiny[i].style.width="2px";
    tiny[i].style.height="2px";
    star[i].style.visibility="hidden";
    tiny[i].style.visibility="visible"
  }
}
function update_tiny(i) {
  if (--tinyv[i]==25) {
    tiny[i].style.width="1px";
    tiny[i].style.height="1px";
  }
  if (tinyv[i]) {
    tinyy[i]+=1+Math.random()*3;
    if (tinyy[i]<shigh+sdown) {
      tiny[i].style.top=tinyy[i]+"px";
      tinyx[i]+=(i%5-2)/5;
      tiny[i].style.left=tinyx[i]+"px";
    }
    else {
      tiny[i].style.visibility="hidden";
      tinyv[i]=0;
      return;
    }
  }
  else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
  set_scroll();
  y=(e)?e.pageY:event.y+sdown;
  x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
  if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
  }
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
  }
  else {
    sdown=0;
    sleft=0;
  }
}
window.onresize=set_width;
function set_width() {
  if (typeof(self.innerWidth)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
  }
  else if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
  }
  else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
  }
}
function createDiv(height, width) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height+"px";
  div.style.width=width+"px";
  div.style.overflow="hidden";
  div.style.backgroundColor=colour;
  return (div);
}
// ]]>
</script>

Két hasáb egy oldalon

<div style="float: left; width: 45%;"> Ide jön a bal hasáb tartalma </div>
<div style="float: right; width: 45%;"> Ide jön a jobb hasáb tartalma </div>

(katt a képre és nagyobb lesz)

A bejegyzésen belül kattints át a 'html' nézetre, majd oda illeszd be a kódot! Ezután válts vissza az 'Írás' nézetre!

(katt a képre és nagyobb lesz)

Miután visszaváltottál megkapod a két oszlopot (csak az 'Ide jön a bal - jobb hasáb tartalma' lesz ott)! Ha ez meg van, akkor kattints a bal hasábnál az írás után és nyomj egy entert! Írd be amit szeretnél és formázd, majd után óvatosan töröld ki az eredetileg ott levő sort! Ugyan ezt ismételd meg a jobb hasábban is! Azért így javaslom a használatát, mert én már nagyon sokszor jártam úgy, hogy kitöröltem az eredetileg ott levő sort, de azzal a kód egy részét is, s úgy már nem működött tovább - többször kellett bemásolnom -, és ez így szerintem biztosabb!