Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Another jQuery Question

Discussion in 'Website Design Forum:' started by iEthan, Mar 4, 2009.

  1. iEthan

    iEthan Member

    How can I fade in a div 1000 milliseconds after the page loads. I have this code:

    HTML:
    <!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>
            <!--- Start Main --->
                <title>Ethan Turkeltaub</title>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <!--- End Main --->
            <!--- Start Stylesheets --->
                <style type="text/css">
                    body{
                        background-color:#000;
                        margin:0;
                        padding:0;
                    }
                    #image{
                        background-image:url('image.png');
                        background-repeat:no-repeat;
                        width:1000px;
                        height:800px;
                        margin:0;
                        padding:0;
                </style>
            <!--- End Stylesheets --->
            <!--- Start Javascript --->
                <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
                <script type="text/javascript">
                    $(document).ready(function(){
                        
                    });
                </script>
            <!--- End Javascript --->
        </head>
    <body>
        <div id="image" />
    </body>
    </html>
    
    What jQuery should I add to fade in
    HTML:
    <div id="image" />
     
  2. Sunburn

    Sunburn Active Member

  3. iEthan

    iEthan Member

    Yes for both. I tried every solution I found but it won't work.
     
  4. Sunburn

    Sunburn Active Member

    hrrrm....

    Code:
    <style type="text/css" media="screen">#image {display:none;}</style>
    Code:
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>            <script type="text/javascript">                              $(document).ready(function(){                       $("#image").fadeIn("slow");                });            </script>
    Effects/fadeIn - jQuery JavaScript Library


    10 sec google = above then its a min coding.
     
  5. iEthan

    iEthan Member

    It still isn't working... I'm not understanding why...
     
  6. Sunburn

    Sunburn Active Member

    post your full page code here....

    are you linking to the jquery file correctly?
     
  7. iEthan

    iEthan Member

    Alright, here we go:

    index.php
    HTML:
    <?php
    /*--------------------------
    Ethan Turkeltaub Site
    Build 0.3
    
    index.php
    --------------------------*/
    ?>
    <!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>
            <!--- Start Main --->
                <title>Ethan Turkeltaub</title>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <!--- End Main --->
            <!--- Start Stylesheets --->
                <link rel="stylesheet" media="screen,projection" href="<?php ?><?php bloginfo('stylesheet_url'); ?>" />
            <!--- End Stylesheets --->
            <!--- Start Javascript --->
                <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
                <script type="text/javascript">
                    $(document).ready(function(){
                        $(".image").fadeIn("slow");
                    });
                </script>
            <!--- End Javascript --->
            <!--- Start SEO --->
                <meta name="verify-v1" content="CEpwk3D/Wftp4w+O3B7fuX3c63JJ9kpKDm/Vc8d7COg=" />
            <!--- End SEO --->
        </head>
    <body>
        <div class="image"></div>
    </body>
    </html>
    
    style.css
    Code:
    /*-----------------------------Theme Name: Empty SiteDescription: This is what to put up when the site is under maintenance or restoration.Version: 0.3Author: Ethan TurkeltaubAuthor URI: http://localhost-----------------------------*/body{    background-color:#000;    margin:0;    padding:0;}.image{    background-image:url(image.png);    background-repeat:no-repeat;    width:1000px;    height:800px;    margin:0;    padding:0;}
    Hrm. I'm not sure what's going on.
     
  8. Sunburn

    Sunburn Active Member

    simply... your .image needs to have display:none; set in order for jquery to show it,... basically it looks for the opacity of the element, and fades it in from that to 0, therfore if your image is already 100% visible then the fade doesn't seem to take place from a visual view however the code is working correctly.

    add...

    Code:
    .image{    background-image:url(image.png);    background-repeat:no-repeat;    width:1000px;    height:800px;    margin:0;    padding:0;    display:none;}
    or if your worried about users with no js enabled modify four jquery code so it reads...

    Code:
    <script type="text/javascript">                                              $(document).ready(function(){                    $(".image").hide().fadeIn("slow");                });                                            </script>
    let me know how you get on.
     

Share This Page