Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   Where to insert code for jquery plugins ? (http://forum.bytesforall.com/showthread.php?t=3374)

twola Sep 10, 2009 01:10 PM

Where to insert code for jquery plugins ?
 
Would it be the "HTML Inserts: Header"? Even though I only need it on certain pages?

Thanks

Flynn Sep 15, 2009 05:10 PM

Add jQuery code to js.php after

jQuery(document).ready(function(){

Eric Bobrow Jan 17, 2010 06:51 PM

I am trying to use jQuery to show an overlay image the first time a visitor enters the site, then fade it after a few seconds or when the visitor clicks on the entry image. I worked most of the mechanics and code out on a test page, and am now trying it on one of my WP sites which has Atahualpa 3.4.2 loaded.

I can't seem to get the jQuery code to execute. I followed the directions to paste it in right after the line with:
jQuery(document).ready(function(){

My first simple test is to hide a DIV that floats in front of the page that has an ID of "entryImage". My code is very simple:
$("#entryImage").hide();
When that didn't do anything, I added a simple alert line to see if I could get something to execute, but I didn't get the alert popup that I expected:
alert("hello");
For the record, here is the context, with the lines above and below what I added just to show exactly where it is placed. Any help would be greatly appreciated!
jQuery.noConflict();
jQuery(document).ready(function(){

$("#entryImage").hide();
alert("hello");

/* For IE6 */

Eric Bobrow Jan 23, 2010 11:18 PM

I figured this out myself, and will post a couple of comments so that others may benefit from what I learned.

jQuery scripting is often written with the $ variable aliased to the jQuery function, however this can sometimes cause conflicts with other Javascript libraries. Flynn put in a line of code that I didn't understand (and originally ignored) that takes away that alias or shortcut to avoid potential problems:
jQuery.noConflict();
Because of this, I had to rewrite my code to use the full jQuery reference:
$("#entryImage").hide();
became instead
jQuery("#entryImage").hide();
Once I figured this out, I was on my way. I still have a lot to learn, but now I can get jQuery code working on any page on the site by placing it in the js.php file.

One suggestion: since this code would be lost if / when I upgrade to a later version of Atahualpa, perhaps an option for jQuery coding could be added into the ATO in a way similar to the CSS inserts. This would also make it very clear where to add the code, and could include documentation that informs users that they need to use jQuery() instead of $() syntax.

I hope this little explanation and my suggestion are helpful.


All times are GMT -6. The time now is 03:44 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.