X

LATEST #JQUERY NEWS

How to Change iFrame Styling Using 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.

Recently Published

article image
»

Top 5 Best JavaScript Template Engines

Template engines help in the decoupling of HTML and JavaScript code ...

article image
»

3 jQuery/JavaScript Plugins for Push Notifications

Push notifications started from the mobile business but this ...

article image
»

Create Smooth Animation Using jQuery’s “stop()”

Making Quick Work jQuery’s animate() method is a quick way to ...

article image
»

Check all checkboxes in HTML table using jQuery

HTML tables are a very handy and useful element. They can adapt to ...

article image
»

Changing images in a loop on hover using jQuery

Why use this Function? Changing images in a loop on mouse over is a ...

article image
»

How to Dynamically Trim Text Using jQuery

This easy beginners jQuery tutorial demonstrates how you can use ...

article image
»

jQuery Snippets: Getting the Current Year

Here’s a fun, simple, and incredibly useful jQuery that you can ...

article image
»

jQuery Snippets: How to Conditionally Enable Submit

One easy way to prevent users from submitting an empty form in a ...

article image
»

How to Use Google Analytics with jQuery Mobile

jQuery Mobile is an HTML5 based web-page framework that’s ...