is this correct use of jquery's document.ready?

Posted by Haroldo on Stack Overflow See other posts from Stack Overflow or by Haroldo
Published on 2010-04-01T09:40:29Z Indexed on 2010/04/01 9:43 UTC
Read the original article Hit count: 512

Filed under:

The below file contains all the javascript for a page. Performance is the highest priority. Is this the most efficient way? Do all click/hover events need to to be inside the doc.ready?

//DOCUMENT.READY EVENTS
//---------------------------------------------------------------------------
$(function(){       

        // mark events as not loaded
        $('.event').data({
            t1_loaded: false,
            t2_loaded: false,
            t3_loaded: false,
            art_req: false
        }); 

        //mark no events have been clicked
        $('#wrap_right').data('first_click_made', false);


        // cal-block event click
        $('#cal_blocks div.event, #main_search div.event').live('click', function(){
            var id = $(this).attr('id').split('e')[1];  
            event_click(id);
        });

        // jq history
        $.historyInit(function(hash){
            if(hash)
                {
                    event_click(hash);
                }
        });

        // search
        $('#search_input').typeWatch
            ({
                callback: function(){
                    var q = $('#search_input').attr('value');
                    search(q);
                },
                wait : 350,
                highlight : false,
                captureLength : 2
            });     

        $('#search_input, #main_search div.close').live('click',function(){
            $(this).attr("value","");
            reset_srch_res();   
        });

        $('#main_search').easydrag();   

        $('a.dialog').colorbox();       

        //TAB CLICK -> AJAX LOAD TAB
        $('#wrap_right .rs_tabs li').live('click', function(){

            $this = $(this);
            var id = $('#wrap_right').data('curr_event');
            var tab = parseInt($this.attr('rel'));

            //hide other tabs
            $('#rs_'+id+' .tab_body').hide();   

            //mark current(clicked) tab
            $('#rs_'+id+' .rs_tabs li').removeClass('curr_tab');
            $this.addClass('curr_tab');

            //is the tab already loaded and hidden?
            var loaded = $('#e'+id).data('t'+tab+'_loaded');
            //console.log('id: '+id+', tab: '+tab+', loaded: '+loaded);
            if(loaded === true)
                {
                    $('#rs_'+id+' .tab'+tab).show();
                    if (tab == 2) { art_requested(id); }
                }
            else
                {
                    //ajax load in the tab
                    $('#rs_'+id+' .tab'+tab).load('index_files/tab'+tab+'.php?id='+id, function(){
                        //after load callback
                        if (tab == 1) { $('#rs_' + id + ' .frame').delay(600).fadeIn(600) };
                        if (tab == 2) { art_requested(id); }                                    
                    });
                    //mark tab as loaded
                    $('#e'+id).data('t'+tab+'_loaded', true);
                    //fade in current tab
                    $('#rs_'+id+' .tab'+tab).show();            
                }   
        })

});


// LOAD RS FUNCTIONS
//---------------------------------------------------------------------------

function event_click(id){

    window.location.hash = id;
    //mark current event    
    $('#wrap_right').data('curr_event', id);

    //hide any other events
    if($('#wrap_right').data('first_click_made') === true)
        {
            $('#wrap_right .event_rs').hide();
        }


    //frame loaded before?
    var loaded = $('#e'+id).data('t1_loaded');
    if(loaded === true) {
        $('#rs_'+id).show();
    }
    else {
        create_frame(id);
    }
    //open/load the first tab
    $('#rs_'+id+' .t1').click();
    $('#wrap_right').data('first_click_made', true);
    $('#cal_blocks').scrollTo('#e'+id, 1000, {offset: {top:-220, left:0}});
}

function create_frame(id){

    var art = ents[id].art;
    var ven = ents[id].ven;
    var type = ents[id].gig_club;   

    //select colours for tabs
    if(type  == 1){ var label = 'gig';}
    else if(type  == 2){ var label = 'club';}
    else if(type  == 0){ var label = 'other';}

    //create rs container for this event
    var frame =             '<div id="rs_'+id+'" class="event_rs">';
    frame +=                '<div class="title_strip"></div>';
    frame +=                '<div class="rs_tabs"><ul class="'+label+'"><li class="t1 nav_tab1 curr_tab hand" rel="1"></li>';
    if(art == 1){frame +=   '<li class="t2 nav_tab2 hand" rel="2"></li>';}
    if(ven == 1){frame +=   '<li class="t3 nav_tab2 hand" rel="3"></li>';}
    frame +=                '</ul></div>';
    frame +=                '<div id="rs_content"><div class="tab_body tab1" ></div>';
    if(art == 1){frame +=   '<div class="tab_body tab2"></div>';}
    if(ven == 1){frame +=   '<div class="tab_body tab3"></div>';}
    frame +=                '</div>';
    frame +=                '</div>';

    $('#wrap_right').append(frame);

    //mark current event in cal-blocks  
    $('#cal_blocks .event_sel').removeClass('event_sel');
    $('#e'+id).addClass('event_sel');

    if($('#wrap_right').data('first_click_made') === false)
        {
            $('#wrap_right').delay(500).slideDown();
            $('#rs_'+id+' .rs_tabs').delay(800).fadeIn();
        }       
};


// FUNCTIONS
//---------------------------------------------------------------------------

//check to see if an artist has been requested
function art_requested(id){
    var art_req = $('#e'+id).data('art_req');   
    if(art_req !== false)
        {
            //alert(art_req);
            $('#art_'+art_req).click();
        }
}


//scroll artist panes smoothly (scroll bars cause glitches otherwise)

function before (){ 
    if(!IE){$('#art_scrollable .bio_etc').css('overflow','-moz-scrollbars-none');}
}

function after (){          
    if(!IE){$('#art_scrollable .bio_etc').css('overflow','auto');}
}

function prep_media_carousel(){ 
    //youtube and soundcloud player
    $("#rs_content .yt_scrollable a.yt, #rs_content .yt_scrollable a.sc").colorbox({                
        overlayClose : false,
        opacity : 0
    });     

    $("#colorbox").easydrag(true);
    $('#cboxOverlay').remove();
}


function make_carousel_scrollable(unique_id){   
    $('#scroll_'+unique_id).scrollable({
        size:1,
        clickable:false,
        nextPage:'#r_'+unique_id,
        prevPage:'#l_'+unique_id
    });
}


function check_l_r_arrows(total, counter, art_id){  
    //left arrow
    if(counter > 0)
        {
            $('#l_'+art_id).show();
            $('#l_'+art_id+'_inactive').hide();
        }
    else
        {
            $('#l_'+art_id).hide();
            $('#l_'+art_id+'_inactive').show();
        }

    //right arrow   
    if(counter < total-3)
        {
            $('#r_'+art_id).show();
            $('#r_'+art_id+'_inactive').hide();
        }
    else
        {
            $('#r_'+art_id).hide();
            $('#r_'+art_id+'_inactive').show();
        }
}


function reset_srch_res(){
    $('#main_search').fadeOut(400).children().remove();
}

function search(q){
        $.ajax({  
            type: 'GET',
            url: 'index_files/srch/search.php?q='+q,
            success: function(e)
                {
                    $('#main_search').html(e).show();           
                }  
        }); 
}

© Stack Overflow or respective owner

Related posts about jQuery