Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Hide/Show Selection List

Status
Not open for further replies.
joehansen

joehansen

Programmer
Joined
May 11, 2006
Messages
5
Location
US
I need the capabilty to hide/show a selection list, just the way its
done at (place the cursor over "Group
Companies"). However, I am looking for a javascript that is much
simpler. Here is what I have until now.

Problems with my code:
1. The selection list becomes invisible when I try to select an option
(in Firefox).
2. The selection list stays visible when I just place the cursor over
selection list and move the cursor out (without clicking).

Please help,
Joe


<HTML>
<HEAD>
<script type="text/javascript">
function showSelect() {
element = document.getElementById('sort');
element.style.display = 'inline';
}

function hideSelect() {
element = document.getElementById('sort');
element.style.display = 'none';
}

</script>
</HEAD>
<BODY>
<div onMouseOver="javascript: showSelect(); return false;"
onMouseOut="javascript: hideSelect(); return false;" >
<label for="sort"><a href="javascript: void();">Sort:</a></label>
<div id="sort" style="display: none" onMouseOver="javascript:
showSelect(); return false;">
<select>
<option value="/woodpics/home.jsp?sortBy=1">Reverse
Chronological</option>
<option value="/woodpics/home.jsp?sortBy=2">Chronological</option>
<option value="/woodpics/home.jsp?sortBy=3">Title</option>
<option value="/woodpics/home.jsp?sortBy=4"># of Photos</option>
</select>
</div>
</div>
</BODY>
</HTML>
 
Sort by date Sort by votes
Off the top of my head.
Have the onmouseoff event call a function setting a timer with a half second or so of delay that then calls the hideSelect function.

In the showSelect function test to see if a timer exists and if it does cancel it. Check if a div is currently visible, if so and it is NOT the same div related to the current onmouseover then first hide that one then show the new one.

In the div that get's shown/hidden have an onmouseover event that cancels any existing timer and an onmouseoff event that calls the hideSelect function.

This way, if you mouse over one menu item it will instantly show the appropriate div but if your mouse moves down to that div the mouseoff event would start to hide the box but with a half second delay. At the same time an onmouseover event in the div is canceling the timer that would hide it.
If you mouseoff the menu item to another menu item the timer gets set but immediately canceled by the onmouseover event of the other menu item so the div switch is done immediately.
If you mouseoff the menu but not onto the displayed div it gives a half second delay then the div disappears. This way a shaky hand or mouse pointer right on the edge of the menu option will not result in the option disappearing just as you try to move to it.


It's hard to think outside the box when I'm trapped in a cubicle.
 
Upvote 0 Downvote
Thanks for the reply niteowl! I tried to implement what you meant. Looks like its working in firefox but not in Internet Explorer. Can you please check my code and point me in the right direction!!

Thanks for your help,
Joe


<HTML>
<HEAD>
<script type="text/javascript">
var timerID = 0;
function showSelect() {
if (timerID) {
clearTimeout(timerID);
}

element = document.getElementById('sort');
element.style.display = 'inline';
}

function hideSelect() {
if (timerID) {
element = document.getElementById('sort');
element.style.display = 'none';
}
}

function fadeSelect() {
timerID = setTimeout("hideSelect()", 500);
}

function cancelTimer() {
if (timerID) {
clearTimeout(timerID);
}
}
</script>
</HEAD>
<BODY>
<div onMouseOver="javascript: showSelect(); return false;" onMouseOut="javascript: fadeSelect(); return false;" >
<label for="sort"><a href="javascript: void();">Sort:</a></label>
</div>
<div id="sort" style="display: none" onMouseOver="javascript: cancelTimer(); return false;" onMouseOut="javascript: fadeSelect(); return false;">
<select onMouseOver="javascript: cancelTimer(); return false;">
<option value="/woodpics/home.jsp?sortBy=1" onMouseOver="javascript: cancelTimer(); return false;">Reverse Chronological</option>
<option value="/woodpics/home.jsp?sortBy=2" onMouseOver="javascript: cancelTimer(); return false;">Chronological</option>
<option value="/woodpics/home.jsp?sortBy=3" onMouseOver="javascript: cancelTimer(); return false;">Title</option>
<option value="/woodpics/home.jsp?sortBy=4" onMouseOver="javascript: cancelTimer(); return false;"># of Photos</option>
</select>

</div>
</BODY>
</HTML>
 
Upvote 0 Downvote
I think I know why the above code does not work in Internet Explorer. Its because the onMouseOver events do not get triggered in IE when the mouse moves over an <OPTION> in the selection list. Any possible work around?

Thank you,
Joe.
 
Upvote 0 Downvote
I see what you mean about IE. No fix that I am aware of but I will ponder it.

Perhaps the menu can be set inside a div of a size to accomodate the dropdowns and the onmouseoff event could be on that instead of the div itself. Seems kludgy but it would keep the timer from firing unless the mouse moved all the way out of the div but still allow the div to reset when a new menu option is passed over.


It's hard to think outside the box when I'm trapped in a cubicle.
 
Upvote 0 Downvote
Thanks for the reply, theniteowl! I am afraid, I cannot use a div tag as you have suggest.

There surely must be a workaround. I am unable to decipher the way has done it.

thanks for your continued help,
joe.
 
Upvote 0 Downvote
This seems to work a bit better.
I used an onchange event in the select box to trigger the timer. If no selection is made the box stays there until you hit another mouseover that cancels the first box display but you could always use a second timer to trap if the menu option is showing but never closed and close it automatically.

Code: 
<BODY>
<div onMouseOver="showSelect();" onmouseout="fadeSelect();">
  Sort:
</div>
<div id="sort" style="display: none">
<select id="test" onmouseover="cancelTimer();" onchange="fadeSelect();">
    <option value="/woodpics/home.jsp?sortBy=1">Reverse Chronological</option>
    <option value="/woodpics/home.jsp?sortBy=2">Chronological</option>
    <option value="/woodpics/home.jsp?sortBy=3">Title</option>
    <option value="/woodpics/home.jsp?sortBy=4"># of Photos</option>
</select>

</div>
</BODY>

It's hard to think outside the box when I'm trapped in a cubicle.
 
Upvote 0 Downvote
theniteowl,Thanks for all your help, without which I would have been lost.

I finally got it to a point where it works rather well in both FF and IE.

Here is the final version of the code.

cheers,
Joe.


<HTML>
<HEAD>
<script type="text/javascript">
var minTimerID = 0;
var maxTimerID = 0;
var minTimerTimeout = 500;
var maxTimerTimeout = 5000;
var prevSelection = 0;

function showSelect(selList, selDiv, currSelDiv) {
if (maxTimerID == 0) {
maxTimerID = setTimeout("hideSelect2('"+selList+"','"+selDiv+"','"+currSelDiv+"')", maxTimerTimeout);
}

cancelMinTimer();
element = document.getElementById(selDiv);
element.style.display = 'inline';

element = document.getElementById(selList);
element.style.display = 'inline';
prevSelection = element.selectedIndex;

element = document.getElementById(currSelDiv);
element.style.display = 'none';
}

function hideSelect2(selList, selDiv, currSelDiv) {
if (maxTimerID) {
cancelMaxTimer();
element = document.getElementById(selList);
if (element.style.display != 'none') {
element.selectedIndex = prevSelection;
element.style.display = 'none';
element = document.getElementById(selDiv);
element.style.display = 'none';
setSelected(selList, currSelDiv);
}
}
}

function hideSelect(selList, selDiv, currSelDiv) {
cancelMaxTimer();

if (minTimerID) {
clearTimeout(minTimerID);
element = document.getElementById(selDiv);
element.style.display = 'none';
element = document.getElementById(selList);
element.style.display = 'none';
setSelected(selList, currSelDiv);
}
}

function setSelected(selList, currSelDiv) {
element = document.getElementById(currSelDiv);
selectionList = document.getElementById(selList);
element.innerHTML = selectionList.options[selectionList.selectedIndex].innerHTML ;
element.style.display = 'inline';
}

function fadeSelect(selList, selDiv, currSelDiv) {
minTimerID = setTimeout("hideSelect('"+selList+"','"+selDiv+"','"+currSelDiv+"')", minTimerTimeout);
}

function cancelMinTimer() {
if (minTimerID) {
clearTimeout(minTimerID);
}
}

function cancelMaxTimer() {
if (maxTimerID) {
clearTimeout(maxTimerID);
maxTimerID = 0;
}
}
</script>
</HEAD>
<BODY>
<table width="300" align="left">
<tr>
<td align="left">
<div style="display: inline" onMouseOver="javascript: showSelect('selList', 'selDiv', 'currSelDiv'); return false;" onMouseOut="javascript: fadeSelect('selList', 'selDiv', 'currSelDiv'); return false;">
<label for="selList"><a href="javascript: void();">Sort:</a></label>
</div>
<div id="currSelDiv" style="display: none"></div>

<div id="selDiv" style="display: none">
<select id="selList" onMouseOver="javascript: cancelMinTimer(); return false;" onChange="javascript: hideSelect('selList', 'selDiv', 'currSelDiv'); return false;">
<option value="/woodpics/home.jsp?sortBy=1">Reverse Chronological</option>
<option value="/woodpics/home.jsp?sortBy=2">Chronological</option>
<option value="/woodpics/home.jsp?sortBy=3">Title</option>
<option value="/woodpics/home.jsp?sortBy=4"># of Photos</option>
</select>
</div>
<script type="text/javascript">
setSelected('selList', 'currSelDiv');
</script>
</td>
</tr>
</table>
</BODY>
</HTML>
 
Upvote 0 Downvote
Looks good but I did notice that it throws an error (at least in IE) if you click on the menu link.
Possibly the onclick event is conflicting with the other events? Setting a return false for the onclick event stops the error, not sure if there is a better method.



It's hard to think outside the box when I'm trapped in a cubicle.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
malpa
  • Locked
  • Question Question
Graph the selection of a html table row
Replies
0
Views
1K
malpa
malpa
jomat
  • Locked
  • Question Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
1K
xwb
xwb
chrisjchrisj
  • Locked
  • Question Question
Allow camera access - show camera view -- don’t start recording video
Replies
0
Views
335
chrisjchrisj
chrisjchrisj
JPSeo
  • Locked
  • Question Question
simple SyntaxError: missing ) after argument list error
Replies
2
Views
451
JPSeo
JPSeo

Part and Inventory Search

Sponsor

Back
Top