Its in all in the title.
I'm trying to get a div on the left of the page to a static width 170px; this works fine.
What I'm having issues with is getting a div next to it, that scales to fit the remaining width.
Is there a simple approach I can use here?
On the right-hand div, just set a margin:
style="margin-left: 170px;"
Here's an example page, works here:
<html>
<head>
<title>Jquery Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var right = $("#right");
$("#toggle").click(function() {
$("#left").animate({"width": "toggle"}, {
duration: 250,
step: function() {
right.css("margin-left", $(this).width());
}
}, function() { right.css("margin-left", $("#left").width()); });
});
});
</script>
<style type="text/css">
#left { width: 170px; float: left; border: solid 1px red; }
#right { margin-left: 170px; border: solid 1px green; }
</style>
</head>
<body>
<div id="left">Test</div>
<div id="right">Test Right</div>
<input id="toggle" value="Open/Close" type="button" />
</body>
</html>
You can define your css classes like this:
#left-div {
margin-left: 0px;
width: 170px;
float: left;
}
#right-div {
margin-left: 170px;
margin-right: 0px;
}
This will keep the left margin of the right div next to the left div, and the right margin at the right edge of the window.
Related
Display div write after previous(as in position:relative) but take off of the flow of a document - so it doesnt affect other div flows and acts like pop up. How to achieve it?
HTML
Colaborate
<div class="colab-box hide">
<textarea rows="10" name="comment" class="colab-input"id="comment </textarea>
<button class="send-colab">Colaborate</button>
</div><!--colab-box -->
JQUERY:
$(document).ready(function() {
$('.colaborate').click(function(e) {
$('.colab-box').toggle();
e.stopPropagation();
});
$(document.body).click(function() {
$('.colab-box').hide(); });
$('.colab-box').click(function(e) {
e.stopPropagation();
});
});
CSS:
.colab-box{
position:relative;
top:0;
left: 76%;
border: 1px solid grey;
border-bottom-right-radius: 5px;
width:23%;
border-bottom-left-radius: 5px;
background:#fff;
}
As you can see on click colab-box is toggled - but as it is relative positioned it taked some space and disorders the order of other elements. If I position it absolute - then I wont know where to exactely as i need it to pop up right after 'Colaborate' button.
If you don't want the code to affect the other elements in your page you will need to overlay the popup using something like 'absolute' position. If you put a container around the two elements and set it to have a position of 'relative' you can then set the popup to be 'absolute' and give it a specific left value. This will mean that you have to set a fixed width on the button though.
$(document).ready(function() {
$('.colaborate').click(function(e) {
$('.colab-box').toggle();
e.stopPropagation();
});
$(document.body).click(function() {
$('.colab-box').hide();
});
$('.colab-box').click(function(e) {
e.stopPropagation();
});
});
.container {
position: relative;
}
.menu.item.colaborate {
float: left;
width: 80px;
background: #ccc;
}
.colab-box {
position: absolute;
top: 0;
left: 80px;
border: 1px solid grey;
border-bottom-right-radius: 5px;
width: 23%;
border-bottom-left-radius: 5px;
background: #fff;
}
<div class="container">
Colaborate
<div class="colab-box hide">
<textarea rows="10" name="comment" class="colab-input" id="comment"></textarea>
<button class="send-colab">Colaborate</button>
</div>
<!--colab-box -->
</div>
Code can be found there http://codepen.io/kongakong/pen/wMQrBR
Javascript:
$(document).ready(function () {
init();
});
function init() {
$('#test').on('click', function () {
$('.answer').animate({width: "hide"}, 1000, 'swing');
});
}
css:
.row {
position: relative;
overflow-x: hidden;
}
.hidden {
display: none;
}
.answer {
font-size: 40px;
color: red;
width:100%;
opacity: 1;
z-index: 100;
border: 1px solid red;
text-align: center;
background-color: #fff;
}
.answer-new {
font-size: 40px;
/* to make answer-new on top and cover answer */
position: absolute;
border: 1px solid blue;
width: 100%;
z-index: 1;
text-align: center;
}
html
<div class="contrainer">
<div>
<input id='test' type='button' value="test"></input>
</div>
<div class="row">
<div class="answer-new">Under
</div>
<div class="answer">Top
</div>
</div>
<div class="row">
<div class="answer-new">Under1
</div>
<div class="answer">Top1
</div>
</div>
</div>
Here is a screenshot of the page before animation starts
When the button is clicked, the animation is executed as expected. I expect div's of css class answer-new stay visible. However at the end all the div disappeared.
I tried to use '0' instead of 'hidden'. In this case, the text of div answer stays visible. Not completely hidden.
Why this behaviour?
It is because your .row div have overflow-x: hidden; and when .answer div width become hidden then there no any div other than .answer-new.
And .answer-new is position:absolute So, it count not width/height. And it will hide all element overflow the .row.
To. Make it working add padding to .row So, it count some spacing.
like her in example i add padding: 25px 0;. and i have give top value to absolute div. top: 0; to give it's position.
And added margin: -25px 0; to .answer to display it proper from top as padding added to parent div.
CSS:
.row {
position: relative;
overflow-x: hidden;
padding: 25px 0;
}
.hidden {
display: none;
}
.answer {
font-size: 40px;
color: red;
width:100%;
opacity: 1;
z-index: 100;
border: 1px solid red;
text-align: center;
background-color: #fff;
margin: -25px 0;
}
.answer-new {
font-size: 40px;
/* to make answer-new on top and cover answer */
position: absolute;
border: 1px solid blue;
width: 100%;
z-index: 1;
text-align: center;
top:0;
}
Working Fiddle
That is because your container div .row has no dimension (width nor height) of its own, and the other child div .answer-row has absolute positioning and only width dimension. So when the child div .answer gets hidden, the parent loses its height dimension, and effectively becomes invisible.
If you give the parent div .row a height, when the child div .answer gets hidden, the parent stays visible. Consequently the other child div .answer-row stays visible, considering its style.
See this fiddle wherein I added height to .row.
While I can't exactly explain the behavior this myself, I took the liberty of limiting the width to 1 px and removing the opacity that fixed the issue
function init() {
$('#test').on('click', function() {
$('.answer').animate({
width: '1px',
opacity: 0
}, 2000, "swing");
});
}
Updated Fork
hope this will help to you,I used online jquery.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.row {
position: relative;
overflow-x: hidden;
}
.hidden {
display: none;
}
.answer {
font-size: 40px;
color: red;
width:100%;
opacity: 1;
z-index: 100;
border: 1px solid red;
text-align: center;
background-color: #fff;
}
.answer-new {
font-size: 40px;
/* to make answer-new on top and cover answer */
position: absolute;
border: 1px solid blue;
width: 100%;
z-index: 1;
text-align: center;
}
</style>
<body>
<div class="container">
<div>
<input class="btn btn-default" id='test' type='button' value="test"></input>
</div>
<div class="row">
<div class="answer-new">Under
</div>
<div class="answer">Top
</div>
</div>
<div class="row">
<div class="answer-new">Under1
</div>
<div class="answer">Top1
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#test").click(function(){
$(".answer").animate({width:0,opacity:0},1000);
});
});
</script>
</body>
</html>
IMHO I don't like using jquery/js to animate things, I would do it with css classes
.answer {
font-size: 40px;
color: red;
width:100%;
opacity: 1;
z-index: 100;
border: 1px solid red;
text-align: center;
background-color: #fff;
transition: 0.5s;
overflow: hidden;
}
.answer.minimized{
width: 0px;
}
in your js
$('#test').on('click', function () {
$('.answer').addClass('minimized');
});
Here's the demo
I can't seem to get my div to align side by side inside a div, can someone see where the problem is? I am trying to position the divContainer element with a height up to the buttonPanel element and the 2 testDiv elements positioned side by side. I also tried setting the testDiv element with float: left but that didn't work either.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Test</title>
<style type="text/css">
* {
font-family: tahoma;
font-size: 8pt;
}
#buttonPanel {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: right;
background-color: buttonface;
}
#buttonPanel hr {
margin: 0;
}
#buttonPanel button {
margin: 10px;
width: 75px;
}
#divContainer {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 45px;
border: 2px solid #FFFF00;
}
.testDiv {
display: inline-block;
width: 50%;
height: 100%;
border: 2px solid blue;
}
</style>
</head>
<body>
<div id="divContainer">
<div id="test1" class="testDiv">test1</div>
<div id="test2" class="testDiv">test2</div>
</div>
<div id="buttonPanel">
<hr/>
<button id="btnOK">OK</button>
<button id="btnCancel">Cancel</button>
</div>
</body>
</html>
Let me give you an example:
you have two div left-div say ldiv and right-div say rdiv.These divs are inside main-div say mdiv
ie
<div class = "mdiv">
<div class="ldiv">
</div>
<div class="rdiv">
</div>
</div>
then you css shoul be like this:
#mdiv{}
#ldiv {float:left;}
#rdiv{ float:left;}
Make the following changes to your code: http://jsfiddle.net/ak9Gs/. box-sizing instructs the browser to take padding and borders into account when sizing an element.
CSS:
.testDiv {
width: 50%;
height: 100%;
border: 2px solid blue;
box-sizing: border-box;
}
.testDiv:first-of-type {
float: left;
}
.testDiv:first-of-type {
float: right;
}
You are giving width as 50% and border with 2px that's why your div'a were not placed sise by side. If you remove border you can get your div's as you need.
DEMO
CSS:
.testDiv {
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#ccc;
}
.testDiv:first-child{
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#f0f0f0;
}
I gave color difference instead of border for both test div's.
change the testDiv class to have display of inline then they will be side by side
.testDiv {
display: inline;
width: 50%;
height: 100%;
border: 2px solid blue;
}
Hope this helps.
In principal I only have to take care of FireFox.
For my content I want to have two div's that have the same width and with a vertical line between them that takes the whole height, with 20 pixels of the top of the bottom.
I got under-way, but the right div is much to small and I also do not know how to get the vertical line.
At the moment I have the following:
<?xml version = "1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "nl" lang = "nl">
<html>
<head>
<style>
h1 {
color: #18A5D7;
}
html, body {
height: 100%;
margin: 0px;
}
#container {
background: linear-gradient(blue, white);
height: 100%;
margin: auto;
width: 100%;
}
#footer {
height: auto;
margin: auto;
position: relative;
width: 100%;
}
#main {
overflow: auto;
}
.col {
}
.row {
background-color: white;
display: flex;
border: 1px solid black;
border-radius: 10px;
margin-left: 50px;
margin-right: 50px;
}
.title {
font-weight: bold;
}
button.no {
background: #84a0C4;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
color: #FFFFFF;
}
button.yes {
background: #84a0C4;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
color: #FFFFFF;
}
div.block {
background: #E6EBF1;
border-radius: 15px;
color: #1C589B;
margin-bottom: 10px;
padding: 10px 20px;
}
div.content {
border-style: solid;
}
div.vl {
border-left: 2px solid grey;
width: 0;
height: auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/JavaScript">
function doResize() {
var footer_height = $('#footer').height()
footer_height += 2
$('#footer').css('margin-top', '-' + footer_height + 'px')
$('#main').css('padding-bottom', footer_height + 'px')
var footer_position = $('#footer').offset().top + window.screenY
var content_position = $('#content').offset().top + window.screenY
var newHeight = footer_position - content_position - 2
var newWidth = $(document).width() - 100
$('#content').css({
'height': newHeight,
'width': newWidth
})
}
$(document).ready(function() {
doResize()
})
$(window).resize(function() {
doResize()
})
</script>
</head>
<body>
<div id="container">
<div id="main">
<div id="header"><div class="header">
Header
</div></div>
<div class="row">
<div class="col" id="content">
<h1>03 Complaints</h1>
Question one
<br/><br/>
Question two
<br/><br/>
</div>
<!-- I tried, but it did not work, puts content in the border
<div class="col vl" >
--->
<div class="col" >
Be short, concise and to the point
<br/>
Stick to the medical terms
<br/>
Questioning
<br/>
Stick to the medical terms
</div>
</div>
</div>
</div>
<div id="footer"><div class="footer">Footer</div></div>
</body>
</html>
What do I need to change?
To give the two divs the same width, you need to add a css class that works for both of them, like:
div.col {
width: 50%;
word-wrap: break-word;
}
And to make the vertical line in between them, you need to make a div and put it between the two divs to act as the divider, like:
//your div 1
<div id="divider"></div>
//your div 2
and adding some css to make it look a vertical line :
#divider {
width: 2px;
background: gray;
height: inherit;
margin-top: 20px;
margin-bottom: 20px;
}
SAMPLE DEMO
I have a div, like this:
<div id="div1" name="div1" style="display:none;">
hello world
</div>
Thats on the bottom of my page. Now, when putting the mouse on an image, I want to show that div below the image. The problem is, I have 10 images next to each other and the div should be displayed below each of them dynamically, meaning putting the mouse on image 6 should display the div below image 6.
How can I do that?
Thanks!
This could be an approach if you want to use jQuery and want to move the div inside your DOM:
$(function() {
var div1 = $('#div1').remove();
$('img')
.bind('mouseenter', function() {
$(this).parent().append(div1);
})
.bind('mouseleave', function() {
div1.remove();
});
});
This can be accomplished by only CSS here is an working example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
* { margin: 0; padding: 0; }
body { font: 12px Helvetica, Sans-Serif; }
img {width: 125px;}
#page-wrap { width: 125px; margin: 62px auto; }
h1 { font-size: 30px; letter-spacing: -1px; margin: 0 0 20px 0; }
.people { position: relative; width: 125px;}
a { text-decoration: none; color: #222; display: block; outline: none; padding: 5px; }
a img { border: 1px solid #ccc; }
a .name { font: 12px Georgia, Serif; width: 125px; display: none;}
a:hover .name { color: #900; font-weight: bold; position: relative; display: block;}
a:hover img { border: 1px solid #000; margin: 0px; }
a .photo { display: block; position: absolute; width: 125px; height: 125px; }
#toby .photo { top: 0; left: 0; position: relative;}
</style>
</head>
<body>
<div id="page-wrap">
<div class="people">
<a href="#toby" id="toby">
<div class="photo">
<img src="http://www.style-makeover-hq.com/images/what-is-my-face-shape-and-what-is-the-best-haircut-for-it-21276689.jpg" alt="Toby Pic" />
</div>
<div class="name">Toby Yong<br />
Toby Young joins the fifth season of Top Chef to lend his culinary expertise to the judges table.
</div>
</a>
</div>
</div>
</body>
</html>
Here is jsfiddle of it: http://jsfiddle.net/Ek4Ej/
Code is based on this article: http://css-tricks.com/remote-linking/
you can easily add more images with this effect on page or apply any style to it.
try this DEMO
$(function() {
$("#main").on("hover",".img img", function(){
pos = $(this).offset();
$(".box").css({"left":pos.left,"top":(pos.top + $(this).height())});
$(".box").show();
});
});