Resize iframe to values smaller than default width/height - javascript

I have an iFrame
<iframe src="pageToLoad.html" onLoad="autoResize(this);"></iframe>
and a script that resize the iframe according to it's content
function autoResize(elem) {
var newheight;
var newwidth;
newheight = elem.contentWindow.document.body.scrollHeight;
newwidth = elem.contentWindow.document.body.scrollWidth;
elem.style.height = newheight + "px";
elem.style.width = newwidth + "px";
}
It's working great!
Except when the iFrame should be smaller than 300px x 150px, than those two values kick in by default.
I created a jsFiddle to display the problem, It seems like 300px x 150px are the default value of an iFrame.
Anyone have an idea how I can fix that, so I can use iFrame with size like 200px x 670px or 980px x 70px ?

I just realized that I need to set the minimal width and height of the iFrame in CSS first (200px x 70px). than if the values returned by scrollHeight/scrollWidth are lower than the default one (300px x 150px) the value returned will be applied.

This works fine in my experience and is not based on a limit. You likely are not managing the height and width of the content page correctly.
Please include the source for pageToLoad.html.
Also: Pro tip for troubleshooting this: HARD CODE the width and height of the iframe first before worrying about javascript.
For example:
<iframe src="pageToLoad.html" style="height: 50px; width: 50px;"></iframe>
Then you can confirm that your browser lets you go smaller than the default width and height independently of testing your javascript. Once you have confirmed that, fix your javascript.
No way of knowing until you post the inner page, but it is possible that your inner page is growing after the iframe loads it. You can also try messing with height and width for the body of your inner page. For example, this pageToLoad.html works with your auto-resize method:
<!DOCTYPE html>
<html>
<head><title>iframe test</title></head>
<body style="height: 50px; width: 50px;">
INNER PAGE
<script>
</script>
</body>
</html>

Related

Changing grid depending on device orientation

I'm trying to change the size of divs depending of screen size.
If the phone is laying it changes the sizes of divs.
Example:
block is default: 330px width and 250px high on a 768x1280 screen resolution.
The factor is:
width: 330px; factor x 2,18
height: 250px; factor x 5,12
When i change my phone to laying the sizes should be:
width: 587px
height: 150px
which doesnt work in the first place, can someone tell my why not?
js:
var devicewidth = $( window ).width();
var deviceheight = $( window ).height();
var mbwsize = devicewidth / 2.18;
var mbhsize = deviceheight / 5.12;
var mbisize = mbhsize / 1.25;
$('#mainmenublok').css('width', mbwsize+'px');
$('#mainmenublok').css('height', mbhsize+'px');
$('#mainmenublok').css('background-size', mbisize+'px'+mbisize+'px');
dont get errors, it just keeps the content in the middle as 720px width (768 - offset)
I changed the main div already here:
$('#maintable').css('width', devicewidth+'px');
Will try to change window to document but can someone look at this?
With document it doesnt change either.
The calculation is correct if you look at the picture at the debug.
I also tried it in a function but that did not work.
Added a picture to explain what happens
explain:
debug:
Based on the HTML provided by the author in the comments
<div onclick="bb.pushScreen('timeline.html', 'timeline');"class="mainmenublok" id="blocktimeline" style="background-image:url(ico/timeline.png); background-size:200px 200px; background-repeat: no-repeat; background-position:center;">
<img id="pictimeline" src="ico/bbaction.png" width="50" height="50" style="display:none;">
</div>
and the js used as shown above, I suggest to use $('.mainmenublok').css('width', mbwsize+'px'); instead of $('#mainmenublok').css('width', mbwsize+'px');. Dots are used to indicate classes in CSS, as hashtags are used to indicate ID's.
You could use mediaqueries or device.js?
The way you are trying to achieve by script.... Is okay but in some browser it may give you bugs ... better you try with any of the css frameworks like twitter bootstrap its not really huge.... the your site will be responsive as according to your device....

resize event is not resizing image size as expected

