Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

JavaScript / DOM / AJAX: Simple div fade in and stop

Bottom of Page

1 to 14 of 14

  1.  
    • CommentAuthorRobWalsh
    • CommentTimeJan 22nd 2008
     permalink
    Hi
    I'm looking for a simple and quick way of fading in a div on my page once the page loads.. I don't want to have to click a button for the effect to happen.. Just each time the page loads this div which is holding the main content will fade in from 0-100 opacity..

    Thanks if you can help me out.. Appreciate it..
    • CommentAuthorkylesteed
    • CommentTimeJan 22nd 2008
     permalink
    Rob -

    Adobe has what they call "SPRY", it's AJAX based, and it does what you're looking for. Visit the website here to learn more about SPRY and download the code you will need. It gives instructions on how to set it up as well as tutorials on how to use it in your site.

    Enjoy.
    • CommentAuthorRobWalsh
    • CommentTimeJan 22nd 2008
     permalink
    Hi Kylesteed,

    Thanks for your reply.. I'm quite new using ajax but I've used spry effects alot in Dreamweaver and it does have a fade in effect but I can only seem to get this to work when it is triggered by a click or doubleclick etc... Is it possible to just apply the effect to the div I want faded in and have it triggered automatically when the page is loaded..... Like instead of onclick can I use something like onload
    • CommentAuthorkylesteed
    • CommentTimeJan 22nd 2008
     permalink
    Rob -

    Try it out. I'm new myself to AJAX and haven't honestly used the fade-in effect. But I assume you should be able to use the "onLoad" function in place of "onClick". I'm interested to hear if it works.
    • CommentAuthorRobWalsh
    • CommentTimeJan 22nd 2008 edited
     permalink
    Thanks Kylesteed... Yeah the onLoad function doesn't work.. It can't really be that easy I suppose..
    • CommentAuthorvarland
    • CommentTimeJan 22nd 2008
     permalink

    There is no onload event for a div (without some tinkering by a framework). You should be able to do it in the head section of your page with

    <script type="text/javascript">
    window.onload = function() {
    // Code to fade in here...
    }
    </script>
    • CommentAuthorgogogob
    • CommentTimeJan 22nd 2008
     permalink
    <style>logo{filter:alpha(opacity=0);opacity:0}</style>
    <script>
    function Logo(){var fade=0,logo=document.getElementById("logo").style,ms=(logo.opacity==0)?0:1,pace=setInterval(Fade,20);function Fade(){if(fade<100){fade+=1;if(ms)logo.filter="alpha(opacity="+fade+")";else logo.opacity=(fade/100)}else clearInterval(pace)}};
    window.onload=Logo;
    </script>
    <body><div id="logo">CONTENT</div></body>

    <!--This is pretty dense but I hope you can get it working; covers IE and the best via feature testing (ms)-->
    • CommentAuthorRobWalsh
    • CommentTimeJan 22nd 2008
     permalink
    Thanks alot for your help guys.. gogogob - that worked a treat.. Really appreciate it...
    • CommentAuthorRobWalsh
    • CommentTimeJan 23rd 2008
     permalink
    seems very choppy in firefox.. any idea why that would be? Fades in very smoothly on ie 6 and 7 and safari
    • CommentAuthorgogogob
    • CommentTimeJan 23rd 2008
     permalink
    Hi Rob...
    Try slowing it down... pace=setInterval(Fade,40);
    and double the step... {fade+=2;
    Firefox does tend to be a bit jumpy with busy scripts acting on styles.
    • CommentAuthorgogogob
    • CommentTimeJan 23rd 2008
     permalink
    And... by-the-way....
    See my stuff @ http://www.panavista.eu/
    Need any help... spoim[at]blueyonder.co.uk
    • CommentAuthork3liutZu
    • CommentTimeJan 24th 2008
     permalink
    mmm, or use a js library

    with jQuery you would use something like:

    $(function(){ //this is on HTML ready
    $('#mydiv').css('opacity',0).fadeIn('slow'); //1. select the div using regular css, 2. set its initial opacity to 0, 3. fade it in
    });
    • CommentAuthorgogogob
    • CommentTimeJan 24th 2008
     permalink
    Just learn JavaScript...
    • CommentAuthorlorne17
    • CommentTimeAug 25th 2009
     permalink
    Hello there,

    I applied this to my main body content div and it worked great in Firefox, but IE makes the text all jagged and pixilated? It still fades in but looks horrible.

    Any idea how to fix this?

    Thanks,
    Lorne

1 to 14 of 14

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page