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: 510
jQuery
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