Experimenting with preloading the FantasyApp iframe, which involves c…

…hanging a bit of Javascript and CSS around to accommodate an always-on-but-sometimes-hidden HTML element that ends up depending on height/width.

fantasyapp.css

@@ -1,4 +1,18 @@
-div#modal {
+body.fantasyAppShown {
+	overflow: hidden;
+}
+
+div#fantasyAppModal,
+iframe#fantasyAppIframe {
+	visibility: hidden;
+}
+
+body.fantasyAppShown div#fantasyAppModal,
+body.fantasyAppShown iframe#fantasyAppIframe {
+	visibility: visible;
+}
+
+div#fantasyAppModal {
 	background-color: black;
 	height: 100%;
 	opacity: 0.8;
@@ -8,7 +22,7 @@ div#modal {
 	z-index: 1234566;
 }
 
-iframe#fantasyapp {
+iframe#fantasyAppIframe {
 	background-color: white;
 	border: 1px solid black;
 	box-shadow: 3px 3px 12px #000000;

fantasyapp.js

@@ -2,21 +2,21 @@ $(document).ready(function() {
 	var launcher = $('li.games-fancast-btn a, li.statracker a');
 
 	if (launcher.length > 0) {
-		launcher.attr('onclick', '').unbind('click');
-		launcher.click(function(e) {
-			var $this = $(this);
-			var modalDiv = $('<div id="modal">');
-			var iframe = $('<iframe id="fantasyapp">');
-			iframe.attr('src', $this.attr('href'));
+		var modalDiv = $('<div id="fantasyAppModal">');
+		var iframe = $('<iframe id="fantasyAppIframe">');
+
+		iframe.attr('src', launcher.attr('href'));
 
-			$('body').append(modalDiv).append(iframe).css('overflow', 'hidden');
+		$('body').append(iframe).append(modalDiv);
 
+		launcher.attr('onclick', '').unbind('click');
+		launcher.click(function(e) {
+			$('body').addClass('fantasyAppShown');
 			return false;
 		});
 
-		$('body').delegate('#modal', 'click', function(e) {
-			$('#fantasyapp, #modal').remove();
-			$('body').css('overflow', 'auto');
+		$('body').delegate('#fantasyAppModal', 'click', function(e) {
+			$('body').removeClass('fantasyAppShown');
 		});
 	}
 });