SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Impeded by null

  1. #1
    SitePoint Member
    Join Date
    Aug 2013
    Location
    Huntsville
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Impeded by null

    Hey everyone,

    I always struggle with Javascript, I am trying to create an animation for a website. When the page loads, a div section covers the main page and after five seconds, the elements within it are to slide to either side and then the div is to dissolve and expose the main page.

    3 variables keep creating errors: imgDiv, introCap, & introDiv; all reading null even though I have defined them at the beginning of my script.

    here is my script:

    var wait = 5000;
    var introCap = document.getElementById("captionCol");
    var imgDiv = document.getElementById("imgCol");
    var introDiv = document.getElementById("intro");

    function splitDivs() {
    var goLeft;
    var goRight;

    goLeft += ((goLeft--)-0.9);
    goRight += ((goRight++)+0.9);

    imgDiv.style.left = parseInt('imgDiv.style.left')+ goLeft + "%";
    introCap.style.left = parseInt('introCap.style.left')+ goRight + "%";
    }

    function init() {
    var id = setInterval(splitDivs, 10);

    imgDiv.style.left = "15%";
    introCap.style.left = "45%";
    setTimeout("splitDivs()", wait);
    splitDivs();
    }
    document.addEventListener("DOMContentLoaded", init, false);


    here is the HTML portion:

    <div id="intro">

    <div id="imgCol"></div> <!-- The image within this div is embed in a css file as the background. -->

    <div id="captionCol">
    <p> Hi, I'm <b>Jenny Spring</b>. <br><br>
    I'm a <span id="emp">SPIN</span> farmer. </p>

    </div>
    </div>


    I am confused as to why it is declaring my variables as null, when they are defined above at the beginning. I figured they were declared as global variables so their scope should be the entire script. I am using firebug to debug/test my script.

    Thanks!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Have you maybe included your JavaScript before the elements exist on the page?
    This normally happens when your JS file is in the head section of your document.
    If this is the case, try placing it diectly before the closing body tag instead.

  3. #3
    SitePoint Member
    Join Date
    Aug 2013
    Location
    Huntsville
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo,

    I did try to insert the script tags below and it still came up with the same result.

    I also tried declaring all the variables again in each function and my code was unresponsive.

  4. #4
    SitePoint Member
    Join Date
    Aug 2013
    Location
    Huntsville
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay so I have been working away at it and figured out a temporary solution, or atleast half of the desired effect is taking place.

    The animation works, however when I use clearInterval, or attempt to call it, the code continues to run.

    Here's the Javascript:


    //var introCap, imgDiv, introDiv;
    var introCap = document.getElementById("captionCol");
    var imgDiv = document.getElementById("imgCol");
    var introDiv = document.getElementById("intro");
    var expose = document.getElementById("gotoPage");
    var fade = 1;
    var l = 15;
    var r = 45;

    expose.onclick = move;
    var moveInt = setInterval("move()", 70);
    var fadeInt = setInterval("fadeOut()", 60);

    function stop() {
    clearInterval(moveInt);
    clearInterval(fadeInt);
    }

    function fadeOut() {
    fade -= 0.07;

    introDiv.style.opacity = fade;
    introDiv.style.filter = "alpha('"+fade+"')";
    if(introDiv.style.opacity<0) {
    stop();
    }
    }

    function move() {
    l -= 0.1;
    r += 0.1;

    introCap.style.left = r+"%";
    imgDiv.style.left = l+"%";

    if (imgDiv.style.left<10) {
    fadeOut();
    }
    }


    The script works to an extent but there is no control, when the page loads the script runs but doesn't stop. Does anybody have any suggestions?

    Thanks!

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,822
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Get rid of the quotes around the field names in the following:

    Code:
    imgDiv.style.left = parseInt('imgDiv.style.left')+ goLeft + "%";
    introCap.style.left = parseInt('introCap.style.left')+ goRight + "%";
    Also wrap the part before the +'%' in () as otherwise all the values will be treated as strings

    Code:
    imgDiv.style.left = (parseInt(imgDiv.style.left)+ goLeft) + "%";
    introCap.style.left = (parseInt(introCap.style.left)+ goRight) + "%";
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

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