JQuery Undefined Error

Question

I need to Perform image sliding. I am using the following code.

My Javascript

<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<link href="Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
 $(".hero").cycle({
 fx: 'scrollDown',
 timeout: 7000,
 pause: 1,
 pager: '#slideshow-nav div'
 });
</script>

Source:-

<div class="page-slideshow narrow">
 <div class="hero">
 <img src="Image\img1.jpg" width="460" height="235" alt="" />
 <img src="Image\img2.jpg" width="460" height="235" alt="" />
 <img src="Image\img3" width="460" height="235" alt="" />
 <img src="Image\img4" width="460" height="235" alt="" />
 </div>
 <div id="slideshow-nav">
 <div>
 </div>
 </div>
</div>

CSS

body
{
}
#slideshow-nav
{
width: 700px;
height: 30px;
position: absolute;
z-index: 999;
bottom: 0;
left: 11px;
text-align: center;
text-decoration:none;
}
#slideshow-nav a
{
background: transparent url('../Image/bullet_grey - 1.png') 0 0 no-repeat;
width: 26px;
height: 26px;
text-indent: -999px;
display: inline-block;
text-decoration: none;
margin: 7px;
text-indent: -9999px !important;
margin: 7px;
text-decoration: none;
background-position:center;
border:none;
outline:none;
}
#slideshow-nav a.activeSlide
{
background-position: 0 -1000px;
background: transparent url('../Image/bullet_red.png') 0 0 no-repeat;
display: inline-block;
background-position :center;
text-decoration:none;
border:none;
outline:none;
}
.page-slideshow
{
position: relative;
margin-bottom: 15px;
text-decoration: none;
}
.page-slideshow.narrow #slideshow-nav
{
width: 460px;
left: 0;
text-decoration: none;
}

I am using :-

• Visual Studio 2010,
• .Net Framework 4.0

I have created an .aspx page in VS2010 and provided above Js, CSS and Design. The CSS given above is included in the source as StyleSheet1.css But I am getting the error:- 'jQuery' is undefined Please help me to solve this error.

• Sirwan Afifi: where do you referenced to jQuery Cycle library?
• Karl-Johan Sjögren: Check that the jQuery librayry exists at Scripts/jquery-1.8.3.min.js. You might want to change it to /Scripts/jquery-1.8.3.min.js to reference it from the root instead.
• Soony: Perhaps local reference is incorrect. Please check the reference path.
• user2605663: Need another JS for Cylce function.?
• Sirwan Afifi: you need to all this script <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

Answer 1

Most likely reason is your references in wrong order - JQuery-UI depends on JQuery, so "jquery-1.8.3.min.js" should be included before (and often very first) scripts that depend on it.

<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>

Also obviously check if files are indeed there...

• Tommi: Additionaly, I don't see any mentions of cycle in jquery UI documentation, so probably another one plugin script file is required.

Answer 2

Put your code inside document.ready

jQuery(function($){
 $(".hero").cycle({
 fx: 'scrollDown',
 timeout: 7000,
 pause: 1,
 pager: '#slideshow-nav div'
 });
});

Also include the jquery plugin before jquery ui.

<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

Answer 3

you need to reference this library :

 <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

References :

<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<link href="Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript">
 $(document).ready(function() {
 $(".hero").cycle({
 fx: 'scrollDown',
 timeout: 7000,
 pause: 1,
 pager: '#slideshow-nav div'
 });
 });
 </script>

• Abijeet Patro: Order of inclusion of scripts is wrong, jquery ui is before jquery.

Answer 4

Seems that you are including the libraries in the wrong order. jQuery UI depends on jQuery and should be included after the main library. You might also want to reference them with paths relative to the source of your site instead of relative to the existing path if you want to load this from a subfolder later on.

<script src="/Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui.min.js" type="text/javascript"></script>
<link href="/Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
 $(".hero").cycle({
 fx: 'scrollDown',
 timeout: 7000,
 pause: 1,
 pager: '#slideshow-nav div'
 });
</script>

• user2605663: I made the following changes in my code :- <script 'src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="Scripts/jquery-ui.min.js" type="text/javascript"></script> <link href="Styles/StyleSheet1.css" rel="stylesheet" type="text/css" /> then I got the error :- Object doesn't support this property or method .