Refactoring my code
Refactoring my code
Afternoon all,
I'm still new to jQuery and, truth be told, my JavaScript experience is relatively limited. I'm not new to programming, but I feel I have a tendency to hack stuff together rather than write clean code.
I was just wondering if someone of you may have any hints and tips on how to tidy up this code. It all works the way I want it to (apart from a slight aesthetic glitch in Firefox), but the code just looks, well, messy.
This is only tested in FF 3.5 and IE 8 by the by, as it's for a work project and those are the only two browsers used.
The script below is used to launch a modal window via clicking on a span (disguised as a link via some CSS).
-
var display = 0;
$(document).ready(function() {
var id;
var who;
display = 0;
$('.modal').click(function() {
id = "#someone";
who = $(this).attr('id');
launchWindow(id, who);
});
$('.window .close').live("click", function() {
$('.window').animate({queue: false, opacity:'hide'}, 1000, function() {
$('.window').hide();
$('#mask').animate({queue: false, opacity:'hide'}, 500, function() {
$('#mask').hide();
display = 0;
});
});
});
$(window).resize(function() {
if (display == 1) {
launchWindow(id, who);
}
});
});
function launchWindow(id, who) {
display = 1;
$.ajax({
url: "./who/" + who + ".htm",
cache: false,
success: function(html) {
$('.message').empty();
$('.message').html(html);
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({'width':maskWidth, 'height':maskHeight});
$('#mask').fadeIn(700);
$('#mask').fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
$(id).animate({queue: false, height:'303px', opacity:'show'}, 'slow');
},
error: function() { alert("Error loading: /who/" + who + ".htm\n\nPlease contact the LMS administrator."); }
});
};
Thanks in advance,
Frog