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 Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

conditional hide 1

Status
Not open for further replies.
GabberGod

GabberGod

IS-IT--Management
Nov 16, 2003
73
AU
ok what i have is a function that hides a div after x milliseconds after mouseout.

I need this to be so because i need time after i mouseout to reach the div that will hide (its a menu system).

is there a way of stopping this div from hiding if i reach it before the time is up???
 
Sort by date Sort by votes
Very brief, however correct, answer theboyhope ... §;O)

Yes, it can be done. Here's an actual example how to do it. Works in IE:

Code: 
<HTML>
<HEAD>
  <TITLE>Timed Hide on MouseOut</TITLE>
  <STYLE>
    #box {
      width   : 250px;
      height  : 150px;
      background-color : #C0C0FF;
      display : none;
    }
  </STYLE>
  <SCRIPT LANGUAGE=&quot;JavaScript&quot;>
    function hide() {
      document.all.box.style.display = &quot;none&quot;;
    }
    function show() {
      document.all.box.style.display = &quot;block&quot;;
    }

    function timedHide(milliSecs) {
      if(document.all.box.style.display != &quot;none&quot;) {
        setTimeout(&quot;hide()&quot;,milliSecs)
      }
    }
  </SCRIPT>
</HEAD>

<BODY>

  <BUTTON onClick=&quot;hide()&quot;>Hide</BUTTON>          
  <BUTTON onClick=&quot;show()&quot;>Show</BUTTON>

  <DIV ID=&quot;box&quot; onMouseOut=&quot;timedHide(500);&quot;>
    Roll over then out to hide me!<BR>
    Delay is set to 500 ms
  </DIV>

</BODY>
</HTML>

Good Luck §;O)


Jakob
 
Upvote 0 Downvote
... sorry! Wrong example §:O) heh!

I'll get back if I get a solution for you.


Jakob
 
Upvote 0 Downvote
This solution makes use of clearTimeout().

I use a global variable to store a pointer to the current timer. You can use other methods, but this seemed the most straight forward for this example.

Code: 
<script type=&quot;text/javascript&quot;>
var myTimeout = null;

function startTimer(_milliseconds)
{
  // clear exisiting timer (if any)
  clearTimeout(myTimeout);
  // start a timer that triggers in &quot;(_milliseconds/1000)&quot; seconds
  myTimeout = setTimeOut('closeDivs()',_milliseconds);
}

function cancelTimer()
{
  // clear the timer referred to by the global &quot;myTimeOut&quot;
  clearTimeout(myTimeout);
}
</script>

Now you might craft your divs to include the following:

Code: 
<div id=&quot;menuItem1&quot; onmouseover=&quot;cancelTimer()&quot; onmouseout=&quot;startTimer(3000)&quot;>

Does this help?
Jeff
 
Upvote 0 Downvote
Thanks alot guys, I think that will help me out.

*Wonders why people post replies like 'theboyhope'*
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

SitesMasstec
  • Locked
  • Question
Conditional commands
Replies
5
Views
260
IPGuru
IPGuru
malibu65k
  • Locked
  • Question
Hide/Unhide div using Radio button onClick
Replies
4
Views
249
malibu65k
malibu65k
LyndonOHRC
  • Locked
  • Question
How do I Hide/Show options elements by class
Replies
1
Views
177
ChrisHirst
ChrisHirst
malibu65k
  • Locked
  • Question
Trying to use Javascript to hide/show several textboxes with checkbox onclick
Replies
2
Views
229
vacunita
vacunita
cutum
  • Locked
  • Question
Need to hide Web Part between certain dates-SharePoint 2010
Replies
12
Views
468
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top