I'm making super simple theme for WordPress, and I've attached jQuery to it like this:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
And it shows in page source. But the thing is, plugins depending on jQuery don't work on my template and in Firebug console I get error TypeError: $(...).flexslider is not a function as if jQuery weren't loaded.
If I recall correctly, WordPress has issues with shorthand jQuery, so instead of $(...) you'd need to use jQuery(...). If it's the plugin that's trying to use it then you may have to modify the plugin. Pull the js off the server with FTP and do a simple find/replace (search for "$(" replace with "jQuery(").
I was able to solve my issue by inserting jquery-dependent slideshow directly via template (with jquery linked above it in ) instead of by writing post containing shortcode. Perhaps it isnt most elegant solution but time was of the essence.
Related
I'm currently running into an issue when using a package called jQuery Sparklines by Gareth Watts. Does anyone have any experience with this package? It seems to be pretty outdated but some people still use it here..
I am importing the package via script tag in a Flask view using regular ol' script tags:
<script src="/custom/css/JS/jquery-sparklines.js"></script>
And have checked the console to make sure jQuery is also installed and loaded before I load the script tag above.
I noticed the issue when I was trying to emulate the example jFiddle in the docs:
I was able to create a working version of the fiddle myself here but only by adding jQuery 1.9.1 on the extensions dropdown, and then toggling the "migrate 1.1.0" slider in the JS section.. pic here
Even with my example working somewhat, AND importing the same things in my html, the HTML doesn't pick up the custom jQuery function in the external code and get:
$(...).sparkline is not a function
Does anyone have any experience with this library? I've followed the docs but theres something i'm obviously missing.
SOS : ( or maybe reccomend other sparkline packages? : (
Thank you soooo much for your time!
UPDATE:
Still fails to recognize sparkline code with the cdn instead of downloaded files : (
Do not know why, but when I put the sparkline reference right before where I use it, the problem's gone.
It looks like:
<script src="~/Scripts/sparkline/jquery.sparkline.js"></script>
<script type="text/javascript">
var $jq = jQuery.noConflict();
$jq(document).ready(function() {
$jq(".sparkline_bar").sparkline([5,6,7,2,0,-4,-2,4], {
type: 'bar'});
//Some other things.
Solved:
I had JS code that was conflicting with the sparklines code in the tags to initialize the lines.
Fixed by simply initializing the lines FIRST before any other JS stuff.
i want to insert Jquery library in my HTML, but i can't place it on the header of file. I need to include it after some scripts im running.
Do you know any way to do this without getting an error?
You may be trying to call jQuery in a script before your jQuery library file is loaded.
You only have to load jQuery before your scripts that use it. Other scripts that don't use jQuery can go before it if you want.
For example, if you want to include jQuery in a script tag at the end of the body and then include some scripts that use jQuery after that, you can do it that way.
If you are constructing your own site/page then you may be able to control this enough by making sure jQuery is included before the other files. However, if you are using something like WordPress or other dynamic CMS platforms you may not be able to stop something from referencing jQuery before it exists.
Check out this github project for jqShim that might help. You can include the very basic dom ready functionality in the head while moving the bigger/larger/slower/complete jQuery download to the bottom of the BODY (but before any plugins). As long as the code that calls jQuery is doing something like:
jQuery(function($) { ... doing something when ready ... });
Those calls can still be made in the body, after using the jqShim, and will behave as expected. Let me know if it proves to be helpful!
I got a wordpress page where users can add posts from the front_end. For this i use the WP_editor() function.
When I was trying the functions just plain in a new wordpress page I could just use
tinyMCE.activeEditor.getContent();
But now I'm setting everything up as the final product should look like, this means the editor is loaded in a modalbox (using fancybox plugin), and it initalizes fine, and it works. But I can't fetch the content the same way, it just returns me with the following error:
Uncaught ReferenceError: tinyMCE is not defined
I assume this has something to do with the modal box loading the page in an iFrame, meaning the editor isn't there when the javascript code is running. How do I solve this? Can I bind it to something like .live() ?
Seems like such an easy problem, guess I'm just to tired to be thinking clearly today.
Best Regards.
On the Front-End try to use wp_enqueue_script('tiny_mce') before.
In the WordPress version I use the JavaScript object tinymce and not tinyMCE. Try using tinymce.
I just moved my javascript over to jQuery for the simple AJAX functions. However I'm trying to use a lightbox plugin with jQuery since I want to keep the same functionality but don't want to include 10 different libraries.
If i remove the jquery include and keep lightbox, it works great
if i put it back it breaks, it just brings up the full size image instead of the box, neither chrome or firefox's console complains about anything, it just goes straight to the image
I tried 5 different lightbox clones/plugins for jQuery but they all gave me the same behavior, which leads me to think there's something i'm missing
right now my headers look like this (double checked, they're all there):
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/thickbox.js'></script>
<link rel='stylesheet' type='text/css' href='css/thickbox.css' />
and my gallery (php):
foreach(...){
echo "<a href=\"$path\" class='thickbox' rel='$folder'><img border=none src=\"$thumb\" /></a> \n" ;
}
for the background, the images in the foreach are loaded from an ajax call, but this was never a problem with lightbox, it shouldn't be because all the html is there anyway
This is usually because other libraries (not jQuery) also try to use the dollar sign variable name.
There's a setting in jQuery to turn on compatibility mode which will force you to use jQuery() instead of $() to make jQuery calls.
You could also use the jQuery Lightbox Plugin
Just a thought... doesn't LightBox attempt to include it's own copy of jQuery or something similar? IIRC, that might be the cause of your issues...
Try looking at Shadowbox. It has the same kind of effect but has not had issues with JQuery for me. They also have a very similar set up and are pretty easy to switch between.
You can find different ways to resolve conflict here: Using_jQuery_with_Other_Libraries
I'm trying to create a Firefox plugin and I would like to use some jQuery functions. How to include needed jQuery libraries? Some way to include the libraries to the plugin itself?
I need to show a jQuery Dialog type window on various web sites when user clicks a link injected to the page.
Thank you for your answers!
In your overlay.xul file, just include it as if you were including any other Javascript file:
<script type="application/x-javascript" src="chrome://my-firefox-extension/content/path/to/jquery.js" />
I suggest using chrome dialogs instead of jQuery. I've written a similar extension, though I didn't use a jQuery, but dialog code written by myself. The problem is that when you inject your html dialog inside some random page, in many cases it will come distorted because of unpredictable clashes with the loaded site CSS. Even when using inline styles and all other tricks.
In the end, I've looked how Google notebook extension is implemented and used the same idea. It worked great.