So, what I ultimately want to achieve is this:
https://s17.postimg.org/7zkpt511r/imgdivs.png
what I have so far:
<style type="text/css">
.wrapper{
height: 100%;
width: 100%;
}
.left{
float: left;
background: silver;
height: 100%;
}
.right{
background: silver;
float: right;
height: 100%;
}
canvas{
position: absolute;
height: 100%;
}
</style>
<div class = "wrapper">
<div class = "left"></div>
<canvas id="canvas"></canvas>
<div class = "right">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var WIDTH = 200; //could be anything, comes from previous calculations
$('#canvas').css("width", WIDTH);
$('#canvas').css("left", (window.innerWidth - WIDTH) / 2);
$('.left').css("width", (window.innerWidth - WIDTH) / 2);
$('.right').css("width", (window.innerWidth - WIDTH) / 2);
var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, WIDTH, window.innerHeight);
</script>
So a little explanation, the canvas in the middle is dynamic in it's width(calculated with javascript) and pre-decided with it's height(100%), it is placed in the middle of the page, and the two divs to it's sides should stretch accordingly and equally and fill the rest of the page. I have many problems in my code; the divs sometimes overflow one below another, the canvas for some reason doesn't fillStyle it's whole dimension and so on.
I am afraid to try to do it in flexbox since old browsers do not support it properly, and I need all browsers support. Thank you for your time.
To get the div height to work you need to add this to your css
html {
height: 100%;
}
body {
min-height: 100%;
}
Dont use position:absolute's it is not a good pratice for layouts
You can consider using display:flex for the same and consider using viewport width and height vw/vh
When you give your div width 100% and height 100% nothing gets effected to make it work you have to set html,body{width:100%,height:100%} which is not a good practice ,instead you can use vw/vh
check this snippet
.wrapper {
height: 100vh;
border: 1px solid black;
display: flex;
width: 100vw;
}
.left {
border-right: 1px solid;
background: silver;
height: 100%;
width: 20%;
}
.right {
background: silver;
width: 30%;
height: 100%;
border-left: 1px solid;
}
canvas {
width: 60%;
height: 100%;
}
<div class="wrapper">
<div class="left"></div>
<canvas id="canvas"></canvas>
<div class="right">
</div>
Solution without display:flex
.wrapper {
height: 100vh;
border: 1px solid black;
position: relative;
width: 100vw;
}
.left {
border-right: 1px solid;
background: silver;
height: 100%;
width: 20%;
position: absolute;
left: 0;
}
.right {
background: silver;
width: 30%;
height: 100%;
border-left: 1px solid;
float: right;
}
canvas {
width: 60%;
height: 100%;
}
<div class="wrapper">
<div class="left"></div>
<canvas id="canvas"></canvas>
<div class="right">
</div>
Hope it helps
CSS:
body {
margin:0;
height:100vh;
}
.wrapper{
display:table;
height: 100%;
width: 100%;
background-color:pink;
}
.left{
display:table-cell;
background-color: gray;
height: 100%;
}
.right{
background-color: blue;
display:table-cell;
height: 100%;
}
canvas{
display:table-cell;
height: 100%;
}
JS:
var WIDTH = 234; //could be anything, comes from previous calculations
$('#canvas').css("width", WIDTH+'px');
$('.left').css("width", (window.innerWidth - WIDTH) / 2+'px');
$('.right').css("width", (window.innerWidth - WIDTH) / 2+'px');
var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, canvas.width, canvas.height);
DEMO: https://jsfiddle.net/zd75wq2e/4/
So, basically, you was close. I've removed absolute positioning and floats, and i've rather used css table. I hope it has good support in older browsers, too. And, yes, as mentioned in comment, fill problem is solved in last line of js.
I've been trying in this jsfiddle and I get a working solution. I added a float:left; to the wrapper and I removed all the height: 100%; because they're ignored by the browser. I just set the height according to the window element using JS.
I removed as well the position: absolute; on the canvas because is not needed to do what you need. Anyway if you need it for other purposes, my suggestion is then insert the canvas inside a div class="center" (for example) and apply the position absolute to the canvas inside that div.
Finally I added as well a $(document).ready(function(){ ... }); to ensure the JS code is executed when the page is completely loaded.
EDIT: The divs calculation is made using width: calc(50% - canvasWidth/2);,this way it is working as well when you resize the window. But I thing the most important thing is working using WIDTH is producing your error, but getting the $("#canvas").outerWidth() is working fine...
Related
I am struggling all afternoon to resolve a problem. Maybe this is a common question but I could not find anything similar in here or on Google. I hope you guys can help.
I have a fixed positioned element on the left of the page and I want that the distance between that element and another on the page be always the same when the browser window is larger. How can I do it?
Now, the other element has to be set in percentage while the fixed element can be or not with pixels.
Is there any css calc(), javaScript, jQuery, something you can think of to resolve this?
HTML
<div class="fixed"></div>
<div class="left-element"></div>
CSS
body {
margin: 0;
padding: 0;
border: 1px solid black;
min-height: 2000px;
min-width: 100%;
}
.fixed
{
position: fixed;
top: 0;
left: 0;
height: 200px;
width: 200px;
background-color: blue;
}
.right-element {
width: 25%;
height: 200px;
background-color: yellow;
margin-left: 75%;
}
Here is the Fiddle
I have the same solution as #Calvin Claus but with just a minor css modifcation, no javascript needed
.right-element {
width: calc(100% - 400px);
height: 200px;
background-color: yellow;
margin-left: 400px;
}
fiddle
Update: Similar, but as you asked, the calc on the fixed element.
.fixed {
position: fixed;
top: 0;
left: 0;
height: 200px;
width: calc(75% - 200px);
background-color: blue;
}
.right-element {
width: 25%;
height: 200px;
background-color: yellow;
margin-left: 75%;
}
new fiddle
I came up with a simple jquery solution:
var distanceBetwennElems = 100;
function calcRightElemWidth() {
var rightElemWidth = $(window).width() - ($('.fixed').width() + distanceBetwennElems);
$('.right-element').css("width", rightElemWidth);
}
Just call this when the document is ready and the window is resized.
Also I removed margin and width form the .right-element css, because this is done by js now:
.right-element {
height: 200px;
background-color: yellow;
float: right;
}
https://jsfiddle.net/bjrno78p/2/
You can adjust the width of the left, fixed element, using calc. Here's an example using 500px as the desired distance between the elements, and 25% as the width for the right-element.
.fixed
{
// disired distance = 500px
// right-element width = 25%
width: calc(100vw - 500px - 25%);
}
Your updated fiddle
I'm trying to make a a page container with a navigation bar on the left (inside of the container). When the outer page is wider than the container, I would like just the navigation bar to extend left up to a certain size while the rest of the container's contents to remain the same and stay in the middle of the outer page.
To illustrate my idea, here are the before and after images, with black representing the outer page, blue the page container, pink the leftnav, and green the rest of the container.
Here is also the general structure of the code I am writing. The jsfiddle link includes some css for detail.
<div id="page">
<div id="container">
<div id="leftCol">
LEFT
</div>
<div id="rightCol">
RIGHT
</div>
</div>
https://jsfiddle.net/6L1zrj6e/1/
Currently, my container has a fixed width and automatic margins so as to center it. Is what I am trying to achieve even possible with the current layout? Would I need to move the leftnav div outside of the container?
Here's a pure css solution: fiddle
This is a trick I learned here: here
where you have to put the float first, then make the div respect it by creating a new block formatting context, then the div will expand to the remaining space. Throw in a couple min/max widths to conform it and a wrapper with min/max widths as well and it falls into place. The html background makes the body background not extend past the body as it normally would. Another little trick.
<div class="wrap">
<main></main>
<nav></nav>
</div>
html {
background: white;
}
body {
background: purple;
padding: 0;
margin: 0;
}
.wrap {
margin: 0 auto;
max-width: 1080px;
min-width: 920px;
}
nav {
overflow: auto; /* force a new context to respect float */
background: red;
height: 300px;
min-width: 200px;
max-width: 360px;
}
main {
float: right;
background: green;
height: 300px;
width: 720px;
}
You can try the following: Full screen example
jsFiddle
HTML:
(Took leftCol out of container)
<div id="page">
<div id="leftCol">
LEFT
</div>
<div id="container">
<div id="rightCol">
RIGHT
</div>
</div>
</div>
JS: (Update the width on page resize and on load)
$(window).on('resize', function(){
var containerWidth = 980;
var pageWidth = $(window).width();
var tempW = Math.max(0, pageWidth-containerWidth) / 2;
tempW += 200;
var w = Math.min(tempW, 360); // 360 = max width
var l = Math.max(0, tempW - w);
$('#leftCol').css({'width': w+'px', 'left': l+'px'});
}).resize();
CSS: (Removed floats, using absolute position for leftCol)
#page{
background-color: purple;
position:relative;
}
#container {
background-color: blue;
width: 980px;
height: 300px;
margin: 0 auto;
}
#leftCol {
position:absolute;
top: 0;
left: 0;
background-color: red;
height: 300px;
width: 200px;
}
#rightCol {
padding-left:200px;
background-color: green;
height: 300px;
width: auto;
}
This is what I think you're after - forgive me if I'm wrong!
EDIT: Added outer container wrapper for right margin:
Updated HTML:
<div id="page">
<div id="outercontainer">
<div id="container">
<div id="leftCol">
LEFT
</div>
<div id="rightCol">
RIGHT
</div>
</div>
</div>
</div>
And the CSS:
#page{
background-color: purple;
height: 300px;
}
#outercontainer {
margin: 0 5% 0 0;
}
#container {
background-color: blue;
height: 300px;
margin: 0 auto;
min-width: 300px;
max-width: 600px;
position: relative;
}
#leftCol {
background-color: red;
height: 300px;
margin-right: 200px;
}
#rightCol {
position: absolute;
background-color: green;
width: 200px;
top: 0;
right: 0;
bottom: 0;
}
This gives the #container a min and max width, and the margins will show beyond the max. These are set quite small to show up well in JSFiddle.
leftCol will expand to fit the available space, and it's right-margin prevents it overflowing the rightCol.
rightCol is absolutely positioned (within #container) in the leftCol's margin.
JSFiddle here: https://jsfiddle.net/xuew6og5/1/
The #outerwrapper allows a visible right margin, until the page gets to minimum width at least. If you want the margins to be balanced, change its margin to 0 5%
Update: New JS Fiddle with right margin: https://jsfiddle.net/xuew6og5/2/
Update 3: Sorry, I missed your requirement for a max-width of 360px on the leftCol. Updated the CSS above, and a fiddle here: https://jsfiddle.net/xuew6og5/4/
In order to achieve the wanted effect you need to move the leftCol outside of your container and give your rightCol a margin-left with the size of your leftCol.
Also add a min-width and max-width to your lefCol and a width using calc to adjust it's width to your goals.
Note: lefCol width is calculated like this:
100% / 2 - (Container width / 2 - leftCol min-width)
So your altered html looks like this:
<div id="page">
<div id="leftCol">
LEFT
</div>
<div id="container">
<div id="rightCol">
RIGHT
</div>
</div>
</div>
Your new CSS looks like this:
#page{
background-color: purple;
}
#container {
background-color: blue;
width: 300px;
height: 300px;
margin: 0 auto;
}
#leftCol {
float: left;
background-color: red;
height: 300px;
min-width:100px;
width:calc(100%/2 - 50px);
max-width:200px;
}
#rightCol {
margin-left:100px;
background-color: green;
height: 300px;
width: 200px;
}
Take a look at the updated example:
https://jsfiddle.net/xxyv7nwf/2/
CSS solution using CSS3 calc.
Edited. According to OP updates.
#media screen and (min-width: 1600px) {
#container{
margin:0 auto;
}
}
body {
overflow-x:hidden;
}
#page{
background-color: purple;
height:300px;
}
#container{
background-color: blue;
min-width:980px;
max-width: 1140px;
}
#leftCol {
float: left;
background-color: red;
height: 300px;
width: calc(100% - 780px);
}
#rightCol {
float: left;
background-color: green;
height: 300px;
width: 780px;
}
HTML
<div id="page">
<div id="container">
<div id="leftCol">
LEFT
</div>
<div id="rightCol">
RIGHT
</div>
</div>
</div>
I have a web page width large size
examble : width:3000px - height: 3000px;
in my page, have a div container and some elements as p, img, button.
I want each time access this page by any browsers, browser screen always center on content of webpage.
you can see picture below:
Check Following what you want. It will center vertical and horizontal of the screen.
$(function () {
scrollTo((($(document).width() - $(window).width()) / 2),(($(document).height() - $(window).height()) / 2));
});
.main{
width:1200px;
height:1200px;
display:table;
text-align:center;
}
.sub{
vertical-align:middle;
display:table-cell;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
<div class="sub"><h2>I am center</h2></div>
</div>
Check Fiddle.
Hope it helps.
I don't really see the purpose, but you can manage that by using absolute positioning:
div {
width: 3000px;
height: 3000px;
position: absolute;
top: 50%;
margin-top: -1500px; /* 50% of the height */
left 50%;
margin-left: -1500px; /* 50% of the width */
background: lightblue;
}
I assume you want the browser to scroll to the center if its too large for the screen and not be at the top-left of the page.
use scrollIntoView() in your script after page load
document.getElementById("#theDivInTheCenter").scrollIntoView()
refer this question
HTML:
<div class="container">
<div class="section">
</div>
</div>
CSS
.container{
border: 1px solid red;
width: 600px;
height: 600px;
}
.section{
border: 1px solid green;
width: 300px;
height: 300px;
position: relative;
left:25%;
top: 25%;
}
You can try below link to Fiddle to achieve the same:
DEMO
I have this HTML:
<div>
<span></span>
<textarea></textarea>
</div>
The Span can take up one or more lines (depends on the text it has and size of the Div). I want the Textarea to take all of the height left in div.
Please no jQuery.
https://jsfiddle.net/ntme8Lt4/
The CSS/style tag for that would just be max-height:100%; and width:100%;
This would hold the div's size constant if it is set to a percentage of its parent container or a constant value like 900px.
Since the size of span is not known, just leave it unspecified so it auto-sizes to content.
There's a circular issue here - the height of the div is (normally) determined by the size of its components. You need something to break the circle and determine the height of either the div or the text area.
You can use offsetHeight to get the heights of the different elements, and from there it is just a calculation of the container - span element to find the remaining.
document.querySelector('textarea').style.height = (document.querySelector('div').offsetHeight-document.querySelector('span').offsetHeight)+'px'
http://jsfiddle.net/rhbritton/4eck8dua/1/
If you're just wanting to use pure CSS and without the needs of tables etc you could try this approach.
HTML:
<div>
<span>
Hello<br>
Hello<br>
Hello
</span>
<textarea></textarea>
</div>
CSS:
div {
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid red;
}
span {
width: 100%;
display: block;
background-color: red;
}
textarea {
width: 100%;
height: 100%;
background-color: blue;
}
JSFiddle
Let me know if this works for you.
You can use clientWidth and clientHeight if your willing to use pure JS:
Here is the fiddle
function test()
{
var div = document.getElementById("testDiv");
var span = document.getElementById("testSpan");
var textArea = document.getElementById("testTextArea");
var height = div.clientHeight - span.clientHeight;
textArea.style.height = (height - 5) + "px";
textArea.style.width = (div.clientWidth - 5) + "px";
}
test();
Reference
you can use flex
div
{
display: flex;
flex-direction: column; /*layout top to bottom*/
height: 300px;
width: 400px;
border: 1px solid red;
}
span
{
display: block;
background-color: red;
}
textarea
{
background-color: blue;
height: 100%;
width: 100%;
flex-grow: 1; /*take up remaining space in flex container*/
}
}
https://jsfiddle.net/ntme8Lt4/13/
Thanks to the "possible duplicate" I came up with this solution:
<div>
<span>Hello<br>World</span>
<b><textarea></textarea></b>
</div>
div
{
height: 300px;
width: 400px;
border: 1px solid red;
display: table;
}
span
{
display: block;
background-color: red;
}
b
{
height: 100%;
width: 100%;
display: table-row;
}
textarea
{
height: 100%;
width: 100%;
background-color: blue;
}
https://jsfiddle.net/c42go079/
I'm trying to setup the css for a native javascript animation. There are going to be several images that enter a "window" which is 600px. As one image slides in or out, the only visible part will be the part of the images that is within the window. I've had several attempts at setting this up with css before I start javascript animating, which include things like overflow:hidden on the rotator div and setting it's width, however that doesn't seem to work.
#rotator {
width: 600px;
height: 320px;
background: #131313;
/*text-align: left;*/
/*display: inline-block;*/
overflow: hidden;
/*position: relative;*/
/*float: left;*/
}
.box_wrapper {
width: 450px;
/*position: absolute;*/
display: inline-block;
/*overflow: hidden;*/
}
<div id="rotator">
<div class="box_wrapper">
<h4>Header1</h4>
<img src="../img/kat_3.jpg" /><br/>
</div>
<div class="box_wrapper box_2">
<h4>Header2</h4>
<img src="../img/kat_2.jpg" /><br/>
</div>
</div>
The images either fully show up or not at all when messing with the css properties.
you need set the width or height of the images, so they can be scaled into the the divs.
<style>
#rotator {
width: 600px;
height: 320px;
background: #131313;
overflow: hidden;
}
.box_wrapper {
width: 450px;
height: 100%;
display: inline-block;
}
</style>
$('.box_wrapper').each(function() {
var $el = $(this), $img = $el.find('img'), fixedRatio = 600 / 320,
ratio = $img.width() / $img.height(),
offset = $img.offset().top - $el.offset().top;
if (ratio > fixedRatio) {
$img.width($el.width()).height('auto');
} else {
$img.height($el.height() - offset).width('auto');
}
});