I have a image and I'm setting its height and width to 90% of the screen size while I am loading the HTML page. Now I want to adjust the image size when I resize the browser. Below is my code -
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function setImageSize() {
document.getElementById('rockImg').height=(screen.height)*.9;
document.getElementById('rockImg').width=(screen.width)*.9;
}
function resizeImageSize() {
document.getElementById('rockImg').height=(document.body.clientHeight)*.9;
document.getElementById('rockImg').width=(document.body.clientWidth)*.9;
}
</script>
</head>
<body onload="setImageSize();" onresize="resizeImageSize();">
<img src="iRock_normal.png" id="rockImg" alt="iRock" onclick="greetByName();" />
</body>
</html>
The problem is, when I restore down the page, image size is getting changed as expected. However when I maximize the page, image height is holding the size same as when I restore down the page. And on each restore down + Maximize image size is getting smaller and smaller. Surprisingly it is happening only for height, not width.
Am I doing something wrong? How can I fix this?
<img src="iRock_normal.png" id="rockImg" alt="iRock"/>
javascript:
var rockImg = document.getElementById('rockImg');
function resize() {
var height = window.innerHeight*.9;
var width = window.innerWidth*.9;
rockImg.height= height;
rockImg.width= width;
}
window.onload = resize;
window.onresize = resize;
Live demo here (click).
Inline js (onlick, etc, in your html) is not good practice - it should never be used. Your code would be easier to debug if you broke things up as I did above. Get the height, then apply the height, so that you can check what height is being calculated. That would have shown you that clientHeight wasn't giving you the value you expected. Further, your element can be cached in a variable so that you don't have to keep typing that long function to find it and hurting performance by searching the dom each time.

Website Needs to auto resize every element on the page like images and fonts

I've got a page that has a variety of text and images placed on the page. When the users resizes their window (or users that simply have different resolutions), the design needs to have everything scale proportionally. So I created this jQuery function that triggers on resize (or when page loads) and I look at every element I've put on that page so far and resize it based on the aspect ratio.
Like this:
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
As I add more and more to the page it is extremely tedious. Every padding, margin, font-size, width, height, etc. needs to be resized based on that ratio.
Is there a jQuery plug-in or some other suggestion that would help with this?
Thank you.
Think of it like this, when a user resizes the window, JQuery runs a function.
$(window).resize(function()
{
var Width = $(document).width();
var Height = $(document).height();
$('body').css({"height" : Height, "width" : Width});
}
Or The easy way in CSS,
body
{
width:100%;
height:100%;
}

youtube video as web site background

is there a way to embedd youtube video as a background of a web page with html, css and javascript with the actual site content on top? how?
basically, it should be a video that auto plays, is muted (but the volume can be turned up by the visitor) and the site should work well being on top of it (the site is minimal so most of the video should be visible at all times). the site is minimal enough that no scroll bars would be visible by default in most browsers and the video should be 100% width and height.
examples? links?
tried Google but couldn't find it.
also it should work for videos not on youtube.
html5 and css3 preferred :)
I REALLY NEED A LIVE EXAMPLE SOMEWHERE (or as close to) because i tried it all (as available via google and failed)
also, related - there doesn't seem to be (as per my own research) any way of slowing down the play of youtube videos (for example: 24 times slower) - true / false?
You have probably found a solution by now but just in case you haven't...have you tried http://www.seanmccambridge.com/tubular/ ?
<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%"
src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">
</iframe>
</div>
// Replace ID with the actual ID of your YouTube video
http://www.labnol.org/internet/youtube-video-background/27933/
you got this library as well:
http://florian-chapon.fr/dev/youtube-background/
the only thing you have to do, is include the js file, and put this script on your "body":
$(document).ready(function() {
ytbg("vQWlNALvbhE", 0, 17, 1);
});
As an explanation:
ytbg("video link", starttime, endtime, volume).
for completeness sake adding http://okfoc.us/okvideo/ here. Also does Vimeo.
There are two ways to answer this question:
Set the flash player's wmode to transparent, put it in an absolute div with a low z-index. Put the content in another absolute div with a higher z-index.
Don't do it. Seriously. Don't put a movie behind the site's main content. You are aliening your customer base, making the site hare to view and read, and violating about a dozen or two other guidelines in good site design. Why not put the video inside the flow of the document where it belongs instead?
Well you could absolute position the tag or the , use CSS to set the height and width. Use javascript to simulate clicking on the button. set the element zIndex to the background.
Hi, as tubular is quite suffisticated, i extracted the necessary code
for you.
html code:
<div id="player-container" style="overflow: hidden; position: absolute; width: 100%; height: 100%;">
<div id="player" style="position: absolute">
</div>
here comes the complete youtube API cover style stuff, extracted from
tubular. jquery is needed. Also the standard youtube html5 iframe api
code must be included - as given here:
https://developers.google.com/youtube/iframe_api_reference#Getting_Started
var ratio = 16 / 9;
window.onPlayerReady = function (e) {
resize();
}
$(window).on('resize', function () {
resize();
})
var resize = function () {
console.log("resize");
var heightcorrection = 0,
width = $(window).width(),
pWidth, // player width, to be defined
height = $(window).height() - heightcorrection,
pHeight, // player height, tbd
$videoPlayer = $('#player');
if (width / ratio < height) { // if new video height < window height (gap underneath)
pWidth = Math.ceil(height * ratio); // get new player width
$videoPlayer.width(pWidth).height(height).css({
left: (width - pWidth) / 2,
top: 0
}); // player width is greater, offset left; reset top
} else { // new video width < window width (gap to right)
pHeight = Math.ceil(width / ratio); // get new player height
$videoPlayer.width(width).height(pHeight).css({
left: 0,
top: (height - pHeight) / 2
}); // player height is greater, offset top; reset left
}
}

