Learning jQuery

Most developers will probably be able to tell you about how much they dislike working with iFrames. The content within the iFrames can't be accessed with CSS, so if the frame doesn't work with your site's design, if the sizing is off, if you'd like to change the positioning of the content...you're mostly out of luck, unless you have access to the server that hosts whatever is being embedded with the frame and it isn't a problem to change the source material. However, it's also possible to use a really simple jQuery to access the elements within the iFrame. Check it out below:

$(document).ready(function(){
	var iFrameDOM = $("iframe#frameID").contents();

	iFrameDOM.find(".page").css("background-color", "#fff");
});

In the example above, the iFrame is selected, and then once the selection has been made any element within the iFrame can be accessed and changed using the .find() method. You can use jQuery to add jQuery effects to your iFrame elements, to change the CSS rules, or even to add content. Above, the script is used to change the background color of the .page element within the frame to white. Use the script for yourself and save yourself a headache next time you're working with an iFrame!