0

I am doing a fluid based slide show, for that, I written this code, issue is this animation starting correctly as well without the end, it's moving forward again.

I believe I am using the window.resize function, that would be the cause. if so how can i fix this?

my code :

var slideShow = function () {
    var x = 0;
    var imgHeight = $('img').height();
    $('#slideContainer').height(imgHeight);
    var imgSetWidth = $('#slideContainer').width();
    $('img').width(imgSetWidth);
    var imgLength = $('.slide').size();
    $('.inner').css({width:imgLength * imgSetWidth,left:imgSetWidth*x});

    $('a#next').click(function () {
        x++;
        $('.inner').animate({left:-imgSetWidth},1000);    
    } )
}
window.onload = function () {
    slideShow();
};

$(window).resize(function () {
    slideShow();    
} )

As well if any one knows how to write the fluid based slide show (forward/previous) with title, let me know. try to avoid plug-ins.

BenMorel
  • 34,448
  • 50
  • 182
  • 322
3gwebtrain
  • 14,640
  • 25
  • 121
  • 247
  • Many browsers redraw the content at every stage of the resize i.e. during every size change of a drag motion. This could be causing your issue. You can try intercept this and have it only run once resizing is complete using code such as that given in answer here: http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed – Ren Oct 02 '12 at 16:00
  • yes, you are correct. but still i am getting the issue. – 3gwebtrain Oct 02 '12 at 16:12
  • So you followed the link Ren gave you and implemented the solution there and you're still having the problem? – j08691 Oct 02 '12 at 17:01

0 Answers0