Hi,
NOTE : I am using Mozilla FireFox 3 for this. Once i get this working
popper I will do testing and correcting on Other Browsers. ( im sure
IE6 will be the daemon here )
I am a bit new to jquery and as a test project i decided to create a
content scroll-er.
it works quite nicely but has a few bugs I'm trying to sort out. may
someone could help me.
the functionality works good you, however if you play around with
clicking on the seeker bar and arrows for a a bit you will notice a
bug...any thoughts ?
Version Of Jquery : 1.3.2.min
HTML MARKUP
<div id="container" align="center">
<div class="padding width-max txt-l">
<div id="content-box">
<div id="content" class="float-l">
<div>
The Quick Brown Fox Jumped Over
The Lazy Dog.
The Quick Brown Fox Jumped Over
The Lazy Dog.
The Quick Brown Fox Jumped Over
The Lazy Dog
The Quick Brown Fox Jumped Over
The Lazy Dog.
The Quick Brown Fox Jumped Over
The Lazy Dog.
The Quick Brown Fox Jumped Over
The Lazy Dog.
The Quick Brown Fox Jumped Over
The Lazy Dog.
The Quick Brown Fox Jumped Over
The Lazy Dog.
The Quick Brown Fox Jumped Over
The Lazy Dog.
The Quick Brown Fox Jumped Over
The Lazy Dog.
The Quick Brown Fox Jumped Over
The Lazy Dog.
The Quick Brown Fox Jumped Over
The Lazy Dog
The Quick Brown Fox Jumped Over
The Lazy Dog.
The Quick Brown Fox Jumped Over
The Lazy Dog.
The Quick Brown Fox Jumped Over
The Lazy Dog.
The Quick Brown Fox Jumped Over
The Lazy Dog.
The Quick Brown Fox Jumped Over
The Lazy Dog.
The Quick Brown Fox Jumped Over
The Lazy Dog.
</div>
</div>
<div id="scrollbar" class="float-l">
<span id="up">/\</span><br />
<div id="seek">
<div id="seeker">
</div>
</div>
<span id="down">\/</span>
</div>
</div>
</div>
</div>
CSS MARKUP
html {
width:100%;
height:100%;
}
* {
margin:0;
padding:0;
line-height:1.8em;
}
.width-max {
width:600px;
}
.wdith {
width:100%;
}
.padding {
padding:10px;
}
.txt-l {
text-align:left;
}
.float-l {
float:left;
}
.clear-l {
clear:left;
}
.none {
height:0!important;
width:0!Important;
overflow:hidden!Important;
border:medium none!important;
font-size:0!Important;
}
#content {
overflow:hidden;
height:200px;
width:200px;
}
#up, #down {
cursor:pointer;
}
.height {
height:auto!important;
}
#seek {
height:200px;
width:10px;
background-color:#999;
cursor:pointer;
position:relative;
}
#seeker {
width:10px;
height:10px;
background-color:#666;
cursor:pointer;
position:absolute;
top:0;
left:0;
}
JQUERY
//<![CDATA[
$(function() {
/*
STEP ONE :
add class that contains the following style to the effected element
height:auto!important
this adjusts the element to its original height before the content is
hidden so I can extract the maximum height
*/
$("#content").addClass("height");
var height_max = $("#content").height();
/*
STEP TWO:
I remove the class i added so I may get the element back to its'
desired height
*/
$("#content").removeClass("height");
/*
I get the height of my seeker bar
I did this so i could have it as any height and not effect my
calculation negatively
*/
var height_seek = $("#seek").height();
/*
d = percentage increment per click
is = current percentage index
*/
var d = 10;
var is = 0;
/*
when the user clicks the down arrow
update the index
if the index is greater than -100 the content and seeker scrolls 10%
*/
$("#down").click(function() {
if(is > -100) {
is = is - d;
$("#content div").animate({ marginTop:((is /
100) * height_max )},
1000);
$("#seeker").animate({top:-((is / 100) *
height_seek ) }, 1000);
}
});
/*
When the user clicks the up arrow
if the index is less than 0
update the index
scroll the content and seeker by 10%
*/
$("#up").click(function() {
if(is < 0) {
is = is + d;
$("#content div").animate({ marginTop:((is /
100) * height_max )},
1000);
$("#seeker").animate({top:((is / 100) *
height_seek ) }, 1000);
}
});
/*
When you click anywhere on the seeker
get the % of the height of the where is clicked
move to that location
calculate the percentage the content has to scroll
move to that location
*/
$("#seek").click(function(e) { // get element : mouse
coordinates
var y = e.pageY - this.offsetTop;
var c = (y / height_seek) * 100;
var operator = 0;
if(c < is) {
operator = 0;
} else {
operator = 1;
}
is = c;
$("#seeker").animate({top:y+"px" }, 1000);
if(operator == 1) {
$("#content div").animate({ marginTop:-((is /
100) *
height_max )}, 1000);
} else {
$("#content div").animate({ marginTop:((is /
100) * height_max )},
1000);
}
});
});
//]]>
