0

I have a jquery that select each image in DIV through loop. It’s like a carousel or slider. The div have 10 images and the div is set to overflow: auto;

When I reach image number 6, the next image image(7) was selected but not shown (I mean the scroll bar was not going up). How can I set Div scroll bar goes up and window scroll bar remain the same (no movement).

I checked the net and this is the closest answer that I got but its not working in IE, jQuery focus without scroll.

Can somebody help me or give me an idea on this?

Community
  • 1
  • 1
user2003762
  • 1

1 Answers1

0

Thanks Praveen

I’m using Jquery for this. Basically the flow of the code is I have a right image and left image(right image is sliding and show the image in the left). The code is ok but when I test it using IE the problem occurs. Window scroll is also moving, I want only to scroll on the div. Its work fine in chrome and firefox

Below is my code.

enter code here



$(document).ready(function () {
       //To store timeout id
   var timeoutId,indx;
   var slideImage = function (step) {

       //Clear timeout if any
       clearTimeout(timeoutId);


           if (step == undefined) step = 1;

           //Get current image's index
           var indx = $('.item:visible').index('.item');

           //If step == 0, we don't need to do any fadein our fadeout
           if (step != 0) {
               //Fadeout this item //:eq() selector selects an element with a specific index number
               $('.item:visible').stop(true, true).fadeOut("slow");
               $('.imageloop:eq(' + indx + ')').stop(true, true).css("background-color", "white");
           }

           //Increment for next item
           indx = indx + step;

           //Check bounds for next item
           if (indx >= $('.item').length) {
               indx = 0;
           } else if (indx < 0) {
               // use for previous button
               indx = $('.item').length - 1;
           }


           //If step == 0, we don't need to do any fadein our fadeout
           if (step != 0) {

               //Fadein next item
               $('.item:eq(' + indx + ')').stop(true, true).fadeIn("slow");

               //focus on the image
               $('.imageloop:eq(' + indx + ')').stop(true, true).css("background-color", "#6BB9E7");
               $('.imageloop:eq(' + indx + ')').stop(true, true).attr("tabindex", indx).focusWithoutScrolling();

               prevIndex = indx;
           }


}


  $.fn.focusWithoutScrolling = function () {
       var x = window.scrollX, y = window.scrollY;
       this.focus();
       window.scrollTo(x, y);

       };

   };


 <div id='left_img'  >
   <div class='item'><img src="1.jpg" /></div>
   <div class='item'><img src="2.jpg" /></div>
   <div class='item'><img src="3.jpg" /></div>
   <div class='item'><img src="4.jpg" /></div>
   <div class='item'><img src="5.jpg" /></div>
   <div class='item'><img src="6.jpg" /></div>
   <div class='item'><img src="7.jpg" /></div>
   <div class='item'><img src="8.jpg" /></div>
   <div class='item'><img src="9.jpg" /></div>
   <div class='item'><img src="10.jpg" /></div>                        
 </div>

<div id = 'right_img'> 
   <div class='imageloop'tabindex='0'><img src="1.jpg" /></div>
   <div class='imageloop'tabindex='1'><img src="2.jpg" /></div>
   <div class='imageloop'tabindex='2'><img src="3.jpg" /></div>
   <div class='imageloop'tabindex='3'><img src="4.jpg" /></div>
   <div class='imageloop'tabindex='4'><img src="5.jpg" /></div>
   <div class='imageloop'tabindex='5'><img src="6.jpg" /></div>
   <div class='imageloop'tabindex='6'><img src="7.jpg" /></div>
   <div class='imageloop'tabindex='7'><img src="8.jpg" /></div>
   <div class='imageloop'tabindex='8'><img src="9.jpg" /></div>
   <div class='imageloop'tabindex='9'><img src="10.jpg" /></div>                       

</div>
user1855575
  • 167
  • 2
  • 6