Creating multiple pop up buttons

Creating multiple pop up buttons - javascript

so I'm currently having an issue with creating multiple popups with multiple buttons. I have multiple buttons up but when I click them they all show the same pop-up. How do I assign different pop-ups to each button? I feel like I've tried everything and I can't seem to figure it out. Any help would be greatly appreciated.
function togglePopup(){
document.getElementById("popup-1").classList.toggle("active");
document.getElementById("popup-2").classList.toggle("active");
document.getElementById("popup-3").classList.toggle("active");
document.getElementById("popup-4").classList.toggle("active");
document.getElementById("popup-5").classList.toggle("active");
document.getElementById("popup-6").classList.toggle("active");
document.getElementById("popup-7").classList.toggle("active");
document.getElementById("popup-8").classList.toggle("active");
document.getElementById("popup-9").classList.toggle("active");
}
.popup .overlay {
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
z-index:1;
display:none;
}
.popup .content {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
width:350px;
height: 220px;
z-index:2;
text-align:center;
padding:20px;
box-sizing:border-box;
}
.popup .close-btn{
cursor:pointer;
position:absolute;
right: 20px;
top:20px;
width:30px;
height:30px;
background: #222;
color: #fff;
font-size:25px;
font-weight:600;
line-weight:30px;
text-align:center;
border-radius:50%;
}
.popup.active .overlay{
display:block;
}
.popup.active .content{
transition:all 300ms ease-in-out;
transform:translate(-50%,-50%) scale(1);
}
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 1</h2>
Portuguese is the official language of 9 countries.
</div>
</div>
<div class="popup" id="popup-2">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 2</h2>
</div>
</div>
<div class="popup" id="popup-3">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 3</h2>
</div>
</div>
<div class="popup" id="popup-4">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 4</h2>
</div>
</div>
<div class="popup" id="popup-5">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 5</h2>
</div>
</div>
<div class="popup" id="popup-6">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 6</h2>
</div>
</div>
<div class="popup" id="popup-7">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 7</h2>
</div>
</div>
<div class="popup" id="popup-8">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 8</h2>
</div>
</div>
<div class="popup" id="popup-9">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 9</h2>
</div>
</div>
<div class="btn-container">
<button onclick="togglePopup()" class="btn btn1">Un</button>
<button onclick="togglePopup()" class="btn btn2">Dois</button>
<button onclick="togglePopup()" class="btn btn3">Tres</button>
<br><br>
<button onclick="togglePopup()" class="btn btn4">Quatro</button>
<button onclick="togglePopup()" class="btn btn5">Cinco</button>
<button onclick="togglePopup()" class="btn btn6">Seis</button>
<br><br>
<button onclick="togglePopup()" class="btn btn7">Sete</button>
<button onclick="togglePopup()" class="btn btn8">Oito</button>
<button onclick="togglePopup()" class="btn btn9">Nove</button>
<br><br><br><br><br>
</div>

