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); } }); }); //]]>