/    Sign up×
Community /Pin to ProfileBookmark

droplist cleanup – need help

Copy linkTweet thisAlerts:
Apr 26.2003

I’ve got a DHTML droplist in place, but I’m having trouble getting the desired functionality.

My two problems I’m tackling at the moment are:

1.) How to make the list appear slightly to the right of the text that triggers the list.

2.) How to make the list go away when you move away from the selection. If I choose “onmouseout” in the code, then the list disappears as soon as you try to click on a list item, so it’s impossible to use. If I don’t use the “onmouseout” command, however, then the list jsut stays around, blocking other links on the page.

Fixing problem #1 above might take care of problem #2, because at least then the other cells will still be visible and accessible. But it still might be kind of a shoddy solution.

I have some JavaScript in my menu cells, which I don’t want to get disrupted by the DHTML list.

To see a test page in action, and the code behind it, go to
[url]http://www.craigsmithconst.com/leftTEST.html[/url]

Any help would be greatly appreciated! Thanks,

Lisa

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@ad-hocauthorApr 26.2003 — I'm afraid I'm in over my head now. I don't know how to do a timed delay onMouseOut.

If I were to try your first suggestion -- to code the onMouseOut inside the droplist -- would I have to write new code that closes the list? When I simply cut-and-paste the existing "onMouseOut" code to the passage of droplist code, I get similarly dysfunctional results. Substituting onMouseOut for the existing onClick doesn't work because then it closes the list as soon as the mouse touches it.

For problem #1: I've already specified absolute positioning in every place that I think would have an effect. I've also tried align="right", style, and other combinations of code. Nothing seems to change it.

P.S. No, I don't do this for a living. I'm doing this work for my Dad.


? Lisa
Copy linkTweet thisAlerts:
@ad-hocauthorApr 27.2003 — I'd noticed the missing </div> tag - I don't think the original author of the code had included it. I put it in earlier to see if it would change anything. It didn't, but I'll try adjusting those "top" and "left" properties as soon as I get back to the work terminal.... thanks for the help....!

Lisa
Copy linkTweet thisAlerts:
@ad-hocauthorApr 27.2003 — I was able to fix the list-positioning problem already by adjusting the the code:

themenuStyle.left=ns6||ns4? e.pageX-e.layerX : themenuoffsetX+event.clientX-event.offsetX+76

themenuStyle.top=ns6||ns4? e.pageY-e.layerY+19 : themenuoffsetY+event.clientY-event.offsetY+9

I just tweaked the integers at the end of the string of code for each until the list fell in the right position.

Now I'm back to the one remaining problem, which is how to make the drop-down list go away when the user is done looking at it and has not selected it. I tried doing various things with the hidemenu() function and the visibility attribute, or by using the object 'dropmenu0'. The results were mostly the same as the "onMouseOut" problem, where the drop-down list closes before you are able to put your mouse on it.

What forum would I go to to learn about timed delays?

Lisa
Copy linkTweet thisAlerts:
@ad-hocauthorApr 28.2003 — In this case, should I be using the 'hidemenu()' function (for 'myFunction()'), or am I supposed to create a new function?

And, should I place this code between the <script> tags which appear inside the body (<body>) of the document? Will I then have to reference the timer function in the <ilayer> section of the code?

I'm just not experienced enough with programming to know these things....

Again, a mock page of this problem is at:

http://www.craigsmithconst.com/leftTEST.html


Lisa
Copy linkTweet thisAlerts:
@ad-hocauthorApr 30.2003 — This is my final campaign for the timed delay business. Below is a section of code from the page. Do I have the 'timer' code in the correct place? I'm groping in the dark here, but a few hints would get me on the right foot. Anyone? I know I probably have no business trying to use scripts which are over my head, but this is the last step in perfecting my DHTML menu. I'd hate to give up when I'm so close.

I'm using the 'hidemenu()' function in my 'timer' code. Most things I try have either no effect, or the tail-chasing effect between the mouse and the menu. That's better than error messages I suppose, but it's still not publishable.


<tr>

<script language="JavaScript1.2">

var zindex=100

var ns4=document.layers

var ns6=document.getElementById&&!document.all

var ie4=document.all

var opr=navigator.userAgent.indexOf("Opera")