You could pass popup numbers as params to togglePopup as :
more about template strings here
function togglePopup(num){
document.getElementById(`popup-${num}`).classList.toggle("active");
}
.popup .overlay {
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
z-index:1;
display:none;
}
.popup .content {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
width:350px;
height: 220px;
z-index:2;
text-align:center;
padding:20px;
box-sizing:border-box;
}
.popup .close-btn{
cursor:pointer;
position:absolute;
right: 20px;
top:20px;
width:30px;
height:30px;
background: #222;
color: #fff;
font-size:25px;
font-weight:600;
line-weight:30px;
text-align:center;
border-radius:50%;
}
.popup.active .overlay{
display:block;
}
.popup.active .content{
transition:all 300ms ease-in-out;
transform:translate(-50%,-50%) scale(1);
}
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('1')">×</div>
<h2> Fun Fact 1</h2>
Portuguese is the official language of 9 countries.
</div>
</div>
<div class="popup" id="popup-2">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('2')">×</div>
<h2> Fun Fact 2</h2>
</div>
</div>
<div class="popup" id="popup-3">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('3')">×</div>
<h2> Fun Fact 3</h2>
</div>
</div>
<div class="popup" id="popup-4">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('4')">×</div>
<h2> Fun Fact 4</h2>
</div>
</div>
<div class="popup" id="popup-5">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('5')">×</div>
<h2> Fun Fact 5</h2>
</div>
</div>
<div class="popup" id="popup-6">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('6')">×</div>
<h2> Fun Fact 6</h2>
</div>
</div>
<div class="popup" id="popup-7">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('7')">×</div>
<h2> Fun Fact 7</h2>
</div>
</div>
<div class="popup" id="popup-8">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('8')">×</div>
<h2> Fun Fact 8</h2>
</div>
</div>
<div class="popup" id="popup-9">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('9')">×</div>
<h2> Fun Fact 9</h2>
</div>
</div>
<div class="btn-container">
<button onclick="togglePopup('1')" class="btn btn1">Un</button>
<button onclick="togglePopup('2')" class="btn btn2">Dois</button>
<button onclick="togglePopup('3')" class="btn btn3">Tres</button>
<br><br>
<button onclick="togglePopup('4')" class="btn btn4">Quatro</button>
<button onclick="togglePopup('5')" class="btn btn5">Cinco</button>
<button onclick="togglePopup('6')" class="btn btn6">Seis</button>
<br><br>
<button onclick="togglePopup('7')" class="btn btn7">Sete</button>
<button onclick="togglePopup('8')" class="btn btn8">Oito</button>
<button onclick="togglePopup('9')" class="btn btn9">Nove</button>
<br><br><br><br><br>
</div>

A very short and effective solution -
Get all the popups, open buttons and close buttons by class names, loop through them, attach eventlisteners to each of then and you are done!
What it reduces -
No need to have a onclick for each of your open and close buttons.
No need to have special id for each popup, close buttons and open buttons.
This drastically reduces the size of your html.
One more advantage - In future, if you want to add more popups, there is no need to touch the JS, the existing code will handle it.
function togglePopup(num){
popups[num].classList.toggle("active");
}
let popups = document.getElementsByClassName("popup");
let closeBtns = document.getElementsByClassName("close-btn");
let openBtns = document.getElementsByClassName("btn");
for(let i = 0; i<closeBtns.length; i++){
closeBtns[i].addEventListener("click", function(){togglePopup(i)});
openBtns[i].addEventListener("click", function(){togglePopup(i)});
}
.popup .overlay {
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
z-index:1;
display:none;
}
.popup .content {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
width:350px;
height: 220px;
z-index:2;
text-align:center;
padding:20px;
box-sizing:border-box;
}
.popup .close-btn{
cursor:pointer;
position:absolute;
right: 20px;
top:20px;
width:30px;
height:30px;
background: #222;
color: #fff;
font-size:25px;
font-weight:600;
line-height:30px;
text-align:center;
border-radius:50%;
}
.popup.active .overlay{
display:block;
}
.popup.active .content{
transition:all 300ms ease-in-out;
transform:translate(-50%,-50%) scale(1);
}
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 1</h2>
Portuguese is the official language of 9 countries.
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 2</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 3</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 4</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 5</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 6</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 7</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 8</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 9</h2>
</div>
</div>
<div class="btn-container">
<button class="btn">Un</button>
<button class="btn">Dois</button>
<button class="btn">Tres</button>
<br><br>
<button class="btn">Quatro</button>
<button class="btn">Cinco</button>
<button class="btn">Seis</button>
<br><br>
<button class="btn">Sete</button>
<button class="btn">Oito</button>
<button class="btn">Nove</button>
<br><br><br><br><br>
</div>

Related

How to align 3 equal grids in mobile view properly - bootstrap

