I'm trying to write a layout where I have a toolbar and a main div. When the window Y axis is smaller than window X axis, the toolbar is on the left side. And when the window X axis is smaller than the window Y axis the toolbar is on the top.
I've positioned the toolbar absolute at the top:0 and left: 0 and tried changing width and height properties on resize. But my code is not working.
Javascript:
window.onresize = function(event) {
winW = window.innerWidth;
winH = window.innerHeight;
console.debug("x axis:" + winW + "y axis:" + winH);
if(winW < winH){
var elem = document.getElementById('div1');
console.debug("test" + elem.style.width);
var a = elem.style.height;
elem.style.height = elem.style.width;
elem.style.width = a;
}
else{
var elem = document.getElementById('div1');
elem.style.height = elem.style.height;
elem.style.width = elem.style.width;
}
}
CSS:
#div1{
background: red;
position:absolute;
height:100%;
width:20px;
top:0;
left:0;
}
#div2{
width:100%;
height:500px;
background-color:green;
margin-left: 20px;
}
jsFiddle Example Here
You can do this using #media screen and (min-aspect-ratio: 1/1) { ... }. Any styles inside this query will only activate when the window is as wide, or wider than it is high.
DEMO
I added this code, and removed all the JavaScript:
#media screen and (min-aspect-ratio: 1/1) {
#div1 {
width: 100%;
height: 20px;
}
#div2 {
width: 100%;
margin: 0;
}
}
Information can be found here on the MDN
Support for Media Queries can be found here, but as you can use JavaScript I would recommend using Respond.js to make them work for all users.
Upvote for the media ratio ;)
More browser-compatible:
window.onresize = function(event) {
winW = window.innerWidth;
winH = window.innerHeight;
console.debug("x axis:" + winW + "y axis:" + winH);
document.getElementById("div1").className = ( winW < winH ? "verticalMenu" : "horizontalMenu" );
}
// optionally invoke window.resize() once manually for setting it default. Or set a defaultClass on the div itself in HTML
and
.horizontalMenu {
height:20px;
width:100%;
}
.verticalMenu {
height:100%;
width:20px;
}
See this CodePen.
Related
I am working on an experimental art site that involves a grid of images each scaled to the size of the viewport. The background for the page body should be one stretched image and it was working at one point but has stopped functioning. The background color shows and the image simply doesn't. However if the background-size CSS is turned off in Chrome inspector it shows up at it's own size positioned top and left...
I am guessing that having body contain a box which amounts to 5 viewports wide and 5 viewports tall is messing with what the body element's size is? Though allowing bg image to repeat didn't make it show up...
I resolved this by grabbing the screen width and height in the JavaScript and then setting background-size to those values like so:
$('body,html').css('background-size',the_width + 'px ' + the_height+'px');
But my question remains- why did the background-size:100% 100% stop working?
The page HTML looks like this only with 25 total divs and images.
<body>
<div id="box">
<div class="full" id="full_10">
<img src="home_tiles/10.jpg" width="800" height="600" title="10">
</div>
<div class="full" id="full_11">
<img src="home_tiles/11.jpg" width="800" height="600" title="11">
</div>
</div>
</body>
The CSS looks like this
* { padding: 0; margin: 0; }
html, body {
overflow:hidden;
background-color: #FF0000;
background-size: 100% 100%;
background-image:url(home_tiles/edge.jpg);
background-repeat:no-repeat;
}
img { display: block; }
#box {
position:absolute;
}
.full {
float:left;
}
The JavaScript sizing the images is
$(function() {
$('.full').hide();
var win = $(window),
fullscreen = $('.full'),
image = fullscreen.find('img'),
imageWidth = image.width(),
imageHeight = image.height(),
imageRatio = imageWidth / imageHeight;
var the_width;
var the_height;
var left_limit;
var right_limit;
function resizeImage() {
var winWidth = win.width(),
winHeight = win.height(),
winRatio = winWidth / winHeight;
if(winRatio > imageRatio) {
the_width = winWidth;
the_height = Math.round(winWidth / imageRatio);
} else {
the_width = Math.round(winHeight * imageRatio);
the_height = winHeight;
}
left_limit = the_width * -2;
right_limit = the_width * 2;
image.css({
width: the_width,
height: the_height
});
$('#box').css({
width: the_width * 5,
height: the_height * 5,
top: the_height * -2,
left: the_width * -2
});
}
win.bind({
load: function() {
resizeImage();
$('.full').show('slow');
},
resize: function() {
resizeImage();
}
});
I'm trying to draw into a canvas, but the more I go right, the more offset my drawing become.
Anyone have an idea why?
I have included the relevant code below:
CSS
html,body {
width:100%;
height:100%;
background:rgba(0,0,0,.2);
}
#container {
position:relative;
width:700px;
height:450px;
background:#fff;
overflow:hidden;
}
* {
-webkit-user-select: none;
}
canvas {
position: absolute;
top: 0;
left: 0;
background: #ccc;
width: 500px;
height: 200px;
}
HTML
<div id='adContainer'>
<canvas></canvas>
</div>
Javascript
var ctx;
var can = $('canvas');
$(document).ready(function() {
ctx = can[0].getContext('2d');
ctx.strokeStyle = "rgba(255,0,0,1)";
ctx.lineWidth = 5;
ctx.lineCap = 'round';
can.on("touchstart", function(event) {
event.preventDefault();
var e = event.originalEvent;
if(e.touches.length == 1) {
var posX = e.touches[0].pageX;
var posY = e.touches[0].pageY;
ctx.moveTo(posX, posY);
}
});
can.on("touchmove", function(event) {
event.preventDefault();
var e = event.originalEvent;
if(e.touches.length == 1) {
var posX = e.touches[0].pageX;
var posY = e.touches[0].pageY;
ctx.lineTo(posX, posY);
ctx.stroke();
}
});
});
Demo: http://jsfiddle.net/8Wtf8/
That is because you define the size of the canvas using CSS.
What happens is that when you don't explicitly define the size of the canvas using its width and height attributes the canvas defaults to size 300 x 150.
In your CSS you are then stretching the canvas element (look at it as an image) to 500px etc. - the content of the canvas is still 300 x 150.
You need to set the width and height on the canvas element itself:
<canvas width=500 height=200 id="myCanvas"></canvas>
and remove the definition from the CSS:
canvas {
position: absolute;
top: 0;
left: 0;
background: #ccc;
/*width: 500px;
height: 200px;*/
}
Also notice that background set by CSS will not be part of the canvas content.
I have centered the popup on this website here, however, it's only on the x-axis. I also need to center it on the y-axis, but I can't seem to make it happen.
Here's the JavaScript...
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-200;//200 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-200;//200 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
I thought it would work with this...
popUpDiv_height=blanket_height/2-200;//200 is half popup's height
but it's not. Any ideas on how to fix this?
Edit: Here's a link to the site here.
Here's all the CSS attributed to this popup...
#blanket {
background-color:#111;
opacity: 0.65;
filter: alpha(opacity=65)
*background:none;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}
#popUpDiv {
position:absolute;
background-image:url(../images/popup_bg.png);
background-repeat:no-repeat;
top:50%;
left: 50%;
width:400px;
height:400px;
margin-top: -120px auto 0 auto; /* auto, centers horizontally and -120px is half your height to finish the centering vertically */
border:5px solid #000;
z-index: 9002;
}
#popUpDiv .close {
background-image: url(../images/x.png);
background-repeat: no-repeat;
position:absolute;
top:10px;
right:10px
}
You could accomplish this with CSS like so:
HTML
<div id="popUpDiv">
Your content here
</div>
CSS
#popUpDiv {
position:absolute;
background-image:url(../images/popup_bg.png);
background-repeat:no-repeat;
top:50%;
width:400px;
height:400px;
margin: -200px auto 0 auto; /* auto, centers horizontally and -120px is half your height to finish the centering vertically */
border:5px solid #000;
z-index: 9002;
}
In conclusion, if you use this method it looks like you may just need to use javascript to dynamically set the height and margin-top value depending on your div and its content at the time.
More information here: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
I use a drag and drop function and when i drag a image to an other div it resizes the image, see code below. But it resizes to the left corner in relation to the original image so the cursor and image are on a different spot which is confusing for the users. Is there a way to let the image resize and keep the position relative to the cursor, or center the image with the cursor in the middle?
This is the CSS code i use now:
.Skin .PGR .DragAndDrop .stack div ul li.stack span label {
width: 200px;
height: 255px;
}
.Skin .PGR .DragAndDrop .stack div ul li.stack span label img {
width: 200px;
height: 255px;
visibility: visible;
}
.Skin .PGR .DragAndDrop .stack .Group li.stack span.rank {
visibility: hidden;
}
.Skin .PGR .DragAndDrop .stack div.Group ul li span img {
width: 177px;
If I understand what you're trying to do, something like this should work. Basically, you just need to get the mouse coordinates then set the position of the image to the mouse coordinates minus half the width/height to center it. Hope this helps!
window.onload = track;
var mouseX, mouseY;
function track() {
if (window.Event) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = getCursorXY;
}
function getCursorXY(e) {
mouseX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
mouseY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
function updatePosition() {
var img = document.getElementById('myimage');
var width = img.clientWidth;
var height = img.clientHeight;
img.style.position = "absolute";
img.style.top = mouseY-(height/2);
img.style.left = mouseX-(width/2);
}
I have to center a div vertically, with only a margin above and below.
So I made it generate the margin with JavaScript, like this.
var xLength = ((document.getElementById("outerdiv").offsetHeight)+"px");
xLength = (xLength - 222); //222 is the Length of the to be centered div
xMargin = (xLength / 2); //because of the 2 margins
xMargin = (xMargin());
document.getElementById(innerdiv).style.marginTop = xMargin;
document.getElementById(innerdiv).style.marginBottom = xMargin;
Please help, can't get it to work, any ideas?
Here is the CSS of outer and inner div:
#outerdiv {
min-height:302px;
width:58px;
margin-left:640px;
z-index:2;
float:right;
margin-right:228px;
border: 1px solid black;
position:absolute;
}
#innerdiv {
height:222px;
width:58px;
position:absolute;
border: 1px solid green;
}
HTML:
<div id='outerdiv'>
<div id='innerdiv'>
</div>
</div>
This is because your element's parent doesn't have a defined height itself.
With respect to your JavaScript, one problem is this line, which makes no sense at all and should be removed:
xMargin = (xMargin());
You should also add 'px' to the values you are setting, and put quotes around the ID, like this:
document.getElementById('innerdiv').style.marginTop = xMargin + 'px';
document.getElementById('innerdiv').style.marginBottom = xMargin + 'px';
window.onload = checkAvailableHeight;
window.onresize = checkAvailableHeight;
function checkAvailableHeight(){
var yourDiv = document.getElementById("yourDiv");
yourDiv.style.marginTop = ((window.innerHeight - yourDivHeight) / 2) + "px";
}