Databases
StackOverflow2013
Postsdbo
POHow to stop jQuery slidetoggle yo-yo?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to stop jQuery slidetoggle yo-yo?
    primarykey
    data
    text
    <p>I am new to jQuery but this seems like it should work just fine:</p> <pre><code>$(document).ready( function() { $("#btn_toggle_transcript").click( function() { $("#transcript_container").slideToggle(1000); } ); } ); </code></pre> <p>...and it does work, but not correctly. ...at least, not as expected...</p> <p>Am I correct in assuming that the above code would add a click handler to the element with an ID of "btn_toggle_transcript"? This click handler, then, would respond to the click by either opening the targetted div (...with the id of "transcript_container") if it is closed, or closing it if it is open?</p> <p>What is currently happening is this: clicking the button does, indeed, make the div slide open. BUT, when it is fully open, it IMMEDIATELY - and with no user input - slides closed again.</p> <p>I have seen a few forum posts suggesting the possible cause is the handler getting added twice. However, if I comment out the above code, no action is taken when the button is clicked. So, the handler is not getting added anywhere else...</p> <p>Can ANYONE please tell me why my div is yo-yoing closed by itself?</p> <p>The HTML for the button:</p> <pre><code>&lt;div id="tools_button_container"&gt; &lt;div class="tools_button" id="btn_toggle_transcript"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>The HTML for the sliding div (content is set dynamically):</p> <pre><code>&lt;div id="transcript_container"&gt; &lt;div id="transcript_contents"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>And the CSS:</p> <pre><code>#transcript_container{ z-index:4; position:absolute; width:290px; max-height:455px; top:51px; right:-2px; background-color:#90B2D8; padding:20px 10px 10px 10px; border-bottom: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000; display:none; } #transcript_contents{ max-height:375px; overflow:auto; margin:20px 0px 10px 0px; background-color:#ffffff; padding:0px 5px 0px 5px; } #btn_toggle_transcript { background: url('images/transcript.png') no-repeat 0 0; display:block; } #circle_btn_toggle_transcript:hover { background-position: 0px -50px; } </code></pre> <p>==========</p> <p>EDIT:</p> <p>I did three things that seem to have helped. Why they worked, I do not know, but they do.</p> <p>1) Drupal 6.x uses an old version of jQuery (1.2.2). There is a module to update to 1.3.2. I replaced the 1.3.2 update files with the 1.7.1 files and now my DOM reports using v1.7.1 of jQuery.</p> <p>2) &amp; 3) Despite the fact that I only bind to the click event ONCE (verified by removing the binding and having no action invoked on a button click), I decided to try adding a line to remove my "phantom" binding before I add my actual binding. Based on my reading, I have decided to use the now recommended on() and off() methods to add/remove the bindings. My ready() function now looks like this:</p> <pre><code>$(document).ready( function(){ $("body").off("click", "#btn_toggle_transcript"); $("body").on("click", "#btn_toggle_transcript", function(){ $("#transcript_container").slideToggle(1000); } ); } ); </code></pre> <p>Now, my sliding div opens and stays open until I toggle it closed again. Yay!</p> <p>A big thank you to all who answered/commented. Your suggestions and guidance helped me get to a solution.</p> <p>Cheers!</p> <p>UPDATE: As I mentioned in one of the comments, this is running inside Drupal. As also mentioned, if I commented out the single binding, no action was invoked. My reasoning was that since the removal of ONE binding ceased to invoke the action, then there was no way it was being bound twice...</p> <p>DUMB!</p> <p>While I was correct that there was only one block of binding code, I completely forgot that my module was already adding my js file to the page. Because I need to deploy my content in non-drupal environments as well, I was also manually adding the js file to my page. ...two inclusions meant two bindings. ...that's a few days I'll never get back!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USPrpl_Ppl_Etr
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to stop jQuery slidetoggle yo-yo?
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POHow to stop jQuery slidetoggle yo-yo?
      1. USAndrei
      1. VTFavorite
    1. COWith just the code posted, this works fine http://jsfiddle.net/FSYEv/ there must be something which is not in this question which is causing the problem.
      singulars
      1. POHow to stop jQuery slidetoggle yo-yo?
      1. USJames Montagne
    2. COI was just about to say that all of this is operating inside of Drupal, so there exists the possibility that there IS someting going on in the background that is causing the problem. I just don't have any idea where to look or how to find out.
      singulars
      1. POHow to stop jQuery slidetoggle yo-yo?
      1. USPrpl_Ppl_Etr
    3. COThis may sound strange, but does anything change if you put in event.stopPropagation(); ?
      singulars
      1. POHow to stop jQuery slidetoggle yo-yo?
      1. USCoronus
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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