I have an out of the box theme that works fine using jquery events to trigger certain effects in both the header and the sidebar parts of the page.  Since there are many pages, I've tried to take those header, sidebar and footer sections, and move the code into external files, which are included with the following javascript strategy:  &lt;html&gt;    &lt;head&gt;      &lt;script src="jquery.js"&gt;&lt;/script&gt;      &lt;script&gt;      $(function{       $("#includedContent").load("b.html");      });     &lt;/script&gt;    &lt;/head&gt;     &lt;body&gt;       &lt;div id="includedContent"&gt;&lt;/div&gt;   &lt;/body&gt;  &lt;/html&gt;   The problem is that when the header and sidebar codes are included using the javascript the jquery events stop working. Is there either a better way to include an external file so that javascripts called in the parent file will affect all elements in the child files? Or, is the something else that I can do?
112
I have a bit of code where I am looping through all the select boxes on a page and binding a .hover event to them to do a bit of twiddling with their width on mouse on/off.  This happens on page ready and works just fine.  The problem I have is that any select boxes I add via Ajax or DOM after the initial loop won't have the event bound.  I have found this plugin (), but before I add another 5k to my pages with a plugin, I want to see if anyone knows a way to do this, either with jQuery directly or by another option.
6562
Consider the following HTML:  &lt;div class="foo" id="obj"&gt;    I should be changed red    &lt;div class="bar" style="color:black;"&gt;       I should not be changed red.       &lt;div class="foo"&gt;I should be changed red.&lt;/div&gt;    &lt;/div&gt; &lt;/div&gt;   Given a DOM element obj and an expression, how do I go about selecting any children and possibly obj?  I'm looking for something similar to "select descendants" but also including the parent, if it matches the expression.  var obj = $("#obj")[0];  //wrong, may include siblings of 'obj' $(".foo", $(obj).parent()).css("color", "red");  //wrong -- excludes 'obj' $(".foo", obj).css("color", "red");  //correct way, but it's annoying var matches = $(".foo", obj); if ($(obj).is(".foo")) matches = matches.add(obj); matches.css("color", "red");   Is there a more elegant solution to this?
51647
My web application uses jQuery and some jQuery plugins (e.g. validation, autocomplete).  I was wondering if I should stick them into one .js file so that it could be cached more easily, or break them out into separate files and only include the ones I need for a given page.  I should also mention that my concern is not only the time it takes to download the .js files but also how much the page slows down based on the contents of the .js file loaded.  For example, adding the autocomplete plugin tends to slow down the response time by 100ms or so from my basic testing even when cached.  My guess is that it has to scan through the elements in the DOM which causes this delay.
77310
My company has purchased a product that renders an ASP.NET control on the page. This control uses jQuery 1.2.3 and adds a script tag to the page to reference it. The developers of the control will not support use of the control if it modified in any way (including modification to reference a different version of jQuery).  I'm about to start development of my own control and would like to use the features and speed improvements of jQuery 1.3. Both of these controls will need to exist on the same page.  How can I allow the purchased control to use jQuery 1.2.3 and new custom development to use jQuery 1.3? Also out of curiosity, what if we were to use an additional control that needed to reference yet another version of jQuery?
88066
The client I am working with has a frameset like so...  &lt;frameset rows="100,*, 0"&gt;   &lt;frame name="theFrame" id="theFrame" src="blah.html" &gt;   &lt;frame name="theSecondFrame" id="theSecondFrame" src="foo.html" &gt;   &lt;frame name="importantFrame" id="importantFrame" src="myFrame.html" &gt; &lt;/frameset&gt;   When a certain action takes place I need my frame (importantframe which is currently hidden) to mostly take over the page and block any interaction with the other frames. I'm planning on blocking interaction using the jquery block UI plugin.  The problem is I can't actually change the foo.html or blah.html files. So the JS code cannot live there. What I need to do is execute my jquery code in the context of those frames. So just to recap, I need my JQuery code to live in myFrame.html but execute in the context of the other frames. How can I do that? Hope that makes sense.  Thanks CDR
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?
84450
I am making a site with a lots of JS, and I am wondering where I should put the JS code. Optimally I would like to keep the JS with each module and not the theme layer. Some content could be exposed as blocks etc.   But I am having some issues with the cache. In my example I need to add JS &amp; CSS to the node edit form. I have used hook_block_view, but it is cached. So if there is an error in the node edit form, the drupal_add_js &amp; drupal_add_css functions are not called. The same seems to be true for hook_node_prepare.  Where would you input the JS &amp; CSS layer? and are there hooks that get's called even if there is an error in the node edit form?
19010
My  script has now gained quite a following (and it - allegedly - just got bust by upgrading to jQuery 1.7.1). This is a personal request to the team to consider adopting it.   Not that I don't wish to keep on maintaining it, but the next step (allowing users to define one global set of comments to be used across all their sites*) is pretty awkward for me to implement "from the outside", but would be comparatively trivial for the team (I believe).  Goes off to fix script...  * Note: I have a beta half-version of this; it requires   userscripts, and allows you to push/pull between "local" (site-specific) and "global" storage. And even if I get the global sharing 'properly' working, it would still only be for a given machine.
121420
I have put together the following mootools script   window.addEvent('domready', function() {     var shouts = "timed.php";     var log = $('log_res');     function updateData (url,target)     {         new Ajax(url,{         method: 'get',          update: $(target),          onComplete: function() {         log.removeClass('ajax-loading');}  }).request();         log.empty().addClass('ajax-loading');     }      var update = function(){ updateData ( shouts, 'log_res' ); };     update();           // call it immediately     update.periodical(10000);   // and then periodically   });   heres the html  &lt;div id="AJAX"&gt;     &lt;h3&gt;Ajax Response&lt;/h3&gt;     &lt;div id="log_res"&gt;exercise&lt;/div&gt; &lt;/div&gt;   its using moo 1.1.  The above works fine, the page loads then the ajax request kicks in div id log_res has a class of ajax-loading whilst its updating, and when its finished the text exercise in the div is replaced with whatever the ajax has returned (yippee). But I want to put some custom HTML into the div WHILST the page is loading, because the ajax-loading class is not enough to contain the information, i also want to put a spinny flasher into the div whilst the ajax request is retrieving the information. Hope that makes sense!
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;?
81099
I am tryin to create expand and collapse functionality between pageblocks.The scenario is when i click the collapse button in one pageblock ,it should render another pageblock.How this can be achieved ? I tried using java script but the pageblock is not displaying properly. My current code is   &lt;apex:page &gt;   &lt;apex:includeScript value="{!$Resource.jqueryCollapse}"/&gt;   &lt;apex:includeScript value="{!$Resource.jqueryCollapse1}"/&gt;    &lt;apex:includeScript value="{!$Resource.jqueryCollapse2}"/&gt;    &lt;apex:form &gt;    &lt;html&gt;    &lt;head&gt;     &lt;script type="text/javascript"&gt;      $(function(){     $(".header").click(function () {        alert("Loopafe");    $header = $(this);        $content = j$header.next();         $content.slideToggle(100, function () {                 $header.text(function () {                     return $content.is(":visible") ? $(this).attr("src",      "https://c.ap1.visual.force.com/resource/1404298250000/Minus") : $(this).attr("src", "https://c.ap1.visual.force.com/resource/1404298250000/plusimg");     });  });     });  });  &lt;/script&gt;  &lt;style&gt;    .container .content {   display: none;  padding : 5px;  }  &lt;/style&gt; &lt;/head&gt; &lt;apex:pageBlock &gt; &lt;apex:pageBlockSection columns="10" collapsible="True" &gt;            &lt;div class="container"&gt;     &lt;img   src="XXg"class ="   header " /&gt;           &lt;div class="content"&gt;          &lt;apex:pageBlock &gt;            &lt;apex:pageBlockSection columns="5"  &gt;         &lt;apex:outputLabel value="Collapse"  id="theSecond1"/&gt;         &lt;apex:inputText /&gt;         &lt;/apex:pageBlockSection&gt;                     &lt;/apex:pageBlock&gt;    &lt;/div&gt;    &lt;/div&gt;         &lt;apex:outputText value="First" id="theFirst"/&gt;         &lt;apex:InputText /&gt;      &lt;/apex:pageBlockSection&gt;     &lt;/apex:pageBlock&gt; &lt;body&gt;  &lt;/body&gt;  &lt;/html&gt;    &lt;/apex:form&gt;   &lt;/apex:page&gt;
48199
I've got this pretty simple HTML page with a jQuery datepicker:      &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt;     &lt;title&gt;jQuery Datepicker&lt;/title&gt;     &lt;link rel="stylesheet" href="../App_Themes/Default/ui.datepicker.css" type="text/css"         media="screen" title="Smoothness" /&gt;      &lt;script src="../Shared/Scripts/jquery-1.2.6.min.js" type="text/javascript"&gt;&lt;/script&gt;      &lt;script src="../Shared/Scripts/jquery-ui-1.5.3.min.js" type="text/javascript"&gt;&lt;/script&gt;      &lt;script language="javascript" type="text/javascript"&gt;         $(document).ready(PageLoad);          function PageLoad() {             $('#textBox').datepicker();         }     &lt;/script&gt;  &lt;/head&gt; &lt;body&gt;     &lt;input type="text" id="textBox" /&gt; &lt;/body&gt; &lt;/html&gt;   The datepicker itself seems to work perfectly but I can't apply my theme. Am I missing something really stupid here?  Thanks !!!!
39796
I must have something set up incorrectly in my custom theme. jQuery is loading and works fine elsewhere on the same page in a views slideshow using jquery.cycle. My custom JavaScript however reports that $ is not a function.   The info.yml file includes the global-scripts property.  The libraries.yml file contains the following code.    js:     js/script.js: {}   dependencies:     - core/jquery   The content of js/script.js is the following.  $(document).ready(function () {     $(window).on('load scroll', function () {         var scrolled = $(this).scrollTop();         $('#layer-1').css('transform', 'translate3d(0, ' + -(scrolled * 0.25) + 'px, 0)'); // parallax (25% scroll rate)     }); });   The first line in script.js returns the error in the console. It is the only error I receive.   I checked the page source and confirmed that jQuery is being loaded before script.js at the bottom of the page below the footer.   Can anyone see what I have done wrong here?
12325
The question was asked many times in many ways, but unfortunately is not covered well in most of the answers. I'm having the same issue doing things using include-files.  In my TwentyFourteen child theme's functions.php I used:  require_once get_stylesheet_directory_uri() .'/admin-panel/theme-options.php';   And I'm using . I've used it in many of my projects, the same way mentioned here, without having the error. But recently I'm having the issue in several of my projects. If I take the code to functions.php then everything's fine. But it's occurring only when I'm trying to include/require external file.  I'm having the error:     Fatal error: Call to undefined function add_action() in C:\xampp\htdocs\project\wp-content\themes\my-theme\admin-panel\theme-options.php on line 2   In this case I'm having the error using a child theme (of T14). But even in one of my parent theme I'm facing the issue. But in the same environment my other projects are running well with all the includes and/or requires (where several add_action()s are defined). I'm having issues in ALL the add_action() calls, like CPT assigning, Custom Taxonomy assigning etc. But I'm successfully developing another two projects including external files from inc/ folder where all my CPTs are assigned and their meta boxes too.  I tried reinstalling WordPress, deactivating all my plugins, tried from Child Theme, tried only the same thing by modifying TwentyFifteen (applying default theme), tried require(), require_once(), include(), include, require_once, and require one after another with failure. And I'm using WP 4.1.1 in all the good and problematic installs.  Majority of the previous questions are answered with a simple line:     As the message says, you haven defined the function add_action() and yet you're trying to use it.   But,   how come (isn't it already defined by WordPress)? and why it's differing project to project in the same environment (How come it's out of the scope now only in particular project[s])?
69421
I am trying to add this script (Marc Anderson's blog) to AllItems.aspx.  Please guide me where it needs to go and what needs to be done to make it work.  Thank you.  &lt;script language="javascript" type="text/javascript" src="../../jQuery%20Libraries/jquery-1.4.2.min.js"&gt;&lt;/script&gt; &lt;script language="javascript" type="text/javascript" src="../../jQuery%20Libraries/jquery.SPServices-0.5.4.min.js"&gt;&lt;/script&gt; &lt;script language="javascript" type="text/javascript"&gt; $(document).ready(function() {     var userDepartment = $().SPServices.SPGetCurrentUser({         fieldName: "Department"     });     $("input[Title='Department']").val(userDepartment); var userPhone = $().SPServices.SPGetCurrentUser({     fieldName: "WorkPhone" }); $("input[Title='Phone']").val(userPhone); }); &lt;/script&gt;
66496
I'm using Spring's MVC with JSP views. Every JSP page has similar structure - headers, content, footers, perhaps a sidebar, etc. Looking around for "best practices" people seem to "include" footers and headers, but that means that every JSP page includes these "include" statements, giving a fixed format. To my eye a better solution would involve nested views, where a base template is extended with information appropriate to the page in question. One advantage of this approach is that you can have default values assumed in the base template without repeating them elsewhere. Another advantage is that you can further separate structure and content ("header" and "footer" being structural, and so belonging in the base template) in pages which contain a lot of text (think of help pages - you could put all that in the database, but why bother, especially since with Spring you can resolve to different views via the locale?).  There doesn't seem to be any support for this at the MVC level in Spring, but it could be implemented in JSP using custom tags and, indeed, there's a rather clunky attempt  (that might explain what I want better than this question, although I think you could make it less intrusive).  Anyway, my question is - does this already exist as a (popular/standard) tag library? I'm happy writing custom tags, but my impression of this stuff (generating web sites) is that there's a huge range of solutions already out there, with most work going into choosing the correct tools (eg Spring). Thanks.
72166
I have some HTML and jQuery that slides a div up and down to show or hide` it when a link is clicked:  &lt;ul class="product-info"&gt;   &lt;li&gt;     &lt;a href="#"&gt;YOU CLICK THIS TO SHOW/HIDE&lt;/a&gt;     &lt;div class="toggle"&gt;       &lt;p&gt;CONTENT TO SHOW/HIDE&lt;/p&gt;     &lt;/div&gt;   &lt;/li&gt; &lt;/ul&gt;   $('div.toggle').hide(); $('ul.product-info li a').click(function(event){   $(this).next('div').slideToggle(200); }   My question is: How do I use preventDefault() to stop the link acting as a link and adding "#" to the end of my URL &amp; jumping to the top of the page?  I can't figure out the right syntax, I just keep getting an error saying      preventDefault() is not a function.