HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
DHTML Menu in need of tweeking
Post new topic   Reply to topic    HTML Help Forum Index -> DHTML
View previous topic :: View next topic  
Author Message
KDuverge



Joined: 02 May 2006
Posts: 2
Location: Las Vegas

PostPosted: Tue May 02, 2006 2:00 pm     DHTML Menu in need of tweeking Reply with quote

I have 2 menus...a collapse menu and a link menu.

The collapse menu's arrows are not doing exactly what I'd like. Ex. I 'd like that when you click the link for the sub menu, there are no arrows.

The link menu's issue, is that on mouseover, the submenu for each comes out in different places.

I would appreciate some assistance. Thanks!

Codes below.

COLLAPSE MENU
<style>
<!--
#foldheader{cursor:pointer;cursor:hand ; font-weight:bold ;
list-style-image:url(images/fold.gif)}
#foldinglist{list-style-image:none}
//-->
</style>
<script language="JavaScript1.2">
<!--


var head="display:''"
img1=new Image()
img1.src="images/fold.gif"

//img2=new Image()
//img2.src="images/open.gif"

var ns6=(document.getElementById&&!document.all)||window.opera
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentElement
}

if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(images/fold1.gif)"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url(images/fold.gif)"
}
}
}

if (ie4||ns6)
document.onclick=checkcontained

//-->
</script>


LINK MENU

<style type="text/css">

#dropmenudiv{
position: absolute;
background-color: #eeeeee;
border:1px #152852;
border-bottom-width: 1px;
font:normal 11px Tahoma, Arial, Helvetica, sans-serif;
line-height:11px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 1px;
border-bottom: 1px #152852;
padding: 1px 0;
text-decoration: none;
font-weight: regular;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #d9cef7;
}


.style2 {font-family: "Tahoma, Arial, Helvetica, ", Tahoma, sans-serif}
</style>
kanenas



Joined: 14 Dec 2004
Posts: 191

PostPosted: Sun May 07, 2006 9:01 pm     More info, please Reply with quote

How's the HTML structured for you menus? From the use of 'cur.all.tags("UL")', 'cur.id' and 'style.listStyleImage' in "checkcontained", I expect the submenu is a child of "foldheader", something like:
Code:
<ul>
  <li id="foldheader">Snark
    <ul id="foldinglist">
      <li>Thimbles</li>
      <li>Care</li>
      <li>Forks</li>
      <li>Hope</li>
    </ul>
  </li>
  <li id="foldheader">Snipe
    <ul id="foldinglist">
      <li>Bag</li>
      <li>Lantern</li>
      <li>Rocks</li>
    </ul>
  </li>
</ul>

However, the use of 'cur.nextSibling.nextSibling' suggests the sub menu is a sibling of "foldheader".

Note the use of 'id' suggested by checkcontained is illegal unless there is only one "foldheader" and one "foldinglist" in the entire document. If you have two or more (such as in the example above), use the class attribute in the HTML source and the className property in "checkcontained".
Code:
<ul>
  <li class="foldheader">Snark
    <ul class="foldinglist">
    ...


On a tangent, I recommend replacing the browser sniffing code with object sniffing (e.g. "ns6?e.target:event.srcElement" becomes "e?e.target:event.srcElement").
Code:
function checkcontained(e){
  var iscontained=0;
  cur=e ? e.target : event.srcElement;
  i=0;
  if (cur.className=="foldheader")
    iscontained=1;
  else
    while (cur.parentNode||cur.parentElement) {
      if (cur.className=="foldheader"||cur.className=="foldinglist"){
        iscontained=(cur.className=="foldheader")? 1 : 0;
        break;
      }
      cur= cur.parentNode ? cur.parentNode : cur.parentElement
    }

  if (iscontained) {
    var foldercontent=cur.all ? cur.all.tags("UL")[0] : cur.childNodes[1];
    if (foldercontent.style.display=="none"){
      foldercontent.style.display=""
      cur.style.listStyleImage="url(../images/right-todown.gif)"
    } else {
      foldercontent.style.display="none"
      cur.style.listStyleImage="url(../images/right.gif)"
    }
  }
}
KDuverge



Joined: 02 May 2006
Posts: 2
Location: Las Vegas

PostPosted: Mon May 08, 2006 3:30 pm     Reply with quote

Thank you so much for your help. I'm gonna make those changes and we'll see how it goes. Thanks again!
kanenas



Joined: 14 Dec 2004
Posts: 191

PostPosted: Tue May 09, 2006 12:49 pm     Reply with quote

Note that without seeing the HTML source for your menus, I don't have enough information to say what the cause is with any certainty. The fixes I mention regarding IDs and classes are necessary but probably not sufficient.

As you make changes, dont' forget to change the ID selectors in your style sheets to class selectors when appropriate.

None of the alterations I suggested address any issues with the link menu. I want to see the source for it in particular because nothing in the style suggested sub menus. If you would, I'd also like a clarification of what you meant by "comes out in different places".
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> DHTML All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
 
HOSTING / DESIGN
MAKE MONEY

Home
  |   Tutorials   |   Forum   |   Quick List   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial