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.
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>
<style>
#window1 {
width: 100%;
border: solid;
border-style: solid;
border-color: black;
}
#window1 object {
width: 100%;
}
</style>
<script>
function load() {
document.getElementById("window1").innerHTML='<object
width="100%" type="text/html" data="http://www.example.com"></object>';
}
</script>
What I'm trying to do is relaod the page www.example.com in a certain width, but I can't modify the width of the page www.example.com with CSS. The reference in w3schools says that I need to add width inside the tag. But what I wanted is to set the width using CSS.
you should use style attribute as
document.getElementById("window1").innerHTML='<object
style="width:100%" type="text/html" data="http://www.example.com"></object>'
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 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>
I'm working on a project that uses several divs of the same class, each containing a single child element that might be an image or an iframe, of unspecified height. I'd like the container div to be exactly the height of its child element, but the default height is 3px taller than the child.
I've got a JSfiddle demonstrating the problem at http://jsfiddle.net/52me041n/2/.
HTML:
<div class="outside">
<img class="inside" id="pic" src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fblogs.cisco.com%2Fwp-content%2Fuploads%2Fclouds.png&f=1" height="200px"/>
</div>
<br/>
<div class="outside">
<iframe class="inside" width="420" height="315" src="//www.youtube.com/embed/VwTnyRHEZSQ" frameborder="0" allowfullscreen></iframe>
</div>
CSS:
.outside{
background-color: red;
}
I'd like to know whether it's possible to set the div to the proper height with just CSS, and if not, how to right it with JS.
Updated the fiddle. http://jsfiddle.net/52me041n/3/
Use -
img, iframe {
display: block;
}
You need to set the display property to block for children inside the parent div. As a practice, I always also set margins and pads to 0 too. fiddle here
.outside > * {
margin: 0;
padding: 0;
display: block;
}
Images are not on the same baseline as text.
add
vertical-align:bottom;
to your img css
fiddle
For "I'd like to know whether it's possible to set the div to the proper height with just CSS, and if not, how to right it with JS." <== Yes,
<div id="cntr"> </div>
css :
#cntr { width : 100px; height : 100px; overflow : hidden; } /* overflow may have other values also like hidden, auto, scroll
*/
Try this code. Fiddle
.outside
{
background-color: red;
display: block;
}
.outside img, iframe {
float: left;
}