function dropit(e,whichone){

curmenuID=ns6? document.getElementById(whichone).id : eval(whichone).id

if (window.themenu&&themenu.id!=curmenuID)

themenuStyle.visibility=ns4?"hide" : "hidden"

themenu=ns6? document.getElementById(whichone): eval(whichone)

themenuStyle=(ns6||ie4)? themenu.style : themenu

themenuoffsetX=(ie4&&opr==-1)? document.body.scrollLeft : 0

themenuoffsetY=(ie4&&opr==-1)? document.body.scrollTop : 0

themenuStyle.left=ns6||ns4? e.pageX-e.layerX : themenuoffsetX+event.clientX-event.offsetX+76

themenuStyle.top=ns6||ns4? e.pageY-e.layerY+19 : themenuoffsetY+event.clientY-event.offsetY+9

hiddenconst=(ns6||ie4)? "hidden" : "hide"

if (themenuStyle.visibility==hiddenconst){

themenuStyle.visibility=(ns6||ie4)? "visible" : "show"

themenuStyle.zIndex=zindex++

}

else

hidemenu()

return false

}

function hidemenu(){

if ((ie4||ns6)&&window.themenu)

themenuStyle.visibility="hidden"

else if (ns4)

themenu.visibility="hide"

}

if (ie4||ns6)

document.onclick=hidemenu

timer = window.setTimeout('hidemenu()', 500);

if (timer) {

window.clearTimeout(timer);

timer = null;

}

</script>

<td width="116" height="21" align="left" background="PlainCell.gif"
onmouseover="background='CellBackground.gif'" style="cursor: hand" onmouseout="background='PlainCell.gif'" valign="top">
<!----------Menu 1 starts here---------->

<ilayer>

<layer visibility=show>

</layer>

<div class=wrap1>

<span class=wrap2 onmouseover="dropit(event, 'dropmenu0');event.cancelBubble=true;return false"><font face="Arial" size="1">

<a class="tditem" target="main-view" onClick="if(ns4) return dropit(event, 'document.dropmenu0')">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;OUR WORK</a>

</font>

</span>

</ilayer>

</div>

<!----------Menu 1 ends here---------->

</td>

</tr>


Thanks in advance,

Lisa
Copy linkTweet thisAlerts:
@ad-hocauthorApr 30.2003 — >and this part should go in the onmouseover event handler >for your dropdown:

if (timer) {

window.clearTimeout(timer);

timer = null;

}

>>>>>>>>>>>>>>>>

Strangely, if I put this only between the <script> tags, and don't call it up at all from "onmouseover", I get the exact same results as if I were to put it in both places. I don't know if this would change depending on the browser, but the timer seems to be working, in any case.

Just FYI, this is how I've got it now (abbreviated from my last post):


timer = window.setTimeout('hidemenu()', 2500);

if (timer) {

window.clearTimeout(timer);

timer = null;

}

</script>

<td width="116" height="21" align="left" background="PlainCell.gif"
onmouseover="background='CellBackground.gif'" style="cursor: hand" onmouseout="background='PlainCell.gif'" valign="top">
<!----------Menu 1 starts here---------->

<ilayer>

<layer visibility=show>

</layer>

<div class=wrap1>

<span class=wrap2 onmouseover="dropit(event, 'dropmenu0');event.cancelBubble=true;return false"><font face="Arial" size="1">

<a class="tditem" target="main-view" onClick="if(ns4) return dropit(event, 'document.dropmenu0')"

onmouseout="setTimeout('hidemenu()', 2500)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;OUR WORK</a>

</font>

</span>

</ilayer>

</div>

<!----------Menu 1 ends here---------->

</td>


I can see no logic in it, but it works, somewhat. Hopefully there are no impending disasters in this code.

Lisa
Copy linkTweet thisAlerts:
@ad-hocauthorApr 30.2003 — Never mind, I was wrong, it doesn't really work, because the drop menu still won't stay open long enough for the user to get a good look at its contents. That behavior seemed to be different five minutes ago, otherwise I wouldn't have posted what I did. Oh well, back to the drawing boards. Sorry for the unecessasry posts.

(no logic, indeed)

Lisa
Copy linkTweet thisAlerts:
@ad-hocauthorMay 09.2003 — Thanks, Dave Clark, for all the help last week (or whenever it was) on the DHTML menu.

I never did get my *ideal* results, but after leaving it for a week and coming back, it was satisfactory enough (the latest results are not online).

These help forums are really great. It's amazing that they are free to use (though their usefulness is contingent on all the nice people out there willing to share their knowledge and time).

Lisa
Copy linkTweet thisAlerts:
@ad-hocauthorMay 09.2003 — <Eureka> It never fails: as soon as you stop caring, it all works out. I took one last look, and in doing so found the solution to get my *ideal* results. I got rid of the timed delay altogether. All I had to do was place the hidemenu() function as a mouseover event for all the other cell items on my table of links, and have no mouseout event for the DHTML cell. I can't believe I didn't think of that before.

Lisa
×

Success!

Help @ad-hoc spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...