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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Apr 2007
    Location
    U.S.A
    Posts
    129
    Thanks
    1
    Thanked 0 Times in 0 Posts

    First script. menu

    Hey guys I decided to expand my horizon, and start on learning javascript today!!!
    Unfortunately my first script isn't working.
    I am planing on eventually making a drop down menu.
    This is the first thing I could come up with for starts.
    Code:
    <html>
    <head>
    <style type="text/css">
    #menu {
    float:left;
    width:40px;
    margin:1px 1px 1px 1px;
    background-color:#666667;
    padding:1px 1px 1px 1px;
    }
    #sub {
    float:left;
    clear:left;
    width:35px;
    margin:1px 1px 1px 1px;
    background-color:#454545;
    padding:1px 1px 1px 1px;
    }
    </style>
    </head>
    <body>
    <script type="text/javascript">
    function sub() {
        var item = 1
    }
    </script>
    <div id="menu" ><a href="#" onmouseover="sub()">link</a></div>
    <div id="menu" ><a href="#" onmouseover="sub()">link</a></div>
    <div id="menu" ><a href="#" onmouseover="sub()">link</a></div>
    <script type="text/javascript">
    if(item ==1) {
    document.write("<div id="sub">link2</div>");
    }
    </script>
    </body>
    </html>
    I'm sure I will have to change the "item" variable on mouse off and everything, but I will save that for later. What I want to know now is why isn't the "sub" div showing up on mouse over?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Your problem is using document.write. The document.write will never run because that part of the script only works on page load. You are also going about this the wrong way. Personally I wouldn't try to reinvent the wheel. Using the techniques already out there would be better like this one http://alistapart.com/articles/dropdowns/

    What you should be doing is changing the style property of the element using onmouseover and onmouseout.

    Also before trying to move on to another coding language, work on becoming proficient at one before moving on. Your HTML needs some work, as well as your CSS (a little redundant). Look into the term 'semantics'.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Simple Dropmenu Javascrip</title>
    <style type="text/css">
    #menu {
    list-style:none;
    }
    
    #menu a {
    float:left;
    width:40px;
    margin:1px;
    background:#666667;
    padding:1px;
    }
    #sub {
    float:left;
    clear:left;
    width:35px;
    margin:1px;
    background:#454545;
    padding:1px;
    }
    </style>
    <script type="text/javascript">
    function displaySub(num)
    {
    	document.getElementById('sub'+num).style.display = (document.getElementById('sub'+num).style.display == 'none') ? 'block' : 'none';
    }
    window.onload = function()
    {
    	var num = 3;
    	for(var i = 1; i <= num; i++)
    	{
    		document.getElementById('sub'+i).style.display = 'none';
    	}
    }
    </script>
    </head>
    <body>
    <ul id="menu">
    	<li><a href="#" onmouseover="displaySub(1)" onmouseout="displaySub(1)">link</a></li>
    	<li><a href="#" onmouseover="displaySub(2)" onmouseout="displaySub(2)">link</a></li>
    	<li><a href="#" onmouseover="displaySub(3)" onmouseout="displaySub(3)">link</a></li>
    </ul>
    <div id="sub1">This is submenu 1</div>
    <div id="sub2">This is submenu 2</div>
    <div id="sub3">This is submenu 3</div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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