Error in java script using in Asp.net.

Question

This is my function of jquery I am using jquery function to slide and fade div and its a * jQuery UI Effects Slide 1.8.16

Here is the Header

<script src="js/Newfolder/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="js/Newfolder/jquery-1.6.2.min.js" type="text/javascript"></script>
   <script src="js/jquery.effects.slide.js" type="text/javascript"></script>
<script src="js/jquery.effects.core.js" type="text/javascript"></script>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='js/jquery.js'></script>



(function( $, undefined ) {

$.effects.slide = function(o) {

return this.queue(function() {

    // Create element
    var el = $(this), props = ['position','top','bottom','left','right'];

    // Set options
    var mode = $.effects.setMode(el, o.options.mode || 'show'); // Set Mode
    var direction = o.options.direction || 'left'; // Default Direction

    // Adjust
    $.effects.save(el, props); el.show(); // Save & Show
    $.effects.createWrapper(el).css({overflow:'hidden'}); // Create Wrapper
    var ref = (direction == 'up' || direction == 'down') ? 'top' : 'left';
    var motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg';
    var distance = o.options.distance || (ref == 'top' ? el.outerHeight({margin:true}) : el.outerWidth({margin:true}));
    if (mode == 'show') el.css(ref, motion == 'pos' ? (isNaN(distance) ? "-" + distance : -distance) : distance); // Shift

    // Animation
    var animation = {};
    animation[ref] = (mode == 'show' ? (motion == 'pos' ? '+=' : '-=') : (motion == 'pos' ? '-=' : '+=')) + distance;

    // Animate
    el.animate(animation, { queue: false, duration: o.duration, easing: o.options.easing, complete: function() {
        if(mode == 'hide') el.hide(); // Hide
        $.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
        if(o.callback) o.callback.apply(this, arguments); // Callback
        el.dequeue();
    }});

});

};

})(jQuery);

When I publish that on Visual Studio 2010 and browse on Inter Explorer 9 I am getting this Error :

Microsoft JScript runtime error: Unable to set value of the property 'slide': object is null or undefined

Answer 1

The order should look like this...

<script src="js/Newfolder/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>//not sure what this is?
<script src="js/Newfolder/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.effects.slide.js" type="text/javascript"></script>
<script src="js/jquery.effects.core.js" type="text/javascript"></script>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />

Check the 2nd link, as I don't know what this is? your version of jquery? Also, use double quotes instead of single.

also, you could move these to the footer of the page instead of in the header to help with load times. See this post for some pointers Where should I put my JavaScript code?.

Answer 2

Re-order your js includes like this:

<script src="js/Newfolder/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/Newfolder/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.effects.slide.js" type="text/javascript"></script>
<script src="js/jquery.effects.core.js" type="text/javascript"></script>

Bascically you need to include your jQuery lib before anything else.

Answer 3

You need to load jquery before you load jqueryUI