Force image div container to stretch inside custom image box layout

Force image div container to stretch inside custom image box layout - javascript

I develop custom image box html control which contains image area along with small image thumbnails collection located at the bottom, top, left or right from the main image.
The problem is the main image div container doesnt stretch to fill remain area in main frame div.
Here is my code
.wvIBoxFrameDiv {
width: 300px;
height: 300px;
background: red;
}
.wvIBoxMainImageDiv {
background: green;
}
.wvIBoxThumbContainerDiv{
background: black;
overflow: hidden;
white-space: nowrap;
}
.wvIBoxThumbImagesContainerDiv{
background: blue;
display: inline-block;
}
.wvIBoxThumbNavigationDiv{
background: purple;
display: inline-block;
height: 30px;
width: 30px;
}
.wvIBoxThumbImageDiv{
background: orange;
display: inline-block;
height: 40px;
width: 40px;
}
<div class="wvIBoxFrameDiv">
<div class="wvIBoxMainImageDiv">
</div>
<div class="wvIBoxThumbContainerDiv">
<div class="wvIBoxThumbNavigationDiv"></div>
<div class="wvIBoxThumbImagesContainerDiv">
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
</div>
<div class="wvIBoxThumbNavigationDiv"></div>
</div>
</div>
Here I need thumbnails div container (with black background) placed in the bottom of main (red) frame div, while main image div (with green background) should stretch to fill remain area.
What am I do wrong?

Give height and width as 100% to .wvIBoxMainImageDiv
.wvIBoxFrameDiv {
width: 300px;
height: 300px;
background: red;
}
.wvIBoxMainImageDiv {
background: green;
height:100%; /*this here*/
width:100%; /*and here*/
}
.wvIBoxThumbContainerDiv{
background: black;
overflow: hidden;
white-space: nowrap;
}
.wvIBoxThumbImagesContainerDiv{
background: blue;
display: inline-block;
}
.wvIBoxThumbNavigationDiv{
background: purple;
display: inline-block;
height: 30px;
width: 30px;
}
.wvIBoxThumbImageDiv{
background: orange;
display: inline-block;
height: 40px;
width: 40px;
}
<div class="wvIBoxFrameDiv">
<div class="wvIBoxMainImageDiv">
</div>
<div class="wvIBoxThumbContainerDiv">
<div class="wvIBoxThumbNavigationDiv"></div>
<div class="wvIBoxThumbImagesContainerDiv">
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
<div class="wvIBoxThumbImageDiv"></div>
</div>
<div class="wvIBoxThumbNavigationDiv"></div>
</div>
</div>

You can also use flex, (using auto-prefixer):
<div class="fullGallery">
<div class="mainImage">
</div>
<div class="bottomImages">
<div class="navigationButton">
</div>
<div class="imageContainer">
<div class="oneImage"></div>
<div class="oneImage"></div>
<div class="oneImage"></div>
</div>
<div class="navigationButton">
</div>
</div>
</div>
.fullGallery {
width: 300px;
height: 300px;
background-color: red;
display: flex;
flex-direction: column;
}
.mainImage {
width: 100%;
flex: 1;
background-color: yellow;
}
.bottomImages {
width: 100%;
height: 70px;
background-color: green;
display: flex;
}
.navigationButton {
width: 40px;
height: 100%;
background-color: pink;
}
.imageContainer {
flex: 1;
display: flex;
justify-content: space-around;
}
.oneImage {
background-color: blue;
width: 26%;
}
http://codepen.io/anon/pen/JYrdQJ
I like it more

Related

CSS Position Sticky Is Not Working For All Divs

