Results 1 to 2 of 2
  1. #1
    Full Member SpikeDo's Avatar
    Join Date
    January 18th, 2005
    Location
    Fairfax, Virginia
    Posts
    438
    Below is part of a script I have on my site for navigation. The problem I'm having is trying to produce varying sizes of boxes for the subpages. My first page with subpages uses titles of short length. But my second page with subtitles uses titles with long names. The script only allows one size. I want to mhave a short box for the first page and a long box for the second. Can anyone help?

    <style>
    <!--

    .menuskin{
    position:absolute;
    width:165px;
    background-color:menu;
    border:2px solid black;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    visibility:hidden;
    }

    .menuskin a{
    text-decoration:none;
    color:black;
    padding-left:10px;
    padding-right:10px;
    }

    #mouseoverstyle{
    background-color:highlight;
    }

    #mouseoverstyle a{
    color:white;
    }
    -->
    </style>

    <script language="JavaScript1.2">

    //Pop-it menu- By Dynamic Drive
    //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
    //This credit MUST stay intact for use

    var linkset=new Array()
    //SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

    linkset[0]='<div class="menuitems"><a href="http://dynamicdrive.com">Dynamic Drive</a></div>'
    linkset[0]+='<div class="menuitems"><a href="http://javascriptkit.com">JavaScript Kit</a></div>'
    linkset[0]+='<div class="menuitems"><a href="http://freewarejava.com">Freewarejava</a></div>'

    linkset[1]='<div class="menuitems"><a href="http://msnbc.com">MSNBC</a></div>'
    linkset[1]+='<div class="menuitems"><a href="http://cnn.com">CNN</a></div>'
    linkset[1]+='<div class="menuitems"><a href="http://abcnews.com">ABC News</a></div>'
    linkset[1]+='<div class="menuitems"><a href="http://www.washingtonpost.com">Washington Post</a></div>'

  2. #2
    Just Lurking
    Join Date
    January 18th, 2005
    Posts
    1,263
    Ok, I got it.

    First need to add to functions,

    <pre class="ip-ubbcode-code-pre">//global arr
    clssNodeArr = new Array();
    // parameters
    // e = element
    // v = class value
    function createClassNodeArr(e,v){
    if(document.getElementsByTagName)//check for obj
    {
    var nodes = document.getElementsByTagName(e)
    var max = nodes.length
    for(var i = 0;i &lt; max;i++)
    {
    var nodeObj = nodes.item(i);
    var attrMax = nodeObj.attributes.length
    for(var j = 0; j &lt; attrMax; j++)
    {
    if(nodeObj.attributes.item(j).nodeName == 'class')
    {
    if(nodeObj.attributes.item(j).nodeValue == v)
    {
    clssNodeArr[clssNodeArr.length] = nodeObj
    }
    }
    }
    }
    }
    }

    function styleByClass(wd){
    if(document.getElementsByTagName)//check for obj
    {
    var max = clssNodeArr.length
    for(var i = 0;i &lt; max;i++)
    {
    var nodeObj = clssNodeArr[i];
    nodeObj.style.width = wd;
    }
    }
    }</pre>

    Found those at Markup

    Then need to change the BODY tag

    <pre class="ip-ubbcode-code-pre">&lt;body onload="createClassNodeArr('div','menuskin')"&gt;
    </pre>

    The menu link need to make a lil' change:

    <pre class="ip-ubbcode-code-pre">&lt;a href="#" onMouseover="showmenu(event,linkset[0],165)" onMouseout="delayhidemenu()"&gt;Webmaster Links&lt;/a&gt;&lt;br&gt;</pre>

    Notice the third field is width.

    Now change the show menu function call:
    <pre class="ip-ubbcode-code-pre">function showmenu(e,which,w){</pre>

    finally add the new function styleByClass() to showmenu():

    <pre class="ip-ubbcode-code-pre">function showmenu(e,which,w){

    if (!document.all&&!document.getElementById&&!document.layers)
    return

    clearhidemenu()

    menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""
    menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj

    styleByClass(w)

    if (ie4||ns6)
    menuobj.innerHTML=which
    else{
    menuobj.document.write('&lt;layer name=gui bgColor=#E6E6E6 width=165 onmouseover="clearhidemenu()"
    onmouseout="hidemenu()"&gt;'+which+'&lt;/layer&gt;')
    menuobj.document.close()

    }</pre>

    Just notice you post it in JUNE! Hope it's still of interest.

  3. Newsletter Signup

+ Reply to Thread

Similar Threads

  1. css sprite help needed for drop down menu
    By tsmgroup2 in forum Programming / Datafeeds / Tools
    Replies: 6
    Last Post: March 31st, 2014, 12:17 PM
  2. need help getting this php script to validate in css 2.1
    By tsmgroup2 in forum Marketing Resources & Power Tools
    Replies: 1
    Last Post: May 23rd, 2012, 05:08 PM
  3. PHP Menu Script
    By John Powell in forum Programming / Datafeeds / Tools
    Replies: 7
    Last Post: January 4th, 2006, 03:39 PM
  4. Script object positioning problem in CSS
    By frank3iii in forum Programming / Datafeeds / Tools
    Replies: 9
    Last Post: September 22nd, 2003, 12:48 PM
  5. Footer using CSS or script not needing SSI?
    By Bernie in forum Programming / Datafeeds / Tools
    Replies: 12
    Last Post: August 24th, 2002, 06:43 PM

Posting Permissions

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