www.webdeveloper.com
Results 1 to 8 of 8

Thread: New to javascript and needs help

  1. #1
    Join Date
    Aug 2012
    Posts
    10

    Question New to javascript and needs help

    Please help me i have been working on this code for a few days and cant figure it out. for some reason i am getting a broken graphic on the computer tab and i cant figure out why. Also i cant figure out how to get the side menu to disappear after i have clicked on the body of the menu or on anotehr one of the tabbed menus. the only error i get when i view it in IE is the message below. Any help would be greatly appreciated. Let me know if you need any other information.


    Message: 'activeMenu.style' is null or not an object
    Line: 79
    Char: 1
    Code: 0

  2. #2
    Join Date
    Aug 2012
    Posts
    10
    <html>
    <head>
    <title>Jackson Electronics Printers</title>
    <link href="je.css" rel="stylesheet" type="text/css" />
    <script type="text/JavaScript">
    if(document.images){
    image = new Array();
    image[1]="main1.jpg";
    image[2]="main2.jpg";
    image[3]="main3.jpg";
    image[4]="main4.jpg";
    image[5]="main5.jpg";
    image[6]="main6.jpg";
    image[1].src="main1.jpg";
    image[2].src="main2.jpg";
    image[3].src="main3.jpg";
    image[4].src="main4.jpg";
    image[5].src="main5.jpg";
    image[6].src="main6.jpg";
    imageOver = new Array();
    imageOver[1]="main1_over.jpg";
    imageOver[2]="main2_over.jpg";
    imageOver[3]="main3_over.jpg";
    imageOver[4]="main4_over.jpg";
    imageOver[5]="main5_over.jpg";
    imageOver[6]="main6_over.jpg";
    imageOver[1].src="main1_over.jpg";
    imageOver[2].src="main2_over.jpg";
    imageOver[3].src="main3_over.jpg";
    imageOver[4].src="main4_over.jpg";
    imageOver[5].src="main5_over.jpg";
    imageOver[6].src="main6_over.jpg";
    image[i] = new Image;
    imageOver[i] = new Image;
    image[i].src="main" + i + ".jpg";
    imageOver[i].src="main" + i + "_over.jpg";
    }
    for (var i=1; i <=6; i++){
    var maxZ=6; // this variable stores the z-index of the currently displayed menu in the tabbed menu system.
    var activeMenu = null; //this varialbe stores the submenu currenlty displayed in the sliding menu.
    }
    function swapIn(num){
    if (document.images) document.images[num].src=imageOver[num].src;
    }
    function swapOut(num){
    if (document.images) document.images[num].src=image[num].src;
    }
    function showMain(num){
    maxZ++;
    document.getElementById("mainMenu"+num).style.zIndex=maxZ;
    }

    function hideActive(){
    activeMenu.style.left="10px";
    }
    function slideMenu(){
    var x=xCoord();
    if (x <= 126){
    shiftMenu(2,0);
    setTimeout("slideMenu()",10);
    }
    }

    function startSlide(num){
    if (activeMenu !==null)
    hideActive();
    activeMenu = document.getElementById("sideMenu"+num);
    slideMenu();
    ;
    }
    </script>
    <script type="text/JavaScript">
    function xCoord() {
    return parseInt(activeMenu.style.left);
    }
    function shiftMenu(dx, dy) {
    xc=parseInt(activeMenu.style.left);
    yc=parseInt(activeMenu.style.top);
    activeMenu.style.left=xc+dx+"px";
    activeMenu.style.top=yc+dy+"px";
    }

    /*
    In the tabbed menu titles section i changed the href attritbute of the inline image from "#" to a link that calls the showMain() function using 1 as the parameter value. I also added an onmouseover event handler to emain1.jpg inline image to run the swapIn() function, using 1 as a parameter. I also added onmouseover event handler to the main1.jpg inline mimage so run the swapOut() funciton also using 1 as a parameter. I repeated these steps for images 1-6.


    Within the hotspot for the first area element i changed the href attribute from "#" to a link that calls the startSlide() function using 1 as a parameter value. This is reapeated throught all images 1-6.
    */

    </script>
    </head>

    <body >
    <div id="logo" style="z-index: 2"><img src="logo.jpg" alt="" /></div>

    <!-- Tabbed Menu Titles -->
    <div class="mainTitles" id="mainTitle1" style="left: 10px; top: 28px">
    <a href="JavaScript:showMain('1')"/>
    <img src="main1.jpg" alt="Computers" onmouseover="swapIn(1)" onmouseout="swapOut(1)" />

    </div>
    <div class="mainTitles" id="mainTitle2" style="left: 104px; top: 28px">
    <a href="JavaScript:showMain('2')">
    <img src="main2.jpg" alt="Electronics" onmouseover="swapIn(1)" onmouseout="swapOut(1)" />
    </a>
    </div>
    <div class="mainTitles" id="mainTitle3" style="left: 198px; top: 28px">
    <a href="JavaScript:showMain('3')">
    <img src="main3.jpg" alt="Accessories" onmouseover="swapIn(1)" onmouseout="swapOut(1)" />
    </a>
    </div>
    <div class="mainTitles" id="mainTitle4" style="left: 292px; top: 28px">
    <a href="JavaScript:showMain('4')">
    <img src="main4.jpg" alt="Software" onmouseover="swapIn(1)" onmouseout="swapOut(1)" />
    </a>
    </div>
    <div class="mainTitles" id="mainTitle5" style="left: 386px; top: 28px">
    <a href="JavaScript:showMain('5')">
    <img src="main5.jpg" alt="Services" onmouseover="swapIn(1)" onmouseout="swapOut(1)" />
    </a>
    </div>
    <div class="mainTitles" id="mainTitle6" style="left: 480px; top: 28px">
    <a href="JavaScript:showMain('6')">
    <img src="main6.jpg" alt="Store" onmouseover="swapIn(1)" onmouseout="swapOut(1)" />
    </a>
    </div>


    <!-- Tabbed Menu Contents -->
    <div class="mainMenus" id="mainMenu1" = "style="z-index:-6">
    <img src="mainmenu1.jpg" alt="" />
    </div>
    <div class="mainMenus" id="mainMenu2" = "style="z-index:-5">
    <img src="mainmenu2.jpg" alt="" />
    </div>
    <div class="mainMenus" id="mainMenu3" = "style="z-index:-4">
    <img src="mainmenu3.jpg" alt="" />
    </div>
    <div class="mainMenus" id="mainMenu4" = style="z-index:-3">
    <img src="mainmenu4.jpg" alt="" />
    </div>
    <div class="mainMenus" id="mainMenu5" = style="z-index:-2">
    <img src="mainmenu5.jpg" alt="" />
    </div>
    <div class="mainMenus" id="mainMenu6" = style="z-index:-1">
    <img src="mainmenu6.jpg" alt="" />
    </div>


    <!-- Sliding Menu Contents -->
    <div id="sideMenu" onClick="hideActive()">
    <img src="sidemenu.jpg" alt="" usemap="#linkmap" />
    </div>


    <!-- Submenus of the Sliding Menu -->
    <div id="sideMenu1" class="sideMenus" style="top: 130px; left: 10px">
    <a href="JavaScript:startSlide('1')">
    <img src="side1.jpg" alt="" />
    </div>
    </a>

    <div id="sideMenu2" class="sideMenus" style="top: 160px; left: 10px">
    <a href="JavaScript:startSlide('2')"/>
    <img src="side2.jpg" alt="" />
    </div>
    <div id="sideMenu3" class="sideMenus" style="top: 190px; left: 10px">
    <a href="JavaScript:startSlide('3')"/>
    <img src="side3.jpg" alt="" />
    </div>
    <div id="sideMenu4" class="sideMenus" style="top: 222px; left: 10px">
    <a href="JavaScript:startSlide('4')"/>
    <img src="side4.jpg" alt="" />
    </div>
    <div id="sideMenu5" class="sideMenus" style="top: 252px; left: 10px">
    <a href="JavaScript:startSlide('5')"/>
    <img src="side5.jpg" alt="" />
    </div>
    <div id="sideMenu6" class="sideMenus" style="top: 282px; left: 10px">
    <a href="JavaScript:startSlide('6')"/>
    <img src="side6.jpg" alt=""/>
    </div>

    <!-- Sliding Menu Image Map -->
    <map id="linkmap" name="linkmap">
    <area shape="rect" coords="5,40,112,58"> <a href="JavaScript:startSlide('1')"/>
    <area shape="rect" coords="5,70,112,88"> <a href="JavaScript:startSlide('2')"/>
    <area shape="rect" coords="5,100,112,118"><a href="JavaScript:startSlide('3')"/>
    <area shape="rect" coords="5,130,112,148"> <a href="JavaScript:startSlide('4')"/>
    <area shape="rect" coords="5,160,112,178"> <a href="JavaScript:startSlide('5')"/>
    <area shape="rect" coords="5,190,112,208"> <a href="JavaScript:startSlide('6')"/>
    </map>



    <!-- Page Content -->
    <div id="main" onClick="hideActive()">
    <h1>Printers</h1>
    <img src="printer.jpg" alt="" />
    <p>The best photo prints can now be made ... AT HOME. Introducing the Jackson
    Electronics' <b>Picture Perfect</b> printer. Darkroom quality prints
    without the cost, the mess, or the dark.</p>
    <p>Photo Shopper calls JE's Picture Perfect "<i>the photo printer
    we've been waiting for: high quality prints at an affordable price.</i>"
    Photo Review gives it 5 stars, calling it <i>"the outstanding product
    of the year."</i> As with all of our printers, make sure to choose JE's
    archival quality paper and inks, which are guaranteed not to fade.
    There is no better way to preserve your family memories than with
    JE photo products.</p>
    <p><a href="#">Order</a> the award-winning <b>Picture Perfect</b> printer
    today for the special price of <b>$299.95</b> or choose one of the other many
    fine printer products from Jackson Electronics.</p>
    </div>

    </body>
    </html>

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,682
    activeMenu is never defined!

    and you have a number of errors in the HTML code.
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Aug 2012
    Posts
    10

    can you provide me with a little more detail than that

    could you elaborate a little please? when i pull up IE i am only getting the null error. i am also using a javascript debugger that is showing no javascript errors.

  5. #5
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by mrsevans231 View Post
    could you elaborate a little please? when i pull up IE i am only getting the null error. i am also using a javascript debugger that is showing no javascript errors.

    hideActive is called from several places, without testing that activeMenu is defined.

    Code:
    function startSlide(num){
    if (activeMenu !==null)
    hideActive();
    activeMenu = document.getElementById("sideMenu"+num);
    slideMenu();
    ;
    }
    That test is incorrect because null !== undefined.

    Code:
    if( typeof activeMenu === 'undefined' )
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  6. #6
    Join Date
    Aug 2012
    Posts
    10

    activeMenu

    My book states to create the activeMenu variable and set its initial value to null. How would i do that then?

  7. #7
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by mrsevans231 View Post
    My book states to create the activeMenu variable and set its initial value to null. How would i do that then?
    Exactly the way you did it - that's not the point.

    In your code there are circumstances under which activeMenu.style can be referenced before activeMenu is defined. Do something to prevent that.
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  8. #8
    Join Date
    Aug 2012
    Posts
    10
    how can it be referenced before i declare it as null when it is shown before any of my functions? Do i need to put my variables above my original if statement?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles