|
Easy JS DIV scroller.
For our site Urbania.us, we wanted to make a home page with content shown above the fold (500px height), yet not loose out on the front page functionality and related SEO value. So, we found a js div scroller script from by Alen Grakalic. It is a nice lite weight JS that works very, very well and is easy to customize.
In the event the script is ever off line, we have included the code here for you.
Just copy and paste as needed. There are three files you need.
1) JS. Either hardcode or make a seperate file. We prefer linking ourselves.
/*
Easy Scroll v1.0
written by Alen Grakalic, provided by Css Globe (cssglobe.com)
please visit http://cssglobe.com/post/1495/easy-scroll-accessible-content-scroller
*/
this.easyscroll = function(){
// id of the container element
var id = "myContent";
// navigation buttons text
var nav = ["Scroll Up", "Scroll Down", "Reset"];
// id for each navigation button (OPTIONAL)
var navId = ["btnUp", "btnDown", "btnReset"];
// movement speed
var speed = 5;
// desired height of the container element (in pixels)
var height = 425;
//
// END CONFIG
// do not edit below this line (unless you want to of course :) )
//
var obj = document.getElementById(id);
obj.up = false;
obj.down = false;
obj.fast = false;
var container = document.createElement("div");
var parent = obj.parentNode;
container.id="easyscroll";
parent.insertBefore(container,obj);
parent.removeChild(obj);
container.style.position = "relative";
container.style.height = height + "px";
container.style.overflow = "hidden";
obj.style.position = "absolute";
obj.style.top = "0";
obj.style.left = "0";
container.appendChild(obj);
var btns = new Array();
var ul = document.createElement("ul");
ul.id="easyscrollnav";
for (var i=0;i<nav.length;i++){
var li = document.createElement("li");
li.innerHTML = nav[i];
li.id = navId[i];
btns.push(li);
ul.appendChild(li);
};
parent.insertBefore(ul,container);
btns[0].onmouseover = function(){
obj.up = true;
this.className = "over";
};
btns[0].onmouseout = function(){
obj.up = false;
this.className = "";
};
btns[1].onmouseover = function(){
obj.down = true;
this.className = "over";
};
btns[1].onmouseout = function(){
obj.down = false;
this.className = "";
};
btns[0].onmousedown = btns[1].onmousedown = function(){
obj.fast = true;
};
btns[0].onmouseup = btns[1].onmouseup = function(){
obj.fast = false;
};
btns[2].onmouseover = function(){
this.className = "over";
};
btns[2].onmouseout = function(){
this.className = "";
};
btns[2].onclick = function(){
obj.style.top = "0px";
};
this.start = function(){
var newTop;
var objHeight = obj.offsetHeight;
var top = obj.offsetTop;
var fast = (obj.fast) ? 2 : 1;
if(obj.down){
newTop = ((objHeight+top) > height) ? top-(speed*fast) : top;
obj.style.top = newTop + "px";
};
if(obj.up){
newTop = (top < 0) ? top+(speed*fast) : top;
obj.style.top = newTop + "px";
};
};
obj.interval = setInterval("start()",50);
};
//
// script initiates on page load.
//
this.addEvent = function(obj,type,fn){
if(obj.attachEvent){
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn](window.event );}
obj.attachEvent('on'+type, obj[type+fn]);
} else {
obj.addEventListener(type,fn,false);
};
};
addEvent(window,"load",easyscroll);
2) HTML for your template.
<div id="container">
<div id="myContent">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dapibus, purus non tincidunt mattis,
odio ipsum euismod ipsum, eget suscipit dui orci vitae urna. Vivamus et ipsum at mauris interdum dapibus.
Morbi lectus. Quisque id ante commodo nulla eleifend posuere. Donec quis augue sit amet neque mollis ornare.
Nam gravida rhoncus velit. In magna. Nulla semper tristique elit. Aenean euismod. Maecenas nunc sapien,
nonummy vel, nonummy in, ultrices tristique, odio. </p>
<p>
Phasellus bibendum. Cras accumsan massa venenatis lectus bibendum elementum. Nulla id justo.
Nunc ante nisl, rhoncus vel, ultrices at, consequat ut, nunc. Vestibulum dolor. Aenean elementum
malesuada elit. Mauris turpis. Morbi vel nulla. Fusce sit amet quam. Etiam vel diam.
Praesent tortor. Nulla nisi arcu, nonummy at, dignissim at, elementum ut, leo.
Nunc odio nibh, cursus vitae, ultricies et, blandit et, leo.</p>
<p>
Nulla velit velit, vehicula sit amet, tincidunt non, nonummy semper, massa. Cras accumsan. Nulla
faucibus lorem ut metus. Nulla felis lectus, tristique a, dapibus ut, pharetra a, nunc. Ut egestas.
Sed posuere rhoncus turpis. Vivamus posuere, augue ac viverra blandit, metus dolor malesuada neque,
eget elementum ipsum pede at pede. Vivamus elit metus, vehicula eget, consequat in, sodales nec,
diam. Vestibulum eu mauris. Sed sodales mi eu augue. Mauris sagittis hendrerit ipsum. Pellentesque sodales.
Duis ligula turpis, commodo nec, adipiscing eu, pretium id, eros. Maecenas tellus nisi, dapibus
lobortis, suscipit eget, consequat vitae, eros. Nunc cursus fringilla nisi. Morbi pharetra,
ipsum vel imperdiet elementum, sapien augue adipiscing magna, vitae tempus sapien sapien sit
amet magna. Fusce diam tortor, fermentum non, sollicitudin id, feugiat ac, felis. Maecenas
accumsan velit at risus. Proin in augue ut lacus auctor eleifend. Duis lectus.</p>
</div>
</div>
3) CSS (Adjust as needed)
/* easyscroll */
#container{
margin:0 auto;
text-align:left;
width:800px;
padding-top:2em;
z-index:10;
}
#easyscroll{
background:#eee;
margin:1em 0;
/* add additional styling */
}
/* easyscroll navigation buttons */
#easyscrollnav, #easyscrollnav li{
height:28px;
line-height:28px;
margin:0;
padding:0;
}
#easyscrollnav{
margin:1em 0;
}
#easyscrollnav li{
list-style:none;
float:left;
background:#eee;
margin-right:10px;
padding:0 10px;
color:#333;
cursor:pointer;
}
#easyscrollnav li.over{
color:#999;
text-decoration:underline;
}
/* // easyscroll navigation buttons */
/* // end easyscroll */
|
Joomla 1.5 Web Development 
