Learning jQuery

If you've ever had the displeasure of working with iFrames, then you know how tedious and frustrating the process can be. Because an iFrames is just embedded HTML content that can be from any website, often when you're working with them, the style sheets that determine how the content looks are hosted on another server. This can be a real problem, because you won't be able to override the styling of the content using plain CSS. So colors, font-sizes, font-families, etc, within iFrames are typically very hard to change, unless you use the following snippet of jQuery code, which allows you to use the .contents() and .find() methods to select and change the styling of elements within an iFrame:

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

iFrameDOM.find(".main").css("color", "#333");
});

What happens in the snippet above isn't quite as complicated as it might look upon first glance. First, we set the contents of the iFrame as a variable (iFrameDOM) using the .contents() method. From there, we use the .find() method to find particular elements (in this case the element with the class .main) and change its CSS rules using the .css() method. In the example above, we changed the font color of all of the text within the .main element to a dark grey (#333).

In the example, we use the .css() method to change styling within the iFrame, but once you've selected the contents of the iFrame using the .contents() method, you should be able to use the .find() method in conjunction with other methods besides .css(), so don't limit yourself. With this code, working with iFrames should be a lot easier -- especially if you have small tweaks that you really need to make to the frame. For bigger or more complicated changes, you might want to see if you can locate the stylesheets and make changes from the source if at all possible, because using scripts will slow down your pages.