Question

I am using the famous jQuery vTicker plugin for vertical scrolling content. However, when one loads the page, the content “<li> elements in my case” appears for a fraction of a second, before hiding the content back again and starting to work as expected.

Is there a solution to this?

This is my code:

    <script type="text/javascript">
        $(document).ready(function () {
            $('#lastminute').vTicker({
                speed: 500,
                pause: 3000,
                animation: 'fade',
                mousePause: true,
                showItems: 1
            });
        });
    </script>

    <div id="lastminute">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </div>

Answer 1

Add a class to all elements you want not to flicker like that that has a css property of visibility:hidden.

Remove this class in your $(document).ready() handler.

That way the elements will be invisible to the user until you are ready to display them they way you intended.

CSS –

.hideuntilready{
    visibility:hidden;
}

JS –

<script type="text/javascript">
    $(document).ready(function () {
        $('#lastminute').removeClass("hideuntilready").vTicker({
            speed: 500,
            pause: 3000,
            animation: 'fade',
            mousePause: true,
            showItems: 1
        });
    });
</script>

HTML –

<div id="lastminute" class="hideuntilready">
    <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    </ul>
</div>