Develop Reference

What else do I need to do to plug in jQuery UI?

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.

Script on parent site not working on child site: $.Deferred is not a function

I have a website that is built off a parent site, and needs to be as identical as possible. My clients have a process through which they grab all the scripts and css files of the parent site and use them to create the child. For one of these websites though, I am getting an error in the main javascript file that is not happening on the parent site.
Here are the two websites:
parent site
child site
The main issue is that the carousel at the top of the page (I believe it's using slickslider) is not getting initialized on the child site. I am not sure if this is because of the Javascript errors, and if you can figure out the reason why it's not working I will be super grateful as that is the main issue at hand. That said, I'm assuming right now that my problem is the javascript error in main.js:
Uncaught TypeError: l.Deferred is not a function
Again, there are no errors on the parent site, but l.Deferred breaks on the child site. Why isn't it working?
I tried wrapping l in jQuery -- $(l).Deferred -- but when I did this it seemed to cause a loop, where the page would spend several minutes trying to load before timing out and crashing.
If you can tell me why the slider on my child site isn't working, or at the very least why l.Deferred is breaking, that would be a huge help.
EDIT: Update to use the correct version of jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>jq11 = jQuery.noConflict(true);</script>
<script src="/sites/all/themes/wma2/js/main.js"></script>
(function($){
window.matchMedia || (window.matchMedia = function(){....
})(jq11);
UPDATE: I checked the console and $.fn.jQuery is using the jquery 1.11.2 at the point when it says l.Deferred is not a function
I also tried wrapping l in the correct jquery:
jq11(l).Deferred
but when I do that the page gets stuck in a loop and crashes after trying to load for several minutes.

I'm not 100% sure what "process through which they grab all the scripts and css files of the parent site and use them to create the child" means, but the client page is at least at some point loading jQuery 1.4.4 (check the first of the last 3 included scripts in the head).
$.Deferred wasn't introduced until jQuery 1.5, https://api.jquery.com/jquery.deferred/ so trying to run anything using 1.4.4 will throw an error because that function, indeed, doesn't exist there.
One of the last scripts on the page loads another entire copy of jQuery, and THAT one, 1.11, does support Deferreds. But it's almost the last thing to run on the page, so almost no code uses it. So you have an old jQuery, then code that tries to use a method in a newer jQuery, and then finally a newer jQuery. That's why jQuery and $ aren't even assigned to the same thing, as you can confirm in the console:
jQuery.fn.jquery: "1.4.4"
$.fn.jquery: "1.11.2"
It's possible that you have code that uses old 1.4.4 syntax, so you may not be able to replace it, but it's probably best, if you do need both versions, to wrap all your code explicitly in an IIFE
(function($){
/* code using $, which maps to whatever is specified at the end*/
})(jQuery);
that specifies which of the two you mean to use.

How do I use Twitter Bootstrap with Google Maps v3?

I want to include Twitter Bootstrap's Tabbed Menus within a Google Maps project that is currently coded completely in javascript. Because Twitter relies on jQuery, I'm not sure how to use both of them together.
When I try to import jQuery using this <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> none of my page will render anymore.
I think I might have to use a plugin like jQuery-ui-map, but it would take too long to manually recode the whole site into jQuery (if that's what I have to do). Is there a way to import bootstrap and jquery just for the purposes of the tabbed menu, but leave the rest of the site in javascript?

When you added the jQuery <script> tag in your test page, you removed the <script> tag that loads your own script. That's why your load() function is undefined.
Your current code is:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>
//<![CDATA[
var gmarkers = [];
var infoWindow = new google.maps.InfoWindow;
...
See how there's no <script> tag beginning your own script?
With regard to your question about needing a jQuery plugin to use the Maps API with jQuery, no, you definitely don't need one. I use jQuery and the Maps API together all the time. Consider this: What is a jQuery plugin? JavaScript code! Nothing else. Anything a jQuery plugin does, you can do in your own code.
(I suppose one could imagine that there may be some special bookkeeping that is needed to make jQuery and the Maps API work together, but that just isn't the case. jQuery doesn't care what's inside your map container.)
As #geocodezip mentioned, if you find the map working but odd things happening with the formatting of elements inside the map (e.g. the pan/zoom control gets clipped), check for CSS selectors that affect too many elements, such as:
img {
/* anything here is dangerous! */
}
A selector like that will affect images inside the map, which should be left alone by your CSS. It doesn't look like you have this problem in your current working test page, just something to be aware of if it happens.
Also, just an unrelated tip, you don't need type="text/javascript" on your <script> tags, nor type="text/css" on your <style> tags.

Prototype-UI interrupts with my current code, can't fix it!

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.

Combining Multiple jQuery Scripts

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).