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>
Improve this question
1
  • 2
    You have a stray script in the middle of the <script> tag that loads your jQuery UI code. Commented Jul 25, 2014 at 1:30

3 Answers 3

Reset to default
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>
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

thanks a lot~ its work~!
LOL I kept thinking the UI was the jquery import and was wondering why I kept getting this error. Read file names carefully
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! <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Google CDNs can be copied from https://developers.google.com/speed/libraries/
@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.
|
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">
Improve this answer

1 Comment

thanks a lot~ its work~
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>
Improve this answer

9 Comments

The extra attribute doesn't do anything and the protocol-relative URL is merely a nicety.
When testing jQuery locally (i.e. no server) don't user relative protocols.
@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ã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.)
@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?! :)
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.