Height of the embedded object HTML - javascript

I encountered small problem with Height of embedded object in html.
I want to set the height and with of the object as per height and width of the browser. I am using following code Width sets properly but when i am trying to set height 100% it will not.
<object type="application/x-shockwave-flash" data="book.swf" width=100% height=100%>
it is working properly for width but not for height.
Is there any possible solution?

You need to set e.g.
html, body { height: 100%; }
Otherwise, there’s really nothing that the percentage in setting the height of the object would relate to. You may also wish to set
html, body { margin: 0; padding: 0; }

Try to write the actual Values of the width and height instead of procents for example :
<object type="application/x-shockwave-flash" data="../Desktop/final.swf" width="349" height="171">
Updated due to comment
If you want full browser size try this links:
http://www.kirupa.com/developer/mx2004/fullscreen.htm
http://www.webdesign.org/flash-swish/flash-tutorials/making-flash-taking-the-size-of-browser.15847.html

Related

equate html element with inner height

Sorry, I'm new to using the Javascript DOM and after my research I couldn't find anything. then i decided to post here
For example:
When I type
console.log(window.innerHeight);
it outputs 633.
then I create an html element and give its height a value of 633px look like:
width: 100%;
height: 633px;
I want this html element to look like a full page, but I cannot
height: 100%
because a different html element will come under it.
When the page height changes, the html element whose height I set as 633px is broken
the main question: Is there a way to equalize the window.innerHeight output with the height of the html element?
I'm not sure why you have two html elements on the same page but setting that aside... How does the second one come in? Does it get loaded via JavaScript? If so, you could make sure the first html id has an id like "" and use javascript to do something like this after the new one gets loaded:
var element = document.getElementById('whatever');
element.style.height = window.innerHeight + 'px';
This can be more easily solved using CSS using the relative units vw and vh. This unit is relative to the viewport. It can be used like this:
.fullscreen {
width: 100vw;
height: 100vh;
}
This example will always remain 100% of both width and height of the viewport and will therefor also scale responsively.

CSS/HTML Dynamically Resizing Iframe through Javascript

In my HTML code, I'm setting my Iframe width value to 95% of the width. I want the height to dynamically resize according to the set aspect ratio. I have made a javascript script to try the dynamically resizing but when i run my HTML it doesn't resize the height.
Here is my html for the iframe:
<div class="video">
<tr>
<td>
<iframe src="https://embed.theguardian.com/embed/video/news/video/2016/dec/27/cassetteboy-remix-the-news-2016-review-special-video" scrolling="no" onload="resizeiframe(this);" allowfullscreen></iframe>
</td>
</tr>
</div>
Here is my css:
.video {
}
.video iframe {
align: center;
width: 95%;
margin-top: 180px;
float: top;
position: relative;
}
and here is my javascript:
<script>
//this is javascript
//it is used to dynamically resize the height of the iframes based on screen width
function resizeiframe(object) {
//assign the aspect ratio to a variable
private float aspectratio = (6/19);
//set the objects height to the object's width multiplied by the aspect ratio
object.style.height = (object.style.width * aspectratio);
}
</script>
Can anyone help?
Two Solutions
First, you had a few issues with your original JS:
You were not getting the width of the iframe correctly (use element.offsetWidth or the like)
You need to assign the unit when setting a width (px, etc.)
You were typing aspectratio incorrectly as private float instead of var or private aspectratio: number; (Typescript) -- unless you are using another superset JS language and it wasn't tagged in the question.
JavaScript: (Modification to your original)
function resizeiframe(object) {
//assign the aspect ratio to a variable
var aspectratio = (6/19);
//set the objects height to the object's width multiplied by the aspect ratio
object.style.height = (object.offsetWidth * aspectratio) + "px";
}
// This is just quick and dirty to grab the element -- do something better
resizeiframe(document.getElementsByTagName("iframe")[0]);
Working Plnkr
Doing this via JavaScript may also require that you call resizeiframe on window.resize to compensate for user's resizing of the browser window.
OR
This can also be accomplished with a CSS-Only solution (no JavaScript needed), if you're not against using vw (viewport width units) instead of px (pixels).
CSS:
iframe {
width: 95vw;
height: calc(95vw*(6/19));
}
HTML
<iframe src="https://embed.theguardian.com/embed/video/news/video/2016/dec/27/cassetteboy-remix-the-news-2016-review-special-video" scrolling="no" onload="resizeiframe(this);" allowfullscreen></iframe>
Working Plnkr
With this solution, browser resizing is handled automagically.
Note: In both solutions, I removed .video wrapper element to simplify the answer, but this can be easily added back.
You should add px.
object.style.height = (object.style.width * aspectratio) + "px";

