17

This is my fiddle, http://jsfiddle.net/4vaxE/35/

It work fine in my fiddle.

However, when I transfer it to dreamweaver, it can't work. And I found this two error in my coding.

  1. Uncaught ReferenceError: jQuery is not defined
  2. uncaught referenceerror $ is not defined

I had read before the article related to this two error, and tried to solve according to the method provided, however, it still not working, how can I solve this?

Here is my full coding in dreamweaver

<body>
    <div class="buttons" style="background-color: rgba(0,0,0,.8);">
    <a class="button" id="showdiv1">Div 1</a>
    <a class="button" id="showdiv2">Div 2</a>
    <a class="button" id="showdiv3">Div 3</a>
    <a class="button" id="showdiv4">Div 4</a>
    </div>

    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
</div>
<script language="JavaScript" type="text/javascript" script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

<script language="JavaScript" type="text/javascript">
var selectedEffect="explode";
var options = { percent: 100 };
$('#showdiv1').click(function () {
    $('div[id^=div]').hide();

    $('#div1').show( selectedEffect, options, 500, callback );
});
$('#showdiv2').click(function () {
    $('div[id^=div]').hide();
    $('#div2').show( selectedEffect, options, 500, callback );
});

$('#showdiv3').click(function () {
    $('div[id^=div]').hide();
    $('#div3').show( selectedEffect, options, 500, callback );
});

$('#showdiv4').click(function () {
    $('div[id^=div]').hide();
    $('#div4').show( selectedEffect, options, 500, callback );
});

function callback() {
      setTimeout(function() {
        $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
      }, 1000 );
    };
</script>
</body>
</html>

CSS

<style type="text/css">

.button {
    cursor:pointer;
    display:inline-block;
    margin:10px;
    clip: rect(auto,auto,auto,auto);
}

#div1 {
    background:aqua;
    padding:20px;
    width:100px;
    text-align:center;
    display:none;
}
#div2 {
    background:blue;
    padding:20px;
    width:100px;
    text-align:center;
    display:none;
}
#div3 {
    background:orange;
    padding:20px;
    width:100px;
    text-align:center;
    display:none;
}

#div4 {
    background:green;
    padding:20px;
    width:100px;
    text-align:center;
    display:none;
}
a {
    color:aqua;
    -webkit-filter: grayscale(1.0);
}
a:hover {
    color:red;
    -webkit-filter: grayscale(0.0);
}
</style>
Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184
Soo
  • 241
  • 1
  • 3
  • 8
  • 2
    You have a stray `script` in the middle of the ` –  Jul 25 '14 at 01:30

3 Answers3

42

Cause you need to add jQuery library to your file:

jQuery UI is just an addon to jQuery which means that
first you need to include the jQuery library → and then the UI.

<script src="path/to/your/jquery.min.js"></script>
<script src="path/to/your/jquery.ui.min.js"></script>
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • 1
    thanks a lot~ its work~! – Soo Jul 25 '14 at 01:49
  • 1
    thanks you have saved my day dear (Y) – Mohsin AR Oct 21 '15 at 07:43
  • 1
    LOL I kept thinking the UI was the jquery import and was wondering why I kept getting this error. Read file names carefully – Kiwizoom Jun 09 '16 at 15:09
  • I faced the same issue and as you said (Roko), I have arranged the url in the same order (jquery first, followed by jquery-ui) but with Google CDN and it works perfect! ` ` – Suresh Aug 16 '18 at 12:04
  • Google CDNs can be copied from `https://developers.google.com/speed/libraries/` – Suresh Aug 16 '18 at 12:06
  • What I faced was that I had two different js files referencing jquery.min.js & jquery.ui.min.js exclusively. And the file containing jquery.ui.min.js was referenced first in the HTML file. So the file referencing also should be in the correct order – MubarakZade Aug 02 '21 at 15:32
  • 1
    @MubarakZade Yes. You'd need to make sure that `window.jQuery` or `window.$` exist beforehand - in order for the UI library to work. If in the file where you call exclusively the UI and if `console.log(window.jQuery)` gives you `undefined` you'll need to fix the order. – Roko C. Buljan Aug 02 '21 at 16:41
4

You did not include jquery library. In jsfiddle its already there. Just include this line in your head section.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
sun_dare
  • 1,146
  • 2
  • 13
  • 33
4

You have an error in you script tag construction, this:

<script language="JavaScript" type="text/javascript" script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

Should look like this:

<script language="JavaScript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

You have a 'script' word lost in the middle of your script tag. Also you should remove the http:// to let the browser decide whether to use HTTP or HTTPS.

UPDATE

But your main error is that you are including jQuery UI (ONLY) you must include jQuery first! jQuery UI and jQuery are used together, not in separate. jQuery UI depends on jQuery. You should put this line before jQuery UI:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
João Pinho
  • 3,725
  • 1
  • 19
  • 29
  • 2
    The extra attribute doesn't do anything and the protocol-relative URL is merely a nicety. – user2864740 Jul 25 '14 at 01:32
  • When testing jQuery locally (i.e. no server) don't user relative protocols. – j08691 Jul 25 '14 at 01:35
  • @user2864740 it's a nicety until you work with a site that uses http and later https, and suddenly the browser blocks your http resource (jquery). – João Pinho Jul 25 '14 at 01:35
  • @JoãoPinho It's a nicety; that would be a different problem, if/when it comes up. (Some may argue that a resource should *only* be HTTP or HTTPS, never both.) – user2864740 Jul 25 '14 at 01:37
  • @j08691 hum... why is that? do you think that your 7200rpm hard drive is faster that a web cached file, over my Gigabit Home net connection?! :) – João Pinho Jul 25 '14 at 01:38
  • @user2864740 ok, so you just prefer to stick to the basics and deal with the same problems over and over. nah i prefer to do it right once. – João Pinho Jul 25 '14 at 01:39
  • @JoãoPinho It's not "more right". It is useful in places, yes. But that's all it is. – user2864740 Jul 25 '14 at 01:40
  • No, because if you try and run it locally with a relative protocol URL, it will attempt to load `file://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js` which I'm guessing pretty much no one has as a path on their local system. – j08691 Jul 25 '14 at 01:40
  • @j08691 done that, and didn't happened anything like what you're describing. are you sure? by locally are you meaning opening it from an html outside (local) apache or iis? – João Pinho Jul 25 '14 at 01:44