Hi Mottie!
My apologies. For some reason, I thought the FOUC was fixed in the jQuery plugin more recently than the WP plugin’s last version. Added the overflow CSS, and indeed, it’s flawless.
Thank you both, as always, for doing great work on this slider. Of the millions out there, it’s by far my favorite.
Hi Jacob and Mottie,
Apparently I was mistaken, and I still have the FOUC issue. I dug into the code and noticed that using the WP plugin with the shortcode generates a different number with the id each time I load the page, so I get a ul with an id of slider-178 or similar. So I’m having a tough time designating the id properly in the CSS and setting its overflow values. Any idea why the ul keeps generating different id numbers?
Right now I am using only one slideshow on the entire site, and using all the slides within it. Should I be putting them all into a category instead?
http://www.lamanai.org is the site with the issue.
I’ll have to let Jacob answer this one properly, but have you tried wrapping the entire slider then targeting that instead? Something like:
<div id="slider-wrapper">
<ul> <!-- slider ul with differing ID's -->
...
</ul>
</div>
Then use this css:
#slider-wrapper ul {
height: 200px;
width: 300px;
overflow-y: auto;
overflow-x: hidden
}
Hey Petroica,
I added an option to the shortcode that allows you to define the ID of the slideshow. This way you’ll be able to target it from your stylesheet. I can’t recall the format of the option so I’ll have to look it up for you.
-J
Hi Mottie and Jacob,
I couldn’t quite find the shortcode option, so I tried Mottie’s solution, but then my right toggled arrow would no longer function.
I suspect this might be because I didn’t originally style the slider in the most elegant code, but I’m not sure what the specific culprit is. Maybe you have an idea?
http://www.lamanai.org/
There is a #home-slider ul CSS rule at the top of anythingslider.css you can uncomment to see what I’m talking about. The thumbnav buttons move too, but I imagine that’s an easy positioning fix.
I have read the solutions to deal with this above, and have tried adding:
.anythingSlider {
height: 400px !important;
width: 260px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
to my theme’s CSS file. However this has no effect, and from looking on developer tools the .anythingSlider class ul element containing the slider isn’t even picking up the new css. Do I have to put it somewhere else?
Try adding it to wp-content/plugins/anythingslider-for-wordpress/css/anythingslider.css
I’ve given that a go, but also no effect. In the plugin FAQ it seems to indicate that this file has no effect unless it’s put into your theme directory.
I’ve got some code that begins:
$(document).ready(function() {
$('#slider ul').cycle({
fx : 'scrollLeft, toss, toss, ',
timeout : 35000,
speed : 1000,
delay : 0,
pause : true,
pager: '#pagination',
next: '#next_slide',
prev: '#prev_slide',
before: onAfter
});
});
in the page source. Is this from anythingslider or not? I can’t find what else it could be if not.
Ok now the css from wp-content/plugins/anythingslider-for-wordpress/css/anythingslider.css is showing up, however it still has no effect.
The overflow rules are being overridden by anythingBase, but even if I delete the line overflow: visible !important; in anythingBase the FOUC is still there.
