The new forums will be named Coin Return (based on the most recent vote)! You can check on the status and timeline of the transition to the new forums here.
The Guiding Principles and New Rules document is now in effect.
JavaScript question
Jasconius
sword criminalmad onlineRegistered User regular
sword criminalmad onlineRegistered User regular
I have been creating some various link constructs and effects template for my coworkers, since they are not to quick with JavaScript and CSS.
Right now I am trying to integrate Adobe Spry effects into CSS driven drop down menus, that operate off of the :hover selector.
Basically my problem is that Spry works off of toggles on a single element (a single element ID I should say), so when I apply it to the primary navigation element, it will successfully transition the navigation in. The problem is that since the Spry toggles on the onmouseover event handler, as soon as you move to select one of the fly outs, the navigation retracts (doh?). I tried using the display:block; technique, to extend the main element downward invisibly, but for some reason, the JavaScript conflicts with it, and either produces layout bugs or simply doesn't work.
TL;DR
How do I create a Javascript event handler that activates when a single element is hovered over, but doesn't retract until a certain group of elements is no longer being hovered over.
Or at least if someone can point me in the right direction, thanks.
Oh, here is the code.
HTML File
Stylesheet, if deemed relevant.
Right now I am trying to integrate Adobe Spry effects into CSS driven drop down menus, that operate off of the :hover selector.
Basically my problem is that Spry works off of toggles on a single element (a single element ID I should say), so when I apply it to the primary navigation element, it will successfully transition the navigation in. The problem is that since the Spry toggles on the onmouseover event handler, as soon as you move to select one of the fly outs, the navigation retracts (doh?). I tried using the display:block; technique, to extend the main element downward invisibly, but for some reason, the JavaScript conflicts with it, and either produces layout bugs or simply doesn't work.
TL;DR
How do I create a Javascript event handler that activates when a single element is hovered over, but doesn't retract until a certain group of elements is no longer being hovered over.
Or at least if someone can point me in the right direction, thanks.
Oh, here is the code.
HTML File
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/SpryEffects.js" ></script>
<link rel="stylesheet" href="includes/flyout_style.css" type="text/css" />
</head>
<body>
<ul class="nav">
<li class="navitem" onmouseover="Spry.Effect.Blind('blind', {duration: 1000, from: '0%', to: '100%', toggle: true});" onmouseout="Spry.Effect.Blind('blind', {duration: 1000, from: '0%', to: '100%', toggle: true});">
<a href="#" style="">Blind Effect</a>
<ul id="blind">
<li>
Flyout 1
</li>
<li>
Flyout 2
</li>
<li>
Flyout 3
</li>
<li>
Flyout 4
</li>
<li>
Flyout 5
</li>
</ul>
</li>
<li class="navitem">
<a href="#" onclick="Spry.Effect.AppearFade('fade', {duration: 500, from: 0, to: 100, toggle: true}); Spry.Effect.Slide('fade', {duration: 250, from: '0%', to: '100%', toggle: true});">Fade In/Out</a>
<ul id="fade" style="float:left;">
<li>
Yes
</li>
<li>
Flyout 1
</li>
<li>
Flyout 2
</li>
<li>
Flyout 3
</li>
<li>
Flyout 4
</li>
<li>
Flyout 5
</li>
</ul>
</li>
<li class="navitem">
Dropdown 3
</li>
</ul>
</body>
</html>
Stylesheet, if deemed relevant.
body {
}
.nav {list-style : none; margin-left : 0px; float:left;}
.navitem {position:relative; float: left; width : 130px; background-color : #ccc; display: block;}
.navitem a {display : block; padding : 5px;}
.nav li ul { width : 130px; margin : 0px; padding : 0px; margin-top : 0px; padding-top : 0px; list-style: none; display: none; overflow : hidden;}
.nav li ul li { background-color : #00ff00; color : #000; display: block; padding : 5px; }
this is a discord of mostly PA people interested in fighting games: https://discord.gg/DZWa97d5rz
we also talk about other random shit and clown upon each other
we also talk about other random shit and clown upon each other
Jasconius on
0
Posts