Web Analytics Made Easy -
StatCounter External script for Tabs Menu (mouseover) - CodingForum

Announcement

Collapse
No announcement yet.

External script for Tabs Menu (mouseover)

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • External script for Tabs Menu (mouseover)

    Can I use theTabs Menu with an external script? I have tried several ways with no success. Here's my webpage (sorry I don't have a domain/web hosting service yet)...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>

    <head>
    <title>AR CraftWorks</title>
    <meta name="description" content="AR CraftWorks creates innovative, functional and beautiful designs in residential and commercial architecture.">
    <meta name="keywords" content="building, contractor, designer, remodel, additions, Mendocino, Fort Bragg, North Coast, California">
    <link rel="stylesheet" href="style2.css" type="text/css">
    </head>

    <body>

    <table width="800" cellpadding="5" align="center">
    <tr><td align="center"><img src="images/arlogo4.jpg" align="center" border="0"></td></tr>

    <tr bgcolor="#000000" height="10"><td align="center"><span class="subtext">General Building and Home Improvement Contractor</span></td></tr>
    <!--<tr bgcolor="#000000" height="14"><td align="center"><span class="subtext">License No. 678717&nbsp;&nbsp;&nbsp;&#183;&nbsp;&nbsp;&nbsp;(707) 373-4375&nbsp;&nbsp;&nbsp;&#183;&nbsp;&nbsp;&nbsp;
    (925) 200-5068&nbsp;&nbsp;&nbsp;&#183;&nbsp;&nbsp;&nbsp;<a href="mailto:[email protected]"><font color="FFFFFF">[email protected]</font></a></span></td></tr>-->

    <tr><td align="center">

    <!--Links used to initiate the sub menus. Pass in the desired submenu index numbers (ie: 0, 1) -->
    <span class="menutext"><a href="services.htm" onMouseover="showit(0)">Services</a>&nbsp;&nbsp;&nbsp;&#183;&nbsp;&nbsp;&nbsp;<a href="portfolio.htm" onMouseover="showit(1)">Portfolio</a>&nbsp;&nbsp;&nbsp;&#183;&nbsp;&nbsp;&nbsp;<a href="About AR CraftWorks.htm" onMouseover="showit(2)">About AR CraftWorks</a></span><br>

    <!-- Edit the dimensions of the below, plus background color-->
    <ilayer width=800 height=16 name="dep1" bgColor="#ccffcc">
    <layer name="dep2" width=800 height=16>
    </layer>
    </ilayer>
    <div id="describe" onMouseover="clear_delayhide()" onMouseout="resetit(event)"></div>


    <script language="JavaScript1.2">

    /*
    Tabs Menu (mouseover)- By Dynamic Drive
    For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
    This credit MUST stay intact for use
    */

    var submenu=new Array()

    //Set submenu contents. Expand as needed. For each content, make sure everything exists on ONE LINE. Otherwise, there will be JS errors.

    submenu[0]='<span class="submenu"><a href="design.htm">Design</a> | <a href="planning.htm">Planning/Project Management</a> | <a href="construction.htm">Construction</a> | <a href="finish.htm">Project Completion</a></span>'

    submenu[1]='<span class="submenu"><a href="foundation.htm">Foundation</a> | <a href="framing.htm">Framing</a> | <a href="utilities.htm">Utilities</a> | <a href="drywall.htm">Dry Wall</a> | <a href="Painting.htm">Painting & Finish Trim</a> | <a href="cabinetry.htm">Cabinetry</a> | <a href="furniture.htm">Furniture</a></span>'

    submenu[2]='<span class="submenu"><a href="contact.htm">Contact Information</a> | <a href="background.htm">Background</a> | <a href="geninfo.htm">License & Insurance</a></span>'

    //Set delay before submenu disappears after mouse moves out of it (in milliseconds)
    var delay_hide=100

    /////No need to edit beyond here

    var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : ""

    function showit(which){
    clear_delayhide()
    thecontent=(which==-1)? "" : submenu[which]
    if (document.getElementById||document.all)
    menuobj.innerHTML=thecontent
    else if (document.layers){
    menuobj.document.write(thecontent)
    menuobj.document.close()
    }
    }

    function resetit(e){
    if (document.all&&!menuobj.contains(e.toElement))
    delayhide=setTimeout("showit(-1)",delay_hide)
    else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
    delayhide=setTimeout("showit(-1)",delay_hide)
    }

    function clear_delayhide(){
    if (window.delayhide)
    clearTimeout(delayhide)
    }

    function contains_ns6(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }

    </script></span></td></tr>
    </table>
    </body>
    </html>
    Attached Files

  • #2
    Here you go. I converted the menu so it can be used as an external script. Simply place the below line of code wherever you would like the menu to appear.

    <script type="text/javascript" src="scripts/tagMenu.js"></script>

    You will find the script and several layout changes in the attachment below. FWIW: You should not use tables for layout. And you will find that if you use an external stylesheet, in the future you can make site wide layout changes by editting just the one file. Just as I assume you are attempting to do with the external menu.

    Here is a link to the W3C CSS2 specs.

    Good Luck;
    .....Willy
    Attached Files

    Comment


    • #3
      External script works great!

      Hi Willy!
      Thank you so much!! The script for the menu works great. And thanks for the other tips too.

      Comment

      Working...
      X