Is there a way to prevent the redrawing of the screen while resizing a responsive website?
I want to have a responsive website, but I don't like the cheap animations that are involved when resizing the screen (media breaks, instant disappears, text wraps (really ugly))
I hope there is a way to tell the browser to redraw the screen only when resizing has stopped or some similar solution..
Is there?
No. When you change the size of any DOM element, including the body, all browsers "reflow" (i.e. redraw) the page. Even when you include an img element without an explicit size, the page will reflow when an image is loaded.
You may read more details here:
When does reflow happen in a DOM environment?
if you want to prevent redrawing set a timer something like that might help
var timeoutHandler;
var startet=false
resize=function(){
clearTimeout(timeoutHandler);
if(!startet){
startet=true;
//get body pixel width
//get body pixel height;
//save css width value
//save css height value
//set body width= width pixel value;
//set body height= height pixel value;
}
timeoutHandler=setTimeout(function(){
//restore css values
startet=false;
},100);
}
Related
I've made an example on paint
This might be overthinking this but I'm trying to have a div that always keeps its aspect ratio (9:16) and that is showing entirely on screen whatever the windows size. I tried searching for "div keep aspect ratio" but in these cases the div doesn't resize with the window. I thought using javascript to check when the height of the window is greater than its width (and vice versa) and change the css but I don't know if it's possible to run a javascript function upon resizing the page. Also, all my content is in this container and I just want black bars to fill the rest.
Thanks for helping.
There are lots of ways to do that.
use javascript resize function:
window.onresize = function() {
// resize your div according to window size
};
use Jquery resize function:
$(window).resize(function(){
// resize your div according to window size
});
use css #media https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
#media all and (min-height:640px) and (max-height:960px){
// resize your div according to window size
}
I need to adjust several elements in width and height in relation to window width. So I am using
window.onload = function() {
slideSizeUpdate();
};
$(window).resize(slideSizeUpdate);
to call my function.
After window resize everything is displayed correctly - but not onload. I guessed that this had something to do with the window-width-value.
So, I printed the width value of window and recognized that - onload - my window width had a value 'x' and when I resized for 1px left or right value 'x' of window width increased / decreased + / - 18px.
I assume that this causes the problems on my website onload. Does anybody know the reason for this and has anybody a solution how to fix it? That would be great!
EDIT
Its not that onload doesn't work at all. Its just the wrong values that it seems to get when it reads out the window width.
You can do like this:
$(window).on('load resize',function(){
slideSizeUpdate();
}).resize(); // trigger resize when page is loaded
Consider this scenario:
Some of the content is hidden via CSS. The resulting page is short and no horizontal scrollbar is required.
You calculate the window width on load event at which point scrollbars are not there.
You un-hide the content and now the page is tall and requires horizontal scrollbar.
The width of the window decreases by 17px (usual width of scrollbar) without you noticing.
If this is the case then one solution is to force the window horizontal scrollbar using CSS. You can use the following (although I recommend searching more on StackOverflow):
html {
overflow-y: scroll;
}
I try to make an image's height to always be the 1/4 of the window's height, based on responsive design and fluid images
The image is a random image picked up by the database, so I dont know if its gonna be elongated or not.
This is what I got untill now
//after the path of the image is randomly collected with websockets
elem = document.createElement("img");
elem.id="frontimage";
elem.setAttribute("height", window.innerWidth/4+'px');
document.getElementById("icon").appendChild(elem);
//this is triggered after window.onresize (see below)-in case the browser window is scaled
function img_adjust( img ) {
var beholdItsTheNewHeight = window.innerWidth/4;
img.style.height = beholdItsTheNewHeight + 'px';
}
window.onresize = function() {
img_adjust( document.getElementById('frontimage') );
}
<div id="icon" ></div>
(based on the anser by migf1, from here , sorry its Greek)
And that's it. Works fine , if you just open a browser and the browser expands to the whole screen.
Problems
-I simply cannot align the image to the center of its container. I tried margin, padding, float, position:absolute. Nothing works
-If I start scaling the browser's window (simply dragging one corner) the image's height does not "follow". Resizes, but not actually in 1/4 of screen's height.
-If I open a browser and it's not expanding to the whole screen, the image's height not scale to the 1/4 of screen's height.
Any advise?
Thanks in advance
You can use css property #icon{ text-align: center;} on the container DIV to center the image horizontally within the DIV. Look at: http://jsfiddle.net/2vxmX/
I am trying to draw some shapes on the HTML5 canvas using Javascript.
When the width and height of the canvas is of a hard coded size like for example 800x600 everything works fine.
What I would like to do is to stretch the width of the canvas to fit the parent (the size of the parent can be anything). When I apply the width: 100% and height: 100% properties in the CSS, the shapes drawn start from a different starting point from what it actually should.
A sample of what I am working on is provided in this link:
http://jsfiddle.net/jR4ne/
Please help me out in understanding what is going wrong here. It appears that the canvas is being stretched instead of being enlarged. I want the canvas to be enlarged to fit the parent.
For your case, you shouldn't use CSS to change the size. You have to specify the width and height in pixel for Canvas.
You can add the code below to your JS () and it will meet your requirement:
canvasNode.width = document.body.scrollWidth;
canvasNode.height = document.body.scrollHeight;
Of course, your parent may refer to different things, you need to change the width and height accordingly. Please refer to here for more info: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
It looks like the canvas is being initialised too early, before it has been resized to width 100%: the drawn rectangles also render in stretched mode. I would suggest putting the initialisation code into an onload function e.g.
<body onload="setupCanvas()">
or with jQuery:
$( function() { setupCanvas(); } );
I would also suggest removing the width/height attributes from the HTML (not sure if they are just there temporarily as the css width 100% is not working?)
My website's background is a huge image that covers the whole webpage, how can I make it so that, we detect user's screen size and change the background image accordingly?
Say for example, my background image is 1x1px, if user screen is 2x2px (this is just an example, nobody has this kind of small screen), I want stretch my background to fit 2x2. If user screen is say, 0.5x0.6px, then I want my background to be shown only its 0.5x0.6px part, not the whole 1x1px.
Use an image tag as the background give it a 100% for width and height, and set it behind all of the content with z-index give it absolute positioning and set its top and left where you need it to be.
<img src="yourimage" width="100%" height="100%" style="z-index:0"/>
Live Demo
In CSS3, we have a new property called background-size:
body {
background-size: 100%;
}
looking for this?
<div style="width:100%; z-index:0; height:100%; background: url(1pximage.gif)"></div>
You can detect the users screen size and do it, also you can attach a event handler to do the same when the window size is modified.
$(function(){
$(window).resize(function(){
var windowW = $(window).width();
var windowH = $(window).height();
//Using above variables you can deside the size of the background image to be set
}).resize();//Trigger the resize event on page load.
});