Problem with Anything slider implementation on my site

[joelmb]

http://mediamarble.com

I recently redesigned my site which in the main was cosmetic re-skinning what’s there now. However I’ve done something to the code causing a problem with the slider…

Obviously the slider is made up of multiple div layers inside ul and li tags which only slide in when the navigation instructs them to. However I’ve got two strange things happening.

1. On some pc’s I look at my site and only the first fifth of the slider is showing. However clicking refresh seems to sort it and it’s all visible.

2. The bigger problem; on mobile devices all the slider layers are visible at same time, and the navigation / slider select isn’t working at all. This was working as I say in the older design so I can’t work out what’s happened.

Can anyone see the problem in the code?? I apologise in advance, it’s a bit messy in there. My guess is the mobile device isn’t interpreting the UL and LI tags or something…. one ideal solution should be to have a css styled mobile version of my site of course, but I’d like to get this sorted first.

[Mottie]

I have a feeling that the problem browsers are Chrome and Safari? :P

I think the issue is because the “anythingSlider.css” file is loaded after the script. It doesn’t seem like it should matter, but try it and see if the problems go away.

[joelmb]

Actually I only noticed problem 1. using IE9 so far, chrome seems fine. The bigger problem is on mobile though. Tried moving the css to above the script but no joy sadly….

[Mottie]

I don’t own a mobile device, so what is the problem that you are seeing?

[joelmb]

The content of each div layers (images and text) are all showing immediately at the same time one over the other rather than sliding in on each navigation click.

[joelmb]

*bump* Can anybody help??

[Mottie]

Hi Joelmb!

Could you share a screenshot? The page seems to work fine for me in IE9.

[joelmb]

After a refresh it comes right, but I can’t see what is causing it to present like this, and even if it isn’t happening frequently on common browsers, its a worry.

[Mottie]

Hey!

I still think it’s the css… try moving the css in the style tag to just below the “anythingslider.css” link. Also, in the css definitions are HTML comment tags which may be part of the problem? Like I said, it seems to work just fine for me on my desktop in IE7-9.

The only problem I’m seeing is in the contact slide where the padding is causing the telephone input to get pushed out of view.

Yeah, sadly, I can’t afford a mobile device at the moment, so I don’t know what to tell you. Could it be all of the absolute positioning within the slides? Everything looks fine on the AnythingSlider demo pages right?

[joelmb]

Thanks for help mottie. Sorted now, was actually because I’d swapped a span open tag for a div, simple as that!

[Author]

Posts