Loading shows text blocks from all slides

christoffwalker's Avatar

christoffwalker

24 Sep, 2012 04:29 PM

Hi Dmitry,

I'm having a slight issue with page loads - pic attached (royal-slider-load.jpg)

Each load of the page will reveal all the text blocks (any 'rsABlock' element) from within EVERY slide right before the slider begins. It only appears for a split second before the first slide will then animate in nicely.

I've tried to load the JS in the head of the page to attempt to preempt this, but still I see this ugly flash of ALL these elements.

Do you know of this issue, and have any suggestions for resolving?
Perhaps each slide could be hidden with CSS and made visible when the slider JS is ready...?

Apart from this little issue, really great product - thanks!
Many thanks in advance,
Chris

  1. Support Staff 1 Posted by Dmytro Semenov on 25 Sep, 2012 06:23 AM

    Dmytro Semenov's Avatar

    Hi,

    This is how your page looks if JS is disabled and it makes slider visible for search engines and users without JS. There are some ways how to make it work more properly (to test this simply remove slider initialization code):

    1. You may add background to each slide, so they won't look overlayed and you'll see only one.

    2. You may style slides before slider initialization, so they'll look more properly (e.g. add float to them, so they will be position as rows, under each other).

    3. You may hide slider via CSS: .royalSlider { display:none } and display it back directly before slider initialization, in document.ready() $('.royalSlider').css('display', 'block');. But this method is not SEO and no-js friendly,

    4. You may use well-known no-js technique and style slider like in 3rd method.

    5. If slides are under each other, you may add .royalSlider { overflow:hidden } to show just one at a time.

    Also, if you put slider JS in header, it'll initialize faster.

    Dmitry

  2. 2 Posted by christoffwalker on 26 Sep, 2012 01:34 PM

    christoffwalker's Avatar

    Dmitry,
    Thank you for your response.
    I will look into the no-js technique.
    Cheers,
    Chris

  3. 3 Posted by barry on 27 Sep, 2012 01:15 PM

    barry's Avatar

    Hi, If any of the above help, could you post your code as I am having the same issue but all the code I tried doesn't seem to stop the problem.

    Worst for me is ie9 as it displays the last slide and all rsaBlocks for almost 2 seconds before the slideshow starts.

  4. Support Staff 4 Posted by Dmytro Semenov on 27 Sep, 2012 07:38 PM

    Dmytro Semenov's Avatar

    Hi,

    @barry What you tried? With what of 4 soulutions do you have problem with implementation?

    Dmitry

  5. 5 Posted by barry on 28 Sep, 2012 11:21 AM

    barry's Avatar

    Hey,

    1. I made all images full width with a white background.
    2. Added float to slide1, slide2 etc css
    3. Added display none, but don't undesrstand what you mean by add in document.ready() as I don't know javascript.
    4. used the no-js technique but it made no difference. It still flashed the last slide plus all the rsablocks. It's not an issue on all browser as it's just a flash and doesn't happen every time but ie9 is about 2 seconds.

    Sorry I know this is my lack of knowledge rather than an issue with your amazing slider.

    Site address is...
    http://www.chartwelldental.co.uk
    Barry

  6. 6 Posted by barry on 28 Sep, 2012 12:03 PM

    barry's Avatar

    I have managed to get option 3 working so will use this method.

    Thanks

  7. 7 Posted by anders.s.wiik on 10 Mar, 2013 02:01 PM

    anders.s.wiik's Avatar

    I solved this by using overflow:hidden on the slider, but i also needed to put my typekit javascript above jquery and the slider js to get the transition smoother.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • royal-slider-load.jpg 79.2 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac