I'm trying (and for the most part succeeding) to use the tipsy jQuery plugin in my greasemonkey script. I am using the #require meta tag to import the jquery and tipsy js, and it works, but with a couple caveats which I'm trying to overcome.
Accessing elements as a pure jQuery object fails, so I'm relegated to using DOM functions to get my elements:
//this fails
$('#login').find('a:first').tipsy();
//while this succeeds
$(document.getElementById('login').getElementsByTagName('a')[0]).tipsy();
Anyone know why? Need more info? TIA!
I think it's because inside Greasemonkey, jQuery has a different default context than the document. Try this:
$("#login", document).find('a:first').tipsy();
Related
How can I debug a third party JavaScript plugin.
I am using a plugin called content timeline and that used JavaScript to display posts.
So, I want to target a heading that shows the timeline month, but for some reason, nothing works on any element.
Tried this:
$("h4.t_line_month").addClass('example');
However, if I add
console.log("the script works");
I see the message in the console.
Unfortunately, there is nothing much I can tell other than the fact that I am not being able to access the plugin elements for some reason.
Are there ways that I use to debug this?
perhaps some rule being set in WordPress or in the plugin itself.
Have no idea how to debug this.
Try using jQyery each() function to itterate all of the h4 tags on your page to see if its even there.
$('.testimonial').each(function(){
console.log($(this).html()); // debug to see which is which
});
Also if the WP plugin you are using is creating an iFrame... this could be the cause of you not being able to directly access the element you need.
I am creating a plugin which uses the jQuery fullCalender.
The code appears to all be working fine however when the page fully loads and my shortcode populates its appropriate html and javascript I get the following error:
So from this I can gather that jQuery resolves ok - but somehow the calendar does not? Can somebody please help me! It may be because I am using OptimizePress which might be including its own copy of jQuery - and my plugin is also including a copy of jQuery and the calendar. But I dont know how to make sure i reference my own jQuery or make this work.
Thanks!
The answer was to use wp_register_script and wp_enqueue_script to add the script to my generated document
I'm using Gantry template on Joomla! that has bootstrap integrated into it. I wanted to use the bootstrap javascript components, like lightbox, tabs. I added jQuery (no conflict) as mootools is already loaded, and then added the required code. But, it doesn't work as expected. I set up a test page at http://v2.marlownailandbeauty.co.uk/index.php?option=com_content&view=article&id=47&Itemid=127
Neither the tabs, nor the lightbox work (just below youtube vid). I can't see any JS errors, just wondering why it might not be working? Any bright ideas? :)
Looking at your code quickly, it seems to me that you load:
jQuery
JQuery no conflict
Mootools
Various other Mootools scrripts
To the best of my understanding, it's recommended to load jQuery (no conflict) after Mootools and all the other scripts have loaded: source http://docs.jquery.com/Using_jQuery_with_Other_Libraries
ie:
jQuery
Mootools
Various other Mootools scrripts
JQuery no conflict
A couple of ways to test this quickly. You could edit the template file directly and change the order, or use an extension like jQuery Easy to load the no conflict scripts.
Or a third option ... have you checked if you even need Mootools in your template? You could use an extension to disable mootools and see what happens. If you are lucky your template will still work well and your site will load faster. And it's easy enough to reverse if mootools is indeed needed.
Good luck!
I'm loading a jQuery script dynamically into random pages.
Sometimes they support jQuery, sometimes they have other libraries and sometimes they don't have any library at all..
I need to support all cases, therefore, first I check if jQuery has loaded.
Case not, I load jQuery dynamically into the page using .noconflict (to avoid conflicts in case there are other libraries there, daahhh) and then just continue with my script.
Case it's already been loaded, I need to know if the page has triggered the .noconflict function or not.
Why ? it's simple.
Let's say a random page have both Prototype and jQuery (happens, yes).
The webmaster trigger the .noconflict mode for the jQuery, to avoid conflicts with it.
After that, I trigger my script, and check if jq has been loaded (yes).
And then, I have to know weather to use $() or jQuery() methods, since if I'll continue using $() I might access the Prototype handler,
And I don't want that.
.noConflict only removes the $ object and not the jQuery object. (Except if you add true as first parameter.
So you can always use jQuery()
you can use:
jQuery(function( $ ){
//Insert your javascript code here
});
and all of your jQuery code will be in these braces and will never conflict with other prototypes.
As everyone else said, you should just always default to using the full jQuery object instead of the alias. If it's a quantity-of-typing issue, use $ and then find-replace in your text editor before pushing to live.
...But if you absolutely, positively MUST do this the ridiculous way, it's simple:
if ($ == jQuery) { alert("YAY"); }
Here's an example I cooked up on JSFiddle using jQuery 1.8 and a separately-loaded MooTools 1.4.5: http://jsfiddle.net/fL9rk/2/
Run it once, then unload the external MooTools and try again.
Don't say we didn't warn you.
I am trying to use FormCheck for MooTools to validate a basic contact form I am planning to build. The problem is I can't seem to set up the script to work at all =(
If anyone knows about FormCheck or MooTools and can add any pointers they would all be greatly recieved.
My website is here: http://ryanis.me/
You are using jquery AND mootools on the same page? Why would you do that, it's a bad practice and bad form to stuff your users for two frameworks for what is a small page without anything complex. that aside, are you using the noconflict mode in either framework (note that this is only available since mootools 1.2.3 and requires some changes in the source code of the plugins, probably better off namespacing jquery)
first of all, you have a mootools domready function then you do inline js on the body tag onLoad...
then at the bottom of the source, you try the mootools domready again...
then you embed an accordion script (something that mootools can have built in as part of mootools-more). not sure what you use jquery for but you really need to structure your page better and pick a single framework.
the error you are getting in the formcheck js implies that either this.form is undefined (at time of evaluation $("contactform") was not available or that this.form.getElements() is not a valid method, which would imply that the mootools element prototype is not working. once again, are you using the noconflict mode?
it really needs refactoring and rethinking...
If you are using jQuery you may want to check out various jQuery plugins that will do form validation for you. The validation plugin works pretty well. If you want to use jQuery and MooTools together, you probably need to make sure that you are using jQuery in noConflict mode.