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
Related
I am building a page using jQuery UI tabs, and I am seeing some effect, but not what is intended. The UL used to store the tab headings is wired up so that the UL and tab contents are part of the same larger DIV. The console contains diagnostic info of some description, but no reported errors in my code, others' code, resource loading, etc. I've checked the links to JavaScript/CSS and they all point to real resources that look like JavaScript/CSS:
<link href='//fonts.googleapis.com/css?family=Averia+Serif+Libre:400,700,400italic,700italic' rel='stylesheet' type='text/css' />
<link href='/jquery-ui-1.12.0.custom/jquery-ui.css' />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/javascripts/bgstretch.js"></script>
The display, in terms of presentation one would expect of CSS, just what one would see without any attempt to apply jQuery UI. The debugger, however, does display added classes that one would expect of jQuery UI turning a UL and some DIVs into a tabbed display, for instance:
Living Room
The original element is unadorned:
Living Room
What can / should I be doing so jQuery tabs are behaving normally?
http://codepen.io/anon/pen/BzxbqY
Did you include the jquery ui css?
I stripped out all your scripts and used
$(document).ready(function(){
$("#tabs").tabs();
});
I included jquery then jquery ui, and
this
jquery ui css file.
A working version is here (based on your code):
https://jsfiddle.net/g3o7chw1/1/
I think the issue may be the ui theme css. When I use the regular theme cdn it seems to work fine:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css
I think it is because your scripts CDN src link does not have the http protocol.
Instead of:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
You should have:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
It looks like you have two problems. First, if the code you pasted is accurate, you have a problem in the call to the ready() method:
;(jQuery.ready(function()
{
jQuery('#tabs').tabs();
}()));
which as you say doesn't produce any errors. However, it doesn't do anything either! Cleaning off superfluous parens and semicolons, your code looks like this:
jQuery.ready(function()
{
jQuery('#tabs').tabs();
});
Now, the problem here is that you aren't saying what needs to be ready before you call the tabs() method, because you don't specify a selector that you're applying the ready() method to. This means that your tabs() method never gets called.
With the ready() method, the selector should always be document. So, if you change your code to this:
jQuery(document).ready(function(){
{
jQuery('#tabs').tabs();
});
you'll find that your tabs() function gets called. You'll notice that JD E and John Detlefs substitute $ for jQuery, which is common (nearly ubiquitous, in fact) shorthand, but otherwise this is how they have it as well. This is the conventional way to call ready(). (There are two equivalent syntaxes (yours isn't one of them) which you can read about here.)
Your second problem appears to be a compatibility issue: your directory structure suggests that you are using jquery-ui.js v. 1.11.4 and jquery-ui.css v. 1.12.0. If so, you will definitely have problems, because 1.12.0 implemented a lot of breaking changes. Have a look at this document. In it, in the section under tabs, you'll find this:
The tabs widget now adds the ui-tabs-tab class instead of the inconsistently named ui-tab to each tab element.
If you in fact have the different versions of the .js and .css files suggested by your directory structure, you'll probably have the .js file applying a ui-tab class, and the .css file looking for classes with ui-tabs-tab. So you won't get the styling, unless they put in backward compatibility. Which they haven't in some cases. (Update: looking at the link that JD E provides in his answer, I don't see any evidence of this change. There are several references to ui-tab and none to ui-tabs-tab. Since 1.12.0 was only released three weeks ago, maybe it's a documented change that never actually occurred, and they haven't had time to undocument it yet. But I'd still get my versions consistent if I were you.)
I would suggest that you make sure that your jquery-ui.js and jquery-ui.css files are the same version. If you don't need to support IE, I'd suggest going to 1.12.0. If you do, then you'll need to research which versions of jQuery UI support which versions of IE. (1.12.0 dropped support of IE 10 and older versions.) Also, your version of jquery.js is three years old at this point and you might consider upgrading. The latest version is now 3.1.0 (recently released), 2.2.4 has been around for a while.
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.
Alright guys, I'm trying to get a handle on Jquery, but now that I"m actually implementing it, I'm finding it hard to get it to return anything. As in, I am not even entirely sure if I'm loading it correctly or if I have some random typo keeping anything from working. I will qualify that I added a simple Javascript code in the bottom with a document.write to ensure the javascript file was indeed linked. It worked fine.
If I click the h1, nothing happens. Regardless of the Jquery command I enter even if it is just inside $(document).ready, it will still do...nothing.
Here is the actual Jquery/Javascript:
$(document).ready(function() {
$("h1").click(function() {
$(this).animate({color:blue}, 'fast');
});
});
Here is where I am calling it in the HTML (below).
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
The .js script is indeed called script.js and in the same directory as the HTML. I'm a bit new to both so this could well be a very newbie mistake.
There is an error in your code, you'd be best to use some Developer Tools while testing to catch these.
Uncaught ReferenceError: blue is not defined
the line:
$("h1").animate({color:blue}, 'fast');
expects blue to be a variable, you need to make it a string.
$("h1").animate({color:'blue'}, 'fast');
Also as mentioned by dystroy you need the plugin or the jQuery UI files. Additional notes from the documentation:
Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.
From the documentation :
All animated properties should be animated to a single numeric value,
except as noted below; most properties that are non-numeric cannot be
animated using basic jQuery functionality (For example, width, height,
or left can be animated but background-color cannot be, unless the
jQuery.Color() plugin is used).
That's the main problem : if you try your code with a numeric property, it works.
If you really want to animate colors, I'd suggest to use the mentioned plugin.
Ok guys, three questions here. They are all pretty noobish, but I just want to get your guys' thoughts on them.
1) When writing a jquery script, should I include type?
IE:
<script type="text/javascript" charset="utf-8">
//Jquery here
</script>
or is just an opening and closing script tag acceptable?
2) I know it's a best practice to include all JQuery just before the closing body tag, but does this also mean I include the actual jquery.js file just before body as well?
3) What if my page is reliant on jquery to look how it should (not just action events/ajax/etc). For example, I'm using a jquery plugin called datatables, which sorts through my specified database and automatically paginates/sorts/etc. I find that because I include all the scripts after the DOM loads, I see a raw format of the datatable until my datatables.js file and corresponding constructor loads. Would it be acceptable to include this before my body loads, so that this doesn't happen?
Including the type(type="text/javascript") is the best practice, though in HTML5 it's not needed as it's the default. In HTML 4 it's mandatory, but all modern browsers will read the script content as javascript if not specify, but it's still invalid according to the spec. You can read more here: Which is better: <script type="text/javascript">...</script> or <script>...</script>
Putting the jQuery script in the head is a good option, but it's not mandatory, it just have to be above all other scripts using the jQuery library.
Regarding to the plugin, it's hard to tell without seeing your code, and knowing how the plugin works. You can try move all the scripts to the <head> and see if it helps you. (It might still have the same effect if the plugin waits for the DOM ready. )
I'm trying to create a simple portfolio site for a friend of mine based around his drawings and paintings. The layout is relatively simple but is proving to be very difficult to implement. I have three jquery scripts on the page that each perform a specific function.
1) bgStretcher - Stretches a series of background images to fill a user's window.
2) collapse - Simple collapsable menu system
3) galleryview - Basic no frills slideshow gallery
Currently, bgstretcher and collapse are on one page called nav.shtml (http://yungchoi.com/nav.shtml) and the gallery on gallery.shtml(http://yungchoi.com/gallery.shtml). Seperatley they work fine, but when I call the nav page via SSI (test.shtml), The code seems to run into problems and becomes disabled.
The solutions I've found all lead to utilizing the noConflict function in jquery (http://stackoverflow.com/questions/2656360/use-multiple-jquery-and-jquery-ui-libraries), (http://hubpages.com/hub/How-to-use-jQuery_noConflict), but everytime I've tried inserting it and changing my code, everything gets messed up again. I've also organized each script's files into separate folders and directories but that hasn't helped either.
My experience is in graphic and web design, so my coding skills are not the greatest. I do know the basics, but rewriting jquery code was not something I ever learned so I might not be understanding how to correctly fix this problem. If someone could clearly and easily explain what I would need to do to make these all work together, I'd appreciate it greatly.
Thanks!
You still have multiple versions of jQuery being loaded in your page.
Remove:
<script type="text/javascript" src="support/bgstrecher/jquery-1.3.2.min.js"></script>
and
<script src="support/collapse/jquery-1.2.1.min.js" type="text/javascript"></script>
you should also remove:
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
& - (because you only need either the packed or unpacked version, not both)
<script type="text/javascript" src="galleryview/jquery.galleryview-2.1.1.js"></script>
See if that helps.
You only need noConflict if you're going to also use other libraries that are similar to jQuery like MooTools, Dojo or Prototype. It's unlikely you will need to & if you do, you will need to recode to use the jQuery function instead of the $.
The issue it appears you're having is that all these jQuery includes are overwriting the previous version of jQuery which the plugin attached to and thus the function no longer exists when you call it.
Why are you loading Jquery twice ?
First the 1.4.2 min file and then the full blown straight after ?
You still have multiple calls to jQuery (even if files are not in same directories).
In the same way, you call "galleryview/jquery.galleryview-2.1.1.js" twice (the second file is just packed).
By the way, my error console tell me that:
"Error: jQuery.timer is undefined
Source File: http://yungchoi.com/galleryview/jquery.timers-1.2.js
Line: 135"
Are you sure you need this timer plugin? For now, it seems you have too many script included. Try to remove all unneeded files (you should keep only one version of jquery. But if some plugins you used is not compatible with, you'll have more and more compatibility problems).