I work with javascript and I have the following element. I want to apply a CSS style to change height: 100px of element iframe
<div tabindex="-1"
class="mce-edit-area mce-container mce-panel mce-stack-layout-item"
id="mceu_21" role="group" style="border-width: 1px 0px 0px;" hidefocus="1">
<iframe title="Área de texto enriquecido.
Pulse ALT-F9 para el menu. Pulse ALT-F10 para la barra de herramientas.
Pulse ALT-0 para ayuda" id="text1_ifr" src='javascript:""'
frameborder="0" style="width: 100%; height: 100px; display: block;" allowtransparency="true">
</iframe></div>
How do I have to define the CSS style?
Add a class to the iframe first
<iframe class="height-100"></iframe>
In CSS provide your styling,
iframe .height-100 {
height: 100px;
}
use height: 100px !important only as a last resort.
Update:
You have already provided styling to your iframe
style="width: 100%; height: 100px;"
that should have worked, use element select and check if its getting overridden by something else.
define style element in head tag
<style>
iframe {
width: 100px !important;
}
</style>
Related
I am trying to embed Facebook videos on my website. However like many before me I am struggling with sizing them.
Following the official documentation, I realized that the first way of doing it (with the js SDK) provided an easy method to have adjustable videos, but was about twice as slow as using the iframe. But of course in the latter case, only the width of the video will adjust to its container.
I tried accessing the iframe's data to fetch the video's original height and CSS to adjust its width based on code samples I found on the internet, but can't due to same origin policy.
https://codepen.io/Angc/pen/ExYGNOO
<div class="root">
<div id="35-365098" class="embed-iframe-facebook">
<div>
<iframe id="iframe-35-365098" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fdestanie.wagner%2Fvideos%2F2391334934255393%2F&show_text=0" style="border:none;" scrolling="no" allowtransparency="true" allowfullscreen="true" frameborder="0"> </iframe>
</div>
<span class="origin-url" hidden="">https://www.facebook.com/destanie.wagner/videos/2391334934255393/</span>
</div>
</div>
.embed-iframe-facebook {
max-width: 300px;
}
.embed-iframe-facebook div {
position: relative;
height: 0;
padding-top: 178%;
}
.embed-iframe-facebook iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Furthermore, I can't seem to find a way to tell the iframe to "adjust its size to its content". Ideally I would want to do that, and detect its height so I can adjust its width, to create an artificial "max-height".
My question is therefore: how can I have the iframe adjust its height to the embedded video ?
It's possible to let an iFrame fill its parent div.
For example:
.container {
display: block;
height: 100vw;
}
.iframeContainer {
display: block;
width: 100%;
height: 100%;
padding: 0px;
clear: both;
}
.embed-area {
clear: both;
width: 100vw;
}
And use the following HTML markup.
<div class="root">
<div class="container">
<div class="embed-area">
<div class="iframeContainer">
<!-- Render the iFrame in this div. -->
<!-- It will now fill up the div, unless other style rules are preventing it. -->
</div>
</div>
</div>
</div>
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.
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:
Update:
Just realized that you have the height 2 times in your HTML so I have updated my answer based on that.
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.
I have the following question. is it possible to change the fill color of the svg file with the colorpicker. So far I have come to a moment where I can change the color of the background, but it would be best to change the color of the graphics as if it were a background or foreground. I would be very grateful for the help because I am a person who is just learning to program in jquery and does not understand everything yet. Underneath I attach my code. Pictures placed in the diva are changed using the buttons so they change dynamically. Once again, I will be very grateful for your help.
<style>
.inner1
{
width: 500px;
height: 500px;
margin:0 auto;
position: absolute;
margin-bottom:0;
border:solid 2px black;
overflown:none;
}
</style>
<html>
<div id="Image-Holder-fg" class="inner1 " >
<img class="popart1" src ="img/DCIM/Animal/animal5.svg" style="width:
1425px; height: 1425px;" />
<img class="popart2" src ="img/DCIM/Animal/animal6.svg" style="width:
1425px; height: 1425px;" />
<img class="popart3" src ="img/DCIM/Animal/animal7.svg" style="width:
1425px; height: 1425px;" />
<img class="popart4" src ="img/DCIM/Animal/animal8.svg" style="width:
1425px; height: 1425px;" />
</div>
<div id="picker-fg"></div>
</html>
<script>
$('#picker-fg').colpick({
flat:true,
layout:'hex',
submit:0,
colorScheme:'dark',
onChange:function(hsb,hex,rgb,el,bySetColor) {
$("#Image-Holder-fg").css('background-color','#'+hex);
if(!bySetColor) $(el).val(hex);
}
}).keyup(function(){
$(this).colpickSetColor(this.value);
});
</script>
Use the SVG inline, that way you can select an specific node and set the fill using JS.
I'm using two iframe tag in my website.
I added css for 1 tag
<style>
iframe{
opacity: 0;
border: 0px none transparent;
position: absolute;
top: 300px;
left: 200px;
height: 300px;
width: 250px;
filter:alpha(opacity=0);
}
</style>
But both iframes are hidden.
I want to show 1 iframe and hide another one. How can I do that?
You can use IDs for this if you have a simple page and don't have too many styles to maintain. Below the style tags are the iframes with ID attributes defined. Those ID attributes are used between the style tags to select the iframe element you want to style by ID.
<style>
/* Using ID selector #iframeOne */
#iframeOne {
opacity: 0;
border: 0px none transparent;
position: absolute;
top: 300px;
left: 200px;
height: 300px;
width: 250px;
filter:alpha(opacity=0);
}
</style>
<!-- Give ID to iframe you want to style. Here it's iframeOne -->
<iframe id="iframeOne"></iframe>
<iframe id="iframeTwo"></iframe>
Try these selectors:
iframe:first-child{
// styling
}
iframe:last-child{
// styling
}
iframe:nth-child(1){
// styling
}
You should add ID or Class in your <iframe> tag like below code:
Add ID:
<iframe id="iframe-1"></iframe>
<iframe id="iframe-2"></iframe>
or
Add Class:
<iframe class="iframe-1"></iframe>
<iframe class="iframe-2"></iframe>
Below CSS:
<style>
#iframe-1,
.iframe-1 {
/* Your code here */
}
#iframe-2,
.iframe-2 {
/* Your code here */
}
</style>
The best way is to give the one you wish to hide an id or a class and then let the css be applied to the id (#your_id) or the class (.your_class). So instead of writing iframe{.... you would write #your_id{... or .your_class{....
I have this code for div
<div align="center" id="1_2" class="class_div" onclick="DoAction(1)" style="float: left; height: 60px; width: 250px; margin: 10px"><h1> Class :Class-1</h1> Class Teacher :Manan</div>
When cursor moves on the div it shows text-cursor . I want that div to be clickable and the click-cursor should come there.How could this be done.Please help??
Add cursor: pointer to the style rule for the class_div class in your CSS.
To make it fully clickable, you need to add cursor:pointer; display:inline-table; text-align:center; properties respectively to the div.
Without display:inline-table, the whole of the div will not be clickable and will create a gap between two lines of text.
Here is the WORKING SOLUTION
The HTML:
<div align="center" id="1_2" class="class_div" onclick="DoAction(1)" style="float: left; height: 60px; width: 250px; margin: 10px"><h1> Class :Class-1</h1> Class Teacher :Manan</div>
The CSS:
div{cursor:pointer; display:inline-table; text-align:center;}
Hope the helps.
PS: I have illustrated with div as the selector, but alternatively, you can apply the styles to the class also.
You need to change style like this -
<div style="cursor:pointer" ....></div>.