SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Java menu help

  1. #1
    SitePoint Addict Mainer82's Avatar
    Join Date
    Aug 2003
    Location
    Maine, USA
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Java menu help

    I am trying to menu an expandable menu when you click on it. It seems to work ok in IE, but it Doesn't in Mozilla.

    Java script (default.js):
    Code:
    function BrowserCheck() {
    	this.ns4 = (document.layers)? true:false;
    	this.ie = (document.all && !window.opera)? true:false;
    	this.ie4 = (document.all && !document.getElementById)? true:false;
    	this.iewin = (window.ActiveXObject)? true:false;
    	this.dom = (document.getElementById)? true:false;
    	this.gecko = (navigator.userAgent.indexOf('Gecko')!=-1)? true:false;
    	this.nsGecko = ((navigator.userAgent.indexOf('Gecko')!=-1)&&navigator.userAgent.indexOf('Netscape')!=-1)? true:false;
    	this.opera = (window.opera)? true:false;
    	this.mac = (navigator.userAgent.indexOf('Mac')!=-1)? true:false;
    	this.iemac = ((navigator.userAgent.indexOf('Mac')!=-1) && (document.all&&(!window.opera)) )? true:false;
    }
    is = new BrowserCheck()
    
    if (is.dom) {
    	//document.write('<link rel="stylesheet" href="style.css" media="all" />')
    }
    
    if (is.gecko) {
    	/* 
    	document.write('<style>');
    	document.write('#content { position:relative;top:-1px; }');
    	document.write('#contentForum { ;position:relative;top:-1px; }');
    	document.write('</style>');
    	*/
    }
    
    function init() {
    
    }
    
    //window.onload = init;
    
    // these functions are for the menu guide dhtml:
    
    function setDesc(head,text,e) {
      if (!document.getElementById) {
        document.descriptionForm.description.value = head+"\n\n"+text;
      } else {
        // confirmed in newest opera, ie, and moz
        if (!e) e = window.event;
        d = document.getElementById('explanationDiv');
        d.firstChild.firstChild.nodeValue = head;
        d.lastChild.firstChild.nodeValue = text;
        if (document.all && !window.opera) {
            posLeft = document.body.scrollLeft+20+e.clientX;
            posHeight = document.body.scrollTop+10+e.clientY;
            widthSpaceLeft = document.body.clientWidth;
            widthSpaceHeight = document.body.clientHeight;
        } else { // opera does things like moz, nice to know
            posLeft = window.pageXOffset+20+e.clientX;
            posHeight = window.pageYOffset+10+e.clientY;
            widthSpaceLeft = window.innerWidth;
            widthSpaceHeight = window.innerHeight;
        }
        if (posLeft+200 > widthSpaceLeft) {
            posLeft -= 240;
        }
        d.style.left = posLeft+"px";
        d.style.top = posHeight+"px";
        d.style.visibility = "visible";
      }
    }
    
    function killDesc() {
        d.style.visibility = "hidden";
    }
    
    // this function, is for the extensions listings expanding stuff
    
    t = new Image();
    t.src = "images/bookclosed.PNG";
    d = new Image();
    d.src = "images/bookopen.PNG";
    
    function extension(header) {
        if (header.nextSibling) {
            if (header.nextSibling.style.display == "block") {
                header.title = "Click to expand";
                header.nextSibling.style.display = "none";
                header.parentNode.style.backgroundImage = "url('images/bookclosed.PNG')";
            } else {
                header.title = "Click to collapse";
                header.nextSibling.style.display = "block";
                header.parentNode.style.backgroundImage = "url('images/bookopen.PNG')";
            }
        }
    }
    
    function expandAllCategories(button) {
        var doAction = "";
        if (button.value== "Expand all categories") {
            doAction = "Expand";
            button.value = "Collapse all categories";
        } else {
            doAction = "Collapse";
            button.value = "Expand all categories";
        }
    
        if (document.getElementsByTagName) {
            var p = document.getElementsByTagName("p");
            for (var i = 0; i < p.length; i++ ) {
                if (p[i].className == "extensionCategory") {
                    if (doAction=="Expand") {
                        if (!(p[i].nextSibling.style.display == "block")) {
                            p[i].click();
                        }    
                    } else {
                        if (p[i].nextSibling.style.display == "block") {
                            p[i].click();
                        }
                    }
                }
            }
        }
    }
    HTML:
    HTML 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" xml:lang="en" lang="en">
    <head>
    	<title></title>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
    	<script src="default.js" type="text/javascript"></script>
    	<link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <br />
    <a href="index.html" target="_top">Home</a>
    <br />
    <br />
    <a href="backup.html" target="main">Backup your registry</a>
    <br />
    <a href="contact.html" target="main">Contact Us</a>
    <br />
    <br />     
    
    <div class="extensionsList">
     <div><p class="extensionCategory" onclick="extension(this);" title="Click to expand">Desktop Tweaks</p> 
     <ul>
      <li><a href="associateanicondrive.html" target="main">Associate an icon with a drive</a>
      </li>
      <li><a href="">.....</a>
      </li>
      <li><a href="">....</a>
      </li>
      <li><a href="">....</a>
      </li>
      <li><a href="">....</a>
      </li>
     </ul>
     </div>   
    </div>
    </body>
    </html>
    CSS (style.css):
    Code:
    .extensionsList div {
    	font-size: 11px;
    }
    .extensionsList div li {
    	font-size: 11px;
    }
    #explanationDiv {
    	padding: 3px;
    	position: absolute;
    	top: 0;
    	left: 0;
    	visibility: hidden;
    	color: InfoText;
    	background: InfoBackground;
    	width: 200px;
    	border: 1px solid black;
    }
    
    #explanationDiv h2 {
    	font-size: 12px;
    	font-weight: 900;
    	color: InfoText;
    	background: InfoBackground;
    	margin: 2px 2px 2px 2px;
    }
    
    #explanationDiv p {
    	color: InfoText;
    	background: InfoBackground;
    	margin: 2px 2px 2px 2px;
    }
    
    /* some messing with margins, to get it all to look nice */
    .extensionsList div p {
    	display: inline;
    }
    .extensionsList div ul {
    	margin-top: 0.5em;
    	margin-bottom: 0.5em;
    }
    .extensionCategory {
    	cursor: pointer;
    }
    .extensionsList div {
    	padding-left: 20px;
    	margin-left: 1em;
    	background-image: url('images/bookclosed.PNG');
    	background-position: 0 0;
    	background-repeat: no-repeat;
    }
    .extensionsList div ul {
    	display: none;
    }
    What am I doing wrong?
    Get to know the man behind the screen

  2. #2
    SitePoint Addict Mainer82's Avatar
    Join Date
    Aug 2003
    Location
    Maine, USA
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone?
    Get to know the man behind the screen


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
  •