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
»

7 Responsive jQuery Dropdown Menu Plugins

Dropdown Menu Plugins Dropdown menus are mostly used for website ...

article image
»

20 Stylish and Modern jQuery Tooltip Plugins

jQuery Tooltip Plugins Tooltips are a great option for showing extra ...

article image
»

15 Newest jQuery plugins for responsive website

Due to the proliferation of smartphones and tablets, responsive ...

article image
»

How to use Redux with jQuery

State management is one of most integral parts of any software and a ...

article image
»

Fade HTML Table Row on Hover Using jQuery

HTML tables are the ideal choice for displaying data in tabular form. ...

article image
»

Drag and Drop HTML Table Rows Using jQuery

HTML tables are the preferred UI option for displaying data. Sorting, ...

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 ...