SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    still looking for js help

    here's a question. I have this code, which I did not write, but that I'm trying to get to work.

    Code:
    var isNS4 = 0;
    var isIE4 = 0;
    var isNew = 0;
    var docObj, styleObj, currObj
    
    var brow = ((navigator.appName) + (parseInt(navigator.appVersion)));
    
    if (parseInt(navigator.appVersion >= 4)) {isNew = 1}
    	else if ((navigator.appName) == "Netscape") 
    	{isNS4 = 1;}
    		else if (brow == "Microsoft Internet Explorer4") 
    		{isIE4 = 1;}
    
    				
    if (isNS4||isIE4||isNew) {
    	docObj = (isNS4) ? 'document.' : 'document.all.';
    	styleObj = (isNS4) ? '' : '.style';
    	hidden = (isNS4) ? "'hide'" : 'visible';
    	visible = (isNS4) ? "'show'" : 'hidden';
    	}
    
    function showDisplay(elementObj) {
    hideDisplay();
    if (elementObj != 'none') {
    if (eval(docObj+elementObj+styleObj+".visibility ==" +visible)){
    eval(docObj+elementObj+styleObj+".visibility =" +hidden)
    }else{
    eval(docObj+elementObj+styleObj+".visibility =" +visible)
    }
    }
    }
    
    function hideDisplay() {
    for (i = 1; i <= 7; i++)
    eval(docObj+'layer'+i+'Obj'+styleObj+".visibility =" +hidden);
    }
    
    function showDisplay2(elementObj) {
    if (eval(docObj+elementObj+styleObj+".visibility ==" +visible)){
    eval(docObj+elementObj+styleObj+".visibility =" +hidden)
    }else{
    eval(docObj+elementObj+styleObj+".visibility =" +visible)
    }
    }
    The functions are being called in connection with an <a href> tage, like such:
    Code:
    onMouseOver="javascript:showDisplay('layer1Obj');"
    The site in reference is www.livingpages.net/elimfellowship/example4.html.

    The questions are:

    1. How do you get the menu to disappear when you mouse away from the navigation bar?

    2. This is supposed to be cross-browser but Netscape 6.1 is not seeing it? I don't have NN 4.7 immediately accessible, but my guess is is that it is not seeing it either. Any ideas why?

    You'll need a password to get in. user: sitepoint pwd: forums.

    Thanks.
    Sketch
    Last edited by Sketch; Dec 17, 2001 at 08:36.
    Aaron Brazell
    Technosailor



  2. #2
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Sketch,

    1) NN6+ & IE5+ use document.getElementByID(divID)
    2) you shouldn't use 'appName' to ID browsers; you should use the properties you need, for example:

    divStyle = (document.all) ? document.all[divID].style : ( (document.layers) ? document.layers[divID] : document.getElementById(divID).style) ;

    where 'divID' is a string containing your div's ID

    3) you can then change visibility with:

    divStyle.visibility = (isShow) ? 'visible' : 'hidden';

    where 'isShow' is a boolean var (true/false)

    See the "dHTML: an Introduction" script/tutorial at my site (GrassBlade)

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  3. #3
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    How's this going sketch? Are you at your solution?
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  4. #4
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no unfortunately. Vinny, I tried what you said, but unfortunately I think I may have misunderstood you. I went to Grassblades too, but my solutions wasn';t there either. I just really want to set a timeout on the showDisplay() function. I'm sure it's not hard just escapes me....

    Thanks for all the help...

    Sketch
    Aaron Brazell
    Technosailor



  5. #5
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would have thought:

    Code:
    onMouseOut="java script:hideDisplay('layer1Obj');"
    would do it!?
    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky

  6. #6
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    function changeVis(divID, isShow, allDivs)
    {
    divStyle = (document.all) ? document.all[divID].style : ( (document.layers) ? document.layers[divID] : document.getElementById(divID).style) ;

    if ((isShow)&& (allDivs) )
    for (i = 1; i <= 7; i++)
    divStyle.visibility = 'hidden';

    divStyle.visibility = (isShow) ? 'visible' : 'hidden';
    }

    You would call it:
    1) changeVis('someID', true, false) -- for individual divs you want to 'show'
    2) changeVis('someID', false, false) -- for individual divs you want to 'hide'
    3) changeVis('someID', true, true) -- for hiding all divs before showing one
    4) changeVis('someID', false, true) -- for hiding all divs

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  7. #7
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, so far so good, Vinny. Except for one thing. How do I put the 3rd calling techniques on a whole DIV. I have the first associated with a mouseover on the the main navigational menu. Now, do I associate the 3rd technique with the submenu? How do I do it? OnMouseOut on what?

    Sketch
    Aaron Brazell
    Technosailor



  8. #8
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Sketch,

    my mistake. The following shows how you would increment individual layer/divs whose ids are like: submenu1, submenu2, etc

    if ((isShow)&& (allDivs) )
    {
    for (i = 1; i <= 7; i++)
    {
    divStyle = (document.all) ? document.all[divID+i].style : ( (document.layers) ? document.layers[divID+i] : document.getElementById(divID+i).style) ;
    ....

    If the above isn't the answer for what you are asking, you need to post an example of what you have so far (not the password protected site's url), so we don't play guessing games

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  9. #9
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay, Vinny....

    The script is exactly what you typed above. I saved it as a file called layers.js. For refreshers:
    Code:
    function changeVis(divID, isShow, allDivs) 
    { 
    divStyle = (document.all) ? document.all[divID].style : ( (document.layers) ? document.layers[divID] : document.getElementById(divID).style) ; 
    
    if ((isShow)&& (allDivs) ) 
    for (i = 1; i <= 7; i++) 
    divStyle.visibility = 'hidden'; 
    
    divStyle.visibility = (isShow) ? 'visible' : 'hidden'; 
    }
    Here is the HTML:
    Code:
    <html>
    <head>
    <title>gui2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript" src="layers.js"></script>
    
    <!-----Begin CSS----->
    <style type="text/css">
    #banner {
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:760px;
    	height:158px;
    	border-right: 1px solid;
    }
    
    
    #body {
    	position:absolute;
    	left:0px;
    	top:158px;
    	width:761px;
    	height:422px;
    	border-right: 1px solid;
    
    
    }
    .nav {font-family: arial; font-size: 11.5px; color: #666666;}
    p.nav {font-family: arial; font-size: 11.5px; color: #666666;}
    A.nav:link, A.nav:active, A.nav:visited {text-decoration: none; color: #666666;}
    A.nav:hover {text-decoration: none; color: #FF0000;}
    
    
    .submenu {font-family: arial; font-size: 11.5px; color: #000066;}
    p.submenu {font-family: arial; font-size: 11.5px; color: #000066;}
    A.submenu:link, A.submenu:active, A.submenu:visited {text-decoration: none; color: #000066;}
    A.submenu:hover {text-decoration: none; color: #b22222;};
    </style>
    <!-----End CSS---->
    
    
    </head>
    <body bgcolor=#FFFFFF>
    <div id="banner" style="width: 760px; height: 128px"> <img src="images/gui2_02.jpg" width=759 height=131> 
    </div>
    <div id="body" style="top: 131px; width: 760px; height: 449px"> </div>
    
    
    <!--- Main Navigation --->
    <div class="nav" style="position:absolute; width:427px; height:17px;left: 382px; top: 44px"> 
      <p class="nav">
      <a class="nav" href="general/about.htm" onMouseOver="changeVis('layer1Obj', true, false);">About</a>&nbsp;
      <a class="nav" href="credentials/credentials.htm" onMouseOver="javascript:changeVis('layer2Obj', true, false);">Credentials</a>&nbsp;
      <a class="nav" href="usmd/usmd.htm" onMouseOver="javascript:changeVis('layer3Obj', true, false);">U.S. Ministries</a>&nbsp;
      <a class="nav" href="wmd/wmd.htm" onMouseOver="javascript:changeVis('layer4Obj', true, false);">World
        Missions</a>&nbsp;
      <a class="nav" href="events/calendar.htm" onMouseOver="javascript:changeVis('layer5Obj', true, false);">Events</a>&nbsp;
      <a class="nav" href="other/other.htm" onMouseOver="javascript:changeVis('layer6Obj', true, false);">Other</a>&nbsp;
      <a class="nav" href="contact/contact.htm" onMouseOver="javascript:changeVis('layer7Obj', true, false);">Contact</a></p>&nbsp;
    </div>
    
    
    <!---About Elim Fellowship Submenu --->
    <div id="layer1Obj"  style="visibility:hidden; position:absolute; width:375px; height:30px; left: 383px; top: 59px">
       <a class="submenu" href="general/sof.htm">Statement of Faith</a><br>
       <a class="submenu" href="general/history.htm">History</a><br>
       <a class="submenu" href="general/govern.htm">Governing Bodies</a></div>
    
    
    <!---Credentials Submenu --->
    <div id="layer2Obj" style="visibility:hidden; position:absolute; width:375px; height:30px; left: 419px; top: 59px">
       <a class="submenu" href="credentials/credreq.htm">Requirements</a></div>
    
    
    <!---US Ministries Submenu --->
    <div id="layer3Obj" style="visibility:hidden; position:absolute; width:400px; height:30px; left: 478px; top: 59px">
       <a class="submenu" href="usmd/men.htm">Men's Ministry</a><br>
       <a class="submenu" href="usmd/willow.htm">W.I.L.L.O.W.</a><br>
       <a class="submenu" href="usmd/youth.htm">Youth and Youth Camps</a><br>
       <a class="submenu" href="usmd/usmissions.htm">U.S. Missionaries</a><br>
    
       <a class="submenu" href="usmd/regions.htm">Regions & Areas</a><br>
       <a class="submenu" href="usmd/affialtes.htm">Affiliated Churches & Ministries</a></div>
    
    
    <!---World Missions Submenu --->
    <div id="layer4Obj" style="visibility:hidden; position:absolute; width:375px; height:30px; left: 551px; top: 59px">
       <a class="submenu" href="wmd/careermissions.htm">Career Missions</a><br>
       <a class="submenu" href="wmd/step.htm">STEP Missions</a><br>
       <a class="submenu" href="wmd/missionsopp.htm">Opportunities</a><br>
       <a class="submenu" href="wmd/ourmissionaries.htm">Our Missionaries</a><br>
       <a class="submenu" href="http://www.t-w-o.org">Teen World Outreach</a></div>
    
    
    <!---Events Submenu --->
    <div id="layer5Obj" style="visibility:hidden; position:absolute; width:375px; height:30px; left: 631px; top: 59px">
       <a class="submenu" href="events/recentevents.htm">Recent Events</a><br>
       <a class="submenu" href="events/upcomingevents.htm">Upcoming Events</a><br>
       <a class="submenu" href="#">EBI Events</a><br>
       <a class="submenu" href="#">EGC Events</a></div>
    
    
    <!---Other Submenu --->
    <div id="layer6Obj" style="visibility:hidden; position:absolute; width:375px; height:30px; left: 670px; top: 59px">
       <a class="submenu" href="other/admin.htm">Accounting & <br>&nbsp;Administration</a><br>
       <a class="submenu" href="other/personnel.htm">E.F. Staff</a><br>
       <a class="submenu" href="other/pub.htm">Elim Publications</a><br>
       <a class="submenu" href="other/authors.htm">Elim Authors</a></div>
    
    
    <!--- Contact Submenu --->
    <div id="layer7Obj" style="visibility:hidden; position:absolute; width:375px; height:30px; left: 704px; top: 59px">
       <a class="submenu" href="contact/contact.htm">Contact <br>&nbsp;Information</a></div>
    
    
    </body>
    </html>
    I have called the changeVis('layer#Obj', true, false) function, as described, on the main navigation. This makes the appropriate DIV appear (submenu). Now how do I make the DIV/submenu disappear when mousing onto the next menu, completely leaving the navigation alone????? Thanks for the help.

    Sketch
    Last edited by Sketch; Dec 18, 2001 at 09:24.
    Aaron Brazell
    Technosailor



  10. #10
    SitePoint Enthusiast RogueJedi's Avatar
    Join Date
    Oct 2001
    Location
    Texas
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try the function below, Sketch. It will iterate through all of the layers on a page, so long as they are named sequentially, and set all to hidden except for the one selected.
    Code:
    function stealthToggle(prefix,layerID) { 
        /*
            Usage:
            <div id="layer1" style="visibility:[visible|hidden]">
            <layer name="layer1" visibility="[show|hidden]">
                <a href="javascript:stealthToggle('layer',2)"
                >something to click on, image or text</a>
            </layer>
            </div>
        */
        if(document.getElementById) { //IE 5+ and NS6+
            i = 1;
            while(document.getElementById(prefix + i)) {
                temp = document.getElementById(prefix + i);
                temp.style.visibility = "hidden";
                i++
            }
            temp = document.getElementById(prefix + layerID);
            temp.style.visibility = "visible";
        }else if (document.all && !document.getElementById) { //IE
            i=1;
            keepOn = true;
            while(keepOn) {
                document.all[prefix + i].style.visibility = "hidden";
                i++;
                if(document.all[prefix + i] == null) keepOn = false;
            }
            document.all[prefix + layerID].style.visibility = "visible";
        }else{ //NN4.x
            i=1;
            keepOn = true;
            while(keepOn){
                document.layers[prefix + i].visibility = "hidden";
                i++;
                if(document.layers[prefix + i] == null) keepOn=false;
            }
            document.layers[prefix + layerID].visibility = "show";
        }
    }
    This code may stand some optimization, but I use it all the time and it gets the job done.
    Rob Nolan
    Do or do not, there is no try.

  11. #11
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Sketch,

    Note: you will have to play around with the placement(x,y) to make sure there is enough time to go from nav to the sub.

    <a class="nav" href="general/about.htm" onMouseOver="changeVis('layer1Obj', true, false);" onMouseout="changeVis('layer1Obj',false,false);">About </a>


    <div id="layer1Obj" style="visibility:hidden; position:absolute; width:375px; height:30px; left: 383px; top: 59px">
    <a class="submenu" href="general/sof.htm" onMouseOver="changeVis('layer1Obj', true, false);" onMouseout="changeVis('layer1Obj',false,false);">Statement of Faith</a><br>
    <a class="submenu" href="general/history.htm" onMouseOver="changeVis('layer1Obj', true, false);" onMouseout="changeVis('layer1Obj',false,false);">History</a><br>
    <a class="submenu" href="general/govern.htm" onMouseOver="changeVis('layer1Obj', true, false);" onMouseout="changeVis('layer1Obj',false,false);">Governing Bodies</a></div>

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  12. #12
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Vinny,

    I finally got the script to work, or rather, I rather got back to the project and tried what you suggested. It worked! However, it's a bit buggy. example4.html is the page. If you see, sometimes the submenu layer disappears before I can select a menu item, and then sometimes it doesn't. I did as you suggested and changed the positioning and it doesn't really change anything. Is there anyway we can set a 1 second timeout on the script for the main navigation?

    Sketch
    Aaron Brazell
    Technosailor




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
  •