I'm working on one of mine project and for that I want to make the Search Bar sticky for that I've written a JS code but the problem is that the Search Bar is appear to be sticky on the "Context Section" only, It's not sticking/ working on "Sidebar & Footer". I want to make it sticky for complete body after the OffSet.
I have also tried the "position: fixed;" instead of "position: sticky;" and It's working fine in fixed position but in fixed position the Search Bar goes outside the body (Even with "overflow: hidden;" not working) that's why I'm using the sticky position.
How can I fix this issue?
const searchBAR = document.querySelector('.search-bar');
let navTop = searchBAR.offsetTop;
function stickySearchBar() {
if (window.scrollY >= navTop) {
searchBAR.classList.add('fixed');
} else {
searchBAR.classList.remove('fixed');
}
}
window.addEventListener('scroll', stickySearchBar);
.search-bar {
width: 100%;
position: relative;
display: flex;
}
.search-term {
width: 100%;
max-height: 36px;
border: 3px solid black;
border-right: none;
padding: 5px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
}
.search-term:focus {
color: black;
}
.search-btn {
width: 40px;
height: 36px;
border: 1px solid black;
background: black;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.fixed {
position: sticky;
top: 0;
}
main .content-section,
main .sidebar-section {
background-color: skyblue;
padding: 15px;
height: auto;
}
.main-section {
margin: 0 auto;
display: grid;
grid-gap: 0px;
grid-template-columns: 70% 30%;
}
#media (max-width: 600px) {
.main-section {
grid-template-columns: 100%;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="main" style="width: 400px;">
<header style="width: 100%; height:200px; background-color: skyblue;">
HEADER SECTION
</header>
<div class="main-section">
<div class="content-section">
<div class="search-bar">
<input type="text" class="search-term" placeholder="Search Here...">
<button type="submit" class="search-btn">
<i class="fa fa-search"></i>
</button>
</div>
<div style="width: 100%; height: 1000px; background-color: pink;">
CONTENT SECTION
</div>
</div>
<div class="sidebar-section">
<div style="width: 100%; height:1000px; background-color: yellow;">
SIDE-BAR SECTION
</div>
</div>
</div>
<footer style="width: 100%; height:200px; background-color: blue;">
FOOTER SECTION
</footer>
</div>

you can put the search-bar in the outermost div so that it can include the header and footer
const searchBAR = document.querySelector('.search-bar');
let navTop = searchBAR.offsetTop;
function stickySearchBar() {
if (window.scrollY >= navTop) {
searchBAR.classList.add('fixed');
} else {
searchBAR.classList.remove('fixed');
}
}
window.addEventListener('scroll', stickySearchBar);
.search-bar {
width: 100%;
position: relative;
display: flex;
}
.search-term {
width: 100%;
max-height: 36px;
border: 3px solid black;
border-right: none;
padding: 5px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
}
.search-term:focus {
color: black;
}
.search-btn {
width: 40px;
height: 36px;
border: 1px solid black;
background: black;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.fixed {
position: sticky;
top: 0;
}
main .content-section,
main .sidebar-section {
background-color: skyblue;
padding: 15px;
height: auto;
}
.main-section {
margin: 0 auto;
display: grid;
grid-gap: 0px;
grid-template-columns: 70% 30%;
}
#media (max-width: 600px) {
.main-section {
grid-template-columns: 100%;
}
}
<div class="main" style="width: 400px;">
<div class="search-bar">
<input type="text" class="search-term" placeholder="Search Here...">
<button type="submit" class="search-btn">
<i class="fa fa-search"></i>
</button>
</div>
<header style="width: 100%; height:200px; background-color: skyblue;">
HEADER SECTION
</header>
<div class="main-section">
<div class="content-section">
<!-- <div class="search-bar">
<input type="text" class="search-term" placeholder="Search Here...">
<button type="submit" class="search-btn">
<i class="fa fa-search"></i>
</button>
</div> -->
<div style="width: 100%; height: 1000px; background-color: pink;">
CONTENT SECTION
</div>
</div>
<div class="sidebar-section">
<div style="width: 100%; height:1000px; background-color: yellow;">
SIDE-BAR SECTION
</div>
</div>
</div>
<footer style="width: 100%; height:200px; background-color: blue;">
FOOTER SECTION
</footer>
</div>

Scrollable part of page

I want to have a similar effect like on this page: https://melaniedaveid.com/ (half of the page is scrollable).
I can make a sticky box, but there are certain things that I don't know how to make, such as the text. The text must be bigger than the box, but if overflow: hidden, then it is not scrollable. If it's overflow: scroll, it scrolls only if the mouse is hovering over the section, but I want the mouse to be able to scroll anywhere on the page.
body {
display: flex;
}
.example {
width: 50%;
}
.block {
background: #888888;
height: 300px;
/* margin: 1em; */
border: 1px solid black;
}
.block.one {
height: 100px;
}
.box {
width: 100%;
height: 100px;
background: orange;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}
.sticky {
position: sticky;
top: 10px;
}
.orange{
background: orange;
}
<div class="example">
<div class="block one"></div>
<div class="block">
<p class="box sticky"> </p>
</div>
<div class="block"></div>
</div>
<div class="example">
<div class="block one"></div>
<div class="block orange"></div>
<div class="block"></div>
</div>

Is this how you want it?
To create the sticky effect use position: sticky.
Code:
#wrapper {
display:flex;
flex-direction:row;
}
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 50%;
height: 300px;
top: 0;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
}
#para{
width:50%;
margin:10px;
}
<div id="wrapper">
<div id="sticky">
sticky
</div>
<div id="para">
This is a para
</div>
</div>