jquery - stretch background image to fill document rather than window?

I'm using this plugin: https://github.com/srobbin/jquery-backstretch to stretch a background in a good way.
So the issue is that if the content of the document is long enough to cause a scrollbar, then when you scroll, the image stays in the same place (just looks like a stationary background). You can see it in his demo here: http://srobbin.com/jquery-plugins/jquery-backstretch/ (this page uses the plugin. Just scroll and notice the background doesn't move).
I'm wondering if there's a way to change the plugin to not use the window height or something and rather use the document height? I've looked, but to no avail. I know this isn't a great idea in the case that the content is long, but it's done on only a single page that doesn't have much content at all. Really the only issues are if the browser real estate (not counting the chrome) is like less than around 650px in height.
Here's the plugin code. Pretty short and well written from what I can tell:
https://github.com/srobbin/jquery-backstretch/raw/master/jquery.backstretch.js
I once had the same problem, this was my solution.
$(window).resize(bg);
function bg() {
var imgWidth = 1088,
imgHeight = 858,
imgRatio = imgWidth / imgHeight,
bgWidth = $(document).width(),
bgHeight = bgWidth / imgRatio;
$('body').css({backgroundPosition: 'top center'});
if ($(document).width() < imgWidth && $(document).height() < imgHeight && $(document).height() > bgHeight) {
$('body').css({backgroundSize: 'auto 100%'});
} else {
$('body').css({backgroundSize: '100% auto'});
}
}
bg();
$('body').css({backgroundRepeat: 'repeat-x'});
$('body').css({backgroundImage: 'url("images/bg-state/bg_static2.png")'});
Note: It do not stretch on IE due to the code uses the css3 property background-size and you need to set your own width and height of the image in the code.
Another approach with scrollable content and a fixed background would be to just use an <iframe> or fixing the <img> on a layer. Then you wouldn't need to depend on jQuery (which I think is a bit heavy) for something that could be done on the browser without it.
<body background="background.png">
<iframe src="content.html" height="600"/>
</body>
Also found another way to do it with layers:
<img src="background.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index:-1;" />
<div style="position: static;z-index: 1; ">
content
</div>
Without paying respect to the image ratio, I believe you could set bgHeight to $("body").height().

Categories

Resources