Am new to bootstrap. I created 3 equal grid columns. it looking fine in desktop view. but in tablet view alignemnt is not proper. pls check images below.
Desktop view
tablet, mobile view
Code i used:
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
<div class="feature-box-icon"><img class="img-responsive" src="images/services/Website.png" alt="Website" ></div>
<div class="feature-box-info">
<div class="mb-none">Website Development</div>
<p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
</div>
</div>
</div>
.feature-box{
position: relative;
top: -4px;
}
.feature-box .feature-box-icon {
border-radius: 35px;
color: #FFF;
display: inline-block;
float: left;
height: 90px;
line-height: 35px;
margin-right: 10px;
position: relative;
text-align: center;
width: 90px;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.feature-box .feature-box-info {
padding-left: 80px;
}
.feature-box {
background: transparent;
width: 100%;
height: 100%;
clear: both;
padding-bottom: 30px;
}
.feature-box.feature-box-style-2 .feature-box-icon i.fa,
.feature-box.feature-box-style-2 .feature-box-icon i.icons {
font-size: 28px;
}
.mb-none {
margin-bottom: 0 !important;
font-size: 22px;
color: #918d8d;
font-weight: 500;
}
h1.tall,
h2.tall,
h3.tall,
h4.tall,
h5.tall,
h6.tall,
p.tall {
margin-bottom: 33px;
line-height: 20px;
}

simple, make use of rows
<div class="row">
<div class="col-xs-4">
content
</div>
<div class="col-xs-4">
content
</div>
<div class="col-xs-4">
content
</div>
</div>
additionally always add .col-xs-* since it can cause issues in certain cases if you dont
Sidenote for further understanding of the bs grid system: if col-xs-6 col-md-4 is set, your element will behave like this: col-xs-6 col-sm-6 col-md-4 col-lg-4.

Try this https://jsfiddle.net/sej7Lfov/
HTML
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
<div class="feature-box-icon"><img class="img-responsive" src="http://placehold.it/350x150" alt="Website" ></div>
<div class="feature-box-info">
<div class="mb-none">Website Development</div>
<p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
<div class="feature-box-icon"><img class="img-responsive" src="http://placehold.it/350x150" alt="Website" ></div>
<div class="feature-box-info">
<div class="mb-none">Website Development</div>
<p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
<div class="feature-box-icon"><img class="img-responsive" src="http://placehold.it/350x150" alt="Website" ></div>
<div class="feature-box-info">
<div class="mb-none">Website Development</div>
<p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
</div>
</div>
</div>
</div><!-- End of row -->
<div class="row">
<div class="col-sm-4">
<div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
<div class="feature-box-icon"><img class="img-responsive" src="http://placehold.it/350x150" alt="Website" ></div>
<div class="feature-box-info">
<div class="mb-none">Website Development</div>
<p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
<div class="feature-box-icon"><img class="img-responsive" src="http://placehold.it/350x150" alt="Website" ></div>
<div class="feature-box-info">
<div class="mb-none">Website Development</div>
<p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
<div class="feature-box-icon"><img class="img-responsive" src="http://placehold.it/350x150" alt="Website" ></div>
<div class="feature-box-info">
<div class="mb-none">Website Development</div>
<p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
</div>
</div>
</div>
</div><!-- End of row -->
</div><!-- End of container -->
CSS
.feature-box-icon {
float: left;
display: inline;
width: 90px;
height: 90px;
}
.feature-box-info {
display: inline;
}
.feature-box {
clear:both;
margin: 20px 0;
}
#media(max-width: 997px) {
.feature-box-info {
font-size: 12px;
}
}

Background image parrallax choppy on mobile

Just trying to learn how to implement a simple background image with parrallax. It works fine on desktop/laptop, but is very choppy and doesnt work properly on mobile devices. Using bootstrap-sass with rails.
Any obvious errors/tips that you can see?
CSS
.bg {
background: url('home.jpg') no-repeat center center;
position: fixed;
width: 100%;
height: 450px; /*same height as jumbotron */
padding-top: 0;
top:80px;
left:0;
z-index: -1;
}
#backPic {
height: 450px;
padding-top: 150px;
color: white;
text-shadow: #444 0 1px 1px;
background:transparent;
#media(min-width: $screen-lg-min) {
text-align: left;
margin-left: 0;
}
}
JS
<script>
var jumboHeight = $('#backPic').outerHeight();
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('height', (jumboHeight-scrolled) + 'px');
}
$(window).scroll(function(e){
parallax();
});
</script>
HTML
<!DOCTYPE>
<head>
<% content_for :title, "Golden Museum | Home" %>
</head>
<body>
<div class="bg"></div>
<div class="container vertical-center">
<div class="row">
<div class="col-xs-12 col-lg-8">
<div class="container">
<div id="backPic" class="jumbotron">
<h1 class="text-center" id="homeTitle">Golden & District<br> Museum & Archives</h1>
<h2 class="lead text-center">Preserving the records, pictures and artifacts of the Golden Area</h2>
</div>
<div id="mainCont" class="row">
<div id="socialRow" class="row">
<div class="container">
<div class="col-xs-9 col-sm-3 col-lg-2">
<a href="https://www.facebook.com/pages/Golden-Museum-and-Archives/150197378373720?fref=ts" class="btn btn-block btn-default btn-facebook">
<i class="fa fa-facebook"></i> Visit on Facebook!
</a>
</div>
</div>
</div>
<div class="row">
<div id="aboutJumbo" class="jumbotron">
<%= render 'statics/text/home.text' %>
</div>
</div>
<div id="blogRow" class="row">
<div id="blogBox" class="container">
<h2>Recent News</h2>
<%= render 'blog' %>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

HTML expanding boxes on click

I want to create three boxes with some short text and when you click on one of those boxes, it will expand on the full width of the page and displays the whole content. Then it can be closed by clicking on some kind of icon.
I created a gif so you can see what I mean. GIF
I have so far the basic structure on jsfiddle
When you click on one box it every time opens the box-3 content insted of the content of the clicked box. Also I dont know how to close the open box.
Is the animation you can see in the gif possible with css or does it need javascriptl?
$(".row.boxes-container .box").click(function (e) {
$(".box-content-full").addClass("open");
});
.row.boxes-container{
position:relative;
}
.box:hover{
cursor:pointer;
}
.box-content{
padding:30px;
background-color:#f03939;
}
.box-content-full{
display:none;
width:0%;
transition: width 1s;
}
.box-content-full.open {
position: absolute;
max-width: 100%;
width: 100%;
z-index: 2;
display:block;
transition: width 1s;
}
.box-content-full.open .inner{
padding:30px;
margin-left:15px;
margin-right:15px;
background-color: red;
}
<div class="container">
<div class="row boxes-container">
<div class="box first">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 1</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 1</h3>
</div>
</div>
</div>
<div class="box second">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 2</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 2</h3>
</div>
</div>
</div>
<div class="box third">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 3</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 3</h3>
</div>
</div>
</div>
</div>
</div>

