What I'm trying to achieve is to get the browser's viewport height and add it to several classes of my css. So far I have this:
Get viewport height:
var width = $(window).width();
var height = $(window).height();
Add to css
$('divOne').css({"height": " *viewport height* "});
$('divTwo').css({"top": " *viewport height* "});
$('divThree').css({"top": " *viewport height* + 200px"});
$('divTwo').css({"top": " *viewport height* + 400px "});
Sample:
It would be really great if someone could provide some working piece of code here. My coding skills are very limited.
Your code looks about right to me, except you have to do the math outside of the string literals, and because you're using classes, you need a class selector (e.g., ".divOne", not "divOne"), e.g.:
var width = $(window).width();
var height = $(window).height();
$('.divOne').css({"height": height + "px"});
$('.divTwo').css({"top": height + "px"});
$('.divThree').css({"top": (height + 200) + "px"});
$('.divTwo').css({"top": (height + 400) + "px"});
You probably also want to give divs two through four height, because otherwise they'll only be as tall as their content. And you need to be certain that the script operating on the divs is after the divs in the markup, so that they exist when the code runs. (Or use jQuery's ready event, but there's no need for that if you control where the script tags go.)
Here's an example that adds heights, etc.: Live Copy | Live Source
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Div Height And Such</title>
</head>
<body>
<div class="divOne">divOne</div>
<div class="divTwo">divTwo</div>
<div class="divThree">divThree</div>
<div class="divFour">divFour</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var width = $(window).width();
var height = $(window).height();
$('.divOne').css({"height": height + "px"});
$('.divTwo').css({
"top": height + "px",
"height": "200px"
});
$('.divThree').css({
"top": (height + 200) + "px",
"height": "200px"
});
$('.divTwo').css({
"top": (height + 400) + "px",
"height": "200px"
});
</script>
</body>
</html>
$('.divOne').css({
"height": $(window).height()
})
Try that... Remember the . Before divOne
Is that what you're asking for?
var height = $(window).height();
$('.divOne').css({"height": height+"px"});
$('.divTwo').css({"height": height+"px"});
$('.divTwo').css({"top": height+"px"});
$('.divThree').css({"top": height+200});
$('.divTwo').css({"top": height + 400});
Choose whichever suits you the best. I suggest pure JavaScript with variables.
// NO VARIABLES
// pure JavaScript
document.getElementById("divOne").style.height =
document.documentElement.clientHeight;
document.getElementById("divOne").style.height =
document.documentElement.clientHeight;
document.getElementById("divOne").style.height =
parseFloat(document.documentElement.clientHeight) + 200 + "px";
document.getElementById("divOne").style.height =
parseFloat(document.documentElement.clientHeight) + 400 + "px";
// jQuery
$("#divOne").style.height = $(window).height();
$("#divTwo").style.height = $(window).height();
$("#divThree").style.height = parseFloat($(window).height()) + 200 + "px";
$("#divFour").style.height = parseFloat($(window).height()) + 200 + "px";
// WITH VARIBLES
// pure JavaScript <-- SUGGESTED
var viewportHeight = parseFloat(document.documentElement.clientHeight);
document.getElementById("divOne").style.height = viewportHeight + "px";
document.getElementById("divTwo").style.height = viewportHeight + "px";
document.getElementById("divThree").style.height =
viewportHeight + 200 + "px";
document.getElementById("divFour").style.height =
viewportHeight + 400 + "px";
// jQuery
var viewportHeight = parseFloat($(window).height());
$("#divOne").style.height = viewportHeight + "px";
$("#divTwo").style.height = viewportHeight + "px";
$("#divThree").style.height = viewportHeight + 200 + "px";
$("#divFour").style.height = viewportHeight + 400 + "px";
Related
I'm trying to get margin-top and margin-bottom to center my <div>. This JavaScript, which I wrote, works. However, if the site is cached once, CTRL+F5 refresh causes the script to receive a wrong clientHeight. Refreshing second time, retrieves the correct clientHeight.
I've tried using window.load and this works. However, it is so slow that the <div> loads and after 2 seconds, it shifts to the middle.
<script type="text/javascript">
var height = $(window).height();
var clientHeight = document.getElementById('account-wall').clientHeight;
var calc_height = (height - clientHeight) / 2;
document.getElementById("account-wall").style.marginTop = calc_height + 'px';
document.getElementById("account-wall").style.marginBottom = calc_height + 'px';
</script>
<script type="text/javascript">
$(window).load(function() {
var height = $(window).height();
console.log(height);
var clientHeight = $('.account-wall').height();
console.log(clientHeight);
var calc_height = (height - clientHeight) / 2;
document.getElementById("account-wall").style.marginTop = calc_height + 'px';
document.getElementById("account-wall").style.marginBottom = calc_height + 'px';
});
</script>
Use a resize event since you need it to be centered even if the window.height changes. To make sure it is centered from the beggining use .resize() to trigger the event.
$(window).on('resize', function(event){
var height = $(window).height();
console.log(height);
var clientHeight = $('.account-wall').height();
console.log(clientHeight);
var calc_height = (height - clientHeight)/2;
document.getElementById("account-wall").style.marginTop = calc_height+'px';
document.getElementById("account-wall").style.marginBottom = calc_height+'px';
}).resize();
I'm using document.mousemove to animate a gradient. I'd like to use the same function on mobile devices with an accelerometer/gyroscope, but I can't seem to translate the values.
I've tried various equations but can't seem to get things to work.
Here's my JS:
$(document).mousemove(function(event) {
windowWidth = $(window).width();
windowHeight = $(window).height();
mouseXpercentage = Math.round(event.pageX / windowWidth * 100);
mouseYpercentage = Math.round(event.pageY / windowHeight * 100);
$('.radial-gradient').css('background', 'radial-gradient(at ' + mouseXpercentage + '% ' + mouseYpercentage + '%, #72c0d4, #03373d)');
});
I have a box, which I am trying to size perfectly to fit within the browser viewport if the image is not larger then it. So the image would appear to be centered within the window.
Currently I don' think my method of seeking the browser height is working. And for some reason there is a lot of extra space
Example (src)
here is where I define the page sizes
if ( style['img-width'] > screenwidth ) {
style['body-width'] = style['img-width'] + ( style['img-padding'] * 2 );
} else {
style['body-width'] = screenwidth;
}
style['body-height'] = ( style['img-height'] > screenheight ) ?
( style['img-height'] +
( style['img-padding'] * 2 ) +
style['header-height']
) :
screenheight;
$('body').css({ 'width': style['body-width']+'px' });
theater.css({
'width': style['body-width']+'px',
'height': style['body-height']+'px',
});
theaterheadcon.css('width', style['body-width']+'px');
theaterheader.css('width', style['body-width']+'px');
How I am defining screen width/height
screenwidth = isNaN(window.outerWidth) ? window.clientWidth : window.outerWidth,
screenheight = isNaN(window.outerHeight) ? window.clientHeight : window.outerHeight;
Here is the basic of centering items to a content with javascript and css:
/*css*/
#myImage
{
position:absolute;
}
And in java:
/*javascript*/
var img=$('#myImage');
var winWidth=$(window).width();
var winHeight=$(window).height();
if(img.height()>winHeight)
{
img.css('height', winHeight + "px");
}
img.css('left',(winWidth/2) + "px");
img.css('top',(winHeight/2) + "px");
img.css('margin-left',(-(img.width()/2)) + "px");
img.css('margin-top',(-(img.height()/2)) + "px");
The margin approach guaranties that the image will stay at the center even on page resize
I tried here in DIVs in your case code will detect your image size itself
$(document).ready(function(){
var windowheight = $(window).height();
var windowwidth = $(window).width();
var boxheight = $('#box').outerHeight();
var boxwidth = $('#box').outerWidth();
var imgheight = $('.img').outerHeight();
var imgwidth = $('.img').outerWidth();
if(imgheight > boxheight || imgwidth > boxwidth){
$('#box').css('height', windowheight).css('width', windowwidth);
$('.img').css('margin-left',((windowwidth - imgwidth)/2)+'px');
$('.img').css('margin-top',((windowheight - imgheight)/2)+'px');
}
});
DEMO
change your img width in css to see the action
if you want your div to not going outside the window after margin the image to center use that code
$(document).ready(function(){
var windowheight = $(window).height();
var windowwidth = $(window).width();
var boxheight = $('#box').outerHeight();
var boxwidth = $('#box').outerWidth();
var imgheight = $('.img').outerHeight();
var imgwidth = $('.img').outerWidth();
if(imgheight > boxheight || imgwidth > boxwidth){
$('#box').css('position','absolute').css('width', 'auto').css('height', 'auto').css('left', '0').css('top', '0').css('right', '0').css('bottom', '0');
$('.img').css('margin-left',((windowwidth - imgwidth)/2)+'px');
$('.img').css('margin-top',((windowheight - imgheight)/2)+'px');
}
});
DEMO
I need calculate and set the height for some div (initial settings). When the height of the browser window is changed --> change the height for div.
How will be better to rewrite this code (I want do initial settings once and change it when window resize):
$(document).ready(function () {
var height = document.documentElement.clientHeight - 500;
if (height < 135) {
height = 135;
}
document.getElementById('left_space').style.height = height + 'px';
$(window).resize(function () {
var height = document.documentElement.clientHeight - 500;
if (height < 135)
{
height = 135;
}
document.getElementById('left_space').style.height = height + 'px';
});
});
If you are purely looking to tidy up the code, it could look something like this:
$(document).ready(function () {
var resizeIt = function() {
var height = Math.max(document.documentElement.clientHeight - 500, 135);
$('#left_space').css('height', height + 'px');
};
resizeIt();
$(window).resize(function () {
resizeIt();
});
});
Here I have pulled out the lines of code that set the height into their own function, so the code is not duplicated. Then I took advantage of some of the shorter syntax you can use in jQuery for finding and changing styles of elements.
is that what you are looking for?
api.jquery.com
jQuery(document).ready(function () {
$(window).resize(function() {
var height = document.documentElement.clientHeight - 500;
if (height < 135) {
height = 135;
}
document.getElementById('left_space').style.height = height + 'px';
jQuery(window).resize(function () {
var height = document.documentElement.clientHeight - 500;
if (height < 135)
{
height = 135;
}
document.getElementById('left_space').style.height = height + 'px';
});
});
});
I think jQuery(window).resize one would be good
I'm using the following code to dynamically create an "overlay" <div> at the top and bottom of the browser window.
$(function() {
var winWidth = $(window).width();
var winHeight = $(window).height();
$('body').append('<div style="position:fixed;left:0px;top:0px;width:' +
winWidth + 'px;height:30px">TOP</div>');
$('body').append('<div style="position:fixed;left:0px;top:' +
(winHeight - 30) + 'px;width:' + winWidth + 'px;height:30px">BTM</div>');
}
The top <div> appears exactly where I want it to.
But the bottom <div> is not visible. When inspect it in Google Chrome, it seems to indicate that it is below the bottom of the window.
Can anyone see what I've missed here?
EDIT My original code can be found at http://jsbin.com/uravif/41
Maybe I'm misunderstanding, but your code seems to be working for me (here is the Fiddle ).
var winWidth = $(window).width();
var winHeight = $(window).height();
$('body').append('<div style="position:fixed;left:0px;top:0px;width:' +
winWidth + 'px;height:30px">TOP</div>');
$('body').append('<div style="position:fixed;left:0px;top:' +
(winHeight - 30) + 'px;width:' + winWidth + 'px;height:30px">BTM</div>');
you're just missing in your CSS:
body{
height:100%; /* to fix jsBin bug with $(window).height() */
}
otherwise play with the bottom position of your "BTM" :) element instead of top of course.
edit
$(window).height() will work great offline, so I just think you're messing with that jsBin bug
jsbin DEMO
there is a bottom style attribute that you can use for this:
$('body').append('<div style="position:fixed;left:0px;bottom:30px;width:' + winWidth + 'px;height:30px">BOTTOM</div>');
The bottom attributes positions the element at xx px from the botton of screen.
try below:
$(function() {
var winWidth = $(window).width();
var winHeight = $(window).height();
$('body').append('<div style="position:fixed;left:0px;top:0px;width:' +
winWidth + 'px;height:30px">TOP</div>');
$('body').append('<div style="position:fixed;left:0px;bottom:0px;width:' + winWidth + 'px;height:30px">BTM</div>');
}