How do you wrap four cards around a centered card?

I want to create a homepage with 5 card elements.
I want to have 4 items surrounding the 5th element that is centered.
This is a picture of what I'm trying to do. https://imgur.com/a/3jvHicq
I have tried searching but I haven't found an example that talks about breaking the "wrap" text on the next row as it shows in the picture. I just don't know what else to search for.
I tried absolute position but that was NOT what I needed. I tried changing left: 100px and such to align the items but they wouldn't even move without the absolute position (I don't understand why). I tried using floats but it just created a mess.
.hp-container {
background: rgb(139, 174, 250);
flex: flex;
justify-content: center
}
/* Left Side */
.home-card-1 {
margin: 10px;
background: gray;
border-radius: 5px;
border: solid;
border-color: green;
Color: white;
text-align: center;
width: 500px;
height: 380px;
}
.home-card-4 {
margin: 10px;
background: rgb(93, 130, 207);
border-radius: 5px;
border: solid;
border-color: green;
Color: white;
text-align: center;
width: 500px;
height: 380px;
}
/* Right Side */
.home-card-3 {
margin: 10px;
background: rgb(231, 126, 126);
border-radius: 5px;
border: solid;
border-color: rgb(25, 0, 255);
Color: white;
text-align: center;
width: 500px;
height: 380px;
}
.home-card-5 {
margin: 10px 10px 10px 550px;
background: rgb(87, 0, 29);
border-radius: 5px;
border: solid;
border-color: green;
Color: white;
text-align: center;
width: 500px;
height: 380px;
}
/* Middle */
.home-card-2 {
margin: 10px;
background: rgb(122, 177, 165);
border-radius: 5px;
border: solid;
border-color: rgb(37, 0, 0);
Color: white;
text-justify: justify;
text-align: center;
width: 500px;
height: 600px;
}
<div class="hp-container d-flex flex-wrap animated fadeIn">
<div class="home-card-1">
<div>
<h2>Explainer Video</h2>
</div>
</div>
<div class="home-card-2">
<div>
<h2>Game Hub Center</h2>
</div>
</div>
<div class="home-card-3">
<div>
<h2>Twitter Feed</h2>
</div>
</div>
<div class="home-card-4">
<div>
<h2>Giveaway</h2>
</div>
</div>
<div class="home-card-5">
<div>
<h2>Gofundme</h2>
</div>
</div>
</div>

You can use css grid system. This example shows the basics but you can modify it and make it work as required
.hp-container {
background: rgb(139, 174, 250);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
[class^='home-card-'] {
background: grey;
color: white;
text-align: center;
}
.home-card-2 {
margin: 10px 0;
}
<div class="hp-container d-flex flex-wrap animated fadeIn">
<div class='col-1'>
<div class="home-card-1">
<div>
<h2>Explainer Video</h2>
</div>
</div>
<div class="home-card-4">
<div>
<h2>Giveaway</h2>
</div>
</div>
</div>
<div class="home-card-2">
<div>
<h2>Game Hub Center</h2>
</div>
</div>
<div class='col-3'>
<div class="home-card-3">
<div>
<h2>Twitter Feed</h2>
</div>
</div>
<div class="home-card-5">
<div>
<h2>Gofundme</h2>
</div>
</div>
</div>
</div>

If you are using flex, then you need to modify your html structure a little bit. CSS flex works in 1-d only (for 2-d you should use css grid). Still, if you want to use flex, you need to modify the html structure in such a manner that there are 3 columns with left containing 2 divs, mid containing 1 div and right containing 2 divs:
.hp-container {
background: rgb(139, 174, 250);
display: flex;
justify-content: center;
flex-direction: row;
}
/* Left Side */
.home-card-1 {
margin: 10px;
background: gray;
border-radius: 5px;
border: solid;
border-color: green;
color: white;
text-align: center;
width: 500px;
height: 380px;
}
.home-card-4 {
margin: 10px;
background: rgb(93, 130, 207);
border-radius: 5px;
border: solid;
border-color: green;
color: white;
text-align: center;
width: 500px;
height: 380px;
}
/* Right Side */
.home-card-3 {
margin: 10px;
background: rgb(231, 126, 126);
border-radius: 5px;
border: solid;
border-color: rgb(25, 0, 255);
color: white;
text-align: center;
width: 500px;
height: 380px;
}
.home-card-5 {
margin: 10px;
background: rgb(87, 0, 29);
border-radius: 5px;
border: solid;
border-color: green;
color: white;
text-align: center;
width: 500px;
height: 380px;
}
/* Middle */
.home-card-2 {
margin: 10px;
background: rgb(122, 177, 165);
border-radius: 5px;
border: solid;
border-color: rgb(37, 0, 0);
color: white;
text-justify: justify;
text-align: center;
width: 500px;
height: 600px;
}
<div class="hp-container d-flex flex-wrap animated fadeIn">
<div class="left-wrap">
<div class="home-card-1">
<div>
<h2>Explainer Video</h2>
</div>
</div>
<div class="home-card-4">
<div>
<h2>Giveaway</h2>
</div>
</div>
</div>
<div class="mid-wrap">
<div class="home-card-2">
<div>
<h2>Game Hub Center</h2>
</div>
</div>
</div>
<div class="right-wrap">
<div class="home-card-3">
<div>
<h2>Twitter Feed</h2>
</div>
</div>
<div class="home-card-5">
<div>
<h2>Gofundme</h2>
</div>
</div>
</div>
</div>
for css grid, #brk as given a good answer.
Hope it helps. Revert for any doubts.

You can use flex like this:
.hp-container{
display: flex;
flex-direction: row;
}
.card{
color: red;
width: 150px;
height: 200px;
background: yellow;
margin: 10px;
text-align: center;
padding: 5px;
}
.home-card-3{
height: 420px;
}
<div class="hp-container">
<div class="col1">
<div class="card home-card-1">
<div>
<h2>Explainer Video</h2>
</div>
</div>
<div class="card home-card-2">
<div>
<h2>Giveaway</h2>
</div>
</div>
</div>
<div class="col2">
<div class="card home-card-3">
<div>
<h2>Game Hub Center</h2>
</div>
</div>
</div>
<div class="col3">
<div class="card home-card-4">
<div>
<h2>Twitter Feed</h2>
</div>
</div>
<div class="card home-card-5">
<div>
<h2>Gofundme</h2>
</div>
</div>
</div>
</div>

Adjust a Div's Style Depending on Another Div's Presence?

In the snippet provided, I have 3 sections: The first contains a single image, the second has two images, and the last one has no images.
I would like for the .image class within the first section to be 100% in width only if there is no other .image div present.
However, once there is another .image div present, (as shown in the second section), I would like it to default back to 50% width.
How should I execute this?
$(function() {
$('.container > .section').each(function() {
if (!$(this).find(".image").length) {
$(this).before('<div class="noimage">No images to display.</div>');
}
});
});
body {
font-size: 16px;
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 22px;
margin-top: 0;
margin-bottom: 10px;
}
.container {
box-sizing: border-box;
overflow: auto;
}
.image {
float: left;
display: block;
width: 50%;
line-height: 0;
}
.image img {
width: 100%;
height: auto;
}
.container {
margin: 0 auto;
max-width: 300px;
border: 1px solid lightgrey;
padding: 10px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 1 Image -->
<div class="container">
<h1>Section With 1 Image:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
</div>
</div>
<!-- 2 Images -->
<div class="container">
<h1>Section With 2 Images:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/orange-flat.png"></div>
</div>
</div>
<!-- No Images -->
<div class="container">
<h1>Section With No Images:</h1>
<div class="section"></div>
</div>

You could display the section as a table and the div.image as a table-cell. Then the image would resize according to the number of "cell's" (div.image's) present.
div.container{
display: 100%;
}
div.section{
width: 100%;
display: table;
}
div.section div.image{
display: table-cell;
}
div.section div.image img{
width: 100%;
height: auto;
}
Here's a JSFiddle:
https://jsfiddle.net/ColiniloC/Lnnkpx6L/

Figured out a simpler solution with flexbox:
$(function() {
$('.container > .section').each(function() {
if (!$(this).find(".image").length) {
$(this).before('<div class="noimage">No images to display.</div>');
}
});
});
body {
font-size: 16px;
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 22px;
margin-top: 0;
margin-bottom: 10px;
}
.container {
box-sizing: border-box;
margin: 0 auto;
max-width: 300px;
border: 1px solid lightgrey;
padding: 10px;
display: block;
}
.section {
display: flex;
flex-wrap: wrap;
overflow: hidden;
align-items: center;
margin: 0 -5px;
}
.image {
flex: 1 1 50%;
line-height: 0;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
}
.container .image:nth-of-type(n+3) {
padding-top: 10px;
}
.image img {
width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 1 Image -->
<div class="container">
<h1>Section With 1 Image:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
</div>
</div>
<!-- 2 Images -->
<div class="container">
<h1>Section With 2 Images:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
</div>
</div>
<!-- 4 Images -->
<div class="container">
<h1>Section With 4 Images:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/orange-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/burger-flat.png"></div>
</div>
</div>
<!-- No Images -->
<div class="container">
<h1>Section With No Images:</h1>
<div class="section"></div>
</div>

How to make 3 column two side by side one middle my divs takes everything to left

I am trying to make simple css layout. I want 3 box
{Left} {center} {right}
So I write this code
#myleft {
position: relative;
float: left;
width: 20%;
background-color: #CC6600;
}
#mycenter {
width: 60%;
background-color: #f2f4f4;
}
* html #mycenter {
height: 1%
}
#myright {
position: relative;
float: right;
width: 20%;
background-color: #FF6633;
}
<div id='left'> Left </div>
<div id='mycenter'> Center </div>
<div id='right'> right </div>
but instead of
{left} {center} {right}
{left}
{center}
{right}
I don't know why but it goes like this even the float is left and right

