4

i have a problem with jQuery fadeIn(or fadeOut) method. i build an article rotator , all works fine but there is a problem when the page is scrolled bottom and the article rotate, The fadeIn (or fadeOut) method causes a scroll to the article position. I think that these methods ,changes the css top property of body, but I do not know how to avoid this! Any idea???

here the code

    function rotate(direction)
{
    if($('articles > article:visible:first') == 'undefined')
        $currentArticle = $('articles > article:first');
    else
        $currentArticle = $('articles > article:visible:first');

    if($currentArticle.attr('id') == $('articles > article:last').attr('id'))
        $next = $('articles > article:first');
    else
        $next = $currentArticle.next();

    if($currentArticle.attr('id') == $('articles > article:first').attr('id'))
        $prev = $('articles > article:last');
    else
        $prev = $currentArticle.prev();

    if($do_animation)
    {
        $currentArticle.fadeOut(1000,function(){
                switch(direction)
                {
                    case 1:
                        $next.fadeIn(1000);
                        break;
                    case -1:
                        $prev.fadeIn(1000);
                        break;
                }
                if($('.rotate_show'))
                    $('.rotate_show').removeClass('rotate_show');
                $('article_number > btn[id|="'+$next.attr('id')+'"]').addClass('rotate_show');
                });
    }
    else
        return false;
}

ok here the site http://kario91.altervista.org/ultimate the text is from joomla this is the complete site! the variables work fine, there's no problem.. try to reduce the browser window and scroll bottom

Marco C
  • 45
  • 1
  • 8
  • 1
    I know the answer, but I can't tell you until you post some code. – mVChr Feb 06 '11 at 23:46
  • 2
    If you know the answer, then what does the person posting code have to do with it? – iwasrobbed Feb 07 '11 at 02:58
  • now i post the function code that make rotation – Marco C Feb 07 '11 at 11:01
  • I can't see how this would affect the scrolling, but I can tell you that you have to be careful how and where you're defining your variables. If `$currentArticle` has not been defined outside of the function (which it shouldn't have been), then define it once using `var` at the top of your function definition. This should explain e.g. where `$do_animation` has been defined? — But to address your problem: could you provide us with an example of your whole page somewhere? – polarblau Feb 07 '11 at 13:43
  • ok here the site http://kario91.altervista.org/ultimate/ the text is from joomla this is the complete site! the variables work fine, there's no problem.. try to reduce the browser window and scroll bottom – Marco C Feb 07 '11 at 14:03
  • Have you tried to validate your site? The mark–up contains a lot of "new" tags that I for one have never seen before (someone correct me) and for sure is not valid XHTML. I'll check quickly still for the JS problem, but I can't sure it it's not the mark–up now: http://validator.w3.org/check?uri=http%3A%2F%2Fkario91.altervista.org%2Fultimate%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 – polarblau Feb 07 '11 at 14:25
  • Try adding `return false;` to your `click` event handler in `content_rotator.js` around line 40. `$('article_number btn').click(function(){ // ... other code return false; });` – polarblau Feb 07 '11 at 14:30

3 Answers3

5

I feel tempted to say that this issue is due to the fact that when your article fades out completely, just before the callback is called, the height of your page is reduced (because the article is hidden) and because of that, the browser scrolls up until the bottom of the page (without the article) is right at the bottom of the browser's window. Try removing the callback after the fadeOut is completed, and you might notice how the browser aligns the bottom.

I think you could fix this by giving the article container a height before the fadeOut beings, and when the fadeOut is completed, remove this height right after the fadeIn begins... Or something like that.

I hope this helps!

Federico Cáceres
  • 1,216
  • 12
  • 19
  • 2
    I had a similar problem, and solved it by setting a "height" in the CSS for the div that was wrapping my element that was fading in and out. Thanks for pointing me in the right direction. – Spike Williams Mar 25 '11 at 16:32
2

I solved it with fadeTo(), it is something like this

Backup your position

$("#position").attr("name","scroll"+$("body").scrollTop());

FadeOut:

$("#content").fadeOut(300,function(){........});

To go back do a "semi" fadeIn and callback the position with:

$("#content").fadeTo(10,0.1,function(){

$("body").scrollTop($("#position").attr("name").replace("scroll",""));


});

and them fade completly in

$("#content").fadeTo(300,1);
Alessandro Minoccheri
  • 35,521
  • 22
  • 122
  • 171
Javier ML
  • 21
  • 1
1

Setting height to parent container solved the problem.

Miroslav
  • 11
  • 1