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.
Related
I'm working in a JSF 1.2 application that uses Richfaces 3.3.3. I'm stuck with jQuery 1.3.2 as a result. To compound this, the$variable appears to be unused as it does not work in a component javascript function or within a <script> tag. I don't think it's even set. Whenever jQuery is invoked, it's done asjQuery(...). This works out fine most of the time, but now I find myself needing a later version of jQuery for a particular component, and I cannot seem to get it imported without breaking things.
The page in question extends a template that is shared by many pages. Everything that extends this template is nested in an<a4j:form>. I cannot make major changes to it. About the best I can do is put a<ui:insert>in the<head>of the main template. Then I can use a<ui:define>in other pages to slip the new jQuery version into the head. This almost works, but it breaks some Richfaces components, particularly some client-switched <rich:tab>elements on the page (they do nothing when clicked, no mouseover styling), and I get a boatload of javascript errors in the console. Other javascript/jQuery functions work just fine. jQuery.noConflict()doesn't help. I'm not sure if other components are using$behind the scenes, though.
This is a rough idea of what I'm doing:
<ui:define name="jQueryOverride"> //Inserted in the <head> of the main template
<script type="text/javascript">
var $132 = jQuery;
</script>
<script type="text/javascript" src="../jquery-1.8.2.min.js" />
<script type="text/javascript">
var jqry = $;
jQuery = $ = $132;
</script>
</ui:define>
When I add someconsole.log()statements to check the jQuery version, everything checks out. 1.3.2 is set for both$andjQuery, while jqry is set to 1.8.2. The log statements show up prior to the errors in the console.
I'm not sure how to go about this as it seems the JSF implementation is a bit unconventional on these pages and the usual methods of using a second version of jQuery don't seem to work.
If you take a look at this page http://50.87.6.244/~storeupp/index.php/basketball/lebron-james-dwyane-wade-dual-signed-basketball.html you will notice that everything works great except for the little red arrow that is in the footer. This arrow is suppose to expand an additional footer area. This worked fine until I added the infortis cloudzoon scripts which are:
http://50.87.6.244/~storeupp/js/infortis/jquery/jquery-1.7.1.min.js
http://50.87.6.244/~storeupp/js/infortis/jquery/jquery-noconflict.js
http://50.87.6.244/~storeupp/js/infortis/jquery/plugins/cloud-zoom.1.0.2.min.js
The cloudzoon is what makes the product image larger when hovered over. I also see in the source files that there is a second cloudzoom script and a different version of jquery being called first. I am not sure what the exact issue is here and how to fix it.
Any help would be greatly appreciated.
You references jQuery library twice: the first occurence references the 1.6.2 version : <script type="text/javascript" src="http://50.87.6.244/~storeupp/js/etheme/dresscode/jquery-1.6.2.min.js"></script> and then, after a few js files dependent on jQuery you add adding another one script element for 1.7.1 version: <script type="text/javascript" src="http://50.87.6.244/~storeupp/js/infortis/jquery/jquery-1.7.1.min.js"></script>
Try to replace the 1.6.2 script element with 1.7.1
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. )
After 3 days of working on one 'Dragable Windows Interface' i discovered that the core isn't allowing me to make more than one window on a page.
I decided to switch to Prototype-UI interface but it seems like it interrupts with my current Jquery code, any ideas how to fix this?
This is the error that Web Console shows me when i attach Prototype-UI JS files:
[16:39:42.443] $("BODY") is null # http://XXX.XXX/smart_panel/res/main.js:4
so basically this is the code that makes the problem: (Jquery bg image stretcher).
$(document).ready(function(){
// Initialize Backgound Stretcher
$('BODY').bgStretcher({
images: ['images/spb3.jpg'], imageWidth: 1360, imageHeight: 765
});
});
After i've tried to delete this i got another error on the next JQuery plugin ($('#dock2') is null).
And its really frustrating to try over and over again when you are not a JavaScript pro (I think the practice is the best learning process tho).
So after deleting those three lines:
<script type="text/javascript" src="res/prototype.js"></script>
<script type="text/javascript" src="res/effects.js"></script>
<script type="text/javascript" src="res/window.js"></script>
Which is the files of Prototype-UI everything is normal again and i get no errors, so is there any way that this interface was designed to work as a standalone without any other JS/JQ scripts? I don't think so and that's why i need your help.
Here is the link to Prototype-UI: http://docs.prototype-ui.com/trunk
If there is no way to fix it, can someone please suggest a GOOD Dragable windows plugin that will allow me to create multiply resizeable-dragable windows on a page? :\
Best Regards,
Rico S.
If you're trying to use jQuery and Prototype in the same page, you're going to have to deal with the fact that only one of them will win out in the fight for "$". It sounds like you're importing Prototype after jQuery, which means that your code that expects "$" to be the jQuery master function is actually the Prototype "getElementById" shortcut.
I don't remember whether Prototype has a conflict prevention hook, but jQuery definitely does. What you can do is after importing the jQuery library, add a small <script> block like this:
<script> jQuery.noConflict(); </script>
After that point, the libraries can co-exist, but all your code that wants to do jQuery stuff will have to use the function name "jQuery" and not "$".
You may want to look into the jQuery UI widget collection. There's a "dialog" widget in there that is (or can be) draggable and resizeable. Whether multiple such dialogs can be present on the page concurrently, I don't know, mostly because that's a bad user interface pattern (in my opinion) and I'd never do it.
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).