SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot boognish's Avatar
    Join Date
    Sep 2005
    Location
    Leeds
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't get javascript hover function working

    I'm trying to get a drop down menu working - See here. The drop down is fine, but it does't change background colour like its supposed to when the mouse hovers over the list items. I got the orginal script here . I've been mulling it over for hours and I'm out of ideas. Can anyone see where I'm going wrong please?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel="stylesheet" type="text/css" href="menu.css" />
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    startList = function() {
    if (document.all&&document.getElementById) {
    cssdropdownRoot = document.getElementById("cssdropdown");
    for (x=0; x<cssdropdownRoot.childNodes.length; x++) {
    node = cssdropdownRoot.childNodes[x];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
    }
    node.onmouseout=function() {
    this.className=this.className.replace(" over", "");
    }
    }
    }
    }
    }
    
    if (window.attachEvent)
    window.attachEvent("onload", startList)
    else
    window.onload=startList;
    
    //--><!]]></script>
    </head>
    <body>
    <div id="containnav">
    <ul id="cssdropdown">
    
        <li class="mainitems"><a href="index.php" title="Visit our Homepage" ><span>home</span></a>
           <li class="mainitems"><a href="about.php" title="About Us" ><span>about us</span></a><ul class="subuls">
    <li><a href="">History</a></li>
    <li><a href="">Ethos</a></li>
    <li><a href="">Facts and figures</a></li>
    <li><a href="">The future</a></li>
    <li><a href="">The team</a></li>
    <li><a href="">Recruitment</a></li>
    <li><a href="">Contact us</a></li>
    </ul>
    </li>
    
           <li class="mainitems"><a href="tenants.php" title="Tenants" ><span>tenants</span></a><ul class="subuls">
    <li><a href="">Property search</a></li>
    <li><a href="">How to apply</a></li>
    <li><a href="">Arrange viewing</a></li>
    <li><a href="">Pay deposit / Holding deposit </a></li>
    <li><a href="">Complete application form</a></li>
    <li><a href="">Pay application fee</a></li>
    <li><a href="">Arrange insurance</a></li>
    <li><a href="">Move in</a></li>
    <li><a href="">Tenant Handbook</a></li>
    <li><a href="">Maintenance</a></li>
    <li><a href="">Online administration</a></li>
    <li><a href="">Privacy and security policy</a></li>
    <li><a href="">Matching service</a></li>
    <li><a href="">Enquiry form</a></li>
    <li><a href="">Feedback form</a></li>
    <li><a href="">FAQ section</a></li>
    </ul>
    </li>
           <li class="mainitems"><a href="landlords.php" title="Landlords" ><span>landlords</span></a><ul class="subuls">
    <li><a href="">Introduction</a></li>
    <li><a href="">Packages available</a></li>
    <li><a href="">Guide to becoming a Landlord</a></li>
    <li><a href="">Request Landlord pack</a></li>
    <li><a href="">Arrange complimentary consultation</a></li>
    <li><a href="">Complete and return forms to Click-let</a></li>
    <li><a href="">Arrange for agent to take photos / collect keys</a></li>
    <li><a href="">What happens next?</a></li>
    <li><a href="">Legislation</a></li>
    <li><a href="">HMO Licensing</a></li>
    <li><a href="">Insurance</a></li>
    <li><a href="">Privacy and security policy</a></li>
    <li><a href="">Enquiry form</a></li>
    <li><a href="">Feedback form</a></li>
    <li><a href="">FAQ section</a></li>
    </ul>
    </li>
      
     <li class="mainitems"><a href="registeredlandlords.php" title="Registered Landlords" ><span>registered landlords</span></a><ul class="subuls">
    <li><a href="">Property status</a></li>
    <li><a href="">Access account</a></li>
    <li><a href="">Newsletter</a></li>
    <li><a href="">Market comment</a></li>
    <li><a href="">Enquiry form</a></li>
    <li><a href="">Feedback form</a></li>
    </ul>
    </li>
    
           <li class="mainitems"><a href="buytolet.php" title="Buy to Let" ><span>buy to let</span></a><ul class="subuls">
    <li><a href="">Introduction</a></li>
    <li><a href="">Why invest in property?</a></li>
    <li><a href="">Our service</a></li>
    <li><a href="">Arrange a consultation</a></li>
    <li><a href="">Do&#195;&#162;&#194;?&#194;?s and Don&#195;&#162;&#194;?&#194;?ts</a></li>
    <li><a href="">Market Comment</a></li>
    <li><a href="">Enquiry form</a></li>
    <li><a href="">Feedback form</a></li>
    <li><a href="">FAQ</a></li>
    <li><a href="">Register</a></li>
    <li><a href="">Members area</a></li>
    </ul>
    </li>
    
           <li class="mainitems"><a href="otherinfo.php" title="Other information"><span>other information</span></a><ul class="subuls">
    <li><a href="">Insurance</a></li>
    <li><a href="">Relocation</a></li>
    <li><a href="">Edinburgh</a></li>
    <li><a href="">Fife</a></li>
    <li><a href="">Useful links</a></li>
    </ul>
    </li>
    </ul>
    </div></div>
    <div id="restofcontent">
    <!-- End of Primary Page Navigation -->
    </div>
    </body>
    </html>
    Code:
    /* Navigation */
    
    #containnav {
    position:absolute;
    top:85px;
    left:16px;
    font: 100&#37; verdana, arial, helvetica, sans-serif; 
    display: block; 
    line-height:15px;
    }
    
    #cssdropdown, #cssdropdown ul {
    padding: 0;
    margin: 0;
    list-style: none;
    }
    
    #cssdropdown li {
    float: left;
    position: relative;
    z-index: 1000; 
    background-image:url(images/navcolour.gif);
    }
    
    #cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
    display: block;
    background-image:url(images/navcolourhover.gif);
    z-index: 1200;
    width:200px;
    height:15px;
    }
    
    .mainitems{
    border: 1px solid #FFF;
    background-image:url(images/navcolour.gif);
    padding-left:15px;
    padding-right:15px;
    height:22px;
    text-align:center;
    z-index: 900; 
    }
    
    .mainitemsselected{
    border: 1px solid #FFF;
    background-image:url(images/navcolourhover.gif);
    padding-left:15px;
    padding-right:15px;
    height:22px;
    text-align:center;
    }
    
    .mainitems a{
    margin-left: 6px;
    margin-right: 8px;
    text-decoration: none;
    }
    
    .subuls{
    display: none;
    width:200px;
    padding-left:15px;
    padding-right:15px;
    position: absolute;
    top: 22px;
    left: 0;
    border: 1px solid #FFF;
    text-align:left;
    z-index: 1100;
    }
    
    .subuls li{
    width: 100%;
    }
    
    .subuls li a{
    text-decoration: none;
    }
    
    #cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    top: auto;
    left: auto;
    margin-top:7px;
    }
    
    #restofcontent { /*wrap rest of content of the page inside this div*/
    clear: left;
    }

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Why are you using images instead of background-color? It didn't work in Firefox for me either in the CSS-only way anyway. It works if I do this instead:
    Code:
    #cssdropdown li {
    float: left;
    position: relative;
    z-index: 1000; 
    background-color:#E1BC8C;
    }
    
    #cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
    display: block;
    background-color:#EACA85;
    z-index: 1200;
    width:200px;
    height:15px;
    }
    The Javascript looks OK, so it ought to work in IE too, though you should not be using document.all in order to make it IE-only. Instead, use conditional comments. This means, get rid of the document.all bit, put the Javascript in a separate file (without the CDATA mess) and do this:
    HTML Code:
    <!--[if lt IE 7]><script type="text/javascript" src="iehover.js"></script><![endif]-->

  3. #3
    SitePoint Zealot boognish's Avatar
    Join Date
    Sep 2005
    Location
    Leeds
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Raffles, is that your blog? I've amended the code as per your suggestions here. I'm still not seeing the background colour change on hover though. I'm viewing the site in safari and firefox for os x and getting the same issue as before - the whole drop down is the rollover colour. Is this what your seeing in your browser? I replaced the css, moved the js to a seperate file and removed the document.all, but still having the same problem.

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The link in my sig? No. I don't have a blog.

    I thought that was what you wanted. So now I assume you want each list item to change colour on hover? I don't know what colours you actually want for each, so I've just any old ones:
    Code:
    #cssdropdown li {
    float: left;
    position: relative;
    z-index: 1000; 
    background-color:blue;
    }
    #cssdropdown li:hover, #cssdropdown li.over {
      background-color:yellow;
    }
    #cssdropdown li:hover ul, #cssdropdown li.over ul { /* lists nested under hovered list items */
    display: block;
    z-index: 1200;
    width:200px;
    height:15px;
    }
    #cssdropdown li li:hover, #cssdropdown li.over li {
      background-color:red;
    }
    Main list items will be blue and yellow on hover. Secondary list will be green (ul is green) and the actual list items will be blue (#cssdropdown li applies to all of them) and red on hover.

  5. #5
    SitePoint Zealot boognish's Avatar
    Join Date
    Sep 2005
    Location
    Leeds
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Raffles, worked perfect. Really appreciate your help!


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
  •