CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggable
vulpcod3z
vulpcod3z

Reputation: 194

jQuery ui not recognized

Specifically, I have a div container that holds another div, which has its background image set. What I am trying to accomplish is to make a drag/scrollable map, similar to the Google Maps design, minus the zoom ability. In my fiddle, there is no flaw in this. My local files, however, do not allow this drag/scroll ability. I use Google's developer links for jQuery/UI and still no avail. Also, I use Dreamweaver CS6 for local development. Any help would be great. Thanks

HTML:

<div id="container">
<div id="drag"></div>
</div>

CSS:

#drag {
width: 1000px;
height: 1100px;
background-image: url(http://www.shepherd.edu/university/visitors/images/campus.jpg);
}

#container {
width: 300px;
height: 200px;
overflow: hidden;
border: 2px solid green;
}

JS:

$(document).ready(function() {
$('#drag').draggable();
})

Upvotes: 0

Views: 663

Answers (1)

cssyphus
cssyphus

Reputation: 40038

This may not be your problem, but on the off-chance that it is:

jQuery code will not work without the library being referenced on your page (usually in the <head> tags).

Also, there are some other libraries that build on top of the jQuery library, like Twitter's excellent bootstrap library, or jQueryUI. In those cases, you need both the jQuery library and the additional library -- as shown for jQueryUI in the first example below.

There are a few options for including jQuery libraries on your page.

CDNs (Content Delivery Networks) are online storage locations where web pages can grab the specified code, without you needing to store it on your server. This is why a CDN is a good idea.

One: 1. Use a CDN:

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
</head>

Two: 2. Download the jQuery script:

  • Go here: http://jquery.com/download/
  • Click on the version you want
  • When you see the code in your browser, save that into a text file
  • It is simplest to just store the jquery.js file in your webroot (usually public_html), but you can store it anywhere (and name it anything you want -- you just have to use the same name/location when you reference it in your <script> tag.
  • Below example has it stored in a subdir called js

  • Include it in your head tags, thus:

Three: 3. A combination of the above, with fallback

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script> window.jQuery || document.write('<script src="../js/jquery-1.10.2.min.js"><\/script>')</script>

The above code does this:

a. Load the jQuery library from the CDN
b. IF the CDN did not load, then load the jQuery from the specified location on my server (Note that the jQuery library must also be available on your server, at the location specified).

Notes:

  • There are two forms of the jquery.js code that you can use: minified and regular. The difference is that the minified code loads faster, but the regular code code is human-readable. Use whichever one you wish. If you decide to customize the jQuery library for your own purposes some day, you will want to edit the human-readable one.

Upvotes: 1

Related Questions