Page 1 of 1

Only apply style settings to certain stylesheets with jQuery

Posted: Sun Jul 28, 2013 8:33 am
by mecha_godzilla
I use the following code to display a pop-up window in one of my pages:

Code: Select all

<div id="pop_up_window_container">
	
	<div id="msgbox">
		
		<a class="logo"><img src="images/logo.png" width="163" height="49" title="Logo" /></a>
		<a class="close" href="#"><img src="images/close_window.png" width="24" height="24" title="Close Window" /></a>
		
		<div id="content_placeholder">
		</div>
		
	</div>
	
</div>
I then use the following jQuery code to display the pop-up window and load content into an iframe inside the pop-up window:

Code: Select all

$(document).ready(function(){
	
	$("#pop_up_window_container").css("height", $(document).height());
	
	$(".alert").click(function(){
		
		$("#pop_up_window_container").show();
		
		navIdentity = $(this).attr("identity");
		
		$("#content_placeholder").html('<iframe src="my_script?id=' + navIdentity + '" width="100%" height="425" frameborder="0" scrolling="auto"><\/iframe>');
		
		return false;
		
	});
	
	$(".close").click(function(){
		
		$("#pop_up_window_container").hide();
		
		return false;
		
	});
	
});

$(window).bind("resize", function(){
	$("#dim").css("height", $(window).height());
});
The way this script works is that the page contains a list view of each user's activities, and there is a "view" icon next to each entry in the list. When this icon is clicked on, the pop-up window appears and the details are then loaded into it.

This all works really well, but my problem is with the "pop_up_window_container" div. This has a semi-transparent background that is designed to overlay the whole screen, but the script I am using automatically resizes the div to do this and in the process overrides the style settings I've defined for it in the print stylesheet - I think this is because the jQuery code is applying the height value for this div indiscriminately to all stylesheets (screen and print) and not just the one I want.

Does anyone know if it's possible to tell jQuery to just target a particular stylesheet "media" rather than all of them?

Thanks in advance,

Mecha Godzilla