Trying to do this with CSS only.
Have a Canvas on the left side that I want to shrink both width and height as the window is resized. Want the center and right divs to shrink in height to match the canvas. Don't want center and right divs to move under the canvas.
<div class="container">
<div class="left">
<canvas id="draw" width="250" height="300"></canvas>
</div>
<div id="center" class="center"></div>
<div id="right" class="right"></div>
</div>
Fiddle: https://jsfiddle.net/mrx6zk27/
Any help would be appreciated. Expecting I will probably need JavaScript to align the heights, but want to reduce JavaScript as much as possible.
Update: Fiddle using table layout (doesn't work): https://jsfiddle.net/mrx6zk27/2/
I sugest to use flexbox, It's required to update the center and right divs in the markup slightly for this solution. See the code snippet and demo as follows.
jsfiddle
var c = document.getElementById("draw");
ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 300);
ctx.fillStyle = "white";
ctx.font = "bold 40pt Arial";
ctx.fillText("CANVAS", 10, 100);
tmp = "";
for (var i = 0; i < 100; i++) {
tmp += "<p>" + i + "</p>";
}
document.getElementById("center").innerHTML = tmp;
document.getElementById("right").innerHTML = tmp;
.container {
max-width: 650px;
margin: 0 auto;
border: 1px solid black;
display: flex;
}
.container > div {
position: relative;
min-width: 0;
}
.left {
max-width: 250px;
width: auto;
}
.left canvas {
display: block;
max-width: 100%;
height: auto;
}
.center {
flex: 0 0 200px;
overflow-y: scroll;
background-color: blue;
}
.right {
flex: 0 0 200px;
overflow-y: scroll;
background-color: green;
}
.scroll {
position: absolute;
width: 100%;
}
<div class="container">
<div class="left">
<canvas id="draw" width="250" height="300"></canvas>
</div>
<div class="center"><div id="center" class="scroll"></div></div>
<div class="right"><div id="right" class="scroll"></div></div>
</div>
Not very sure if this is what you want, but I think you use display:table.
<div id="container" style="display: table; width:100%;">
<div style="display: table-cell; background-color: red; width:-100%; height:200px"></div>
<div style="display: table-cell; background-color: blue; width:300px;"></div>
<div style="display: table-cell; background-color: green; width: 300px;"> </div>
</div>
http://jsfiddle.net/8mpx1kok/2/
Related
I have these 3 container divs and inside it textdiv is floated left and image div is floated right. I want to set the height of the image as per the height of the text. Is there anyway to do this using jQuery? Or should I give different class names to each div and set the height?
<div class='containerr'>
<div class='textdiv'></div>
<div class='imagediv'></div>
</div>
<div class='containerr'>
<div class='textdiv'></div>
<div class='imagediv'></div>
</div>
<div class='containerr'>
<div class='textdiv'></div>
<div class='imagediv'></div>
</div>
try using this snippet
$('.containerr').each(function(){
$this = $(this);
var textHeight = $this.find(".textdiv");
var imageHeight = textHeight.height();
$(".imagediv").css("height", imageHeight);
});
CSS3 Flexbox can help with difficult layout challenges that were once difficult or impossible with floats alone:
.container {
display: flex;
flex-wrap: wrap;
}
.textdiv, .imagediv {
display: flex;
}
HTML
<div class="containerr">
<div class="textdiv"><p>Smapmle text.</p></div>
<div class="imagediv"></div>
</div>
<div class="containerr">
<div class="textdiv"><p>Smapmle text.</p><p>Smapmle text.</p></div>
<div class="imagediv"></div>
</div>
<div class="containerr">
<div class="textdiv"><p>Smapmle text.</p></div>
<div class="imagediv"></div>
</div>
CSS
.containerr {
display:block;
width:100%;
border: 1px solid black;
position: relative;
}
.textdiv {
display: inline-block;
width: 50%;
border-right: 1px solid blue;
}
.imagediv {
position: absolute;
display:block;
right:0;
top:0;
width: 50%;
height: 100%;
background-color:red;
}
Basically I'm looking to get my horizontal scrolling sites (using indexhibit) images to be relative to browser size.
At the moment using the following code it seems to resize the height but not the width?
This is my javascript that I found from this thread http://www.indexhibit.org/forum/thread/11531 which I've attached in an external js doc.
function resizeit() { showHeight('document', $(window).height());
function showHeight(ele, h) {
$('.picture img').css( 'height', h -30 );
$('#img-container').css( 'height', h -30 );
}
var sum = 0;
$('.picture img').each(function()
{
sum += $(this).width() +21;
});
$('#img-container').width( sum );
}
$(window).resize(function() {
resizeit();
});
$(window).load(function(){
resizeit();
});
And this is my PHP
<script type='text/javascript' src='{{baseurl}}/ndxzsite/js/images.js<last:page:version
/>'></script>
<last:page:css />
<last:page:onready />
<plugin:backgrounder />
</head>
<body class='{{object}} section-{{section_id}} exhibit-{{id}} format-{{format}}'>
<div class="header">
<h1></div>
<div id='index'>
<div class='menu'>
<div class='top'>{{obj_itop}}</div>
<plugin:index:load_index />
<div class='bot'><p>© Lucy bower 2014</p> <p>Built by Neptik</p>
{{obj_ibot}}</div>
<last:page:append_index />
</div>
</div>
<div id='exhibit'>
<div class='container'>
<div class='top'><!-- --></div>
<!-- text and image -->
<plugin:page:exhibit />
<!-- end text and image -->
</div>
</div>
<plugin:page:append_page />
<plugin:page:closing />
</body>
And my images end up sitting in a stack like this
I just don't really understand what I'm doing wrong if it's worked for other people :( is there any other way of doing it?
Instead of sizing the img tag, I would personally recommend making the image file the background-image of the parent div ie.
<div style="background-image=url('locationofImage.png'); background-size:cover;"></div>
background-image:url(''); - Sets the background image
background-size:cover; - Set how the image should fill the div
This will simply position the image in the background of the div to ensure there is no whitespace. You then can using css set the height and width of the div to fit the space you need.
I'am not really sure if you can use it. But the whole layout can be done with CSS alone, here is an example.
Demo Here: http://jsfiddle.net/T9Zz5/1/
*
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body
{
height: 100%;
overflow-y: hidden;
margin:0;
padding:0;
}
.wrap
{
overflow-x: visible;
white-space: nowrap;
height: 100%;
width: 100%;
}
.left
{
width: 200px;
float: left;
}
.item
{
display: inline-block;
width: 100%;
height: 100%;
padding: 4px;
background-color: green;
margin-left: -4px;
text-align: center;
vertical-align: top;
}
.item img
{
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
.item:before
{
display: inline-block;
content:"";
vertical-align: middle;
height: inherit;
}
/* First Item width - nav width */
.left + .item
{
width: calc( 100% - 200px );
margin-left: 0px;
}
.item:nth-child(2){
background-color: yellow;
}
.item:nth-child(3){
background-color: purple;
}
HTML:
<div class="wrap">
<div class="left">
<ul>
<li>Nav</li>
<li>Nav</li>
<li>Nav</li>
<li>Nav</li>
</ul>
</div>
<div class="item"><img src="http://www.placehold.it/1000x800" /></div>
<div class="item"><img src="http://www.placehold.it/1000x100" /></div>
<div class="item"><img src="http://www.placehold.it/1000x800" /></div>
</div>
Objective
To have the page the page on my website to expand in height according to the dynamic data pushed into the container.
Background
The page has a set of images and text that is populated via a JSON feed. The text is overflowing into the footer because it is not expanding its containing div which would subsequently expand its containing div which would subsequently expand the body. So I need for a specific child div to push its multiple parent divs.
I have searched similar problems on Stackoverflow and attempted various CSS solutions such as giving all of the parent divs a CSS rule of clear:both or even in the HTML inserting a <div style="clear:both"></div> but none of those solutions worked.
So now I am experimenting with jQuery to see if I could find a solution to this problem.
I know I need to create a variable of some sort like
var newHeight = $("#carousel").height();
And that it needs to have push out the height with something like
$(".case").height(newHeight);
This is my current HTML
<body>
<div class="container">
<div class="block push">
<div id="mainContent" class="row">
<div class="large-12 columns">
<h1>Before & After Case Gallery</h1>
<div id="casesContainer">
<div id="carousel"></div>
</div>
<script id="casestpl" type="text/template">
{{#cases}}
<div class="case">
<div class="gallery_images_container">
<div class="item_container">
<div class="gallery_heading">BEFORE</div>
<img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/cases/{{image}}_b_300.jpg" alt="Photo of {{alt}}" />
</div>
<div class="item_container">
<div class="gallery_heading">AFTER</div>
<img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/cases/{{image}}_a_300.jpg" alt="Photo of {{alt}}" />
</div>
</div>
<div class="description_container">
<p>
<span><strong>Case Number {{{number}}} {{version}}:</strong></span>
{{{description}}}
</p>
</div>
</div>
{{/cases}}
</script>
The {{{description}}} in the <p> is overflowing into its parent divs <div class="description_container"> then <div class="case"> then <div id="carousel"> then <div class="casesContainer"> then <div class="large-12"> (which is a container in Foundation) then <div class="mainContent"> and so on.
Here is my CSS
html, body { height: 100%; }
.container { display: table; height: 100%; width: 100%; margin: 0 auto; }
.block { display: table-row; height: 1px; }
.push { height: auto; }
#mainContent {}
#casesContainer {
min-width:310px;
}
.image-navigation {
background: rgb(6,6,6);
color: #fff;
width:100%;
max-width: 640px;
height: 24px;
}
.image-navigation a {
color: #fff;
padding: 6px;
}
.image-navigation-previous, .image-navigation-next{
float:left;
width: 50%;
}
.image-navigation-previous {
text-align: right;
}
.image-navigation-next {
text-align: left;
}
#carousel {
height:auto;
min-height:600px;
overflow-y: auto;
}
.case {
max-width: 640px;
height:auto;
}
.gallery_images_container {
clear: both !important;
}
.item_container{
max-width: 320px;
float: left;
}
.gallery_heading {
background: black;
color: white;
width: 100%;
text-align: center;
}
.description_container {
background: none repeat scroll 0% 0% white;
min-width: 308px;
max-width: 640px;
padding: 6px 6px 12px 6px;
clear: both !important;
}
I realize that #carousel { height:auto; min-height:600px; overflow-y: auto; } is an ugly hack. It was just an experiment.
I hope that I am just completely missing something and this is an easy jQuery fix. Or maybe my HTML and CSS could use a different structure?
Not a complete fix but maybe helpful.
I've used this function but Internet Explore increases the heights on resize.
$(document).on('ready', function() {
// $(window).on('resize', function() {
var height1 = $("#r1c1").height();
if (height1 < $("#r1c2").height()) { height1 = $("#r1c2").height() }
if (height1 < $("#r1c3").height()) { height1 = $("#r1c3").height() }
$("#r1c1").height(height1);
$("#r1c2").height(height1);
$("#r1c3").height(height1);
// }).trigger('resize'); // Trigger resize handlers not working correctly with IE8.
});//ready
I was wondering if there is an easy way to "tile" or "window" a single background image across multiple divs.
I want to create a sort of punched out window look.
Keep in mind that I want to dynamically add these boxes. There will be a maximum of 16, but I could have 9.
I have a fiddle here: link to fiddle
What I want to do is instead of the background image showing, it would just be white.. And instead of the divs being white, they contain that section of the background image. Sorry if this is not a very good description, but basically I want to swap the white with the background.
so something like:
<div id="blocks">
<div class="block" style=" background: some-section-of-image ;"></div>
<div class="block" style=" background: some-section-of-image2;"></div>
<div class="block" style=" background: some-section-of-image3;"></div>
<div class="block" style=" background: some-section-of-image4;"></div>
</div>
I'd like to do this with as little jQuery as possible... but maybe that is not feasible.
I fiddled around some with setting
opacity:0.0;
on just the blocks, but can't figure out how to not display the image elsewhere. Thanks!
A CSS-only solution
What you are describing is basically a table with a background image and white borders. A simple solution can be achieved by creating a table-like layout with CSS only.
.blocks {
display:table-row;
}
.block {
display:table-cell;
height:100px;
border:15px solid #FFF;
}
#background-container {
display:table;
width:100%;
border-collapse:collapse;
box-sizing:border-box;
background: url(https://i.imgur.com/2IqWvm5.jpeg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<div id="background-container">
<div class="blocks">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="blocks">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="blocks">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="blocks">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
I came into something that's nearly a 100%. Feel free (anyone) to edit the answer.
CSS
#blocks {
width:100%;
height:100px;
}
.block {
float: left;
overflow: hidden;
margin: 2%;
width: 20%;
height: 100%;
background: transparent url(http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg) no-repeat top left;
}
jQuery (JS)
$(function () {
var posX = 0;
var posY = 0;
var i = 0;
$(".block").each(function (ind, el) {
$(this).css("background-position", posX.toString() + "% " + posY.toString() + "%");
posX += 20;
i++;
if (i == 4) {
i = 0;
posX = 0;
posY += 25;
}
});
});
Demo (to be improved): http://jsfiddle.net/bzCNb/33/
I found the question interesting and wondered how hard it would be to do this with vanilla JavaScript nowadays, for any tile shapes or positions.
Answer: it's not so hard.
Snippet below illustrates that with 3 different ways of laying out tiles for a tiled image, all handled by the same JavaScript code.
It works with the following algorithm:
find an element with class tiled-image. Use this frame's dimensions for image layout
find the first <img> element inside it: use it's src as tiled image. Remove it
For all elements with class tile inside it, find their position, set their background as the image, with background-position offset so it always matches the frame's upper-left, and background-size set to the frame's size
Current limitation: the frame's size must match the image's aspect ratio. Could easily be improved for dynamic image sizes
window.addEventListener('load', _e=> {
const tFrames = document.querySelectorAll('.tiled-image');//Find tiled frames
tFrames.forEach(frame => { //For each one
const img = frame.querySelector('img'); //Retrieve first img
if (!img || !img.src) return;
img.remove(); //Remove it
const src = img.src; //Store its src
const fBounds = frame.getBoundingClientRect(); //Store position of frame
frame.querySelectorAll('.tile').forEach(tile => { //For each tile
tile.style.backgroundImage = `url('${src}')`; //Set bg image to img's src
const tBounds = tile.getBoundingClientRect(); //Find position
//Position background to frame's upperleft corner
const bx = tBounds.left - fBounds.left;
const by = tBounds.top - fBounds.top;
tile.style.backgroundPosition = `left ${-bx}px top ${-by}px`;
//Set background size to frame's size
tile.style.backgroundSize = `${fBounds.width}px ${fBounds.height}px`;
});
});
});
/*General positioning */
.tiled-image {
box-sizing: content-box;
width: 800px;
height: 600px;
}
/* fallback to regular image if javascript doesn't run */
.tiled-image img {
display: block;
width: 100%;
height: 100%;
}
/* DONE. The rest is decoration and specific tile positioning for the 3 examples */
body {
background: linear-gradient(164deg, rgba(0,0,0,1) 0%, rgba(145,145,167,1) 35%, rgba(70,80,82,1) 100%);
}
.light-text {
color: gainsboro;
}
.tiled-image + .tiled-image {
margin-top: 1em;
}
/* debugging help */
/*
.tiled-image {
outline: 1px solid blue;
}
.tiled-image .tile {
outline: 1px solid red;
}
*/
/* regular grid */
#ti-1 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
}
/* irregular grid */
#ti-3 {
display: grid;
grid-template-areas:
"a a c c c c"
"b b c c c c"
"b b d d e e"
"b b d d e e";
grid-gap: 10px;
}
#ti-3 .ta { grid-area: a; }
#ti-3 .tb { grid-area: b; }
#ti-3 .tc { grid-area: c; }
#ti-3 .td { grid-area: d; }
#ti-3 .te { grid-area: e; }
/* position absolute */
#ti-2 { position: relative; }
#ti-2 .tile { position: absolute; }
#ti-2 .t0-0 {
left: 0;
top: 10px;
width: 150px;
height: 200px;
}
#ti-2 .t0-1 {
left: 180px;
top: 0;
width: 220px;
height: 400px;
}
#ti-2 .t0-2 {
left: 410px;
top: 30px;
width: 380px;
height: 510px;
}
#ti-2 .t1-0 {
left: 20px;
top: 220px;
width: 150px;
height: 380px;
}
#ti-2 .t1-1 {
left: 180px;
top: 420px;
width: 210px;
height: 170px;
}
#ti-2 .t1-2 {
top: 560px;
left: 400px;
height: 40px;
width: 400px;
}
<h4 class="light-text">With regular grid</h4>
<div class="tiled-image" id="ti-1">
<img src="http://avante.biz/wp-content/uploads/800x600-Wallpapers/800x600-Wallpapers-048.jpg" />
<div class="tile t0-0"></div>
<div class="tile t0-1"></div>
<div class="tile t0-2"></div>
<div class="tile t1-0"></div>
<div class="tile t1-1"></div>
<div class="tile t1-2"></div>
<div class="tile t2-0"></div>
<div class="tile t2-1"></div>
<div class="tile t2-2"></div>
</div>
<!-- DONE. Next examples use the same code with different numbers of tiles -->
<h4>With irregular grid</h4>
<div class="tiled-image" id="ti-3">
<img src="http://avante.biz/wp-content/uploads/800x600-Wallpapers/800x600-Wallpapers-042.jpg" />
<div class="tile ta"></div>
<div class="tile tb"></div>
<div class="tile tc"></div>
<div class="tile td"></div>
<div class="tile te"></div>
</div>
<h4>With position: absolute</h4>
<div class="tiled-image" id="ti-2">
<img src="http://avante.biz/wp-content/uploads/800x600-Wallpapers/800x600-Wallpapers-047.jpg" />
<div class="tile t0-0"></div>
<div class="tile t0-1"></div>
<div class="tile t0-2"></div>
<div class="tile t1-0"></div>
<div class="tile t1-1"></div>
<div class="tile t1-2"></div>
</div>
Try putting the background on the blocks instead of the page with fixed attachment and alignment of left top. Unfortunately with this option if the page scrolls the background appears fixed.
.block{
float: left;
overflow: hidden;
margin: 2%;
width: 20%;
height: 100%;
background-image: url(http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}
http://jsfiddle.net/bzCNb/28/
Im fairly new to javascript. Ive adapted some script Ive found to do something similar to what I need but its not working as I'd like it too. I apologize for the long explanation.
I have 6 buttons, button 1 -3 responsible for the left divs, and button 4 - 6 responsible for the divs on the right.
When the script run, none of the divs should be visible.
When buttons#1 is clicked, div#1 slides out from the left and is then positioned its own width from the left of the container. This is the same for div#2 and div#3 corresponding to button#2 and button#3. Only 1 div can be seen at a time so button#2 will hide div#1 and div#3 and show div#2, ect. Same for all the other buttons.
When button#4 is clicked, div#4 slides out from the right and is positioned its own width from the right of the container. The hiding of the divs when another button is clicked is the same as the above, only 1 div can be seen at a time.
Help would greatly be appreciated.
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.button-left').click(function() {
var index = $(this).index(".button-left");
var $box = $(".box-left:eq(" + index + ")");
$(".box-left").not($box).animate({
left: '150%'
}, 500);
if ($box.offset().left < 0) {
$box.css("left", "150%");
} else if ($box.offset().left > $('#container').width()) {
$box.animate({
left: '25%',
}, 500);
}
});
$('.button-right').click(function() {
var index = $(this).index(".button-right");
var $box = $(".box-right:eq(" + index + ")");
$(".box-right").not($box).animate({
left: '150%'
}, 500);
if ($box.offset().left < 0) {
$box.css("left", "150%");
} else if ($box.offset().left > $('#container').width()) {
$box.animate({
left: '105%',
}, 500);
}
});
});
</script>
<style type="text/css">
#container {
position: absolute;
margin: 0px;
margin-left:auto;
margin-right:auto;
padding: 0px;
width:1024px;
height:568px;
overflow: hidden;
background-color:#999999;
}
.box-left {
position: absolute;
width: 200px;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 150%;
top: 100px;
margin-left: -25%;
}
.box-right {
position: absolute;
width: 200px;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
top: 100px;
margin-left: -25%;
}
#box1 {
background-color: green;
left:260px;
}
#box2 {
background-color: yellow;
}
#box3 {
background-color: red;
}
#box4 {
background-color: orange;
right:0px;
}
#box5 {
background-color: purple;
}
#box6 {
background-color: brown;
}
</style>
<div class="button-left">Click Box #1 </div>
<div class="button-left">Click Box #2 </div>
<div class="button-left">Click Box #3 </div>
<div class="button-right">Click Box #4 </div>
<div class="button-right">Click Box #5 </div>
<div class="button-right">Click Box #6 </div>
<div id="container">
<div id="box1" class="box-left">Box #1</div>
<div id="box2" class="box-left">Box #2</div>
<div id="box3" class="box-left">Box #3</div>
<div id="box4" class="box-right">Box #4</div>
<div id="box5" class="box-right">Box #5</div>
<div id="box6" class="box-right">Box #6</div>
</div>
jsfiddle.net/KFqvf
This is a jsfiddle with what I think you want in. Just needs simple jquery animate function to slide in left and right, and a simple menu to select the items!
Hope this helps