I have a simple draggable function here that I am using for a math game I am trying to get my numbers to appear in one row but currently with this code below they appear stacked on top of each other like this
1
2
3
4
How do i get them to be like this 1 2 3 4 5
<!DOCTYPE html>
<html>
<head>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#draggable1" ).draggable();
});
</script>
</head>
<body>
<div id="draggable1" class="ui-widget-content">
<p><img src="mypicturesurl.com is here;"></p>
</div>
<div id="draggable1" class="ui-widget-content">
<p><img src="mypictureurl.com;"></p>
</div>
<div id="draggable1" class="ui-widget-content">
<p><img src="Samepictureurl.com;"></p>
</div>
</body>
i am just testing all with the one function to see if i can get them into the row or not. Thank you for help
Use float: left; to make it horizontal.
.draggable1 img {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
}
Fiddle
First of all, you have multiple elements with the same ID draggable1 in your HTML. Javascript will fail to recognize all of them. If you need to select multiple elements consider using a class selector instead, which will allow you to select all of them at once. Then your javascript will change to:
$(function() {
$( ".draggable1" ).draggable();
});
and you will be able to drag all of your elements.
Next, your CSS is set to affect elements with ID: draggable (there are none). Instead, you should use the same class selector before (since there are multiple), and this will change to:
.draggable1 { width: 150px; height: 150px; padding: 0.5em; }
Finally, if you need them to start side by side, instead of stacked on top of each other, consider floating them left: float: left.
Also you should try to separate your HTML, CSS, and Javascript into separate files to keep the logic distinct as your application grows. This is considered good style.
You're going to want to make sure you add float: left to your CSS to make sure the elements start on the left side and remain horizontal. You must also make sure that you inherit this class with each element. Your code used the draggable ID, which none of your elements inherited. Additionally, element IDs should be different, so I made each element have a unique ID in the amended code below as well as changing the CSS type to a class:
<!DOCTYPE html>
<html>
<head>
<style>
.draggable { width: 150px; height: 150px; padding: 0.5em; float: left;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#draggable1" ).draggable();
});
</script>
</head>
<body>
<div id="draggable1" class="draggable ui-widget-content">
<p><img src="mypicturesurl.com is here;"></p>
</div>
<div id="draggable2" class="draggable ui-widget-content">
<p><img src="mypictureurl.com;"></p>
</div>
<div id="draggable3" class="draggable ui-widget-content">
<p><img src="Samepictureurl.com;"></p>
</div>
</body>
</html>
Related
Concrete problem is that I want have a page on server with structure of elements with nice positioning, but I couldn´t get it into desired shape, but only with setting them absolute position counted by screen resolution on mobile phones with jquery. After page load bootstrap will move my elements with absolute path more up. All those elements are at the bottom of page. I know that it is bootstrap, because when I will not add bootstrap server links, everything is fine as far as position of my elements is concerned. But naturally I need bootstrap there.
I tried to figure it out in many ways, but I ended with tryings to wait with jquery till the page load and after that try to set position. But no, after all moving in function that is called after page load, bootstrap starts doing it´s job later as last and don´t know how and why, but it trim my elements and push all my circles all up with bad height positions.
$(document).ready(function () {
// script for setting bubble circles in right place on whatever screen
// this is updated question for correct answer below, id=allCircles is id of global div for circles
$width = $('#allCircles').width();
$circleWidth = parseInt($('.circle').css('width'),10);
$circlesDistance = 60;
$leftCircles = ($width)/2 -(($circlesDistance/2)+$circleWidth);
$rightCircles = ($width)/2 + ($circlesDistance/2);
$('.left-circle').css('left', $leftCircles+'px' );
$('.right-circle').css('left', $rightCircles +'px');
$actPosition = $("#leftDownCircle").position();
$heightMargin= $actPosition.top + $circleWidth/2;
$('#leftDownCircle').css('top', $heightMargin+'px' );
$('#rightDownCircle').css('top', $heightMargin+'px' );
$leftMargin = ($width)/2 - ($circleWidth/2);
$heightMargin = ($heightMargin) -($circleWidth/2)-($circleWidth/4);
$('#middleCircle').css('position','absolute');
$('#middleCircle').css('left', $leftMargin +'px' );
$('#middleCircle').css('top', $heightMargin +'px' );
});
* {margin:0;}
.circle {
width: 100px;
height: 100px;
background: lightgrey;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
line-height: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.left-circle {
position: absolute; left: 15%;
}
.right-circle {
position: absolute; left: 60%;
}
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="left-circle">
<div class="circle">
<h1>9</h1>
<p>Level</p>
</div>
</div>
<div class="right-circle">
<div class="circle">
<h1>9</h1>
<p>Level</p>
</div>
</div>
<div id="middleCircle">
<div class="circle">
<h1>9</h1>
<p>Level</p>
</div>
</div>
<div class="left-circle" id="leftDownCircle">
<div class="circle">
<h1>9</h1>
<p>Level</p>
</div>
</div>
<div class="right-circle" id="rightDownCircle">
<div class="circle" >
<h1>9</h1>
<p>Level</p>
</div>
</div>
</body>
</html>
When I will add in this code to html header this:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Then on phone it will result to this:
Could someone help me to answer how this can be done programmatically correctly? (maybe why this not work or what is better practice to make the desired result as in snippet, thanks in advance for any help and your time!)
Now concrete site whith its code in it. Web emulator looks:
http://mobiletest.me/htc_one_emulator/?u=https://stackoverflowtest.000webhostapp.com/
Concrete site to test with your mobile device:
https://stackoverflowtest.000webhostapp.com/
Notice left-down waiting for bootstrap and after reload:
The basic problem you are having is that by making the elements absolute, they are positioned in relation to the nearest non-static parent element. I don't see any non-static parent elements on your page, so in your case they will be positioned relative to the body. This causes a problem as you have lots of other elements that can be different sizes (e.g. because of text wrapping over multiple lines on mobile screen that would only take one line on desktop size) before you get to the circles so determining the right top value in relation to body is not possible.
Note, two of your circles don't have a top value set, so they are placed in their default static places, which is why you are getting the overlaps.
To fix it, you need to place a non-static element around your absolute elements (e.g. by giving it a position:relative style). Position top and left values the circles in relation to that element and give the element a height that will give the circles enough space.
e.g.
<div style="min-height: 550px;position:relative;">
<div class="left-circle" style="left: 30px;">
<div class="circle">
<h2>345</h2>
<p>Bodov</p>
</div>
</div>
<div class="right-circle" style="left: 190px;">
<div class="circle">
<h2>11</h2>
<p>Best of</p>
</div>
</div>
<div id="middleCircle" style="position: absolute;
left: 110px;
top: 100px;">
<div class="circle">
<h1>9</h1>
<p>Uroven</p>
</div>
</div>
<div class="left-circle" id="leftDownCircle" style="left: 30px;
top: 198px;">
<div class="circle">
<h2>1622</h2>
<p>Zaradenych knih</p>
</div>
</div>
<div class="right-circle" id="rightDownCircle" style="left: 190px;
top: 198px;">
<div class="circle">
<h2>124</h2>
<p>Citatelov</p>
</div>
</div>
</div>
The key things to note here are:
I have put all your circles inside a div with a position:relative and a height:550px;
I have changed the top values of the circles to position themselves in relation to this new parent div.
Im a complete noob when it comes to JavaScript and jQuery but here we go.
I want to make a slidetoggle that shows 3 slides, 3 "snowboardtricks" when i press "toggle".
As it is now only one "trick" is shown when i press toggle, the rest is already there from the beginning.
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function()
{
$("#flip").click(function()
{
$("#panel,#panel2,#panel3").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#panel2,#panel3,#flip
{
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#panel
{
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Toggle</div>
<div id="panel">Switch back 1080 double cork</div>
<div id="panel2">Frontside triple cork 1440</div>
<div id="panel3">Ollie</div>
</body>
</html>
If I'm understanding correctly, on page load you only want to display "Toggle". When you click "Toggle" you want to show the three other sections.
To do that you want to place the three other sections inside of a wrapper div, and then use slide toggle on the wrapper div instead.
Quick jsfiddle: http://jsfiddle.net/43byX/
Here is a modified version of your code:
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("#toggle").click(function() {
$("#drawer").slideToggle("slow");
});
});
</script>
<style type="text/css">
#toggle,
.panel {
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#drawer {
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="toggle">Toggle Me</div>
<div id="drawer">
<div class="panel">Switch back 1080 double cork</div>
<div class="panel">Frontside triple cork 1440</div>
<div class="panel">Ollie</div>
</div>
</body>
</html>
#panel, #panel2, #panel3
{
padding:5px;
display:none;
}
You are in essence hiding only the div whose id is panel. But the other two div's are visible. Those need to be hidden as well. This way when you toggle all three will have their displays turned to true.
On a side note is there a reason you are creating your own toggle? It might be faster to use twitter bootstrap which already comes with it. See This
Correct me if I'm wrong, but it seems what you're trying to do can be more easily accomplished using accordion.
Quick jFiddle example here. Click the headers to see the effects.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
</head>
You can erase the active code if you want one of the panes to be open when the page loads, and you can erase the collapsible line if you want one of the panes to always remain open.
and then the html layout:
<div id="flip">
<h3>Switch back 1080 double cork</h3>
<div><p>some text or whatevs here</p></div>
<h3>Frontside triple cork 1440</h3>
<div><p>some text or whatevs here</p></div>
<h3>Ollie</h3>
<div><p>some text or whatevs here</p></div>
</div>
Read more about accordion here.
Edit: It may be better to put the
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
just before the closing body tag instead of in the header. Best practices would have you put it in a separate file and link it in the header.
I think, you want to toggle that one hidden element one by one. Well, If I am not wrong, then here is the code:
$("#flip").click(function(){
var targets = $("#panel, #panel2, #panel3"),
hiddenElm = targets.filter(":hidden");
hiddenElm.slideDown();
if(hiddenElm.next().length){
hiddenElm.next().slideUp();
} else {
targets.first().slideUp();
}
});
Working jsfiddle: http://jsfiddle.net/ashishanexpert/jg2wg/
On the "home" page I want to have a logotype and a menu on a #banner div (which will then be there throughout the whole site) and on a #content" div to have an image. All these divs are inside a #container" div. The menu has 3 buttons.
I would like that on mouseover event each button displayed image on the #content div changes accordingly. So basically, when hover button1, the image on #content will change from background.jpg to background1.jpg. The event of mouseover on button2 will change it to background2.jpg etc. When buttons are not hovered over, the image should revert to the original background.jpg.
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>E.S.T.</title>
<link href="_css/layout.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet"
type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="banner">
<div id="logo">E.S.T.</div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="button1">Biography</li>
<li id="button2">Albums</li>
<li id="button3">Links</li>
</ul>
</div>
</div>
<div id="content">
<img id="back0" src="_img/background.jpg">
<img id="back1" src="_img/back_bio.jpg">
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1,
{
imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"
});
</script>
</body>
</html>
CSS:
#charset "UTF-8";
#import url("../_fonts/Days/fontstylesheet.css");
body {
background-color:#CCC;
font-family:Days;
font-size:100%;
}
#container {
width:850px;
max-height: 650px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
font-family: Days;
}
#logo {
position:relative;
font-size: 4em;
color:white;
float:left;
}
#menu {
float:right;
margin-top:40px;
}
I have tried several different things but I manage only to change the background image from the buttons themselves. From searching around the web i think this should be done with JS, but i have no idea how to do it.
This can be solved entirely with CSS, but first let me give you a tip:
Combine background.jpg and background1.jpg into one image, and rather change the background position. This way, there won't be any delay from when the user hovers over the menu element to when the picture is displayed, and you'll have fewer files to keep track of.
Say we let #button1 be 100px tall. We make an image 200px tall containing the normal state image on top, and the hover image on the bottom. This is called a sprite.
#button1 {
height: 100px;
background-image: url("background.jpg");
}
#button1:hover {
background-position: 0 -100px;
}
This moves the background image, showing the hover version.
For convenience, I'll answer this question using the jQuery javascript library.
If I understand you right, you would like #content to contain an image that changes when you hover over the menu items, and the image should reflect the item currently hovered.
In stead of including every image in the body, I'll try an approach using the data attributes.
HTML The relevant parts
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="button1" data-img="background.jpg">Biography</li>
<li id="button2" data-img="back_album.jpg">Albums</li>
<li id="button3">Links</li>
</ul>
<div id="content">
<img id="back"
src="_img/background.jpg"
data-original="_img/background.jpg"
alt="e.s.t" />
</div>
JavaScript
$(document).ready(function() {
$("#MenuBar1 li").mouseover(function() {
$("#back").attr("src", $(this).data("img"));
}).mouseout(function() {
$("#back").attr("src", $("#back").data("original"));
});
});
So now we store the original image path with the image tag in its data-original attribute, and the path to the :hover image is stored with the menu element.
See this Fiddle for a demo!
Give an id on your image like: id=idimage
You can use jQuery like this:
<script type="text/javascript">
$(document).ready(function(){
$("#MenuBar1 li").mouseover(function(){
var id=$(this).attr('id');
var number = id[id.length-1];
$("#id_image").attr("src","_img/background"+number+".jpg");
});
});
</script>
I'm really stuck with trying to keep div blocks centered with the exception of the last row.
Someone else already created this fiddle that kind of demonstrates my question. You can see how the blocks in the result panel stay centered even when the window is resized. I would like to have similar behavior BUT if the last row contains less blocks than the rows above, then that last row should not get centered but left aligned.
Here is the fiddle:
http://jsfiddle.net/zbbHc/1/
Someone might ask why I don't just use float:left. The problem with that is that I couldn't find a way of centering my blocks using that method without also specifying a fixed width for my wrapper. I'm trying to keep everything as liquid as possible.
Try this fiddle http://jsfiddle.net/zbbHc/45/
Not sure, but I think this is the maximum we can do using CSS alone.
Update: (THis will not work in all cases, check the code below which work in all cases [I guess])
HTML
<div class="wrapper">
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB hide"></div>
<div class="iB hide"></div>
</div>
CSS
.wrapper {
width: 100%;
background: red;
text-align: center;
text-align-last: left;
}
.iB {
display:inline-block;
width: 200px;
height: 100px;
background: green;
}
.iB.hide {
visibility:hidden;
}
Here is the quick and dirty method using jQuery. This will add invisible elements automatically
Fiddle here http://jsfiddle.net/fD6fn/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script>
<style>
.wrapper {
width: 100%;
background: red;
text-align: center;
text-align-last: left;
}
.iB {
display:inline-block;
width: 200px;
height: 100px;
background: green;
}
.iB.hide {
visibility:hidden;
}
</style>
</head>
<body>
<div class="wrapper" id="wrapper">
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
</div>
<script language="javascript">
function findHiddenElementCount() {
var $wrapper = $("#wrapper"),
itemWidth = "200",
count = "",
itemCount = 7;
count = $wrapper.width()/itemWidth;
// Some wild logic below, can be optimized.
return parseInt(count) - (itemCount - (parseInt(itemCount/parseInt(count)) * parseInt(count))) ;
}
function addInvisibleElements()
{
// Delete invisible items
$("#wrapper .iB.hide").remove();
var c = findHiddenElementCount();
for(var i = 0; i < c;i++)
{
$("#wrapper").append('<div class="iB hide"></div>');
}
}
$(window).bind("resize",addInvisibleElements); // resize handler
$(document).ready(addInvisibleElements); // take care during page load
</script>
</body>
</html>
Why don't you use percentage? http://jsfiddle.net/zbbHc/38/ that's how most of fluid layouts usually work
When you say 'if' the last row has fewer blocks do you mean that it's dynamic content? If you know it will have one then you can just position it relatively to the value of half its own width(and any margins etc)
.iB:last-child{
position:relative;
left:-100px;
background:blue;
}
http://jsfiddle.net/zbbHc/54/
It may be possible to do this with a table (though I tend to try to avoid tables). Table-cells' dimensions are determined by their contents (of course, you can add your own, or max/min dimensions). You could have a table with one column and (although it's not best practice) embed divs into the table (each div being a block).
The width of the table would be fluid because it would be based on the width of the widest cell (thus, the blocks will line up nicely and will look very neat), and you could hard-code or script (of course, I suggest scripting) a style/method to check if the last row contains less blocks, and if it does to set the text-align to left for that cell, only.
This solution could probably use some improvement, but it may be a good start, depending on what your going to use this for.
I want to make the last/third div to be filled the whole remaining space. I given the 100% height but there is scroll bar is coming, which i dont want to show. I there any CSS solution for same. if not possible from css then the jQuery/JS solution will be fine.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="display:block;height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
In jQuery, you can try something like this:
$(function() {
$(window).resize(function() {
$('div:last').height($(window).height() - $('div:last').offset().top);
});
$(window).resize();
});
Whenever the window is resized, the last div's height is modified so that the div extends to the bottom of the page. Window's resize method is called on page load so that the div is resized immediately.
If you substract the top offset of the div from the height of the window, you are left with the maximum height available. If you have margins, borders of padding applied, you might have to adjust the value which is substracted, for example:
$('div:last').height($(window).height() - $('div:last').offset().top - 30);
Assuming you want the div 30px from the bottom of the window.
On modern browsers: set position: relative on the container div, position: absolute on the third div. Then you can position it to the top and bottom of the container the same time: top: 0px, bottom: 0px;
You could also use faux columns by adding a vertically repeating background image to the CSS making the columns appear toy the space - this gives the appear. You could add this image to the div that wraps the three columns or to the body tag.
If these columns a going to have content in them it's probably worth adding some as the columns will behave differently.
You can hide the overflow in the containing DIV:
<html>
<head>
<style>
*{margin:0;padding:0;}
html,body{height:100%;}
</style>
</head>
<body>
<div style="overflow:hidden;height:100%">
<div style="height:100px;background-color:#ddd"></div>
<div style="height:25px;background-color:#eee"></div>
<div style="height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Note that content might dissapear when resizing the window using this technique.
You can use pure CSS height:100% (where 100% is the height of the visible area in the window) values in quirks mode by not using DOCTYPE at all or using IE-faulty HTML 4.0 DOCTYPE (without the .dtd url)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body style="margin:0; padding:0; overflow:hidden;">
<div style="height: 100%; background: red"></div>
</body>
</html>
You can ditch the <!DOCTYPE.. entirely, it still would have the same effect. overflow:hidden declaration in body style is to get rid of the empty scrollbar in IE. But remember - this is quirks mode which means that you are on unpredictable territory, CSS box model differs from browser to browser!
html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="position:fixed;top:125px;height:100%;width:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Perhaps this could work?! But I don't know whats happens if there is to mutch text...
Simply don't worry about it if your goal is to have the colour fill the bottom.
Set the colour of the outer div, and let the third one resize its height however it wants as content goes in.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%;background-color:#ccc">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style=""> </div>
</div>
</body>
</html>
The property 'height: 100%;' will instruct browsers to take the 100 per cent of the available screen space for that particular div, which means that your browser will check the browsing space size and return it to the CSS engine without checking whether there are any elements inside it.
The only workaround that I see to fit here is to use the solution provided by David to use 'position: absolute; bottom: 0;' for that div.
it a bit ugly, but it works..
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="width:100%;height:100%;">
<div style="width:100%;height:100px;background-color:#ddd;"> </div>
<div style="width:100%;height:25px;background-color:#eee;"> </div>
<div style="width:100%;height:100%;background-color:#ccc;margin-bottom:-1000em;padding-bottom:1000em;"> </div>
</div>
</body>
</html>
Here's a litle jquery fix I have done:
<html>
<head>
<title>test</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
</script>
</head>
<body style="height: 100%; padding: 0px; margin: 0px;">
<div id="parentDiv" style="height: 100%; width: 100%; position:absolute;">
<div id="firstDiv" style="height: 100px; background-color: #ddd">
</div>
<div id="secondDiv" style="height: 25px; background-color: #eee">
</div>
<div id="thirdDiv" style="background-color: #ccc;">
a</div>
</div>
</body>
</html>
$(window).resize(function(){
$('.elastic').each(function(i,n){
var ph = $(this).parent().height();
var pw = $(this).parent().width();
var sh = 0;
var s = $(this).siblings().each(function(i,n){
sh += $(this).height();
})
$(this).height(ph-sh);
sh = 0, ph = 0, s=0;
});
});
put the following on on your script tag or external javascript.
then change
when you resize the window... it will automatically fit its height to available space on the bottom. you could have as many divs as you like however you can only have one elastic inside that parent. couldnt be bothered to calculate multiple elastics :) hope it helps
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
$(window).resize(function(){ var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
This should be included in case the browser is resized....
window.onload = setHeight
window.onresize = setHeight
function setHeight() {
document.getElementById('app').style.height = window.innerHeight + "px"
}