javascript - Copy the code from JSFiddle -
sorry stupid question...i found other similar question couldn't figure out.
i don't understan why doesn't work. re-create code http://jsfiddle.net/sb49b/21/
i think problem should onload i'm not sure because tried didn't work. tride include code in:
jquery(document).ready(function($){ code javascript )}; and in:
$(document).ready(function(){ code javascript )}; do have idea??! error: uncaught syntaxerror: unexpected token )
here code:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>jsfiddle.net/sb49b/18/</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> <script type="text/javascript"> var odebug = $('p#debug'); var oitemscontainer = $('ul#items'); $(window).scroll(function(e) { var iscrolltop = $(window).scrolltop(); var iscrollperitem = 200; var aitems = oitemscontainer.children('li.item'); var icurrentindex = math.floor(iscrolltop / iscrollperitem); var fopacity= (iscrolltop % iscrollperitem) / iscrollperitem ; aitems.filter(':lt(' + icurrentindex + ')').show(); aitems.filter(':gt(' + icurrentindex + ')').hide(); aitems.eq(icurrentindex).show().css('opacity', fopacity); }); </script> <style type="text/css"> body { height:3000px; } ul#items { width:200px; height:200px; position:fixed; top:10px; left:10px; } ul#items li.item {background-color:#dddddd; display:block; height:100%; left:0; opacity:0; position:absolute; right:0; width:100%;} p#debug {position:fixed; right:10px; text-align:right; top:10px; } </style> </head> <body> <p id="debug">n/a</p> <ul id="items"> <li class="item item01">1</li> <li class="item item02">2</li> <li class="item item03">3</li> <li class="item item04">4</li> <li class="item item05">5</li> <li class="item item06">6</li> <li class="item item07">7</li> <li class="item item08">8</li> </ul> </body> </html>
yes error coming because didn't closed brackets
$(document).ready(function(){ code javascript )}; it should be
$(document).ready(function(){ code javascript }); notice difference between lastly line
javascript html css jsfiddle
No comments:
Post a Comment