How to use current div width/height as minimum width/height? - javascript

How can I use the current width/height (which are both specified in percentage 100%) as the minimum width/height?
Here is a try:
<!doctype html>
<html>
<head>
<title>Layout</title>
<script>
var myDiv = document.body;
var curWidth = myDiv.style.width;
var curHeight = myDiv.style.height;
myDiv.style.minWidth = curWidth;
myDiv.style.minHeight = curHeight;
myDiv = document.getElementById('wrapper1');
var curWidth = myDiv.style.width;
var curHeight = myDiv.style.height;
myDiv.style.minWidth = curWidth;
myDiv.style.minHeight = curHeight;
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
#wrapper1 {
width: 100%;
height: 100%;
}
#wrapper2 {
width: 8%;
height: 100%;
float: left;
}
#wrapper3 {
width: 92%;
height: 100%;
float: left;
}
</style>
</head>
<body>
<div id="wrapper1">
<div id="wrapper2">
Wrapper
</div>
<div id="wrapper3">
Wrapper
</div>
</div>
</body>
</html>
Trying to set min width/height of all divs to be the current width/height (which are both 100% by css) using Javascript (or using only css if possible)

Be aware of the fact that myDiv.style.height does not return the height of an element if that was set through CSS, but only if the div looked something like <div style="height: 10px"></div>. You should use:
var curHeight = myDiv.offsetHeight;
var curWidth = myDiv.offsetWidth;
Edit: Oh, and you need to move your script tag at the end of your html, or you won't be able to select wrapper1 (or in a different file?).
Here is references on offsetHeight and offsetWidth. Here
That is the only problem I see with your approach assuming you do a document.write to insert the retrieved css values.

As far as I understand, If you dont specify the width and height of a div by default it will always take it from its enclosing div.
example:
<body>
<div id="wrapper1">
<div id="wrapper2">
Wrapper
</div>
<div id="wrapper3">
Wrapper
</div>
</div>
</body>
<style>
#wrapper1 {
width: 100%;
height: 100%;
}
</style>
This will apply width and height both as 100% to all 3 divs in wrapper1, wrapper2, wrapper3

Related

How to change (DOM) CSS with current HTML height?

I’m trying to make a function that changes the CSS to the current height when I click a button. It won’t read the current height.
var height = $(window).height();
function openNav() {
document.getElementById("bodypacity").style.height = height;
}
#bodypacity {
width: 100%;
background-color: black;
opacity: 0.4;
position: absolute;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menunav"> <span id="menu" style="" onclick="openNav()">☰</span>
<img id="logo" src="logo.png">
</ul>
If I understand you correctly, you want to get the height of the window and set the element to equal height. You're very close to achieve that, all you need is to add "px" to the final height, because $(window).height() returns only number, so you can set the actual height using $(window).height() + "px", and it will be document.getElementById("target").style.height = height + "px"; in your case:
var height = $(window).height();
function openNav() {
document.getElementById("target").style.height = height + "px";
}
html,
body {
margin: 0;
padding: 0;
}
#target {
width: 100%;
height: 50px;
background-color: royalblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
<button onclick="openNav()">Set Height</button>
</div>

How can I change a images margin that is inside of a div

Here is my code
<head>
<style>
/* Spritesheet is 2000 x 400 and has 5 frames horizontally */
.crop {
width: 400px;
height: 400px;
overflow: hidden;
}
.crop img {
width: 2000px;
height: 400px;
margin: 0px;
}
</style>
</head>
<body>
<div class="crop">
<img id="pic" src="spritesheet.png" />
</div>
</body>
</html>
And I want to change the images margin with the id pic to -400px with a function.
you can do it using this function:
function MoveImage() {
// using jQuery
$('.crop img#pic').css({ 'margin-top': -400 });
// using javascript
// document.getElementById('pic').style.marginTop = '-400px';
}
MoveImage();
jsfiddle
#pic { margin: 20px; }
or whichever value you would like, you would target the image itself with the ID you gave it.
when targeting an item via it's ID you will use # and when you target an item via it's class you would use .

How to put img in front of svg tag

