SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    May 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question jQuery Slider not working in Wordpress

    Hey. I'm not great with jQuery so bear with me. I'm trying to get a content slider working in Wordpress. The slider is http://liquidslider.com/ and it's working fine for me on the static version of my site. When I try to implement it in Wordpress it just doesn't work. The latest jQuery is loaded (once) and it's creating the html elements it needs to function but that's it.

    I'm pretty sure it has something to do with this:

    Code:
    jQuery(document).ready(function($) {
      $(function(){
      $('#slider-id').liquidSlider();
      });
    });
    But don't know what exactly. I've kind of run out of options so I'd appreciate any help at all.

    Here's the slider isolated:

    http://www.xnthony.com/xnto/

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    Welcome to the forums

    When I look at the page that you link to, the first thing I notice are two 404 errors and a JavaScript error.

    404
    Code:
    Failed to load resource: the server responded with a status of 404 (Not found) http://www.xnthony.com/xnto/wp-content/themes/xnthony/img/menu.png
    Failed to load resource: the server responded with a status of 404 (Not found) http://www.xnthony.com/xnto/wp-content/themes/xnthony/img/arrow.png
    JS
    Code:
    Uncaught TypeError: Cannot read property 'fn' of undefined bootstrap-collapse.js:105
    The JS error is being caused by the fact that you have included it on the page before jQuery (hence $.fn being undefined).

    Fix those errors and see if that helps any.

  3. #3
    SitePoint Member
    Join Date
    May 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the response!

    I moved the jQuery to be loaded before that script and it fixed that error, but not the slider problem. I don't think it has to do with the bootstrap scripts. I'm pretty sure it has to do with how I'm calling the function in the head (posted above). I know I have to call it differently in Wordpress so I've done it as recommended, but still no luck.

    Pretty stumped.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Can you fix the 404 errors, too?
    Sometimes these will cause a script to stop executing.

  5. #5
    SitePoint Member
    Join Date
    May 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've fixed those errors, but still no luck.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    No worries, we'll get there

    Next thing is that you have included jQuery twice on the page, once in line 17 and once in line 55.
    Could you remove the second version?

  7. #7
    SitePoint Member
    Join Date
    May 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, okay so I removed the second version. That version was being enqueued in my functions.php file along with the slider scripts. I've removed these lines and placed those slider scripts in the head.

    Now it's saying "Uncaught TypeError: Object [object Object] has no method 'liquidSlider' "; though the liquidSlider script is loaded (on line 45). And it's also throwing the error about the bootstrap script again.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Oh dear!

    Well, one thing at a time, can you sort out the Bootstrap error (just swap the order of the scripts as before).

  9. #9
    SitePoint Member
    Join Date
    May 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, done that.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    You're still including jQuery twice.

    Once in line 17, once in line 58.

  11. #11
    SitePoint Member
    Join Date
    May 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, sorry. I think you caught it between edits. It's there once now.

  12. #12
    SitePoint Member
    Join Date
    May 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, no errors anymore. But still not working.

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    OK, well, two things.

    Change this:

    Code JavaScript:
    jQuery(document).ready(function($) {
        $(function(){
          $('#slider-id').liquidSlider();
        });
    });

    to this:

    Code JavaScript:
    jQuery(document).ready(function($) {
          $('#slider-id').liquidSlider();
    });


    Then delete everything between your <body> tags (temporarily!!) and replace it with the following:

    Code:
    <div class="liquid-slider"  id="slider-id">
            <div>
              <h2 class="title">Slide 1</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
            </div>
            <div>
              <h2 class="title">Slide 2</h2>
              <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
            </div>          
            <div>
              <h2 class="title">Slide 3</h2>
              <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
            </div>
            <div>
              <h2 class="title">Slide 4</h2>
              <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
            </div>
          </div>
    Let me know when you've done that.

  14. #14
    SitePoint Member
    Join Date
    May 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey. I was doing as you suggested and in the process happened to randomely hover above an area on the page and click and the slider moved. The controls were located outside of where they should have been.

    This happened because I'd removed all of the slider options I'd implemented from before in order to get it working. But then when it was working I forgot to re-include them so the arrows controlled the slider.

    So stupid. Haha.

    Thanks so much for you're help. You're a lifesaver.

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    No probs, glad it's working now


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
  •