0

I am using AnythingSlider to place content on this dev for a new site:

http://sitedev.lcadfiles.com/interactive_barrett.html

When the slider first loads on a given page, there is a slight jump (the entire slider, arrows, etc. moves a few pixels before settling into the correct position). After landing, it all appears to work fine. The shift doesn't appear to be browser specific, as it occurs on my older and newer machines with 4 different browsers (and various browser versions).

Is there something I have set wrong? I assume it might be somewhere global, like the anythingSlider.js (or perhaps the .css - though this seems less likely), but didn't see anything that stood out.

1
  • Make sure there isn't any padding or margins set on the ul and li's - basically make sure to reset your css.
    – Mottie
    Jul 1, 2012 at 14:24

2 Answers 2

1

Had the same problem. A quick workaround (works for me).

eg. you have html code like below, add a style="visibility:hidden;" to your anythingslider container.

<div id="slider_nest" style="visibility:hidden;">
    <ul id="your_anythingslider">
    ...
    </ul>
</div>

in the js code, change the style to visible when document ready. eg.(JQuery)

jQuery(document).ready(function($) {
    $('#slider_nest').css('visibility', 'visible');
    ...
    $('#your_anythingslider').anythingslider();
    ...
}

Hope it helps!

Update: add a slider mask with a loader gif.

eg. in the html, you will have something like below:

<div id="slider_mask" style="background: #000 url('ajax-loader.gif') no-repeat center;     display:block; height:568px; width:1050px; margin:0 auto;">
</div>
<div id="slider_nest" style="display:none; height:568px; width:1050px; margin:0 auto;">
    <ul id="your_anythingslider">
    ...
    </ul>
</div>

Now in the js (JQuery):

jQuery(document).ready(function($) {
    $('#slider_mask').hide();
    $('#slider_nest').css({'display':'block'});
    ...
1
  • you can also use display property to replace visibility. in case of loading mass slides, you can also add a slider mask with a loader.gif, see the update Nov 21, 2012 at 13:24
0

OMG, this finally solved our problem! Thank you.

Since I'm using the Wordpress plugin on a custom theme, I had to adjust it a bit like this:

Add this before the shortcode in the header.php file:

<div id="slider_mask" style="background: #FFF url('ajax-loader.gif') no-repeat center;display:block; height:323px; width:940px; margin:0 auto;">
</div>

Add this in the section of header.php file:

<script type="text/javascript"> 
    $(document).ready(function(){
    $('#slider_mask').hide();           
    $('.anythingSlider').css({'display':'block'});
}

Add this to the CSS file:

.anythingSlider {display:none;}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.