Slider displays weird.

[Josiahmann]

Hello,

I have a slider installed on a wordpress based site and sometimes it works and begins scrolling automatically, but other times the images pile up on the left. The code is displaying an unordered list of images. What could be causing this?
Site is here.
Here’s the UL – the other code is in my functions.php
`

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

<div id="youtube-channel">
</div>`

[Ed]

At a glance, I think this happens because the CSS to style your scrolling images doesn’t get properly applied until the page has finished loading and the JavaScript plugin can execute it’s code for the hover scroll effect.

What you could do is hide the whole thing (ul.banners.list) and only display it when the JavaScript plugin has finished execute and applied its styles.

Unfortunately, that’s not very easy to do because the ul that contains the banners doesn’t have any classes applied to it when the JS is finished, although it does have a style="width: XXXpx;" attribute applied, so we can use that:

ul.banners.list {
    display: none;
}

ul.banners.list[style*="width"] {
    display: block;
}

What we’re doing there is hiding the container until the JavaScript has swooped in and added a width style inline, on the container. The second CSS selector simply doesn’t kick in until the element selected has an attribute of style and that attribute contains the text “width”.

It’s quite a hacky solution that won’t work in IE 6, but that shouldn’t matter to you because less than 1% of English-speaking users still use IE 6, and anyway it’s not a show-stopping bug – even if they do see it, it’s only for a few seconds.

[Josiahmann]

Thanks for the insights Ed.

I put the code in my CSS file and it doesn’t seem to help:/

The bug I’m seeing is that the entire list gets display stacked on top of each other on the left side and then stays that way. It doesn’t start working after a second. Here’s what I’m seeing – http://halocertificationtraining.com/wp-content/uploads/2013/09/Screen-Shot-2013-08-31-at-7.57.15-PM.png

[Ed]

That’s a different bug to what you described in your first post, which is what I was trying to fix.

I’m a bit confused now: did they only start to “stack” on top of each other when you added the CSS I wrote?

If that’s the case, remove what I wrote and try this:

.banners {
    height: 60px !important;
    overflow: hidden !important;
}

What we’re doing there is adding a fixed height onto the slider, and hiding anything that overflows beyond that height, so that even if the images haven’t been styled yet it shouldn’t break the layout.

Weird that my initial solution caused that bug. Let me know how this one goes.

[Josiahmann]

Hi Ed,

I think my initial post described the issue poorly, but that is the issue it was always having – your css didn’t cause it.
I Think I just fixed it this morning though. When it was stacking up, the width of the banner list was dropping down to 100px for some reason. I set it to 2750 px (which is the width of all of the items stacked side by side) and it seems like it fixed it.

[Josiahmann]

Me too. Thanks

[Author]

Posts