Hi I have a main div that hosts 2 other divs. The lower one is to change height depending on the resize of the main div size.
Here is the code as far as I got it:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
#upper{
background:#F00;
border: black solid 2px;
overflow-y:scroll;
height: 50px;
}
#lower{
background:#AAF;
border: red solid 2px;
overflow-y:scroll;
}
#maindiv{
height: 100%;
border: green solid 2px
}
html,body{margin: 0px;}
</style>
</head>
<body id="bodyId" >
<div id="maindiv">
<div id="upper">test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
v
test<br/>
test<br/></div>
<div id="lower" onresize="resize('lower')">test2</div>
</div>
<script type="text/javascript">
function resize(arg)
{
var frame= document.getElementById(arg);
var heights= document.getElementById(arg).parentNode.offsetHeight ;
alert(frame);
frame.style.height = heights -50 + "px";
}
</script>
</body>
</html>
FOr some reason it doesn't work. I want to get the lower divs id (lower) to the function and get the parent divs id (maindiv) and its height. With that I want to set the height of the lower div.
Any ideas?
Thanks for your help.
TheVagabond
A good way to handle changes in screen sizes is using media queries in your css.
W3 schools is a good place to start.
A quick example, take the parent div and 2 child:
<div id="parentContainer">
<div id="d1"> </div>
<div id="d2"></div>
</div>
We can style the above using:
#parentContainer {
border:1px solid red;
height:100%;
width:300px;
}
#d1 {
width:300px;
height:300px;
background-color:green;
}
#d2 {
width:300px;
height:300px;
background-color:orange;
}
Now, with media queries, we can make some changes to the styling dending on screen sizing:
#media screen and (max-width:400px) {
#parentContainer {
height:100%;
}
#d1, #d2 {
height:50%;
}
}
In this example, we are saying WHEN the screen size is 400px change the height of the parent to 100% and make the child divs both 50% each.
By doing this, each time the screen size decreases, so do the divs, dynamically.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
#upper{
background:#F00;
border: black solid 2px;
overflow-y:scroll;
height: 50px;
}
#lower{
background:#AAF;
border: red solid 2px;
overflow-y:scroll;
}
#maindiv{
height: 100%;
border: green solid 2px
}
html,body{margin: 0px;}
</style>
</head>
<body id="bodyId" onresize="resize('lower')">
<div id="maindiv">
<div id="upper">test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
v
test<br/>
test<br/></div>
<div id="lower">test2</div>
</div>
<script type="text/javascript">
function resize(arg)
{
var frame= document.getElementById(arg);
var heights= frame.parentNode.offsetHeight;
frame.style.height = heights -70 + "px";
}
</script>
</body>
</html>
#Raj was right with the body, I just had some wrong adressing inside the script part.
#F. Bar I will look into the media query, however I don't have a starting height for the lower div SO I have to play with that. Thanks however point out about the media query at all, haven't heared of that yet.
You need to get parentElement instead of parentNode.
Here is a snippet with a button for test resize.
You can call a function everytime on event when the upper div height changes.
function resize(arg)
{
var frame= document.getElementById(arg);
var heights= document.getElementById(arg).parentElement.clientHeight;
frame.style.height = heights -50 + "px";
}
#upper{
background:#cca;
border: black solid 2px;
overflow-y:scroll;
height: 50px;
box-sizing: border-box;
}
#lower{
background:#9c9;
border: red solid 2px;
overflow-y:scroll;
box-sizing: border-box;
}
#maindiv{
display: block;
height: 100%;
border: green solid 2px;
box-sizing: border-box;
}
html, body
{
height: 100%;
width: 100%;
margin: 0px;
}
<div id="maindiv">
<div id="upper">test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
v
test<br/>
test<br/></div>
<div id="lower">test2</div>
<button onclick="resize('lower')">resize</button>
</div>
Related
Here is my problem:
I have image in one div that is centered into that div.
I want that that image go in header after user scroll once (scroll>50).
Here is my codepen example.
HTML:
<header> <div id="nav"> LINK LINK LINK </div> </header>
<div id="main">
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</div>
CSS:
*{
padding:0;
margin:0;
overflow-x:hidden;
}
#nav{float:right; line-height:70px;}
header{
width:100%;
position:fixed;
padding-left:10%;
padding-right:10%;
background:#fff;
height:70px;
}
#main{
padding-top:100px;
text-align:center;
height:800px;
background:#3cb5f9;}
#main img{width:200px; margin:0 auto;}
There are a ton of ways to do this, but a quick way to achieve this is to duplicated the image so there is a copy of it in the main and the header. On load, have it hidden within the nav. Then, have a scroll event listener that watches for an offset of >50.
If true, => hide main image, and show nav image
If false => show main image. and hide nav image.
Also worth noting I updated the height of main to be 200vh — just to simulate content. This is not related to the answer.
$(function(){
$(window).bind('scroll', function(){
if($(window).scrollTop() >= 50){
$("#main img").hide();
$("header img").show();
}else{
$("#main img").show();
$("header img").hide();
}
});
});
* {
padding: 0;
margin: 0;
overflow-x: hidden;
}
#nav {
float: right;
line-height: 70px;
}
header {
width: 100%;
position: fixed;
padding-left: 10%;
padding-right: 10%;
background: #fff;
height: 70px;
}
header img {
display: none;
width: 50px;
margin: 0 auto;
}
#main {
padding-top: 100px;
text-align: center;
height: 200vh;
background: #3cb5f9;
}
#main img {
width: 200px;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<header>
<div id="nav"> LINK LINK LINK </div>
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</header>
<div id="main">
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</div>
</body>
</html>
External Plunker: http://plnkr.co/edit/yS5MdtCeTNJvvn7w5gvl?p=preview
I have a confusing issue. When my first div "leftbox" is hovered over, "rightbox" (the hidden div) displays, but it eventually disappears when "leftbox" is not hovered over. But I need "rightbox" to stay visible when rightbox is hovered over, then when the user's mouse leaves rightbox, then it should disappear. How can I get this to work? I'd really appreciate the help.
If you add a container class it works fine.
$(function(){
$('.container').hover(function(){
var boxId = $(this).find("[data-id]").attr('data-id');
$('#'+boxId).stop().fadeToggle();
});
});
.leftbox {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
.rightbox {
width: 100px;
height: 100px;
border: 1px solid black;
background: #99bf8f;
margin-left: 110px;
display: none;
}
.container {
float:left;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<div class="leftbox" data-id="functionbox1"></div>
<div class="rightbox" id="functionbox1"></div>
</div>
<script src="test.js"></script>
</body>
</html>
So quick question, I haven't been able to find the correct phrasing perhaps in google but I'm attempting to make a fixed banner will scale when the page is resized. I've found that using a percentage width works for at least the large container, however my banner container within the main container will not rescale into that adequately (The banner is extending longer than the main container).
CSS:
.contMain {
width:80%;
position: top
padding-top: 0;
border-top: 0;
margin: 0 auto;
background-color: #F1EDCC;
}
.contMain-banner {
position:fixed;
width: inherit;
background: #87AADF;
}
HTML:
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Some Title</h1>
{{> MeteorTemplate}}
</div>
</div>
The only higher level css is a .body tag in css for a background color. I am using MeteorJS for this. Cheers
Try this - codepen here
css
body {
height:100%;
width:100%;
}
.contMain {
height:150px;
width:80%;
padding:0;
margin: 0 auto;
background-color: #333333;
}
.contMain-banner {
position:fixed;
width: inherit;
height:auto;
background: #d7d7d7;
}
span {
color:#fff;
position:absolute;
top:125px;
}
HTML
<body>
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Main Content Banner</h1>
{{> MeteorTemplate}}
</div>
<span>This is the main container</span>
</div>
</body>
When I hover my mouse over a div with id one, dialog box appears, but the div with id three moves to the right.
I want the dialog box to appear over div with id three without it moving to right.
HTML PAGE
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:300px;
height:300px;
border:1px solid #000000;
float:left;
margin-left:10px;
}
#one,#three{
position:relative;
}
#two,#four{
margin:0;
padding:0;
left:334px;
top:100px;
background-color:#3B3B3B;
border:none;
width:200px;
height:100px;
display:none;
position:relative;
left:14px;
}
#triangleone,#triangletwo{
margin:0;
padding:0;
width: 0;
height: 0;
border-color:transparent;
border-top: 8px solid transparent;
border-right: 14px solid #3B3B3B;
border-bottom: 8px solid transparent;
top:35px;
display:none;
position:relative;
}
#dialogboxone,#dialogboxtwo{
margin:0;
padding:0;
width:214px;
display:none;
border:none;
}
</style>
<script>
var timer;
function showDialogBox(idOne,idTwo,idThree){
var firstSideBar=document.getElementById(idOne);
var secondSideBar=document.getElementById(idTwo);
var dialogBox=document.getElementById(idThree);
timer=setTimeout(function(){
firstSideBar.style.display="block";
secondSideBar.style.display="block";
dialogBox.style.display="block";
},800);
}
function hideDialogBox(idOne,idTwo,idThree){
clearTimeout(timer);
var firstSideBar=document.getElementById(idOne);
var secondSideBar=document.getElementById(idTwo);
var dialogBox=document.getElementById(idThree);
firstSideBar.style.display="none";
secondSideBar.style.display="none";
dialogBox.style.display="none";
}
</script>
</head>
<body>
<div id="one" onmouseover="showDialogBox('two','triangleone','dialogboxone')" onmouseout=hideDialogBox('two','triangleone','dialogboxone')></div>
<div id="dialogboxone">
<div id="two"></div>
<div id="triangleone"></div>
</div>
<div id="three" onmouseover="showDialogBox('four','triangletwo','dialogboxtwo')" onmouseout="hideDialogBox('four','triangletwo','dialogboxtwo')"></div>
<div id="dialogboxtwo">
<div id="four"></div>
<div id="triangletwo"></div>
</div>
</body>
</html>
You need a wrapper to position the dialogboxes against:
<div class="wrapper">
<div id="one"></div>
<div id="dialogone"></div>
</div>
Then you'll need to position the wrapper relatively, and position them to your liking (eg. with float). The dialog can be positioned absolutely, for example: position: absolute; left: 100% to position them just outside the wrapper to the right.
JSFiddle example
Note: please try to format your code a bit more readable, with indents and spaces... Whenyouwriteinenglishyoualsousespaces,doyou?
Here is my contenteditable element:
#editor {
width: 200px;
height: 30px;
border: 1px solid red;
overflow: hidden;
}
<div id="editor" contenteditable="true"></div>
I want it can autosize according to the user's content. I try to listen to keyup event:
editor.addEventListener("keyup", function (){
newheight = editor.scrollHeight;
editor.style.height = newheight + "px";
})
this could work when the div grow higher, but when user delete all content, the div can't be shorter.
How can I let it be autosize?
DEMO here
Add "display: inline-block;" to your CSS and and "min-" to width and height.
Your DIV will automatically grow the innerHTML content.
<html>
<style type="text/css">
#Test
{
display: inline-block;
min-width: 30px;
min-height: 30px;
border: 1px solid red;
overflow: hidden;
}
</style>
<div id="Test" >
Nothing But Bigger
And <br />
Taller
</div>
</html>
Look at this fiddle:DEMO
This is working fine...
you just use the following HTML tag in your code
<div contenteditable="true" style= "border: 1px solid red; min-height:30px;width:200px"></div>