Bejárat > JavaScript > Ragadós footer JavaScripttel

Ragadós footer JavaScripttel

2009. aug. 31. 19:02 Szólj hozzá! Hozzászólásokhoz

Mit tudunk tenni, ha minden CSS megoldásunk kudarcba fullad (ilyen azért ritkán fordulhat elő), hogy ragadós láblécet készítünk? Csinálunk JavaScripteset a következő módon:

Kell nekünk egy footer először is:

1
2
3

<div id="footer">
   &copy; 2009 StarWeb
</div>

Egy kis CSS:

1
2
3
4
5
6
7
8
9
10
11

html {
   height: 100%;
}
body {
   height: 100%;
}
div#footer {
   height: 150px;
   width: 100%;
   position: absolute;
}

És a JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type="text/javascript">
function getPageSizeWithScroll(){
   if (window.innerHeight && window.scrollMaxY) {// Firefox
      yWithScroll = window.innerHeight + window.scrollMaxY;
      xWithScroll = window.innerWidth + window.scrollMaxX;
   } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
      yWithScroll = document.body.scrollHeight;
      xWithScroll = document.body.scrollWidth;
   } else { // works in Explorer 6 Strict, Mozilla (not FF) and Safari
      yWithScroll = document.body.offsetHeight;
      xWithScroll = document.body.offsetWidth;
   }
   document.getElementById('footer').style.top = (yWithScroll-150) + 'px';
}	
</script>

Oo és persze ne felejtsül el meghívni a függvényünket:

1

<body onload="getPageSizeWithScroll();">
Categories: JavaScript Tags: ,

Kapcsolódó cikkek

  1. Még nincs hozzászólás
  1. Még nincsenek visszakövetések