I'm using snap.svg
I have index.html
<!Doctype>
<html>
<head>
<title>MAP_TEST</title>
<meta charset="utf-8">
<script type = "text/javascript" src = "JS/jquery.js"></script>
<script type = "text/javascript" src = "JS/init.js"></script>
<script type = "text/javascript" src = "JS/snap.svg.js"></script>
</head>
<body>
<div class="comm_cont">
<div id = "svgborder">
<svg id = 'svgmain'></svg>
</div>
</div>
</body>
</html>
And init.js
$( document ).ready(function() {
var s = Snap("#svgmain");
var g = s.group();
Snap.load("SVGFILES/3k1e-test.svg",function(lf)
{
g.append(lf);
//trying to load picture... Scale button in future
$('<img />', {
src: 'PNG/plus.png',
width: '30px',
height: '30px',
id: 'buttoninrk'
}).appendTo($('.comm_cont'));
//this button must be on picture
//but in front of the picture svg element
//And i can't click the button
});
});
I played with z-indexes of #svgborder and #buttoninkr but it didn't help me.
How to put button in front of svg element?
#buttoninkr, #svgborder
{
position: absolute;
}
#svgborder
{
border:5px solid black;
z-index: 0;
margin-left:auto;
border-radius: 5px;
display: inline-block;
}
#buttoninkr
{
z-index: 1;
}
Added css code with z-indexes.
There is a reason why i'm not using svg buttons instead jquery image button.
Ok, as you can see #svgmain in front of plus.png
http://jsfiddle.net/3wcq9aad/1/
Any ideas?
Solved
#svgborders
{
position: absolute;
background-color: #535364;
border:5px solid black;
z-index: 0;
margin-left:auto;
border-radius: 5px;
display: inline-block;
}
#buttoninrk, #buttondekr, #home_btn
{
position: inherit;
top:0;
margin:10px;
z-index: 1;
}
#buttoninrk
{
right:0px;
}
#buttondekr
{
right:60px
}
EDIT: It wasn't the position of the div that made the difference, but simply adding a width and height. So the original HTML works fine as long as you add a width and height to svgborder in the CSS:
http://jsfiddle.net/3wcq9aad/4/
(Note that sometimes, the position of an element within a document can make a difference to how z-index works.)
If you put the svgborder div before the svg, then z-index will work, but you'll need to know the width and height of your SVG and set it on the svgborder div.
<body>
<div class="comm_cont">
<div id="svgborder"></div>
<svg id='svgmain'></svg>
</div>
</body>
#svgborder
{
z-index: 2;
width:330px;
height:150px;
...
}
Fiddle: http://jsfiddle.net/3wcq9aad/3/
svg does not support z-index
Use element position instead:
$('element').css('position', 'absolute');
Is there a way in jQuery to bring a div to front?

How do I achieve 100% [window] height on DIV on iPhone?

I've been trying to achieve 100% [window] height on a DIV for a project that I am working on. It works great in the desktop but when I try to load it using an iPhone 4 or an Android phone, the first div appears to be 100%; however each subsequent DIV appears to be about 50 pixels (just an estimate) short.
I tried setting it through css by doing the following:
<!DOCTYPE html>
<head>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
div#container {
width: 100%;
height: 100%;
}
div#section1 {
width: 100%;
height: 100%;
background-color: blue;
}
div#section2 {
width: 100%;
height: 100%;
background-color: red;
}
</style>
</head>
<body>
<div id="container>
<div id="section1">
. . .
</div>
<div id="section2">
. . .
</div>
</div>
</body>
</html>
I also tried setting it through javascript with jQuery using something similar to:
var browser_width = $(window).width();
var browser_height = $(window).height();
$(document).ready(function(){
$("#section1, #section2").css("width", browser_width, "height", browser_height);
});
but it behaves the same way as the CSS. Can anyone point me in the right direction?
you have to set the right format to the .css() method in your script
$(document).ready(function(){
$("#section1, #section2").css({
"width" : browser_width,
"height" : browser_height
}); //css
});
UPDATE : also I noticed you forgot to close your first css declaration
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
... the closing bracket } is missing.
Side note : I wouldn't set dimension properties to the html and/or body tags to avoid unexpected results ... unless you know what you are doing

vertically align img inside floated div

There are 5 floated divs which heights are stretched to 100% of document height using Javascript. All 5 of them contain img element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="wrapper">
<div id="static"><img src="http://www.rs.dhamma.org/wheel.gif"/></div>
<div><img src="http://www.rs.dhamma.org/wheel.gif"/></div>
<div><img src="http://www.rs.dhamma.org/wheel.gif"/></div>
<div><img src="http://www.rs.dhamma.org/wheel.gif"/></div>
<div class="clear"><img src="http://www.rs.dhamma.org/wheel.gif"/></div>
</div>
</body>
</html>​
Javascript:
//sets columns height to 100%;
function colsHeight(){
var docHeight = $(document).height();
$("#wrapper div").height(docHeight);
};
$(document).ready(function(){
colsHeight();
});
and CSS:
*{
margin: 0;
padding: 0;
}
#wrapper{
width: 1000px;
margin: 0 auto;
}
#wrapper div{
padding: 0 20px;
background-color: #9F81F7;
float: left;
border-right: 1px solid black;
}
#wrapper img{
}
div.clear:after{
content: " ";
clear: both;
}
​I've tried setting parent's div display: table and img display: table-cell, vertical-align: middle but no luck. Defining margin-top: 50% is acting anything but expected.
JSFIDDLE HERE!!!
Any help appreciated.
Thanks!
You could position them absolutely, then set top: 50% and margin-top: -63px. Of course, this only works if you know the height of the image (126px in your case). If the image sizes are dynamic, the easiest, but yucky way would be to set the margin-top on the images using js after they are loaded.
Anyway, the static method can be seen here: http://jsfiddle.net/3gqcS/2/
This feels a bit dirty, but you can set the div's line-height to div height + image height then overflow:hidden
<div id="static" style="height: 481px; line-height: 607px; overflow: hidden;">
since you using javascript and jQuery(can't live without him) you can do....
check this: http://jsfiddle.net/828pW/
here is the code:
function verticalAlignImage(img)
{
if(img.height)
{
$(img).css({
position:'absolute',
top: ($(img).parent().height() - img.height)/2
}).parent().css('position', 'relative');
}
else
{
setTimeout(function(){
verticalAlignImage(img);
}, 100);
}
}
​
Try setting the columns:
position:relative;
width:<width>;/* width must be set */
and the images as:
position:absolute;
top:0;
bottom:0;
margin:auto 0;
That should perfectly center them however then you need to set column width as the image with absolute positioning take up no space at all.
Also, instead of using java script just add:
html, body, #wrapper, #wrapper div{height:100%;}
instead.
Learned from: http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

Categories