14

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
  • 50,328
  • 25
  • 121
  • 168
Soo
  • 211
  • 1
  • 2
  • 8
  • 2
    You have a stray `script` in the middle of the ` –  Jul 25 '14 at 01:30

3 Answers3

36

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
  • 164,703
  • 32
  • 260
  • 278
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,111
  • 2
  • 10
  • 32
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,460
  • 1
  • 15
  • 27
  • 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