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.

Answer 1

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>

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

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>

Answer 4

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...