Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    FadeIn flashes before actually fading in [SOLVED]

    I'm new using jQuery and I have a problem trying to make a fadeIn work properly.

    My client asked that the main section of the site (which may contain images, text, etc, and it's the only section that changes when navigating the site; header and footer are static) enters with a fadeIn. I made it work with the following code between the <head></head> tags:

    Code:
    <script type="text/javascript" language="JavaScript">
    	$(document).ready(function() {
    	$('div.main').hide().fadeIn(2000);
    	});
    </script>
    The problem is, when moving between sections, sometimes I get a quick glimpse of this main div before it disappears to enter, the second time, with the fadeIn. I've made slight changes to the code, more as an experiment than really knowing what I'm doing, but I get the same result. It doesn't happen all the time or in every section, though. Could this be 'normal' behavior or browser-related? is it possible to correct it? My client is being very picky about this and I'm out of ideas.

    I appreciate any guidance
    Last edited by brunn; 04-03-2011 at 11:37 PM.

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    something like this? without jQuery
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                #divFadeIn {
                    opacity: 0;
                    filter:alpha(opacity=0);
                    border: 1px solid red;
                }
            </style>
            <script type="text/javascript">
                var curOpac = 0;
                var speed = 0.2;
                var fadeTimer;
                function fadeIn(obj){
                    fadeTimer = setInterval(function(){setOpacity(obj)},100);
                }
                function setOpacity(obj) {
                    curOpac = curOpac + speed;
                    if(curOpac <= 10){
                        setOpacityCSS(obj);
                    }
                }
                function setOpacityCSS(obj){
                    if(typeof(obj.style.opacity) == 'string'){
                        obj.style.opacity = curOpac/10;
                    } else {
                        obj.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
                    }
                }
                window.onload=function(){
                    oDivFadeIn = document.getElementById('divFadeIn');
                    oDivFadeIn.onmouseover=function(){fadeIn(this);}
                    oDivFadeIn.onmouseout=function(){
                        if(fadeTimer){clearInterval(fadeTimer);}
                        curOpac = 0;
                        setOpacityCSS(this);
                    }
                }
            </script>
        </head>
        <body>
            <div id="divFadeIn">
                Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
                Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
                pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut,
                ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id,
                aliquam non, taciti donec ut.
            </div>
            <div>
                Hover anywhere above this to see the fade in div
            </div>
        </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you bullant, but I'm trying to get the fadeIn when entering each section of the site, not on moseover...

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Have a try moving your fade in code to just before your closing </body> tag and removing the document.ready:

    Code:
    <script type="text/javascript">
    $('div.main').hide().fadeIn(2000);
    </script>

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you SB65.

    It worked, the only thing is that I had to put the "display:none" property on the css and then that whole content disappears when javascript is disabled. To fix that I followed the suggestions from this post: http://greatwebguy.com/programming/c...-specific-css/ (hope it's okay to post, in case someone else finds it useful).

    But happily I can say it's solved now. Thank you very much for replying

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by brunn View Post
    Thank you bullant, but I'm trying to get the fadeIn when entering each section of the site, not on moseover...
    ok, no problem. I wasn't sure what you meant by "section".

    To do it on page load without jQuery you could do something like this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                #divFadeIn {
                    opacity: 0;
                    filter:alpha(opacity=0);
                    border: 1px solid red;
                }
            </style>
            <script type="text/javascript">
                var curOpac = 0;
                var speed = 0.2;
                var fadeTimer;
                function fadeIn(obj){
                    fadeTimer = setInterval(function(){setOpacity(obj)},100);
                }
                function setOpacity(obj) {
                    curOpac = curOpac + speed;
                    if(curOpac <= 10){
                        setOpacityCSS(obj);
                    }
                }
                function setOpacityCSS(obj){
                    if(typeof(obj.style.opacity) == 'string'){
                        obj.style.opacity = curOpac/10;
                    } else {
                        obj.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
                    }
                }
                window.onload=function(){
                    fadeIn(document.getElementById('divFadeIn'));
                }
            </script>
        </head>
        <body>
            <div id="divFadeIn">
                Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
                Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
                pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut,
                ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id,
                aliquam non, taciti donec ut.
            </div>
            <div>
                Some other content
            </div>
        </body>
    </html>

  • #7
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks bullant!

    I'll give it a try, it's always nice to not depend on jQuery

  • #8
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    no problem


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •