I cant figure out hot to make a code that works, i have 4 images side by side and i need a description section under the images, this section should be hidden and when i click over an image the correct information should be displayed
<section class="img" style="text-align:center;">
<div class="container" onclick="select(1)" onclick="hideunhide()"">
<img src="img/1.jpg">
</div>
<div class="container" onclick="select(2)">
<img src="img/2.jpg">
</div>
<div class="container" onclick="select(3)">
<img src="img/3.jpg">
</div>
<div class="container" onclick="select(4)">
<img src="img/4.jpg">
</div>
</div>
</section>
<section id="description">
<div class="info" id="desc1">
<h1>people</h1>
<p>time</p>
<p>country</p>
</div>
<div class="info" id="desc2">
<h1>people</h1>
<p>time</p>
<p>country</p>
</div>
<div class="info" id="desc3">
<h1>people</h1>
<p>time</p>
<p>country</p>
</div>
<div class="info" id="desc4">
<h1>people</h1>
<p>time</p>
<p>country</p>
</div>
</section>
The javascript im using:
<script>
function hideunhide() {
var obj = document.getElementById("description");
if(obj.style.display == "block")
obj.style.display = "none";
else
obj.style.display = "block";
};
function select()
var obj = document.getElementByID(select())
</script>
I know that im messed up over the select(), but cant figure it out. Any help please? I can use html, css and javascript. Thanks
Edit: Added CSS
div.container {
display: inline-block;
margin: 25px;
border: solid 5px #333333;
border-radius: 5px;
}
div.container:hover {
border: solid 5px #fff;
}
.info {
border: solid 5px #333333;
text-align: center
}
Second version, based on comments, the text flows across the page width, responsive, meaning a text is always direct under its image even when image break line (using media query and a minimal script)
Note: working on a CSS only version, though not quite satisfied yet (fiddle demo)
(function(lastimg) {
document.querySelector("#img-select").addEventListener('click', function(e){
if (e.target.tagName.toLowerCase() == 'input') {
if (lastimg == e.target) {
e.target.checked = false;
lastimg = null;
} else {
lastimg = e.target;
}
}
});
}());
.container {
display: flex;
flex-wrap: wrap;
}
.container > label {
flex: 1;
flex-basis: 25%;
order: 1;
background-color: #eee;
}
.container > div {
flex: 1;
flex-basis: 100%;
order: 5;
background-color: #eee;
}
.container label img {
display: block;
margin: 0 auto;
}
.container input, .container input ~ div {
display: none;
}
.container input:checked ~ div {
display: block;
padding: 10px;
}
.container div div {
text-align: center;
}
#media screen and (max-width: 650px) {
.container > label {
flex-basis: 50%;
}
.container > label:nth-of-type(3),
.container > label:nth-of-type(4) {
order: 3;
}
.container > div:nth-of-type(1),
.container > div:nth-of-type(2) {
order: 2;
}
}
#media screen and (max-width: 325px) {
.container > label {
flex-basis: 50%;
}
.container > label:nth-of-type(1),
.container > div:nth-of-type(1) {
order: 1;
}
.container > label:nth-of-type(2),
.container > div:nth-of-type(2) {
order: 2;
}
.container > label:nth-of-type(3),
.container > div:nth-of-type(3) {
order: 3;
}
.container > label:nth-of-type(4),
.container > div:nth-of-type(4) {
order: 4;
}
}
<div id="img-select" class="container">
<label for="img1">
<img src="http://placehold.it/150x200" alt="">
</label>
<label for="img2">
<img src="http://placehold.it/150x200" alt="">
</label>
<label for="img3">
<img src="http://placehold.it/150x200" alt="">
</label>
<label for="img4">
<img src="http://placehold.it/150x200" alt="">
</label>
<div>
<input id="img1" type="radio" name="img-descr">
<div>Some text for img 1 that flow across full page width</div>
</div>
<div>
<input id="img2" type="radio" name="img-descr">
<div>Some text for img 2</div>
</div>
<div>
<input id="img3" type="radio" name="img-descr">
<div>Some text for img 3</div>
</div>
<div>
<input id="img4" type="radio" name="img-descr">
<div>Some text for img 4</div>
</div>
</div>
In this, the first version, the text is positioned under its image all the time, and will be responsive as well on smaller screens. (this version is still use a minimal script)
(function(lastimg) {
document.querySelector("#img-select").addEventListener('click', function(e){
if (e.target.tagName.toLowerCase() == 'input') {
if (lastimg == e.target) {
e.target.checked = false;
lastimg = null;
} else {
lastimg = e.target;
}
}
});
}());
label {
display: inline-block;
vertical-align: top;
}
label img {
display: block;
}
label input, label span {
display: none;
}
label input:checked ~ span {
display: inline;
}
<div id="img-select">
<label>
<input type="radio" name="img-descr">
<img src="http://placehold.it/150x200" alt="">
<span>Some text for img 1</span>
</label>
<label>
<input type="radio" name="img-descr">
<img src="http://placehold.it/150x200" alt="">
<span>Some text for img 2</span>
</label>
<label>
<input type="radio" name="img-descr">
<img src="http://placehold.it/150x200" alt="">
<span>Some text for img 3</span>
</label>
<label>
<input type="radio" name="img-descr">
<img src="http://placehold.it/150x200" alt="">
<span>Some text for img 4</span>
</label>
</div>
PLease try this, hope it might help buddy! its working basic on my console, you can enhance it more:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section class="img" style="text-align:center;">
<div class="container" onclick="hideunhide(1)">
<img src="img/1.jpg">
</div>
<div class="container" onclick="hideunhide(2)">
<img src="img/2.jpg">
</div>
<div class="container" onclick="hideunhide(3)">
<img src="img/3.jpg">
</div>
<div class="container" onclick="hideunhide(4)">
<img src="img/4.jpg">
</div>
</section>
<section id="description">
<div id="1" style="display:none;">
<h1>people</h1>
<p>time</p>
<p>country</p>
</div>
<div id="2" style="display:none;">
<h1>people</h1>
<p>time</p>
<p>country</p>
</div>
<div id="3" style="display:none;">
<h1>people</h1>
<p>time</p>
<p>country</p>
</div>
<div id="4" style="display:none;">
<h1>people</h1>
<p>time</p>
<p>country</p>
</div>
</section>
<script>
function hideunhide(id) {
var obj = document.getElementById(id);
if(obj.style.display == "block")
obj.style.display = "none";
else
obj.style.display = "block";
};
</script>
</body>
</html>
Related
Current Behavior
I have the following basic structure:
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content">Content</div>
</div>
<!-- ... dozens of .boxes ... -->
</section>
#containers is .display: flex; flex-wrap: wrap, so the number of boxes on any one row is dynamic. This is an important feature that must be maintained.
Here's a minimal working example:
$(document).ready(function() {
$(".collapsible").click(function() {
$( this ).next().slideToggle();
});
});
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
.collapsible:hover {
background: #aaf;
}
.content {
margin: 0.5em;
margin-left: 16px;
display: none; /* Initially collapsed */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box3">
<div class="collapsible"><h2>Box 3</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box4">
<div class="collapsible"><h2>Box 4</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box5">
<div class="collapsible"><h2>Box 5</h2></div>
<div class="content">Content</div>
</div>
</section>
</body>
I can easily use .slideToggle() to toggle visibility of a sibling (.content) underneath one of the clickable .collapsible divs:
$(".collapsible").click(function() {
$( this ).next().slideToggle();
});
Desired Behavior and Remarks
What I'd like is, on click of any .collapsible div in a row, the entire row will be toggled. That is, every .content div on the same horizontal row as displayed in the current viewport.
This must handle rows with dynamic number of columns, including viewport resizing. I'm flexible on the precise behavior, though.
Is this possible? And how much will it hurt?🙂 Changes to the document structure (such as adding some sort of row container) are OK, and I don't mind using some JS/jQuery code of course. The main thing I can't do is hard code the number of columns, as I need my site to remain responsive on vertical phones and fullscreen desktop browsers.
Maybe the jQuery slideToggle() function is not the best method.
Since a row will be the same height , you may look at a method to set size from 0 to another value. anybox resized will stretch other boxes on the same row.
here an example of the idea, setting a max-height from 0 to 200px and a transition.
it toggles a class.
$(document).ready(function() {
$(".collapsible").click(function() {
this.classList.toggle('slide');// plain javascript to toggle a class
});
});
*{box-sizing:border-box}
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
p{margin-top:0;}
.collapsible:hover {
background: #aaf;
}
.content {
margin:0 0.5em;
margin-left: 16px;
max-height:0; /* Initially collapsed */
transition:0.5s
}
.slide + .content{max-height:400px;/* which one got the class*/ color:darkred}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content"><p>Content</p></div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content"><p>Content</p><p>Content</p></div>
</div>
<div class="box" id="box3">
<div class="collapsible"><h2>Box 3</h2></div>
<div class="content"><p>Content</p></div>
</div>
<div class="box" id="box4">
<div class="collapsible"><h2>Box 4</h2></div>
<div class="content"><p>Content</p><p>Content</p><p>Content</p></div>
</div>
<div class="box" id="box5">
<div class="collapsible"><h2>Box 5</h2></div>
<div class="content"><p>Content</p></div>
</div>
</section>
</body>
What you are missing here , is to set the height of the row to the height of the taller box, unless they will all be the same height.
For this, you can look for every box at the same top offset that the one clicked, and look for the tallest innercontent of the .contents and use this height .
Here comes the idea looking where each are standing and resets a max-height rule, you can inspire from too:
// defaut : supposed to be with no class 'slide' set on html elements
$(document).ready(function () {
let boxes = document.querySelectorAll(".collapsible");
let contents = document.querySelectorAll(".content");
$(".collapsible").click(function (event) {
let arrayContent = [];//reset
let hide=false;
for (i = 0; i < contents.length; i++) {
contents[i].style.maxHeight = "min-content";
let index = i;
let heightC = contents[i].offsetTop;
let boxOffset = contents[i].parentNode.offsetTop + 1;
// a few infos .add/remove what is needed
arrayContent.push({
index,
heightC,
boxOffset
});
contents[i].setAttribute("style", "");// resets inline style
}
let rowOffset = this.offsetTop;
if(this.classList.contains('slide')) {
hide=true;
}
let classState = this.classList;
arrayContent.forEach(function (obj) {
if (obj.boxOffset == rowOffset) {
if(hide == true) boxes[obj.index].classList.add('slide');/* reset needed if window resized => rows reorganized ? */
boxes[obj.index].classList.toggle("slide");
} else {
boxes[obj.index].classList.remove("slide");
}
});
});
});
* {
box-sizing: border-box
}
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
p {
margin-top: 0;
}
.collapsible:hover {
background: #aaf;
}
.content {
margin: 0 0.5em;
margin-left: 16px;
max-height: 0;
/* Initially collapsed */
transition: max-height 0.5s!important
}
.slide~.content {
max-height: 400px;
/* which one got the class*/
color: darkred;
}
.collapsible:before {
content: attr(class)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible">
<h2>Box 1</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
<div class="box" id="box2">
<div class="collapsible">
<h2>Box 2</h2>
</div>
<div class="content">
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="box" id="box3">
<div class="collapsible">
<h2>Box 3</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
<div class="box" id="box4">
<div class="collapsible">
<h2>Box 4</h2>
</div>
<div class="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="box" id="box5">
<div class="collapsible">
<h2>Box 5</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
</section>
</body>
This question already has an answer here:
javascript setAttribute style
(1 answer)
Closed 3 years ago.
I am trying to place an svg over an image using javascript. However, the position:relative style isn't working. I think it might be due to the style getting overwritten by the style sheet. Is there something im missing?
function button() {
var evenPic = document.querySelectorAll("#userList li:nth-child(even) .avatar");
for (var i = 0; i < evenPic.length; i++) {
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "100");
svg.setAttribute("height", "100");
svg.setAttribute("position", "absolute");
svg.setAttribute("top", "0");
svg.setAttribute("left", "0");
svg.setAttribute("fill", "yellow");
svg.setAttribute("opacity", "0.5");
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "30");
circle.setAttribute("cy", "45");
circle.setAttribute("r", "31");
svg.appendChild(circle);
evenPic[i].appendChild(svg);
}
}
#container {
max-width: 400px;
}
header {
text-transform: uppercase;
padding-left: 7%
}
ol {
list-style: none;
}
ol li {
max-width: 400px;
}
.user {
margin: 20px;
padding-left: 20%;
font-family: arial;
}
.name {
/*font-weight: bold;*/
font-size: 120%;
margin-bottom: 10px;
}
.status {
font-size: 110%;
/*font-weight: bold;*/
margin-bottom: 10px;
}
.avatar {
position: relative;
}
.avatar img {
width: 17%;
padding-top: 4%;
float: left;
}
<div id="container">
<header>
Recent Conversations
</header>
<ol id="userList">
<li>
<div class="avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class="user">
<div class="name">
Finn
</div>
<div class="status">
I'm a big deal
</div>
<div class="message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
<li>
<div class="avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class="user">
<div class="name">
Finn
</div>
<div class="status">
I'm a big deal
</div>
<div class="message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
<li>
<div class="avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class="user">
<div class="name">
Finn
</div>
<div class="status">
I'm a big deal
</div>
<div class="message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
</ol>
<div id="buttons">
<button id="btn" onclick="button()">Button</button>
</div>
</div>
With this code, the svg image is created next to the avatar. Is there a way to create it on top of the avatar?
svg.setAttribute("position", "absolute");
position isn't an HTML or SVG attribute, it is a CSS property
svg.style.position = "absolute";
Simply add this CSS to .avatar svg :
position: absolute;
left: 0;
Since position: relative is set on your avatar, your SVG will be placed over it.
You could actually do this using CSS only instead of an SVG (simply by creating a yellow circle and placing it over it using the code below) :
<!DOCTYPE html>
<html>
<head>
<style>
#container {
max-width: 400px;
}
header {
text-transform: uppercase;
padding-left: 7%
}
ol {
list-style: none;
}
ol li {
max-width: 400px;
}
.user {
margin: 20px;
padding-left: 20%;
font-family:arial;
}
.name {
/*font-weight: bold;*/
font-size: 120%;
margin-bottom: 10px;
}
.status {
font-size: 110%;
/*font-weight: bold;*/
margin-bottom: 10px;
}
.avatar {
position:relative;
}
.avatar:after {
content: "";
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
background: yellow;
/* Using the same width and float as your image */
/* Forced to set a height using pixels since its parent has no height */
float: left;
width: 17%;
margin-top: 4%;
height: 62px;
opacity: 0;
transition: opacity 300ms;
}
.avatar.active:after {
opacity: 0.5;
}
.avatar img {
width: 17%;
padding-top:4%;
float: left;
}
</style>
</head>
<body>
<div id = "container">
<header>
Recent Conversations
</header>
<ol id = "userList">
<li>
<div class = "avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class = "user">
<div class = "name">
Finn
</div>
<div class = "status">
I'm a big deal
</div>
<div class = "message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
<li>
<div class = "avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class = "user">
<div class = "name">
Finn
</div>
<div class = "status">
I'm a big deal
</div>
<div class = "message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
<li>
<div class = "avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class = "user">
<div class = "name">
Finn
</div>
<div class = "status">
I'm a big deal
</div>
<div class = "message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
</ol>
<div id = "buttons">
<button id="btn" onclick="button()">Button</button>
</div>
</div>
</body>
<script>
function button(){
var evenPic = document.querySelectorAll("#userList li:nth-child(even) .avatar");
for(var i=0; i<evenPic.length; i++){
evenPic[i].classList.add("active");
}
}
</script>
</html>
Here is my code:
.wrapper {
border: 1px solid red;
padding-left: 20px;
}
.table {
display: table;
width: 100%;
}
.table > div {
display: table-cell;
border: 1px solid green;
min-width: 190px;
}
<div class="wrapper">
<div class="table">
<div class="share_edit_flag">
<span>share</span>
<span>edit</span>
<span>close</span>
</div>
<div class="editor">
edited May 21 16 at 11:58
<div class="profile">
<img src="#" />
Rory O'Kane
<b>12.6k</b>
<!-- I don't have any badge in my website -->
</div>
</div>
<div class="author">
asked May 21 16 at 11:51
<div class="profile">
<img src="#" />
vasanthkumarmani
<b>1</b>
<!-- I don't have any badge in my website -->
</div>
</div>
</div>
</div>
Please resize the page. As you see, green box comes out of the red box on a small screen.
Anyway I want to break down both div.author and div.editor together when the parent's width is smaller than childs' width. Is doing that possible?
You can use display: flex instead of display: table.
To wrap editor and author divs together you can use the script below. It will be working even if you put your table into a div with restricted width.
JSFiddle
$(window).resize(function() {
setTableDirection();
});
setTableDirection();
function setTableDirection() {
var $table = $('.table');
if ($table.width() <= 580) {
$table.css('flex-direction', 'column');
} else {
$table.css('flex-direction', 'row');
}
}
.wrapper {
border: 1px solid red;
padding-left: 20px;
}
.table {
display: flex;
flex-wrap: wrap;
}
.table>div {
border: 1px solid green;
min-width: 190px;
flex-grow: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="table">
<div class="share_edit_flag">
<span>share</span>
<span>edit</span>
<span>close</span>
</div>
<div class="editor">
edited May 21 16 at 11:58
<div class="profile">
<img src="#" />
Rory O'Kane
<b>12.6k</b>
<!-- I don't have any badge in my website -->
</div>
</div>
<div class="author">
asked May 21 16 at 11:51
<div class="profile">
<img src="#" />
vasanthkumarmani
<b>1</b>
<!-- I don't have any badge in my website -->
</div>
</div>
</div>
</div>
What about this?
.wrapper {
border: 1px solid red;
padding-left: 20px;
}
.table {
display: table;
width: 100%;
}
.table > div {
display: table-cell;
border: 1px solid green;
min-width: 190px;
}
#media screen and (max-width: 480px) {
.table > div {
display: table-cell;
border: 1px solid green;
min-width: 190px;
float:left;
}
.table > div:nth-child(1){
clear: both;
}
}
<div class="wrapper">
<div class="table">
<div class="share_edit_flag">
<span>share</span>
<span>edit</span>
<span>close</span>
</div>
<div class="editor">
edited May 21 16 at 11:58
<div class="profile">
<img src="#" />
Rory O'Kane
<b>12.6k</b>
<!-- I don't have any badge in my website -->
</div>
</div>
<div class="author">
asked May 21 16 at 11:51
<div class="profile">
<img src="#" />
vasanthkumarmani
<b>1</b>
<!-- I don't have any badge in my website -->
</div>
</div>
</div>
</div>
I used media queries and also nth-child of your table > div, I supposed it go overflow under 480px. I think is better for you to use display flex or bootstrap grid system . For evry question I'm here.I hope you understand and also sorry for my english :)
Here a fiddle you can resize and see the difference : here
I have a division with n-number of divs which consist of images of different sizes:
<div>
<div> <img ng-src="{{backgroundImage}}" /> </div>
<div> <img ng-src="{{backgroundImage}}" /> </div>
<div> <img ng-src="{{backgroundImage}}" /> </div>
<div> <img ng-src="{{backgroundImage}}" /> </div>
<div> <img ng-src="{{backgroundImage}}" /> </div>
<!-- dynamically the images will be loaded -->
</div>
The functionality I am looking for is:
They have to flow in one row regardless of the number of images, which means they should re-size to smaller images if there is a large number of images.
The images aspect ratio has to be kept on re-sizing
The div should be all equal width and height on re-sizing
What I'd actually like is for each image to be aligned within a square that is consistently sized with all of the other images. Each image should be constrained and re-sized within their own square. Then I want all of the containing squares to be sized across the row. So as the number of images increases the size of the squares decrease accordingly.
I have tried and searched a lot for the solution, but nothing worked. Please demonstrate some real examples with the functionality I mentioned above.
I'd prefer using pure css and html, something like this:
<div class="ratio-16-9">
<img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View">
</div>
<style>
.ratio-16-9,
.ratio-12-9,
.ratio-1-1 {
display: block;
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
}
.ratio-16-9 img,
.ratio-12-9 img,
.ratio-1-1 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.ratio-1-1 {
padding-bottom: 100%;
}
.ratio-12-9 {
padding-bottom: 73.47%;
}
</style>
You can try something like this, although it requires an additional div:
* {
margin: 0;
padding: 0;
}
.outer-wrap-img {
display: table;
table-layout: fixed;
width: 100%;
}
.inner-wrap-img {
display: table-cell;
}
.inner-wrap-img div {
padding-bottom: 100%;
position: relative;
}
.inner-wrap-img div img {
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
}
.red {
background: #F00;
}
.green {
background: #0f0;
}
<div class="outer-wrap-img">
<div class="inner-wrap-img">
<div class="red">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="green">
<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="red">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="green">
<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="red">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="green">
<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="red">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="green">
<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
</div>
</div>
</div>
This should fulfill your requirement. set the total no. of image to variable imageCount and the code will calculate accordingly. Right now i have given background red. You can set image url when you use
var imageCount = 27;
var width = window.innerWidth;
var divWidth = width/imageCount;
var html = "";
for(var i=0;i<imageCount;i++)
{
html+= "<div style='float:left; width: "+divWidth +"px;height: "+divWidth +"px;background: red; background-size:100% 100%'></div>";
}
document.getElementById("images").innerHTML = html;
*{
padding: 0;
margin: 0;
}
<div id="images">
</div>
Use flexbox, or, you can use a table.
I am constructing a div on the fly using Jquery, and appending it to the body or any element.
after appending, when i try to get get the height it gives 0. In Chrome i checked all its height property its 0. what could be the problem.
This is my code to append :
var template = '<div class="capMainSection">
<div class="CAP"> </div>
<div class="scrolldiv repeatSection" style="display:none;"">
<div class="header sectionheader"> </div>
<div class="content">
<div class="leftColumn">
<div class="show" id="capInfo">
<div class="label1">CA Contacts:</div>
<div class="label2"><p>CA Lead:<span class="LeadName"></span><span class="LeadEmail"></span></p></div>
<div class="lable3"><p>Lead:<span class="vLeadName"></span><span class="vLeadEmail"></span></p></div>
</div>
<div class="hidden" id="facInfo">
<div class="label1"><span class="facid"></span><span class="facName"></span></div>
<div class="label2"><span class="city"></span><span class="state"></span><span
class="country"></span></div>
</div> </div>
<div class="rightColumn">
<div class="rightGroup">
<div class="groupproto">
<p><span class="protocolname show"></span>
<span class="date_class show"></span></p>
</div>
<div class="statusClass hidden"></div>
<div class="approvedFinding show"></div>
<div class="closedFinding show"></div>
<div class="verifiedFinding show"></div>
<div class="lasActivity show"></div>
</div>
<div class="linkButton">
<input type="button" class="lplinkbutton" value=">">
</div>
</div>
</div>
</div>
</div>';
i am cloning the div first then appending
templateNode = $('.repeatSection').clone(true);
//change the display none to show
$(templateNode).find('.content').attr('id',capRow);
$('.capMainSection').append($(templateNode));
css
.content {
clear: both;
font-size: 13px;
}
.leftColumn {
float: left;
width: 40%;
padding: 10px 0 10px 10px;
}
.rightColumn {
float: right;
width: 50%;
padding: 0;
}
Try this:
.capMainSection {overflow: hidden;}
Or, you can do this:
.capMainSection:after {
content: " ";
display: block;
clear: both;
}