Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

How to get this to load last?

 <script type="text/javascript">
  jQuery(document).ready(function(){
   jQuery("div.domTip_tipBody").mouseover(function(){
   jQuery("#yyy a.tippy_link").css("background-color","yellow");});  

   jQuery("div.domTip_tipBody").mouseout(function(){
   jQuery("#yyy a.tippy_link").css("background-color","red");
 }); 
 });  
 </script>

It is running before "div.domTip_tipBody" is being run (which is generated by a shortcode) so nothing happens.

I have tried:

<script src="script.js" type="text/javascript" defer="defer"></script>

in my header.php before

</head> 

but it doesn't help.

Have seen "window.onload =" but not sure how to apply it.

Any insight is appreciated.

Thanks

share|improve this question
    
Use wp_footer to put this is the footer area. Read how: codex.wordpress.org/Plugin_API/Action_Reference/wp_footer –  Rutwick Gangurde Apr 2 '12 at 3:35
add comment

5 Answers

up vote 0 down vote accepted
add_action('wp_footer','myscript_in_footer');
function myscript_in_footer(){
?>
<script type="text/javascript">
  jQuery(document).ready(function(){
   jQuery("div.domTip_tipBody").mouseover(function(){
   jQuery("#yyy a.tippy_link").css("background-color","yellow");});  

   jQuery("div.domTip_tipBody").mouseout(function(){
   jQuery("#yyy a.tippy_link").css("background-color","red");
 }); 
 });  
 </script>
<?php
}
share|improve this answer
    
Thanks you Rajeev, I tried your code and it to put the js at the bottom, I know have two ways of doing this. js sill not working for on the output of my shortcode, so it must be a different issue. –  Tim Apr 2 '12 at 14:11
    
Directly dumping this into footer is the wrong way to do it. –  kaiser Apr 24 '12 at 18:41
add comment

This might be a 'little' late, but just in case anybody is still looking:

http://css-tricks.com/snippets/jquery/run-javascript-only-after-entire-page-has-loaded/

Nice and simple way of doing it!

share|improve this answer
add comment

This looks like a jQuery event delegation issue. If the new DOM elements are added after the page has loaded, jQuery wont read them. So you need to tell jQuery before hand to bind an event if any such element exists now or in future.

try $.delegate('div.domTip_tipBody','mouseover', function(e){ jQuery("#yyy a.tippy_link").css("background-color","yellow");}); });

See http://api.jquery.com/delegate/ , http://lab.distilldesign.com/event-delegation/

share|improve this answer
    
Hello Rashid, thank you for your response I am hopeful that this will solve my problem. I tried this add_action('wp_footer','myscript_in_footer'); function myscript_in_footer(){ ?> $.delegate('p','mouseover', function(e){ jQuery("#yyy a.tippy_link").css("background-color","yellow");}); $.delegate('p', function(e){ jQuery("#yyy a.tippy_link").css("background-color","red"); }); });</script> <?php } I change "div.domTip_tipBody" to "p" to check if the function is working, it is not. Can you see what need to be Changed so that it works? –  Tim Apr 3 '12 at 19:13
    
Please Read this one instead. Thank you for your response I am hopeful that this will solve my problem. I tried this add_action('wp_footer','myscript_in_footer'); <script type="text/javascript"> jQuery(document).ready(function(){ ?> $.delegate('p','mouseover', function(e){ jQuery("#yyy a.tippy_link").css("background-color","yellow");}); $.delegate('p', function(e){ jQuery("#yyy a.tippy_link").css("background-color","red"); }); });</script> <?php } I change "div.domTip_tipBody" to "p" to check if the function is working, it is not. Can you see what need to be Changed so that it works? –  Tim Apr 3 '12 at 19:20
add comment
  1. Put the code inside a file named your_name.js.
  2. Add the following to your functions.php file:

    function wpse47618_load_script_last()
    {
        wp_enqueue_script( 'zzz_your_name', get_stylesheet_directory_uri().'your_name.js', array( 'jquery' ), '0', true );
    }
    add_action( 'wp_enqueue_scripts', 'wpse47618_load_script_last', 99999 );
    
  3. Check your pages source code if the script was added successfully and if the path to the file is correct. If you use FireBug or other dev tools, click the filename and see it the script content is there.
  4. You're done.
share|improve this answer
    
Thank you Kaiser, this put the script at the bottom, for some reason the js is still not reading the selectors out put by the shortcode, it works for everything else though! –  Tim Apr 2 '12 at 14:11
    
n/p. Note, that this then would be a question for SO. I'd try to simply use the console in your FireBug/Chrome dev bar/IE dev tools, etc. Just write console.log( jQuery( 'div' ) ); and you'll see if the selection worked. –  kaiser Apr 2 '12 at 14:13
    
Kaiser, I did not know about that functionality, thanks. When using I see these show up div#domTip_tipBox.domTip_Tip, div#this.tipHeader.domTip_tipHeader, div#this.tipBody.domTip_tipBody –  Tim Apr 2 '12 at 16:39
    
Iqnore the above. Kaiser thanks for the response, I did not know about that functionality, thanks. When using it I see these show up div#domTip_tipBox.domTip_Tip, div#this.tipHeader.domTip_tipHeader, div#this.tipBody.domTip_tipBody if I click on them they will take me to css selectors. I have tried using the "raw" output above and the css selectors they send me to but none of the do my js read. Is there anything that can be done to help the js read these selectors? –  Tim Apr 2 '12 at 16:48
    
As I said: That's a Q for SO. But anyway: If you can select them there, then they work. You can also place the console.log() directly in your script and see the console output that. That profes, that the script is working. Then it's something else. so: Give it a try and if not -> SO. –  kaiser Apr 2 '12 at 18:11
show 1 more comment

You can simply add the script to footer.php and it will probably work, but it's not the best way to avoid jQuery conflicts.

The best way is to enqueue the script from a separate file. See http://codex.wordpress.org/Function_Reference/wp_enqueue_script which has a parameter to load scripts in footer via wp_footer .

And see The Developer’s Guide To Conflict-Free JavaScript And CSS In WordPress: http://wp.smashingmagazine.com/2011/10/12/developers-guide-conflict-free-javascript-css-wordpress/

share|improve this answer
    
Thank you songdogtech, the links all added to my understanding, I appreciate it. I will have to look in to js and shortcode as the js is not reading the ont put of my shortcode. –  Tim Apr 2 '12 at 14:11
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.