Re size iframe based on width of window

I have an iframe embedded in a third party website, which I cannot edit in any way.
I want the iframe to re-size according to the width of the window.
If I was able to edit the whole page, this would not be a problem.
However, when setting the size of an element in %, it uses the parent of that element to size from. In the case of the page I am working with, the parent elements do not re-size, so this does not work.
What I need, is a way of telling the iframe to re size, based solely on the width of the window, and preferably using only CSS.
Is this possible using only CSS? If not is it possible using JQuery or JavaScript?
Try this:
http://jsfiddle.net/6aLxaag8/2/
This jsfiddle loads a second jsfiddle in the iframe.
There's a hardcoded style attribute on the IFrame that sets the width; 100vw or 100% of the width of the viewing window in which the element sits, regardless of it's position in the DOM. As you don't have access to the parent page you'll need to use a style attribute and you may not be able to use javascript to add it (check cross site scripting).
Support isn't perfect with vw units, but it's close.
PS, it's hard to know if this will work without trying it in your context, please let me know :-)
I have encountered that problem before and I use this css trick, this adjust to the width & height of any wrapper/div so if you have embed an iframe inside a div with 'height: 620px' and 'width: 420px' the iframe size adjust to the div's height and width. Just change both width & height of the div to 100% percent.
.content_here {
width: 420px;
height: 620px;
}
iframe#iframecontent {
display:block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
}
<div class="content_here">
<iframe id="iframecontent" src="http://www.bootstrapcdn.com/" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto"></iframe>
</div>

How to set an element's width equal to window's width?

Using:
$(my_div).width(window.innerWidth)
Does not provide the desired result, because it does not account for the vertical scrollbar, so the element overflows the window, creating a horizontal scrollbar, as illustred below.
Illustration http://dl.dropboxusercontent.com/u/62862049/Screenshots/om.png
You could use width:100%
<div style="width:100%;height:1500px;background:red"></div>
Demo
window.innerWidth includes the width of the vertical scrollbar in some versions of Firefox:
https://developer.mozilla.org/en-US/docs/Web/API/window.innerWidth
however, w3schools seems to disagree (it says it doesn't include the width of the scrollbar):
http://www.w3schools.com/jsref/prop_win_innerheight.asp
There's even a bug concerning this in the Mozilla bug tracker:
https://bugzilla.mozilla.org/show_bug.cgi?id=156388#c14
The confusion above has been cleared a bit with CSS3, which has a specific property to calculate widths, box-sizing. Set box-sizing like this:
box-sizing: border-box
Which does the following (quoted from w3schools):
The specified width and height (and min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified 'width' and 'height' properties
You can use width:100% as noted, but bear in mind that this will ALSO include any extra spacing and padding you got - however, in CSS3-enabled browsers, this is resolved with the correct box-sizing property, as noted above. So, if you got, say a div like:
<div style="width:100%; padding: 20px;">
<div style="width:100%; background:red">Test</div>
</div>
The inner div will go off-bounds according to the CSS21 spec. Here's a jsFiddle that illustrates this problem.
So, make sure that you don't have any padding to avoid such issues.
If you want to use jQuery to get the width of the window, you could use jQuery's width() method (or css("width")).
Could you use
$(my_div).css('width', '100%');
?
$(my_div).css("width", "100%");
or
#my_div {
width: 100%;
}
You're also probably going to want to make sure your body or parent div has no padding or margin:
body {
padding: 0;
margin: 0;
}

How can I set Html object height same as window height?

I have flash object embedded to my page and it should act as background animation. I have trouble setting height of object element, because firefox doesn't understand height="100%" value.
<object classid="my_class_id" width="100%" height="100%" id="my_id">
<blaa blaa />
</object>
Have a look at the markup source of the example.
Fullscreen Flash as BG Example
You need to set height of body and html to 100%. Otherwise your object has no parent with a height and it cant use a prozentual value to set the height.
html, body {
height: 100%;
}

Categories

Resources