SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. Mar 3, 2003, 05:21 #1
    TimNiceButDim
    TimNiceButDim is offline
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    London, UK
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show - hide script?

    Does anyone know how i could use a show - hide script on my website in order to show or hide the menu?
    I have a menu system integrated into my site - www.hostcompanies.com its a really cool menu but maybe be better if i could have a show/hide button on it.

    The menu is generated using iNaviagte which script is on each page so i need to keep the menu in the same code of the page in order to keep the iNavigate generator working properly when i update or change the menu.
    The menu is inside a table - i would like to show/hide the entire table - this would give more room to show the page contents.

    Ideally i would like the menu to show when visiting the page but to be able to hide it when needed.

    Does anyone know of a script that could do this?
    Last edited by TimNiceButDim; Mar 3, 2003 at 05:27.
    Add your web design / hosting companies to my directory - Web Hosting Directory
    Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).
  2. Mar 4, 2003, 15:53 #2
    gregc
    gregc is offline
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What this page has is called a menu tree script.

    My menu tree is much simpler, and the code is below:

    Code:
    <html>
<head>
<script language="JavaScript">
function open(theobj) {
var obj = document.getElementById(theobj);
var opener = document.getElementById("i" + theobj);
if(obj.style.display == "none" ) {
	obj.style.display = "block";
opener.innerHTML = "-";
} else {
	obj.style.display = "none";
opener.innerHTML = "+";
}
}
function openall() {
var objarray = document.getElementsByTagName("span" );
for (var i=0; i < objarray.length; i++) {
	objarray[i].style.display = "block";
document.getElementById("i" + objarray[i].id).innerHTML = "-";
}
}
 
function closeall() {
var objarray = document.getElementsByTagName("span" );
for (var i=0; i < objarray.length; i++) {
	objarray[i].style.display = "none";
document.getElementById("i" + objarray[i].id).innerHTML = "+";
}
}
</script>
 
<style>
a.sign {
text-decoration:none;
font-size:18px;
font-family:arial;
color:blue;
}
a.link {
text-decoration:none;
font-size:15px;
font-family:arial;
margin-left:15px;
color:blue;
}
a.openclose {
text-decoration:none;
color:blue;
font-size:15px;
font-family:arial;
}
</style>
<BODY bgcolor="#cccccc">
<H3 align="center">YOURSITE.COM</H3>
<A href="javascript<IMG alt=:o src="images/smilies/redface.gif" border=0 smiliecode=":o">pen('scripts');" id="iscripts" class="sign">+</A>
Scripts<BR>
<span id="scripts" style="display:none;">
<A href="Your_URL_here" class="link">
	JavaScript Scripts
</A><BR>
<A href="Your_URL_here" class="link">
	Dynamic HTML Scripts
</A><BR>
<A href="Your_URL_here" class="link">
	Other Scripts
</A><BR>
</span>
 
<A href="javascript<IMG alt=:o src="images/smilies/redface.gif" border=0 smiliecode=":o">pen('tutorials');" id="itutorials" class="sign">+</A>
Tutorials<BR>
<span id="tutorials" style="display:none;">
<A href="Your_URL_here" class="link">
	HTML Tutorials
</A><BR>
<A href="Your_URL_here" class="link">
	CSS Tutorials
</A><BR>
<A href="Your_URL_here" class="link">
	JavaScript Tutorials
</A><BR>
<A href="Your_URL_here" class="link">
	Dynamic HTML Tutorials
</A><BR>
<A href="Your_URL_her " class="link">
	Other Tutorials
</A><BR>
</span>
 
<A href="javascript<IMG alt=:o src="images/smilies/redface.gif" border=0 smiliecode=":o">pen('support');" id="isupport" class="sign">+</A>
Support<BR>
 
<span id="support" style="display:none;">
<A href="Your_URL_here" class="link">
	FAQs
</A><BR>
<A href="Your_URL_here" class="link">
	Forums
</A><BR>
<A href="Your_URL_here" class="link">
	Scripting Support
</A><BR>
<A href="Your_URL_here" class="link">
	Technical Help
</A><BR>
</span>
 
<A href="javascript<IMG alt=:o src="images/smilies/redface.gif" border=0 smiliecode=":o">pen('contact');" id="icontact" class="sign">+</A>
Contact us<BR>
<span id="contact" style="display:none;">
<A href="Your_URL_here" class="link">
	Email Us
</A><BR>
<A href="Your_URL_here " class="link">
	Phone and Address
</A><BR>
<A href="Your_URL_here " class="link">
	Forums
</A><BR>
</span>
<BR>
<A href="javascript<IMG alt=:o src="images/smilies/redface.gif" border=0 smiliecode=":o">penall();" class="openclose">Open all</A> |
<A href="java script:closeall();" class="openclose">Close all</A>
</div>
</BODY>
</html>
    If you want to only have one menu list open at a time, re-write this part of the code:

    Code:
    if(obj.style.display == "none" ) {
	obj.style.display = "block";
    To this:

    Code:
     if(obj.style.display == "none" ) {
	closeall();
	obj.style.display = "block";
    Last edited by gregc; Mar 4, 2003 at 15:58.
  3. Mar 4, 2003, 15:57 #3
    TimNiceButDim
    TimNiceButDim is offline
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    London, UK
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its ok i have had a custom script made. Now my menu system works with a show and hide button for the naviagation.

    You can see the result at http://www.hostcompanies.com/newnav.htm

    Thanks for all your help anyhow
    Add your web design / hosting companies to my directory - Web Hosting Directory
    Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).

« Previous Thread | Next Thread »

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
  •  

Forum Rules