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.
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>
This question is related to
jquery
jquery-ui
referenceerror
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>
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">
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>
Source: Stackoverflow.com