I have a jQuery script that shows an animated counter on page, but the script starts on page load, and I need it to be loaded when the user scrolls down to a specific &lt;div&gt;.  &lt;script&gt;          $({countNum: $('#counter').text()}).animate({countNum: 63  }, {           duration: 3000,           easing:'linear',           step: function() {             $('#counter').text(Math.floor(this.countNum));           },           complete: function() {             $('#counter').text(this.countNum);            }         }); &lt;/script&gt;   This script need to be executed when I scroll to this specific &lt;div&gt; on a page.  &lt;div id="counter"&gt;&lt;/div&gt;
7213
I'm loading elements via AJAX. Some of them are only visible if you scroll down the page. Is there any way I can know if an element is now in the visible part of the page?
56249
I have a web app that has a universal HTML header include, so I'd like to put page-specific scripts in each page instead of having it load for everything. I tried putting document.ready() near the end of the &lt;body&gt; of a page and it seems to be working fine. Are there any potential hazards to putting it there instead of inside the &lt;head&gt;?
7912
In jQuery I need to do an if statement to see if $this doesn't contain the class '.selected'.  $(".thumbs").hover(function(){  $(this).stop().fadeTo("normal", 1.0); },function(){ $(this).stop().fadeTo("slow", 0.3);  });   Basically when this function is run (on hover) I don't want to perform the fades if the class '.selected' has been appended to the div, this will mean that the image will be at full opacity to signify that it's selected. Searched on Google to no luck even though it's a simple question of how to use an IF statement...
1554
I need to warn users about unsaved changes before they leave a page (a pretty common problem). window.onbeforeunload = handler  This works but it raises a default dialog with an irritating standard message that wraps my own text. I need to either completely replace the standard message, so my text is clear, or (even better) replace the entire dialog with a modal dialog using jQuery. So far I have failed and I haven't found anyone else who seems to have an answer. Is it even possible? Javascript in my page: &lt;script type=&quot;text/javascript&quot;&gt;        window.onbeforeunload = closeIt; &lt;/script&gt;  The closeIt() function: function closeIt() {   if (changes == &quot;true&quot; || files == &quot;true&quot;)   {       return &quot;Here you can append a custom message to the default dialog.&quot;;   } }  Using jQuery and jqModal I have tried this kind of thing (using a custom confirm dialog): $(window).beforeunload(function () {     confirm('new message: ' + this.href + ' !', this.href);     return false; });  which also doesn't work - I cannot seem to bind to the beforeunload event.
37689
We are using jQuery  to dynamically display an iframe when someone clicks on a picture.  In this iframe, we are using  a javascript library to display multiple pictures.  The problem seems to be that $(document).ready in the iframe seems to be fired too soon and the iframe content isn't even loaded yet, so galleria code is not applied properly on the DOM elements.  $(document).ready seems to use the iframe parent ready state to decide if the iframe is ready.  If we extract the function called by document ready in a separate function and call it after a timeout of 100&nbsp;ms. It works, but we can't take the chance in production with a slow computer.  $(document).ready(function() { setTimeout(ApplyGalleria, 100); });   My question: which jQuery event should we bind to to be able to execute our code when the dynamic iframe is ready and not just it's a parent?
92799
Several of my pages use both JQuery and Protoype. Since I upgraded to version 1.3 of JQuery this appears to be causing problems, because both libraries define a function named '$'.  JQuery provides a function noConflict() which relinquishes control of $ to other libraries that may be using it. So it seems like I need to go through all my pages that look like this:  &lt;head&gt;           &lt;script type="text/javascript" src="/obp/js/prototype.js"&gt;&lt;/script&gt;     &lt;script type="text/javascript" src="/obp/js/jquery.js"&gt;&lt;/script&gt; &lt;/head&gt;   and change them to look like this:  &lt;head&gt;           &lt;script type="text/javascript" src="/obp/js/prototype.js"&gt;&lt;/script&gt;     &lt;script type="text/javascript" src="/obp/js/jquery.js"&gt;&lt;/script&gt;     &lt;script type="text/javascript"&gt;         jQuery.noConflict();         var $j = jQuery;     &lt;/script&gt; &lt;/head&gt;   I should then be able to use '$' for Prototype and '$j' (or 'jQuery') for JQuery. I'm not entirely happy about duplicating these 2 lines of code in every relevant page, and expect that at some point somebody is likely to forget to add them to a new page. I'd prefer to be able to do the following    Create a file jquery-noconflict.js which "includes" jquery.js and the 2 lines of code shown above Import jquery-noconflict.js (instead of jquery.js) in all my JSP/HTML pages   However, I'm not sure if it's possible to include one JS file in another, in the manner I've described? Of course an alternate solution is simply to add the 2 lines of code above to jquery.js directly, but if I do that I'll need to remember to do it every time I upgrade JQuery.
60845
I have used this jquery script on many of my sites with the same theme, settings, etc.  It's in a wordpress Genesis Child theme.  On my current local build, however, when I click on an a href that has the class "scroll", I am getting a console error that reads:    Line 19 of my app.js is this code that I have never had an issue with before:  $(".scroll").click(function () {         if (location.pathname.replace(/^\//, "") === this.pathname             .replace(/^\//, '') &amp;&amp; location.hostname === this.hostname         ) {             var target = $(this.hash);             target = target.length ? target : $("[name=" + this                 .hash.slice(1) + "]");             if (target.length) {                 $("html, body").animate({                     scrollTop: target.offset().top                 }, 1000);                 return false;             }         }     });   I am running jQuery 3.3.1. I have commented out all code in the app.js to identify where the issue may be coming from. This code is right at the top and I have added console.logs all over the document, which show in Console.  What am I doing wrong here?  Thank you!
93089
The DMG contains spell scrolls (on page 200), with the following rule:     If the spell is on your class's spell list, you can use an action to read the scroll and cast its spell without having to provide any of the spell's components.   This is all well and good for spells with a casting time of 1 action (which admittedly is most of them), but for spells with a bonus action casting time, how is it supposed to work?  Does it require:   Both an action and a bonus action?  Just an action? Just a bonus action? Something else I haven't thought of?   In case it needs saying, I'm not interested in speculation here - only RAW-based answers or explicit statements of developer intent should apply.
121438
I am using jQuery library in my visual force page, but I've faced a major problem when I tried to use tabs "apex:tabPanel".  &lt;script src="{!$Resource.jQuery}"&gt;&lt;/script&gt; &lt;!-- If I delete this script the tabs work !! --&gt;  &lt;apex:tabPanel tabClass="activeTab" inactiveTabClass="inactiveTab"&gt;   &lt;apex:tab label="Tab#1" id="tab1"&gt;&lt;/apex:tab&gt;   &lt;apex:tab label="Tab#2" id="tab2"&gt;&lt;/apex:tab&gt; &lt;/apex:tabPanel&gt;   I get a "JS" errors in the console when I try to click on any tab, but if I delete jQuery library it works. So I guess there is a conflict between jQuery and apex:tabPanel functionality.    Here's what I got in the console   Uncaught ReferenceError: initViewstateTab is not defined  Uncaught TypeError: Object [object Object] has no method 'dispatchEvent'  Uncaught ReferenceError: initViewstateTab is not defined  event.returnValue is deprecated. Please use the standard event.preventDefault() instead. Uncaught TypeError: Object [object Object] has no method 'hasClassName'  Uncaught TypeError: Cannot call method 'replace' of undefined
56440
I'm running a script that it requests entering 'y' on each operation, I am looking for a solution like $ ./script &lt; echo 'yyyyyyyyyyyyyy' to pass all my inputs in one time.
54685
In the module I am developing I need to add script which require jQuery.The will be added depending on configuration settings. Hence I am using template_preprocess_module(&amp;$variables) where I am trying to add script by doing something like this:  function template_preprocess_module(&amp;$variables) {   if (TRUE) {     $variables['jquery'] = ?;     $variables['script'] = 'path to script in module';   } }   Then in the template I will simply be rendering these variable in the head section. But I am facing trouble in adding jQuery, because I don't know its source (obviously I know its source in core but I need something over here which automates path). Can the source be known by using something like drupal_get_path() ? I am also not sure if this is the best way to add script conditionally, any suggestion regarding this? Thanks.
58450
I have a link on a long HTML page. When I click it, I wish a div on another part of the page to be visible in the window by scrolling into view.  A bit like  EnsureVisible in other languages.  I've checked out scrollTop and scrollTo but they seem like red herrings.  Can anyone help?
63292
I develop Joomla websites/components/modules and plugins and every so often I require the ability to use JavaScript that triggers an event when the page is loaded.  Most of the time this is done using the window.onload function.  My question is:    Is this the best way to trigger JavaScript events on the page loading or is there a better/newer way? If this is the only way to trigger an event on the page loading, what is the best way to make sure that multiple events can be run by different scripts?
30421
I would like to delay a hover event in jquery.  I am reading from a file when user hovers over a link or label.  I don't want this event to occur immediately in case the user is just moving the mouse across the screen.  Is there a way to delay the event from firing?  Thank you.  Example code:  $(function() {     $('#container a').hover(function() {         $('&lt;div id="fileinfo" /&gt;').load('ReadTextFileX.aspx',             {filename:'file.txt'},             function() {                 $(this).appendTo('#info');             }          );     },         function() { $('#info').remove(); }     }); });   UPDATE: (1/14/09) After adding the HoverIntent plugin the above code was changed to the following to implement it.  Very simple to implement.  $(function() {     hiConfig = {         sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)         interval: 200, // number = milliseconds for onMouseOver polling interval         timeout: 200, // number = milliseconds delay before onMouseOut         over: function() {             $('&lt;div id="fileinfo" /&gt;').load('ReadTextFileX.aspx', {filename:'file.txt'},                 function() {                    $(this).appendTo('#info');                 }              );         }, // function = onMouseOver callback (REQUIRED)         out: function() { $('#info').remove();  } // function = onMouseOut callback (REQUIRED)     }     $('#container a').hoverIntent(hiConfig) }
39474
I am creating a chat using Ajax requests and I'm trying to get messages div to scroll to the bottom without much luck. I am wrapping everything in this div: #scroll {     height:400px;     overflow:scroll; }  Is there a way to keep it scrolled to the bottom by default using JS? Is there a way to keep it scrolled to the bottom after an ajax request?
107747
Please bear with me because I am new to utilizing Wordpress PHP this way. I have the following script:  &lt;div id="content"&gt; &lt;?php     // check if the repeater field has rows of data     if( have_rows('repeat_field') ):         $i = 0;          // loop through the rows of data         while ( have_rows('repeat_field') ) : the_row();             $i++;              // display a sub field value             if (!empty(get_sub_field('feature_image_post'))) {                  echo '&lt;a href="';                 the_sub_field('restaurant_article_link');                  echo '"&gt;';             }              if( $i &gt;= 78 ) {                 break;             }                     endwhile;     else :         // no rows found     endif;     ?&gt;     &lt;/div&gt;     &lt;div id="loading-image" style="display: none;"&gt;&lt;/div&gt;     &lt;div id="part2"&gt;&lt;/div&gt;     &lt;script&gt;          var w = $(window);         window.onscroll = function(ev) {             if ($(document).height() - w.height() == w.scrollTop()) {                  $('#loading-image').show();                 $.ajax({                     url: "&lt;?php echo get_stylesheet_directory_uri();?&gt;/post-2.php",                     cache: false,                     success: function(result){                       $("#part2").html(result);                     },                     complete: function(){                       $('#loading-image').hide();                     }                 });             }         };     &lt;/script&gt;   The the Php page that I am trying to load pretty much contains the same code . It just stops after loading 200 fields.   &lt;?php     // check if the repeater field has rows of data     if( have_rows('repeat_field') ):         $i = 0;         // loop through the rows of data         while ( have_rows('repeat_field') ) : the_row();             $i++;             // display a sub field value             if (!empty(get_sub_field('feature_image_post'))) {                 echo '&lt;a href="';                 the_sub_field('restaurant_article_link');                  echo '"&gt;';             }              if( $i &gt;= 200 ){               break;             }                      endwhile;     else :         // no rows found     endif; ?&gt;   I don't know why the php page (post-2.php) is not loading. The strange thing is that when I replace &lt;?php echo get_stylesheet_directory_uri();?&gt;/post-2.php with a test html page &lt;?php echo get_stylesheet_directory_uri();?&gt;/test.html The test page (test.html) loads.  I have to say that I looked on in my console using the console tab of my browser added console.log(); to view any errors and I'm not getting any errors. I also looked in my networked tag to ensure that post-2.php loaded properly and I'm not getting errors. My goal is to find out why my PHP page isn't loading  ***** Update ***** I'm being told to use $post_id but I've never used it. Does anyone have a working example of this? Would it be similar to if( have_rows('repeat_field', $post_id) ): or if( have_rows('repeat_field', 55612) ): ?
75034
I have an input form that lets me select from multiple options, and do something when the user changes the selection. Eg,  &lt;select onChange="javascript:doSomething();"&gt;   &lt;option&gt;A&lt;/option&gt;   &lt;option&gt;B&lt;/option&gt;   &lt;option&gt;C&lt;/option&gt; &lt;/select&gt;   Now, doSomething() only gets triggered when the selection changes.  I want to trigger doSomething() when the user selects any option, possibly the same one again.  I have tried using an "onClick" handler, but that gets triggered before the user starts the selection process.  So, is there a way to trigger a function on every select by the user?  Update:  The answer suggested by Darryl seemed to work, but it doesn't work consistently. Sometimes the event gets triggered as soon as user clicks the drop-down menu, even before the user has finished the selection process!