Saturday, January 19, 2013

Set width of div part of iframe

Share/Save/Bookmark

How to set the width(in percentage) of the element that is part of iframe?
my first attempt :
$(document).ready(function()
{
$("#divid").css("width","50%");
});
Above script did not work as the script gets triggered immediately after document
loads but before iframe renders
So i tried the below, which did not work for me(in IE 8)
$('iframe').ready()
finally i could run the script on load of iframe with below code
though it failed to set the width property as it was not able to find the div
$('iframe').load(function()
{
   $("#divid").css("width","50%");
}

To access the contents of the iframe use
$("iframe").contents().find("#divid")
Geat!! it could get the div element but could not set the css property as i
was trying to override the css property that already has important tag set
So, how do i set my css property as important through jquery?
Here you go...
$("iframe").load(function () {
        $("iframe").contents().find("#divid").attr("style", "width:50%!important");
    });

voila!!So much learnt today :)


 Subscribe