This question is probably more a matter of syntax than anything else. I have some simple code that controls some custom tabs that flow on and off screen when clicked. For the most part the code (especially animation) works as intended and is not problematic.
<script type="text/javascript">
$('.side_drawer_face').click(function() {
if ($('#side_drawer').css("left") <= "0"){
$('#overlay_div').show();
document.getElementById('side_drawer').style.zIndex = 6000;
document.getElementById('side_drawer2').style.zIndex = 5000;
$('#side_drawer').animate({ opacity: 1.0, left: '+=406'}, 500);
$('#side_drawer2').animate({ opacity: 1.0, left: '+=406'}, 500);
} else if ($('#side_drawer').css("z-index") == "6000"){
$('#overlay_div').hide();
$('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
$('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);
document.getElementById('side_drawer').style.zIndex = 6000;
document.getElementById('side_drawer2').style.zIndex = 5000;
} else {
document.getElementById('side_drawer').style.zIndex = 6000;
document.getElementById('side_drawer2').style.zIndex = 5000;
}
});
$('.side_drawer_face2').click(function() {
//shows Bio div
if ($('#side_drawer2').css("left") <= "0"){
$('#overlay_div').show();
document.getElementById('side_drawer2').style.zIndex = 6000;
document.getElementById('side_drawer').style.zIndex = 5000;
$('#side_drawer').animate({ opacity: 1.0, left: '+=406'}, 500);
$('#side_drawer2').animate({ opacity: 1.0, left: '+=406'}, 500);
} else if ($('#side_drawer2').css("z-index") == "6000"){
$('#overlay_div').hide();
$('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
$('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);
} else {
document.getElementById('side_drawer2').style.zIndex = 6000;
document.getElementById('side_drawer').style.zIndex = 5000;
}
});
$('.clear_overlay').click(function() {
$('#overlay_div').hide();
$('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
$('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);
document.getElementById('side_drawer2').style.zIndex = 5000;
document.getElementById('side_drawer').style.zIndex = 6000;
});
</script>
My problem is, in some browsers (that begin with I and end in E) rapidly clicking on the tab while other page elements are loading cause unexpected behavior. What I’d like to do is wrap the entire script with a document ready statement so that none of the functions can be executed until everything on the page is loaded. (the script is already located at the bottom of the html body)
Comments by Nick and Matt are correct — the syntax is super-easy, just bind the event handlers in the
readyfunction