CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
doniyor
doniyor

Reputation: 37876

jquery - setting iframe width is not working

I know, this thing has been asked like 2 trillion times, but i cannot still get done. the iframes are generated dynamically inside the source which I get from external feed.

my jquery is: 

$(function(){
   $('iframe').each(
      function(index, elem) {
         elem.setAttribute("width","250");
      }
   );
});

this code is not being able to set the width of iframe.

and one more thing: I inspected the iframe attributes, and there are NOT editable in browser unlike other css style - which means, my jquery cannot also set it after DOM is ready

enter image description here

what the heck? is there any workaround for this?

Upvotes: 0

Views: 1012

Answers (5)

Lugarini
Lugarini

Reputation: 802

try:

$(function(){
   $('iframe').each(
      function(index, elem) {
         elem.css({ "width":"250px !important" });
      }
   );
});

Upvotes: 0

UID
UID

Reputation: 4514

There is a very simple way of assigning "width or height" to any element at run-time, and that's using ".width() and .height()" method of jQuery.

Refer:

http://api.jquery.com/width/

http://api.jquery.com/height/

Here is an example:

<script type="text/javascript">
    $(document).ready(function () {
        $("iframe").width(500);
        $("iframe").height(500);
    });
</script>

Example : Regular iframe without updating height and width at run-time.

Example: When you update height and width at run-time.

Here is another stackoverflow question for iframe width where you can find good explanation in the answer if you are using multiple iframes : Change iframe width and height using jQuery?

Upvotes: 0

Arthur
Arthur

Reputation: 5148

Works for me with 

    $('iframe').each(function(){
        $(this).width( w );
    });

http://jsfiddle.net/8e1gz475/

Upvotes: 0

vpzomtrrfrt
vpzomtrrfrt

Reputation: 478

Use .attr, not .setAttribute.

Upvotes: 0

Mooseman
Mooseman

Reputation: 18891

$('iframe').each(function(){
    $(this).width(250);
});

Docs: http://api.jquery.com/each/ and http://api.jquery.com/width/#width-value

Upvotes: 1

Related Questions