CODEWITHSUNDEEP
javascriptjqueryhtmlcss
flash
flash

Reputation: 1519

How to change iframe height in javascript/jquery?

I am working on a js/jquery code as shown below in which I want to override the css present in the HTML Code below. 

console.log("iframe height is", $("div.scribble-live").find("iframe").css("height"));
$("div.scribble-live").find("iframe").css("height", "200px");
console.log("iframe height is", $("div.scribble-live").find("iframe").css("height"));
.scribble-live, .scrbbl-embed {
  border: thin black solid;
  margin: 1em;
}

iframe {
  background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scribble-live">
       <div class="scrbbl-embed">
         <iframe width="100%" height="15236px" frameborder="0"
           class="scrbbl-embed scrbbl-event"
           style="border: none; visibility: visible; width: 50px; height: 15236px; min-width: 100%;">
         </iframe>
       </div>
</div>

Problem Statement:

The above js/jquery code doesn't seem to override the css ( style="border: none; visibility: visible; width: 50px; height: 15236px; min-width: 100%;") present in the HTML code above.

Upvotes: 0

Views: 4003

Answers (2)

norbitrial
norbitrial

Reputation: 15166

I guess there are 2 different things what you need to do here because there are 2 places where you have height values in your generated HTML code. Because you cannot remove any of them as I understand we need to operate with these steps:

1. Attribute change

The first thing is to change the height attribute from your code with the following line of code:

$("div.scribble-live").find("iframe").attr("height", "200px");

This will change the height attribute in the following HTML as below:

<iframe width="100%" height="200px" frameborder="0"
       class="scrbbl-embed scrbbl-event"
       style="border: none; visibility: visible; width: 50px; height: 15236px; min-width: 100%;">
 </iframe>

You can read further about .attr() here.

2. Style property change

The second thing which is changing the style attribute's height value:

$("div.scribble-live").find("iframe").css("height", "200px");

By doing this the second height in the style attribute will be changed as well:

<iframe width="100%" height="200px" frameborder="0"
       class="scrbbl-embed scrbbl-event"
       style="border: none; visibility: visible; width: 50px; height: 200px; min-width: 100%;">
     </iframe>

Read more about jQuery function .css() here.

Summary

With those function calls you are changing both values. Let me share a picture which function is changing what: Attr-css

Update: Just realized that you have the height 2 times in your HTML so I have updated my answer based on that.

Upvotes: 1

Hassan Siddiqui
Hassan Siddiqui

Reputation: 2845

For override the height prop in style attribute.

$("div.scribble-live .scrbbl-event").height("200px");

For override the iframe height attribute.

$("div.scribble-live .scrbbl-event").attr("height", "200px");

You have to execute both script because height prop inside style attribute will always override the iframe height attibute value.

Upvotes: 0

Related Questions