Question

Using custom jquery to create a stand alone slider and a stand alone accordion with tabs inside. Which are all working. But how do I stop them from opening up when the page loads??!?! This happens in all browsers and it takes about 2 seconds to load up!

• home page
• explore page

You’ll need

• username: list
• password: list

I also use flicker and utilise a news ticker, there is flicker with Cufon as well just before it loads the page. I’m using the Cufon.now() functin of the bottom of all pages.

The site is currently just very basic php I am including the slider with php will that make it open up?

Scripts that I’m using

<!-- Scripts -->
    <script type="text/javascript" src="/assets/scripts/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="/assets/scripts/cufon-yui.js"></script>  
    <script type="text/javascript" src="/assets/scripts/Agenda_400-Agenda_700-Agenda_italic_400-Agenda_400.font.js"></script>  
    <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.4/jquery.tools.min.js"></script>
    <script type="text/javascript" src="/assets/scripts/jquery.lightbox-0.5.min.js"></script>
    <script type="text/javascript" src="/assets/scripts/jquery.watermarkinput.js"></script>
    <script type="text/javascript" src="/assets/scripts/jquery.ticker.js"></script>
    <script type="text/javascript" src="/assets/scripts/animatedcollapse.js"></script>
    <script type="text/javascript" src="/assets/scripts/facebox.js"></script>
    <script type="text/javascript" src="/assets/scripts/jquery.cycle.all.min.js"></script>
    <script type="text/javascript" src="/assets/scripts/jquery-scripts.js"></script>
    <script type="text/javascript" src="/assets/scripts/accordion.js"></script>
        <!--[if IE 6]><script type="text/javascript" src="/assets/scripts/dd-belated-png.js">   
       </script><![endif]-->

jquery-scripts.js

//Login box
jQuery.fn.fadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle'}, speed, easing, callback);
};

// Scroll close all and back to top buttons with the page
$(window).scroll(function() {
    var top = $(this).scrollTop();

    if ($("#newsletter").length) {
        var pos = $("#newsletter").position();
        var p = pos.top - 511;

        if (top >= p) {
            top = p;
            $('#acc-close-all a, #to-top a').css('top', top + "px").css("display", "inline");
        } else {
            $('#acc-close-all a, #to-top a').css('top', top + "px").css("display", "inline");
        }
    } else {
        $('#acc-close-all a, #to-top a').css('top', top + "px").css("display", "inline");
    }
});

    $(function(){

    //font replacement


    Cufon.replace("h1:not(.nocufon),h2:not(.nocufon),h3:not(.nocufon),h4:not(.nocufon)", {hover: true});

    // Banner rotator
    $('#slider .items').cycle({
        fx: 'blindY',
        timeout: 9599
    });

    // Ticker
    $('#ticker .items').cycle({
        fx: 'fade',
        timeout: 7000
    });

    //pricing details
    $("div.pricing-more-info").hide();

    $("a.pricing-more").click(function () {
        //show details
        $(this.href.substring(this.href.indexOf("#"), this.href.length)).fadeToggle();
        return false;
    }); 

    $("div.pricing-more-info .close").click(function () {
        //hide details
        $(this).parent().fadeToggle();
        return false;
    });

    //lightboxsetup
    $(".screenshots a, .imagecaption-gallery a").lightBox();  

    //username input watermark
    $("#control-login-username").Watermark("username");
    $("#control-login-password").Watermark("password");

    // when the form is submitted
    $('#colo-quote').submit( function(){

        var reg_email = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z])+$/; 

        var inputcheck = $('#contact_name');
        // if field has something in it, do submit actions, otherwise write out error
        if( inputcheck.val() == '' ){
            // add class to change colour
            inputcheck.addClass("required").get(0).focus();
            return false;
        }else{ inputcheck.removeClass("required"); }

        var inputcheck = $('#business_name');
        if( inputcheck.val() == '' ){
            inputcheck.addClass("required").get(0).focus();
            return false;
        }else{ inputcheck.removeClass("required"); }

        var inputcheck = $('#email_address');
        if( inputcheck.val() == '' || !reg_email.test( inputcheck.val() ) ){
            inputcheck.addClass("required").get(0).focus();
            return false;
        }else{ inputcheck.removeClass("required"); }

    }); 

    // Info box
    animatedcollapse.addDiv('info', 'fade=1,hide=1');
    animatedcollapse.ontoggle=function($, divobj, state){ };
    animatedcollapse.init();

    // Login box popup
    $('.facebox-link').facebox({
        closeImage: '/assets/images/control-login-toggle.gif'
    });
    $(document).bind('reveal.facebox', function() { 
        Cufon.replace("h2", {hover: true});
    });

    // Back to top button
    $('#to-top a').click(function(){
        $('html, body').animate({scrollTop: '0px'}, 300);
        return false;
    });

    // FAQ expand/collapse

    SSS_faq = {
        init : function() {
            $('div.faq .answer').not(':first').slideToggle('fast');
            $('div.faq .question').click(function() { SSS_faq.toggle(this) });
        },

        toggle : function(elt) {
            $(elt).toggleClass('active');
            $(elt).siblings('.answer').slideToggle('fast');
        }
    }

    $(function() { 
        SSS_faq.init();
    });
});
</code>

In the footer of every page I use Cufon like so
<code>
<!--[if IE]><script type="text/javascript"> Cufon.now(); </script><![endif]-->

Please has anyone got any ideas about how to combat this and fix it?

Thank you

Answer 1

the delay isn’t too bad for me – could be internet/pc speed related. it is slightly noticeable however.

perhaps

$('.acc-container').hide();

right at the start, to hide everything, then just fade it in to view when the rest of the code finishes?