Databases
StackOverflow2013
Postsdbo
POPrevent all slideUp functions from firing on one element only
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPrevent all slideUp functions from firing on one element only
    text
    copied!<p>I created a drop-down menu but the menu is designed so that it can easily be changed without any HTML knowledge. Hence, the navigation tabs and the drop-down menu's are not within the same elements. </p> <p>Also all the navigation tabs are separate elements (so that the pages can be edited, deleted, or created without HTML knowledge), hence to call each element is as follows:</p> <p>The navigation tabs are: </p> <pre><code>#PageList1 ul li:first-child, #PageList1 ul li:first-child + li #PageList1 ul li:first-child + li + li </code></pre> <p>etc</p> <p>The drop-down menu's are: </p> <pre><code>#Label1 #Label2 #Label3 </code></pre> <p>etc</p> <p>As a result, when #PageList1 ul li:first-child is hovered, #Label1 is triggered to slideDown. etc</p> <p>In order for this to work without any drop-down menus (#Labels) staying open, I had to put slideUp events on the #Label1 (and all other #Label id's) when the mouse hovered certain areas: #main, #header, or another #Label.</p> <p>Now I am working a certain page using conditional tags and I need to remove all slideUp events from a certain dropdown-menu (#Label1). </p> <p>Is there a way to this? </p> <p>Since slideUp events are not part of a bind, I cant use unbind, detach, or remove all slideUp events. </p> <p>I tried to get something like this to work (but no luck):</p> <p>(<a href="https://stackoverflow.com/questions/7814408/clearing-a-jquery-document-ready-call">Clearing a jquery document.ready() call</a>)</p> <p>(<a href="https://stackoverflow.com/questions/12793028/prevent-jquery-ready-handlers-from-firing">Prevent jQuery ready handlers from firing</a>)</p> <p>To get around it, I tried to clone the #Label1 and appendTo a new div, hoping it would remove all triggered events attached to #Label1 but nope.</p> <p>HTML:</p> <pre><code>&lt;b:widget id='PageList1' locked='false' title='' type='PageList'&gt; </code></pre> <p>Then further down in a seperate continaerr is: </p> <pre><code>&lt;b:section class='main' id='blank' showaddelement='yes'&gt; &lt;b:widget id='Label1' locked='false' title='' type='Label'&gt;....&lt;/b:widget&gt; &lt;/b:section&gt; &lt;b:section class='label-wrapper' id='house' showaddelement='yes'&gt; &lt;b:widget id='Label2' locked='false' title='' type='Label'&gt;...&lt;/b:widget&gt; &lt;/b:section&gt; &lt;b:section class='label-wrapper' id='garage' showaddelement='yes'&gt; &lt;b:widget id='Label3' locked='false' title='' type='Label'&gt;...&lt;/b:widget&gt; &lt;/b:section&gt; </code></pre> <p>etc...</p> <p>Jquery:</p> <pre><code>$(document).ready(function(){ $("#PageList1 ul li:first-child a").hover(function(){ $("#Label1").slideDown(130); }); $("#Label1").mouseleave(function(){ $("#Label1").slideUp(130); }); }); </code></pre> <p>etc...</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload