CODEWITHSUNDEEP
c#jqueryasp.net
user2534035
user2534035

Reputation:

0x800a1391 - JavaScript runtime error: 'jQuery' is undefinedd

I want to get a really simple item slider. So following a tutorial I end up with this code: 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="ItemSlide.Home" %>

<!DOCTYPE html>

<html lang="en" class="no-js">
    <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
            <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
            <title>Simple Multi-Item Slider with CSS Animations and jQuery</title>
            <meta name="description" content="Simple Multi-Item Slider: Category slider with CSS animations" />
            <meta name="keywords" content="jquery plugin, item slider, categories, apple slider, css animation" />
            <meta name="author" content="Codrops" />
            <link rel="shortcut icon" href="../favicon.ico">


<script type='text/javascript' src="jquery.catslider.js"></script>

<script type='text/javascript' src='jquery.min.js'></script>
        <script type='text/javascript' src="modernizr.custom.63321.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="demos.css" />

</head>
<body>
<div class="container">        

                    <header class="clearfix">
                            <h1>Simple Multi-Item Slider <span>Category slider with CSS animations</span></h1>
                    </header>
                    <div class="main">
                            <div id="mi-slider" class="mi-slider">
                                    <ul>
                                            <li><a href="#"><img src="images/1.jpg" alt="img01"><h4>Boots</h4></a></li>
                                            <li><a href="#"><img src="images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
                                            <li><a href="#"><img src="images/3.jpg" alt="img03"><h4>Loafers</h4></a></li>
                                            <li><a href="#"><img src="images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
                                    </ul>
                                    <ul>
                                            <li><a href="#"><img src="images/5.jpg" alt="img05"><h4>Belts</h4></a></li>
                                            <li><a href="#"><img src="images/6.jpg" alt="img06"><h4>Hats &amp; Caps</h4></a></li>
                                            <li><a href="#"><img src="images/7.jpg" alt="img07"><h4>Sunglasses</h4></a></li>
                                            <li><a href="#"><img src="images/8.jpg" alt="img08"><h4>Scarves</h4></a></li>
                                    </ul>
                                    <ul>
                                            <li><a href="#"><img src="images/9.jpg" alt="img09"><h4>Casual</h4></a></li>
                                            <li><a href="#"><img src="images/10.jpg" alt="img10"><h4>Luxury</h4></a></li>
                                            <li><a href="#"><img src="images/11.jpg" alt="img11"><h4>Sport</h4></a></li>
                                    </ul>
                                    <ul>
                                            <li><a href="#"><img src="images/12.jpg" alt="img12"><h4>Carry-Ons</h4></a></li>
                                            <li><a href="#"><img src="images/13.jpg" alt="img13"><h4>Duffel Bags</h4></a></li>
                                            <li><a href="#"><img src="images/14.jpg" alt="img14"><h4>Laptop Bags</h4></a></li>
                                            <li><a href="#"><img src="images/15.jpg" alt="img15"><h4>Briefcases</h4></a></li>
                                    </ul>
                                    <nav>
                                            <a href="#">Shoes</a>
                                            <a href="#">Accessories</a>
                                            <a href="#">Watches</a>
                                            <a href="#">Bags</a>
                                    </nav>
                            </div>
                    </div>
            </div><!-- /container -->
<script type="text/javascript">
    _init : function( options ) {

        // the categories (ul)
        this.$categories = this.$el.children( 'ul' );
        // the navigation
        this.$navcategories = this.$el.find( 'nav > a' );
        var animEndEventNames = {
            'WebkitAnimation' : 'webkitAnimationEnd',
            'OAnimation' : 'oAnimationEnd',
            'msAnimation' : 'MSAnimationEnd',
            'animation' : 'animationend'
        };
        // animation end event name
        this.animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ];
        // animations and transforms support
        this.support = Modernizr.csstransforms && Modernizr.cssanimations;
        // if currently animating
        this.isAnimating = false;
        // current category
        this.current = 0;
        var $currcat = this.$categories.eq( 0 );
        if( !this.support ) {
            this.$categories.hide();
            $currcat.show();
        }
        else {
            $currcat.addClass( 'mi-current' );
        }
        // current nav category
        this.$navcategories.eq( 0 ).addClass( 'mi-selected' );
        // initialize the events
        this._initEvents();

    }
    _initEvents : function() {

        var self = this;
        this.$navcategories.on( 'click.catslider', function() {
            self.showCategory( $( this ).index() );
            return false;
        } );

        // reset on window resize..
        $( window ).on( 'resize', function() {
            self.$categories.removeClass().eq( 0 ).addClass( 'mi-current' );
            self.$navcategories.eq( self.current ).removeClass( 'mi-selected' ).end().eq( 0 ).addClass( 'mi-selected' );
            self.current = 0;
        } );

    }

    showCategory : function( catidx ) {

        if( catidx === this.current || this.isAnimating ) {
            return false;
        }
        this.isAnimating = true;
        // update selected navigation
        this.$navcategories.eq( this.current ).removeClass( 'mi-selected' ).end().eq( catidx ).addClass( 'mi-selected' );

        var dir = catidx > this.current ? 'right' : 'left',
            toClass = dir === 'right' ? 'mi-moveToLeft' : 'mi-moveToRight',
            fromClass = dir === 'right' ? 'mi-moveFromRight' : 'mi-moveFromLeft',
            // current category
            $currcat = this.$categories.eq( this.current ),
            // new category
            $newcat = this.$categories.eq( catidx ),
            $newcatchild = $newcat.children(),
            lastEnter = dir === 'right' ? $newcatchild.length - 1 : 0,
            self = this;

        if( this.support ) {

            $currcat.removeClass().addClass( toClass );

            setTimeout( function() {

                $newcat.removeClass().addClass( fromClass );
                $newcatchild.eq( lastEnter ).on( self.animEndEventName, function() {

                    $( this ).off( self.animEndEventName );
                    $newcat.addClass( 'mi-current' );
                    self.current = catidx;
                    var $this = $( this );
                    // solve chrome bug
                    self.forceRedraw( $this.get(0) );
                    self.isAnimating = false;

                } );

            }, $newcatchild.length * 90 );

        }
        else {

            $currcat.hide();
            $newcat.show();
            this.current = catidx;
            this.isAnimating = false;

        }

    }

            </script>

However when I run it I end up with 0x800a1391 - JavaScript runtime error: 'jQuery' is undefined. Please help.

Upvotes: 0

Views: 1045

Answers (1)

Jason Evans
Jason Evans

Reputation: 29186

Swap these around

<script type='text/javascript' src="jquery.catslider.js"></script>
<script type='text/javascript' src='jquery.min.js'></script>

to

<script type='text/javascript' src='jquery.min.js'></script>
<script type='text/javascript' src="jquery.catslider.js"></script>

Since jquery.catslider.js depends on jQuery, you must first declare jquery.min.js.

Upvotes: 4

Related Questions