I did not use your html code but tried to get a result as close as possible to your gif:
$('.box').on('click', function() {
var $element = $(this);
var $openElement = $('<div class="absoluteBox"></div>');
$openElement.css('left', $element.position().left);
$openElement.css('right', $element.width());
$element.html($openElement);
$openElement.animate({left : 0, width : $('.wrapper').width()}, 500);
});
.wrapper {
position:relative;
display:inline-block;
}
.box {
background-color:#CC0000;
width:150px;
height:200px;
display:inline-block;
margin-right:10px;
}
.box:last-of-type {
margin-right:0;
}
.absoluteBox {
position:absolute;
background-color:blue;
height:200px;
width:150px;
}
.box:hover {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box"></div>
<div class="box">
</div>
<div class="box"></div>
</div>
I made the opening box blue to be better noticed. This has to be changed via css of course to red.

Updated your fiddle:
EDIT 2:
Now it should reset when you click the box.
P.S. Click the second box for the effect.
P.P.S. The effect displays incorrectly because the page contracts automatically in JSFiddle. ALTHOUGH, if you try it elsewhere and it doesn't work, consider me proven wrong!
EDIT:
Updated answer to expand element that was clicked.
https://jsfiddle.net/bszv7f90/9/
$(".row.boxes-container .box").click(function(e) {
$(this).children().each(function(i) {
if ($(this).attr('class') == 'box-content-full') {
$(this).toggleClass("exp");
}
});
$(".box-content-full").toggleClass("open");
$(".box-content").toggleClass("clicked");
});
.container {
max-width: 600px;
}
.row.boxes-container {
position: relative;
}
.box:hover {
cursor: pointer;
}
.box-content {
padding: 30px;
background-color: #f03939;
}
.box-content-full {
display: none;
width: 0%;
transition: width 1s;
}
.box-content {
padding: 30px;
background-color: #f03939;
}
.box-content.clicked {
display: none;
}
.box-content-full.open {
position: absolute;
max-width: 0%;
width: 0%;
z-index: 2;
display: none;
transition: width 1s;
}
.box-content-full.open.exp {
position: absolute;
max-width: 100%;
width: 100%;
z-index: 2;
display: block;
transition: width 1s;
}
.box-content-full.open .inner {
padding: 30px;
margin-left: 15px;
margin-right: 15px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row boxes-container">
<div class="box first">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 1</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 1</h3>
</div>
</div>
</div>
<div class="box second">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 2</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 2</h3>
</div>
</div>
</div>
<div class="box third">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 3</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 3</h3>
</div>
</div>
</div>
</div>
</div>
Now it should expand.
I preserved your code to make a quick copy-paste.

HTML: auto increase height based on other div's height

I have 3 <div>s as follows. In that one of the <div> has panel bar so its height may be increased based on the content of each panel bar. Now I want to increase the height of other two divs based on the height of the <div> which has panel bar. How can I achieve this?
<div class="leftdiv">
</div>
<div class="maindiv">
//Panel bar is inside this div.
</div>
<div class="rightdiv">
</div>
"leftdiv" and "rightdiv" height should be increase base on "maindiv" height???

You could also do it using css and positioning the divs absolutely or relatively, with margins for the central item.
Fiddle:
http://jsfiddle.net/o403Ljoq/
Code:
<div class="parentDiv">
<div class="leftDiv" >text</div>
<div class="mainDiv">text<div>Something with height</div>
<div style="height:200px;">something else with height</div></div>
<div class="rightDiv" >text</div>
.parentDiv
{
position:relative;
background-color:gray;
}
.leftDiv
{
background-color:blue;
position:absolute;
left:0px;
top:0px;
bottom:0px;
width:100px;
}
.mainDiv
{
background-color:yellow;
margin-left:100px;
margin-right:100px;
}
.rightDiv
{
background-color:green;
position:absolute;
right:0px;
top:0px;
bottom:0px;
width:100px;
}

Demo
html
<div class="container">
<div class="leftdiv">a</div>
<div class="maindiv">//Panel bar is inside<br/> this div.<br/>//Panel bar is inside<br/> this div.</div>
<div class="rightdiv">c</div>
</div>
css
.leftdiv {
background:red;
display:table-cell;
}
.maindiv {
background:green;
display:table-cell;
}
.rightdiv {
background:blue;
display:table-cell;
}
.container{
display:table;
width:100%;
}

try this example using bootstrap (row col-wrap class) Try the example in full screen mode
#media (min-width: 768px) {
/* top row */
.col .well{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.col-base{
margin-top: -15px;
}
}
#media (max-width: 767px) {
.row.base{
display:none;
}
}
.col-wrap{
overflow: hidden;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row col-wrap">
<div class="col-sm-4 col">
<div class="well">
<p>A </p>
<p>B </p>
<p>C </p>
</div>
</div>
<div class="col-sm-4 col">
<div class="well">
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
</div>
</div>
<div class="col-sm-4 col">
<div class="well">
<p>D </p>
<p>E </p>
</div>
</div>
</div>
<div class="row base col-wrap">
<div class="col-sm-4 col-base"><div class="well"></div></div>
<div class="col-sm-4 col-base"><div class="well"></div></div>
<div class="col-sm-4 col-base"><div class="well"></div></div>
</div>
</div>

You may use JavaScript for achieving the result:
var commonHeight = $(".maindiv").height();
$(".leftdiv").height(commonHeight);
$(".rightdiv").height(commonHeight);
The full example and demo is here:
http://jsfiddle.net/pLmp1zpr/

Use flexbox to do this.
Wrap your divs in a container.
HTML:
<div class="container">
<div class="leftdiv"></div>
<div class="maindiv"></div>
<div class="rightdiv"></div>
</div>
CSS:
.container{
display:flex;
align-items:stretch;
flex-flow:row wrap;
}
.leftdiv,.rightdiv,.maindiv{
flex:1 0;
}
Here is the DEMO.

Div elements won't keep desired aspect ratio

I want to create memory game. I want to place 6 cards in 4 rows. Problem is that DIV element that is "behind" card are visible and ruin whole design (z-index3 or .back class inside my code).It's working if i put display.none back .class but problem that blocks picture of card.
Here is code that I am using
HTML
<body>
<div id="picbox">
<span id="boxbuttons">
<span class="button" id="rezz">
Rezultat
<span id="counter">0</span>
</span>
<span class="button" id="ttime">00 : 22</span>
<span class="button">
<a onclick="ResetGame();">Reset</a>
</span>
<span class="button">
<a onclick="MutedSound();">Mute sound</a>
</span>
</span>
<div id="boxcard" align="center">
<div class="flipper" id="flipper10">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992568b759acd78f7cbe98b6e4a7baa90e717.png"></div>
</div>
<div class="flipper" id="flipper11">
<div class="front"></div>
<div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png"></div>
</div>
<div class="flipper" id="flipper12">
<div class="front"></div>
<div class="back"><img src="http://icons.iconarchive.com/icons/martin-berube/sport/96/Volleyball-icon.png"></div>
</div>
<div class="flipper" id="flipper13">
<div class="front"></div>
<div class="back"><img src="http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png"></div>
</div>
<div class="flipper" id="flipper14">
<div class="front"></div>
<div class="back"><img src="http://img2.uploadhouse.com/fileuploads/17699/1769925824ea93cbb77ba9e95c1a4cec7f89b80c.png"></div>
</div>
<div class="flipper" id="flipper15">
<div class="front"></div>
<div class="back"><img src="http://img2.uploadhouse.com/fileuploads/17699/1769925824ea93cbb77ba9e95c1a4cec7f89b80c.png"></div>
</div>
<div class="flipper" id="flipper16">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992554c2ca340cc2ea8c0606ecd320824756e.png"></div>
</div>
<div class="flipper" id="flipper17">
<div class="front"></div>
<div class="back"><img src="http://img7.uploadhouse.com/fileuploads/17699/1769925708af4fb3c954b1d856da1f4d4dcd548a.png"></div>
</div>
<div class="flipper" id="flipper18">
<div class="front"></div>
<div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png"></div>
</div>
<div class="flipper" id="flipper19">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png"></div>
</div>
<div class="flipper" id="flipper110">
<div class="front"></div>
<div class="back"><img src="http://img3.uploadhouse.com/fileuploads/17699/17699259cb2d70c6882adc285ab8d519658b5dd7.png"></div>
</div>
<div class="flipper" id="flipper111">
<div class="front"></div>
<div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png"></div>
</div>
<div class="flipper" id="flipper20">
<div class="front"></div>
<div class="back"><img src="http://icons.iconarchive.com/icons/martin-berube/sport/96/Volleyball-icon.png"></div>
</div>
<div class="flipper" id="flipper21">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992568b759acd78f7cbe98b6e4a7baa90e717.png"></div>
</div>
<div class="flipper" id="flipper22">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png"></div>
</div>
<div class="flipper" id="flipper23">
<div class="front"></div>
<div class="back"><img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png"></div>
</div>
<div class="flipper" id="flipper24">
<div class="front"></div>
<div class="back"><img src="http://img3.uploadhouse.com/fileuploads/17699/17699259cb2d70c6882adc285ab8d519658b5dd7.png"></div>
</div>
<div class="flipper" id="flipper25">
<div class="front"></div>
<div class="back"><img src="http://img4.uploadhouse.com/fileuploads/17699/176992601ca0f28ba4a8f7b41f99ee026d7aaed8.png"></div>
</div>
<div class="flipper" id="flipper26">
<div class="front"></div>
<div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png"></div>
</div>
<div class="flipper" id="flipper27">
<div class="front"></div>
<div class="back"><img src="http://img7.uploadhouse.com/fileuploads/17699/1769925708af4fb3c954b1d856da1f4d4dcd548a.png"></div>
</div>
<div class="flipper" id="flipper28">
<div class="front"></div>
<div class="back"><img src="http://img4.uploadhouse.com/fileuploads/17699/176992601ca0f28ba4a8f7b41f99ee026d7aaed8.png"></div>
</div>
<div class="flipper" id="flipper29">
<div class="front"></div>
<div class="back"><img src="http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png"></div>
</div>
<div class="flipper" id="flipper210">
<div class="front"></div>
<div class="back"><img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png"></div>
</div>
<div class="flipper" id="flipper211">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992554c2ca340cc2ea8c0606ecd320824756e.png"></div>
</div>
</div>
</div>
<div id="window-resizer-tooltip"><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth"></span> x <span class="tooltipHeight" id="winHeight"></span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth"></span> x <span class="tooltipHeight" id="vpHeight"></span></div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
font: 18px Verdana;
color: #FFF;
background: #CCC;
}
#picbox {
margin: 0px auto;
width: auto;
}
#boxcard {
/*perspective*/
-webkit-perspective:1000;
-moz-perspective:1000;
-ms-perspective:1000;
-o-perspective:1000;
perspective:1000;
display: table;
margin: 0px auto;
width: auto;
z-index: 1;
display: table;
margin: 0px auto;
width: auto;
}
.flipped {
/*transform*/
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotate(180deg);
}
.front, .back{
float: left;
width: 100px;
height: 120px;
margin: 5px;
padding: 5px;
border: 4px solid #EE872A;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(0,0,0,.5);
z-index:2;
background: #B1B1B1;
/* position:absolute;*/
/*backface-visibility*/
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
/* flip speed goes here */
.flipper {
/*transition*/
-webkit-transition:0.6s;
-moz-transition:0.6s;
-o-transition:0.6s;
transition:0.6s;
/*transform-style*/
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
display: inline-block;
position:relative;
}
/* hide back of pane during swap */
/* front pane, placed above back */
/* back, initially hidden pane */
.back{
/*transform*/
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotate(180deg);
z-index:3;
}
#boxbuttons {
text-align: center;
margin: 20px;
display: block;
}
#boxbuttons .button {
text-transform: uppercase;
background: #EE872A;
padding: 5px 10px;
margin: 5px;
border-radius: 10px;
cursor: pointer;
}
#boxbuttons .button:hover {
background: #999;
}
JS
function OpenCard(){
$(this).toggleClass('flipped');
}
$(".flipper").click(OpenCard);
JSFiddle Link

It's taking the whole background of image so you better keep each image in a specific div confined to that image only.

We Keep Coding

JavaScript is the programming language of the Web.

Creating multiple pop up buttons - javascript

Related

How to align 3 equal grids in mobile view properly - bootstrap

Background image parrallax choppy on mobile

HTML expanding boxes on click

HTML: auto increase height based on other div's height

Div elements won't keep desired aspect ratio

Categories

Resources