SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    790
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    My jQuery Slider Has A Scrollbar At The Bottom

    LINK-
    http://www.securehostserver.info/and...-philanthropy/


    I am using Chris Coyer's Anything Slider and when I added the Lightbox scripting, the bottom of the slider area now has a scrollbar (left to right). I think the CSS for the slider adds overflow: auto but somehow it is not visible when I use Firebug.

    Can someone take a look and tell me where I went wrong?

    Thanks in advance!

    Todd
    Todd Temple > T2 Design

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    The scroll bar is a fallback for when JS is either off or not set up properly. In your case, the JS is not set up properly. You haven't linked correctly to the easing and anythingslider scripts, so make sure those paths are correct as the first step.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Have you linked to the js files properly?

    They don't seem to be here. I'm guessing that the js will remove that scrollbar once its functioning.

    Edit:


    Too slow... time for bed

  4. #4
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    790
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have linked those two JS files properly now and I still am seeing the scrollbar from the slideshow's overflow.

    Any other insight as to why the overflow:auto is being overridden?
    Todd Temple > T2 Design

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    At the moment, the slider functionality is not kicking in at all. Just a thought, but try deleting one of the links to the jquery library in the head of your document. You link to it twice, which is not necessary. I have a feeling doing that once before (by mistake) mucked things up for me.

  6. #6
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    790
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I removed the second instance of the jQuery library and its still not working. Ugh!
    Todd Temple > T2 Design

  7. #7
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    790
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have also tried an instance with the jQuery version of Lightbox (as opposed to the Prototype version) and it still breaks the slideshow... Here is a link to that:

    http://www.securehostserver.info/anderson/test2/
    Todd Temple > T2 Design

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Hmm, I suspect you are very close. The browser throws an error, saying that

    $(".anythingSlider").anythingSlider is not a function
    Hate that damned message. I often get it while setting up stuff like this. Seems to be because it's not reading the jquery script, yet after a while it changes its mind. It might be worth moving all the scripts to the bottom of the page, just before the </body> tag. I find the page loads better with the scripts there.

    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="j/jquery.easing.1.2.js"></script>
    <script type="text/javascript" src="j/jquery.anythingslider.js" charset="utf-8"></script>
    <script type="text/javascript">    
    		function formatText(index, panel) {
    		  return index + "";
    	    }
            $(function () {
                $('.anythingSlider').anythingSlider({
                    easing: "easeInOutExpo",
                    autoPlay: true,
                    delay: 4000,
                    startStopped: false,
                    animationTime: 1300,
                    hashTags: true,
                    buildNavigation: true,
            		pauseOnHover: true,
            		startText: "Go",
    		        stopText: "Stop",
    		        navigationFormatter: formatText
                });
                $("#slide-jump").click(function(){
                    $('.anythingSlider').anythingSlider(6);
                });
            });
    </script>
    </body>
    The other thing worth trying is to place the jquery library on your own server, instead of linking to Google's version.

    I tend to tinker around like this until I get jquery working. It's harder to make suggestions without being able to tinker.

  9. #9
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    790
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    place the jquery library on your own server, instead of linking to Google's version.
    Ralph,
    I moved the slider scripts to the end of the document and I have linked to a local version of jQuery... but still no luck. I am wondering if I need to scrap it at this point... Ugh...
    Todd Temple > T2 Design

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    I've used this script several times with no problem, but there's always a little tinkering needed. You are very close. Where have you set up the latest version? Your link above hasn't been updated.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    BTW, looks like you might again have a second version of jQuery in there:

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

    Is that an old version of jQuery? I can't quite tell, but just wondering. Anyway, maybe try the slider with that link commented out.

  12. #12
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    790
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ralph,

    It should be the same link. I just double checked it. And the second instance of jquery.js should have been removed earlier. Let me know if you still see it there.

    http://www.securehostserver.info/and...-philanthropy/
    Todd Temple > T2 Design

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Hmmm, jeepers, very odd. Well, all I can suggest now is to comment out all the lightbox stuff and remove the no-conflict line. At that point, you'll have things set up just as I have done when this has worked flawlessly.

  14. #14
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    790
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm confused too. Thats where I thought the easiest solution was to use the jQuery Lightbox instead of the Prototype version... but it still gave me problems as well.

    Hey, I appreciate you looking into this for me. I'm retiring for the evening... Thank you.
    Todd Temple > T2 Design

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Your no conflict seems to be wrong. I'm not really into JS but shouldn't it be like this:

    Code:
        <script type="text/javascript">    
             jQuery.noConflict();
             (function($) { 
              function formatText(index, panel) {
              return index + "";
            }
            $(function () {
                $('.anythingSlider').anythingSlider({
                    easing: "easeInOutExpo",
                    autoPlay: true,
                    delay: 4000,
                    startStopped: false,
                    animationTime: 1300,
                    hashTags: true,
                    buildNavigation: true,
                    pauseOnHover: true,
                    startText: "Go",
                    stopText: "Stop",
                    navigationFormatter: formatText
                });
                $("#slide-jump").click(function(){
                    $('.anythingSlider').anythingSlider(6);
                });
            });
    })(jQuery);
    
        </script>
    That makes the slider work for me.

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I'm not really into JS but
    but I'm a huge smartypants, so I figured it out anyway.

    Well spotted, Paul. I avoid the noConflict thing by just sticking to one library. Strange, though, as the slider wasn't working even without another library in place. O well, JS is weird.

  17. #17
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    790
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, I've got to hand it to you... you have solved yet another one of my problems. I guess I was out of place for posting this issue in the CSS forum and not in the jQuery section.

    You are a smarty pants and I thank you for it! You should write a book or something... lol
    Todd Temple > T2 Design

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    He has, multiple ones (for SP) .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #19
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    790
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    He has, multiple ones (for SP) .
    I know, I have a few of them...
    Todd Temple > T2 Design

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Todd Temple View Post
    I know, I have a few of them...
    I just realized you were being sarcastic . Should really sleep more.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •