LINK-
http://www.securehostserver.info/anderson/corporate-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
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.
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.
Too slow… time for bed
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?
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.
I removed the second instance of the jQuery library and its still not working. Ugh!
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:
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.
<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>
[COLOR="Blue"]</body>[/COLOR]
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.
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…
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.
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.
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/anderson/corporate-philanthropy/
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. 
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.
Your no conflict seems to be wrong. I’m not really into JS but shouldn’t it be like this:
<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.
… 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. :x
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
He has, multiple ones (for SP) :).
I know, I have a few of them…
I just realized you were being sarcastic :sick:. Should really sleep more.