You didn't name your div id's correctly. they should be myleft and myright
body {
width: 100%;
}
#myleft {
position:relative;
float:left;
width:20%;
background-color:#CC6600;
}
#mycenter {
width:60%;
float: left;
background-color:#f2f4f4;
}
#mycenter {
height:1%
}
#myright {
float:left;
width:20%;
background-color:#FF6633;
}
<div id='myleft'> Left </div>
<div id='mycenter'> Center </div>
<div id='myright'> right </div>

Wrap your divs into a main div and try to use Flexbox
Stack Snippet
.d-flex {
display: flex;
flex-wrap: wrap;
}
#myleft {
position: relative;
width: 20%;
background-color: cyan;
}
#mycenter {
width: 60%;
background-color: #f2f4f4;
}
#myright {
position: relative;
width: 20%;
background-color: cyan;
}
<div class="d-flex">
<div id='myleft'> Left </div>
<div id='mycenter'> Center </div>
<div id='myright'> right </div>
</div>

And, of course, there is grid. First wrap the "gridded" elements
<div id='wrapper'>
<div id='left'> Left </div>
<div id='center'> Center </div>
<div id='right'> right </div>
</div>
#wrapper {
display: grid;
grid-template-columns: 2fr 6fr 2fr;
}
Then, optionally, if you want the content of each sub-div to be centered:
#left, #right, #center {
margin-left:auto;
margin-right:auto;
}

.container {
display: flex;
}
.box1 {
flex: 1 ;
text-align: center;
background-color: gray;
}
.box2 {
flex: 2;
text-align: center
}
.box3 {
flex: 1;
text-align: center;
background-color: gray;
}
<div class="container">
<div class="box1">
<p> text</p>
</div>
<div class="box2">
<p> text</p>
</div>
<div class="box3">
<p> text</p>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Force image div container to stretch inside custom image box layout - javascript

Related

CSS Position Sticky Is Not Working For All Divs

Scrollable part of page

How do you wrap four cards around a centered card?

Adjust a Div's Style Depending on Another Div's Presence?

How to make 3 column two side by side one middle my divs takes everything to left

Categories

Resources