I want to create a website scrolled vertically. The problem I have is that I want starting point on the website to be on the center. I guess I need to use JS for this, but I don't know how.
Apparently outerHeight is only supported in Firefox. How about this?
var winWidth = document.body.clientWidth;
var winHeight = document.body.clientHeight;
window.scrollTo(winWidth, winHeight / 2);
This should work on most browsers. window.outerHeight is the height of the entire content of the page. window.scrollTo scrolls the browser to the specified x and y coordinate.
window.scrollTo(0, window.outerHeight / 2);
Related
I designed a website to be used as digital signage 1920x1080 filling entire screen.
is there such a thing to work (sort of like a viewport works on mobile) to zoom all text/images recursive to all sub DIV's etc as if you hit Ctrl - to zoom in your browser settings.
i want this to happen on page load or adjusting window size. it should scale to the best possible width height to fit in that desktop window's size height.
looking for an option in either CSS or as a jquery plugin. i googled around and did not find anything.
Your help is appreciated.
SOLVED - ENJOY
CSS Transform Scale https://www.w3schools.com/css/css3_2dtransforms.asp
function scalebody() {
var veiwwid = $(window).width() / 1920;
var veiwwidhh = $(window).height() / 1080;
if(veiwwidhh < veiwwid){veiwwid = veiwwidhh;}
$('body').css( {"transform": "scale("+veiwwid+")"});
var margintop = ((1080 - $(window).height() )/2) *-1 ;
var marginleft = ((1920 - $(window).width() )/2) *-1 ;
$('body').css( {"margin-top": margintop, "margin-left": marginleft});
}
$(document).ready(function(){scalebody();});
$(window).resize(function() {scalebody();});
This question already has answers here:
How to get screen width without (minus) scrollbar?
(8 answers)
Closed 5 years ago.
I would like to get the viewport height of a screen, without the overflowY.
In other words, I want to see the height of the user's screen, NOT the entire website's page height including the overflowy which the user can then scroll down.
So, if he has an iphone and the iphone has 600px in height, then i want to get 600, and not the entire body including the scroll which can be higher.
This works fine but it is hacky, is there another solution? I failed to come up with anything else.
// First you forcibly request the scroll bars to be shown regardless if they will be needed or not.
$('body').css('overflow', 'scroll');
// Take your measures.
// (These measures WILL take into account scroll bars dimensions)
var heightWithScrollBars = $(window).height();
var widthWithScrollBars = $(window).width();
// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');
Not entirely sure I understand, but if you want the users viewport / screen size
you can access them through vanilla javascript like so
var viewportWidth = window.innerWidth + "px";
var viewportHeight = window.innerHeight + "px";
It will just get you a number so you have to prefix it with px.
Viewport height and width can be accessed using:
width = window.innerWidth
height = window.innerHeight
window.outerHeight / window.outerWidth
are this values not in pixels ?
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_inner_outer
(screen is 2560)
firefox outerWidth: 2576
edge outerWidth: 3435
chrome outerWidth: 2560
IE outerWidth: 2862
what are this values ?
how can i get the screen size in pixels ?
//if you need the screen width and height
//Screen height
var height = screen.height
//Screen Width
var width = screen.width
//if you want to know what the code you use do:
Get the window's height and width: (including toolbars/scrollbars):
var w = window.outerWidth;
var h = window.outerHeight;
source:http://www.w3schools.com/jsref/prop_win_outerheight.asp
Get the window's height and width: (NOT including toolbars/scrollbars):
var w = window.innerWidth;
var h = window.innerHeight;
source: http://www.w3schools.com/jsref/prop_win_innerheight.asp
Did you set your doctype at the top of your HTML, I remember this was giving me an issue awhile back. Try putting
<!DOCTYPE html>
before your opening tag
Grrrmppf
i not realy use IE or edge and chrome behaves different eg ZOOM is on a domain level in opposite to ie and edge where it is on a global level
problem was i had pagee zoom on
How can I get the browser scrollbar height? Does JS have a built-in function for this case?
Somebody please help me out of this.
There isn't a built-in method for this. However, the scrollbar's height is supposed to give an indication of how much of the available content fits within the available viewport. Going by that, we can determine it like:
var sbHeight = window.innerHeight * (window.innerHeight / document.body.offsetHeight);
Where window.innerHeight / document.body.offsetHeight is the percentage of content visible currently. We multiple that with the available viewport height to get the approximate scrollbar height.
Note: Different browsers may add/reduce some pixels to/from the scrolbar height.
'window.pageYOffset'
returns the current height of the scrollbar concerning the full height of the document.
A simple example of usage is like
alert('Current scroll from the top: ' + window.pageYOffset)
Does this help?
this.document.body.scrollHeight
How to get document height and width in pure javascript i.e without using jquery.
I know about $(document).height() and $(document).width(), but I want to do this in javascript.
I meant page's height and width.
var height = document.body.clientHeight;
var width = document.body.clientWidth;
Check: this article for better explanation.
Even the last example given on http://www.howtocreate.co.uk/tutorials/javascript/browserwindow is not working on Quirks mode. Easier to find than I thought, this seems to be the solution(extracted from latest jquery code):
Math.max(
document.documentElement["clientWidth"],
document.body["scrollWidth"],
document.documentElement["scrollWidth"],
document.body["offsetWidth"],
document.documentElement["offsetWidth"]
);
just replace Width for "Height" to get Height.
This is a cross-browser solution:
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
You should use getBoundingClientRect as it usually works cross browser and gives you sub-pixel precision on the bounds rectangle.
elem.getBoundingClientRect()
Get document size without jQuery
document.documentElement.clientWidth
document.documentElement.clientHeight
And use this if you need Screen size
screen.width
screen.height
You can try also:
document.body.offsetHeight
document.body.offsetWidth
This should work for all browsers/devices:
function getActualWidth()
{
var actualWidth = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth ||
document.body.offsetWidth;
return actualWidth;
}
If you want to get the full width of the page, including overflow, use document.body.scrollWidth.
window is the whole browser's application window. document is the webpage shown that is actually loaded.
window.innerWidth and window.innerHeight will take scrollbars into account which may not be what you want.
document.documentElement is the full webpage without the top scrollbar. document.documentElement.clientWidth returns document width size without y scrollbar.
document.documentElement.clientHeight returns document height size without x scrollbar.
How to find out the document width and height very easily?
in HTML
<span id="hidden_placer" style="position:absolute;right:0;bottom:0;visibility:hidden;"></span>
in javascript
var c=document.querySelector('#hidden_placer');
var r=c.getBoundingClientRect();
r.right=document width
r.bottom=document height`
You may update this on every window resize event, if needed.