SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: JQuery Slider

  1. #1
    SitePoint Wizard
    Join Date
    Jul 2006
    Location
    New Zealand
    Posts
    1,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery Slider

    Hi there,

    I am trying to develop a Slider for my photo gallary and its not working the way i am wanting it i am recieving this error

    i have downloaded jquery from the jquery website and i am recieve this error

    jquery.ui.mouse.js:13Uncaught ReferenceError: jQuery is not defined
    jquery.ui.slider.js:16Uncaught ReferenceError: jQuery is not defined
    test.html:179Uncaught ReferenceError: $ is not defined

    Now this is my code i am using

    Code:
    <script src="jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script> 
        <script src="jquery-ui-full-1.5.2.min.js" type="text/javascript" charset="utf-8"></script> 
        <script src="jquery.ui.mouse.js" type="text/javascript"></script>
        <script src="jquery.ui.slider.js" type="text/javascript"></script>    
        <script type="text/javascript" charset="utf-8"> 
            window.onload = function () {
                var container = $('div.sliderGallery');
                var ul = $('ul', container);
                
                var itemsWidth = ul.innerWidth() - container.outerWidth();
                
                $('.slider', container).slider({
                    min: 0,
                    max: itemsWidth,
                    handle: '.handle',
                    stop: function (event, ui) {
                        ul.animate({'left' : ui.value * -1}, 500);
                    },
                    slide: function (event, ui) {
                        ul.css('left', ui.value * -1);
                    }
                });
            };
        </script> 
     <div class="sliderGallery">
                      <ul class="items">
                        <li>Item one</li>
                        <li>Item two</li>
                        <li>Item three, etc...</li>
                      </ul>
                      <div class="slider">
                        <!-- the handler to action the slide -->
                        <div class="handle"></div>
                        <!-- labels appear against the slider, as pointers to the user -->
                        <span class="slider-lb1">slider label 1</span>
                        <span class="slider-lb2">slider label 2</span>
                        <span class="slider-lb3">slider label 3</span>
                      </div>
                    </div>
    Why do i get those errors? what am i doing wrong?

    Can anyone help me out here?

    Thanks,William

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi William. You mention that the slider is not working the way you want. But does that mean it's working at all? My first question would be (perhaps overly obvious), but is this file path correct?

    src="jquery-1.2.6.js"

    That implies that the jquery file is in the same directory as the slider page. Often the jquery scripts will be contained in a /js/ directory (or similarly named).

    If you have a live link to the page, that would be a great help.

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2006
    Location
    New Zealand
    Posts
    1,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ive fixed it and now i am getting this error
    Code:
    test.html:7<style> is not allowed inside <html>. Moving <style> into the <head>.
    jquery.ui.mouse.js:15Uncaught TypeError: Object function ( selector, context ) {
    		// The jQuery object is actually just the init constructor 'enhanced'
    		return new jQuery.fn.init( selector, context );
    	} has no method 'widget'
    jquery.ui.slider.js:22Uncaught TypeError: Cannot read property 'mouse' of undefined
    test.html:184Uncaught TypeError: Object #<an Object> has no method 'slider'
    Webpage is located here

    Why do i get these errors?

    Thanks,William

  4. #4
    SitePoint Enthusiast nimpkish-media's Avatar
    Join Date
    Jun 2010
    Location
    Victoria BC, Canada
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have used jQuery a lot in the past, but I have never used the slider.

    In the head, you have:

    HTML Code:
    <script charset="utf-8" type="text/javascript" src="jquery-ui-full-1.4.2.min.js"></script>
    But the javascript file can't be found. Is your path incorrect? Or maybe you didn't upload the file to the correct location.

    I'd start with that, and go from there.

  5. #5
    SitePoint Wizard
    Join Date
    Jul 2006
    Location
    New Zealand
    Posts
    1,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I fixed that but not sure why those errors are being displayed though


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •