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.
Related
When in google chrome's device mode, what does window.innerWidth return? Is it the viewport of the device (plus any scroll bars)?
I'm getting different values for the device's width x height (the dimensions on top of the page - the device's viewport?) and window.innerWidth x window.innerHeight (browser's viewport?). Is this supposed to happen?
Here's a picture of what I'm getting, and the code I used.
<!doctype html>
<html>
<head></head>
<body>
<script>
var image;
window.onload = function() {
image = document.getElementById("img");
checkWindowSize();
window.addEventListener('resize', function(event){
checkWindowSize();
});
}
function checkWindowSize() {
var width = window.innerWidth,
height = window.innerHeight;
console.log("window.innerHeight: ", window.innerHeight, " window.innerWidth: ", window.innerWidth);
}
</script>
<img id="img" class="vid-img-filter" src="http://i.imgur.com/jkhFJMn.jpg" alt="">
</body>
</html>
window.innerWidth and innerHeight return the dimensions of the visual viewport. In desktop browsers, this is generally the browser's window dimensions. On mobile the situation is a bit more complicated because of pinch zoom.
When you load a page without a <meta name="viewport"> tag, a default layout width is used (e.g. Chrome uses 980px). When the browser loads the page it does so maximally zoomed out. It looks like your device size above has a width of 425px so the browser zooms out when the page is loaded to see the whole 980px. If you have content that's wider than this (e.g. your image) it'll zoom out even further. Seeing as how your window.innerWidth is 1248, that implies a scale factor of about 30%.
tl;dr: innerWidth/innerHeight reflect viewport with the pinch-zoom factor applied and the page is loaded fully zoomed out.
EDIT: This has since changed in Chrome. window.innerWidth now returns the layout viewport width. To get the visual viewport width, use window.visualViewport.width. See this article for more details.
I'm not sure if this is a recent update (since the last responses), but I was able to find the viewport height/width by using:
window.screen.width
and
window.screen.height
This was particularly useful when I was trying to test whether the screen was phone-sized or not.
We're currently having success with something like:
const widths = [window.innerWidth];
if (window.screen?.width) {
widths.push(window.screen?.width);
}
const width = Math.min(...widths);
The conditional check is there because I'm not sure how widespread the screen width API is. You may need to adjust this not to use certain newer JS features depending on what devices you are targeting/your build process.
This could potentially go a bit weird if you have a window that is wider than the screen, but for us that isn't a problem.
This gives us a width that matches the one at the top of the Responsive screen tool, even when contents overflow horizontally. This is important for us because we needed the UI to change in order to prevent that overflow, but the overflow was interfering with the width number we used to trigger the adjustment.
I'm not sure if this is important, but we are also using:
<meta name="viewport" content="width=device-width, initial-scale=1" />
I have a div with many absolute positioned elements inside it. Now I need to get the height of the document to be able to add a margin to the bottom.
This piece of code:
var body = document.body, html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
works fine on desktop. However it doesn't work on mobile devices...
It returns the window height instead of the entire document height.
What I want to do is to add a margin to the bottom which doesn't work because of the absolute positioned elements...
Note:
Due to a strange behavior on tablets and smartphones where fixed elements on the left and right site moved I had to set my main containers overflow property to hidden.
Maybe try JQuery height() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Height of document is: " + $(document).outerHeight(true));
});
});
</script>
</head>
<body>
<button>Display the height of document</button>
I found out what the problem was: due to the overflow: hidden it didn't get the entire document.
I solved the problem by searching for the lowest element on the document and adding a margin-bottom to it.
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>
I'm using epiceditor within my site, and I am populating it with markdown embedded on the page by the server. Currently when epiceditor displays, it has a very small default height, with scroll bars to handle viewing the entire content. I can manually set the height of the div, and for now that's the best I've been able to do (I've set it to something reasonably large: 800px). However I would like its height to always be enough to fit the entire content without scroll-bars. Essentially something like overflow:visible.
Here's the relevant portions so far
<html>
<head>
<script src="/assets/javascripts/epiceditor/js/epiceditor.min.js" type="text/javascript"></script>
<script id="postMarkdown" type="text/markdown" data-postId="1">
#Markdowns in here
...
</script>
<style>
#epiceditor{
height: 800px;
}
</style>
<script src="/assets/javascripts/thrown/posts/edit.js" type="text/javascript"></script>
</head>
<body>
<div id="epiceditor">
</div>
</body>
</html>
And heres the edit.js source (its compiled from coffescript)
$ ->
postMarkdown = $("#postMarkdown").first()
options =
basePath : '../../assets/javascripts/epiceditor'
editor = new EpicEditor(options).load()
postId = postMarkdown.data('postId')
markdown = postMarkdown.html()
editor.importFile('posts/'+postId,markdown);
editor.reflow();
I was hoping reflow might expand the height after the content was inserted, however no such luck. However If I resize the div and call reflow, It does resize properly.
I've inspected the markup it creates in hopes I could determine the height and resize its container and tell it to reflow. However it seems it contains multiple iframes, and at a glance I didn't expect that to be a quick change, or if it would even be possible. However I'd welcome any solution.
I also understand that if I size its container to the right height, epiceditor will fill the proper space. However I want its height to be the amount needed to render, such that the editor takes up the right space in the rest of the sites design. Therefore if there something I can set in EpicEditor to have it not overflow in the manner it is, or a way to determine the height after it loads, I'm set.
Thanks for any help.
I'm the guy who made EpicEditor, here's a solution for you:
var editor = new EpicEditor({
basePath: 'https://raw.github.com/OscarGodson/EpicEditor/develop/epiceditor'
});
var updateEditorHeight = function () {
editorHeight = $(editor.getElement('editor').body).height();
// +20 for padding
$('#epiceditor').height(editorHeight + 20);
editor.reflow();
}
editor.load(function (){
updateEditorHeight();
});
editor.on('update', function () {
// You should probably put a check here so it doesn't
// run for every update, but just on update, AND if the
// element's height is different then before.
updateEditorHeight();
});
Also, in the CSS I added a overflow: hidden to epiceditor's wrapper so the scrollbars don't appear as it grows.
DEMO: http://jsbin.com/eyidey/1/
DEMO CODE: http://jsbin.com/eyidey/1/edit
UPDATE
As of EpicEditor 0.2.2 autogrow is built in. Just turn on the autogrow option.
I've created a page using squares. The squares combine to make a particular word. But when I resize the window, the squares disrupt their place in a haphazard way. How I can change my CSS or javascript so that the squares retain their original positions on window resize?
You can view the page at : http://www.tryst-iitd.com/13/beta
I've included the following code to take care of the resizing, still the problem remains unsolved.
<script type="text/javascript">
$(function () {
var screenWidth = $(window).width() + "px";
var screenHeight = $(window).height() + "px";
$("#container").css({
width: screenWidth,
height:screenHeight,
});
$(window).resize( function () {
var screenWidth = $(window).width() + "px";
var screenHeight = $(window).height() + "px";
$("#container").css({
width: screenWidth,
height:screenHeight,
});
});
});
</script>
The square is disrupted because the width of the container is adjusted automatically whenever you resize your window. Set a fix value or set a minimum width for the square and container should fix the problem. The square width is in %.
Also, the window resize event itself is useless because the div (id=container) is adjusted according to the width of the body tag
Set the position and size of your squares in percentages and your resize code will works fine.
Also, set the min-width/min-height CSS properties will prevent your squares from being too small.
Your problem is that your css margins are fixed width, so even if squares width are in %, margins causes this issues.
As an example, try disabling wrap1 and wrapalphabet css classes, you will see that your design will be much more responsive.
You probably have to rethink the way you deal with margin/padding to get the results you expect.