jQuery scroll effect causing manual scrolling problems -


i trying create image viewer using jquery , have come across problem far have been unable fix. image viewer basic, has 1 big image on top , 6 small images underneath. when user clicks on 1 of small images big image src changes of small one. also, there button when clicked adds new small image dynamically. of works fine it.

the problem manifested after decided add scroll effect when new image generated page automatically scrolls down can see it. saves user having manually. have got work seems causing manual scrolling problems on occasions. mean after add image , scrolls down it, unable manually scroll using mouse wheel.

sometimes respond mouse wheel after delay can last anywhere between 1-20 seconds. when doesn't respond mouse wheel try side scroll bar , works , other times stuck, not allowing me go or down. find if add images 1 1, waiting them load there isn't problems. if keep pressing add new image button in rapid succession problem seems occur. found if wait long enough problem seems go away makes me think due scroll effect being slow , browser having wait finish until lets me manually scroll.

i've thought disabling add image button after pressed new image can load , scroll can take place before new image can added i'm hoping there solution.

any or direction appreciated. thanks

link live demo

html

<div id="container">      <button>add<br>images</button>      <div id="large-image-wrap">         <img src="http://bilal.cu.cc/images/profile_covers/profile_cover36.jpg">     </div>      <div id="small-images-wrap" class="clearfix">         <div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover36.jpg"></div>         <div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover64.jpg"></div>         <div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover44.jpg"></div>         <div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover45.jpg"></div>         <div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover31.jpg"></div>         <div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover65.jpg"></div>     </div>  </div>

css

#container{ width:960px; margin:0 auto 20px auto; position:relative; }  button{ position:fixed; margin-left:-105px; margin-top:19px; width:100px; text-transform:uppercase; text-align:center; font-weight:bold; }  #large-image-wrap{ width:960px; height:320px; position:fixed; z-index:10; }  #large-image-wrap img{ width:100%; height:auto; border-top:20px solid white; border-bottom:13px solid white; }  #small-images-wrap{ width:960px; position:relative; top:353px; }  .si-box{ width:32%; height:auto; float:left; margin-bottom:1%; }  .si-box img{ width:100%; height:auto; }  div.si-box:nth-child(2), div.si-box:nth-child(3n+2){ margin:0 2%; }

jquery

$(document).ready(function(){      var imgnum = 1;       // add new image     $("button").on("click", function(){         if(imgnum > 70){imgnum = 1};         $("#small-images-wrap div:last-of-type").after('<div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover'+ imgnum +'.jpg"></div>');         imgnum++;          // scroll added image         $('html, body').animate({scrolltop: $("#small-images-wrap div:last-of-type").offset().top}, 2000);     });      // on click effect     $(document).on('click', '.si-box img',  function () {         var $imgsrc = $(this).attr("src");         $("#large-image-wrap img").attr("src", $imgsrc);     });  }); // document ready end


Comments

Post a Comment

Popular posts from this blog

matlab - Deleting rows with specific rules -

i got 20*3 cell array , need delete rows contains "137", "2" , "n:t" origin data: 't' '' '' 'np(*)' '' '' [ 137] '' '' [ 2] '' '' 'are' 'and' 'np(fcc_a1#1)' '' '' '1:t' [ 1200] [0.7052] '' [1.2051e+03] [0.7076] '' 'are' 'and' 'np(fcc_a1#3)' '' '' '2:t' [ 1200] [0.0673] '' [1.2051e+03] [0.0671] '' 'are' 'and' 'np(m23c6)' '' '' '3:t' [ 1200] [0.227...
Read more

php - MySQLi multi_query results for later use -

i using mysqli multi_query work several select statemets @ time. know how handle results, able use them later in code. example: <?php //connection stuff $query = "select name, surname database1;"; $query.= "select car, year, type database2 carid='1';"; $query.= "select product, price database3;"; if ($mysqli->multi_query($query)) { if($result = $mysqli->store_result()) { while($row = $result->fetch_row()) { --> here? } } } ?> <html> <div id='persona'> <?php foreach() { --> print name + surname } ?> </div> <div id='cars'> <?php foreach() { --> print car + year + type } ?> </div> <div id='product'> <?php foreach() { --> print product + price } ?> </div> </html> one more thing, prepared statements not possible when using multiple_query, right? there no benefit in putting unrelated queries in 1 multi ...
Read more