Creating multiple Modals for many different pictures - javascript

I have a modal that contains many different items(Menu items). I want to make it so when I click the heading of any specific menu item, another modal pops-up showing the image of said dish. The only issue I run into, is that I would have to create a ton of different modals for each item dish(15 of them). IS there a way I can create a function/loop fthem so they only access a soecific image attatched to said item? Should I create a seperate container for the images? Or add them to the item containers themselves and set the display to none?
Here is an example without much css or the JS with it? Any thoughts of the best way to tackle this?
/*This is the background/ not the box itself*/
.menu {
display: block;
position: fixed;
z-index: 999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: none;
background-color: rgba(0, 0, 0, .4);
}
/*Menu Content Box*/
.menuContent {
background-color: #f1e3cb;
margin: 5% auto;
border: 1px solid #888;
width: 50%;
height: 80%;
border-radius: 5px;
font-family:'IM Fell French Canon SC', serif;
font-weight: 600;
overflow-y: scroll;
&::-webkit-scrollbar {
width: 10px;
}
&::-webkit-scrollbar-track {
background: #f1e3cb;
}
&::-webkit-scrollbar-thumb {
background: #888;
}
.menuHeader {
text-align: center;
}
.menu-items {
display: flex;
flex-direction: row;
justify-content: space-evenly;
text-align: center;
margin: 20px 0 0;
> div {
width: 33%;
margin: 0 5px;
}
p{
text-align: left;
&:hover {
cursor: pointer;
transform: scale(1.1);
transform-origin: left;
}
}
.item {
margin-top: 20px;
align-self: center;
}
}
}
/*Close button*/
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
padding-right: 10px;
overflow: auto;
&:hover,
&:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
}
<!--Menu Modal-->
<div id="myMenu" class="menu">
<!--Menu Content-->
<div class="menuContent">
<span class="close">×</span>
<div class="menuHeader">
<h1>Menu</h1>
</div>
<div class="menu-items">
<div class="Appetizers">
<h2>Appetizers</h2>
<div class="item">
<p>Sardine canapés:</p>
<small>Roasted sardines, boiled egg yolk, whole olives, and a choice of cheese stacked
on our signature house bread.
</small>
</div>
<div class="item">
<p>Crab Stuffed with Crayfish:</p>
<small>Fried crab and vegetables stuffed into large crayfish.</small>
</div>
<div class="item">
<p>Shrimp Canapés:</p>
<small>Lemon fried shrimp, cucumber slicies atop house bread served with a side of
our shrimp sauce.
</small>
</div>
<div class="item">
<p>Préfou:</p>
<small>House baguette stuffed with garlic butter and parsely.</small>
</div>
<div class="item">
<p>Moules farcies:</p>
<small>baked mussels stuffed with garlic butter, parsley, shallots and nutmeg. Topped with
parmesan cheese and breadcrumbs .
</small>
</div>
</div>
<div class="Entrees">
<h2>Entrees</h2>
<div class="item">
<p>Lamb chops & Cognac dijon:</p>
<small>Juicy lamb elegantly served with our signature Dijon sauce</small>
</div>
<div class="item">
<p>Chicken Cordon Bleu:</p>
<small>Chicken stuffed with ham and cheese sauce, served atop a bed of roasted lettuce.</small>
</div>
<div class="item">
<p>Coq au vin:</p>
<small>Chicken drums braised with wine, mushrooms, pork and garlic butter. Topped with
green onion and chili, and a side of roasted scallops.
</small>
</div>
<div class="item">
<p> Ratatouille:</p>
<small>Award winning dish. Shallow fried vegetables layered in our signature baked casserole.
</small>
</div>
<div class="item">
<p>Roast Chicken:</p>
<small>Cuts of chicken roasted in garlic butter and an herby crust served with roasted baby spinach.</small>
</div>
<div class="item">
<p>Duck a l'orange:</p>
<small>Duck legs and breast served with fresh orange sauce.</small>
</div>
<div class="item">
<p>Croque-Monsieur:</p>
<small>Baked ham and cheese with velvety bechamel. Served with egg upon request.</small>
</div>
</div>
<div class="Desserts">
<h2>Desserts</h2>
<div class="item">
<p>Apricot and Almond Galette:</p>
<small>Fruity galettes stuffed with an almond cream.</small>
</div>
<div class="item">
<p>Honey Hazelnut Financiers:</p>
<small>Buttery brown cakes tops with a berry-hazelnut topping.</small>
</div>
<div class="item">
<p>Caramelized-Honey Brulee:</p>
<small>House Brulee coated with a caramelized layer of torched honey.</small>
</div>
</div>
</div>
</div>

You don't need a separate modal for each image. You just need a one modal that will display different images.
Using javascript, you need to add a click event listener to the container of all the items. When any items is clicked, get the src attribute of the img element associated with that item and set this src attribute as the src attribute of the img in the modal.
Here's a demo in which i have 3 images which are displayed in a modal one at a time depending on which image label you clicked on.
const modal = document.getElementById('modal');
const modalContainer = document.querySelector('.modal-container');
const container = document.getElementById('container');
container.addEventListener('click', (event) => {
if (event.target.matches('span')) {
const src = event.target.nextElementSibling.getAttribute('src');
modal.children[0].setAttribute('src', src);
modalContainer.classList.add('showModal');
}
});
modalContainer.addEventListener('click', () => {
modalContainer.classList.remove('showModal');
})
body { margin: 0; }
img { display: none; }
div span {
display: inline-block;
margin: 5px;
font-size: 1.2rem;
cursor: pointer;
text-decoration: underline;
color: blue;
}
.modal-container {
display: none;
position: fixed;
background: #222;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.8);
}
.modal-container img { display: inline-block; }
.showModal { display: flex; }
<div class="modal-container">
<div id="modal">
<img src="" />
</div>
</div>
<div id="container">
<div>
<span>Show Image 1</span>
<img src="https://picsum.photos/id/1/200/" />
</div>
<div>
<span>Show image 2</span>
<img src="https://picsum.photos/id/20/200/" />
</div>
<div>
<span>Show image 3</span>
<img src="https://picsum.photos/id/30/200/" />
</div>
</div>

Related

jQuery: Toggleable path-like navigation with decorations

This is my code:
$("#one_link").click(function() {
$("#categories").toggle();
$(this).toggleClass("active"); //Active class
$(this).prepend("▶ "); //Should toggle and not insert over and over again
$("#text_three").hide();
$("#cats_text").hide();
$("#text_two").hide();
});
$("#cats_link").click(function() {
$("#cats_text").toggle();
$(this).toggleClass("active"); //Active class
$(this).prepend("▶ "); //Should toggle and not insert over and over again
$("#text_two").hide();
$("#text_three").hide();
});
$("#two_link").click(function() {
$("#text_two").toggle();
$(this).toggleClass("active"); //Active class
$(this).prepend("▶ "); //Should toggle and not insert over and over again
$("#categories").hide();
$("#cats_text").hide();
$("#text_three").hide();
});
$("#three_link").click(function() {
$("#text_three").toggle();
$(this).toggleClass("active"); //Active class
$(this).prepend("▶ "); //Should toggle and not insert over and over again
$("#categories").hide();
$("#cats_text").hide();
$("#text_two").hide();
});
* {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 30px;
line-height: 100%;
cursor: default;
font-family: Arial;
}
html,
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.content {
display: flex;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.column {
border-right: 1px solid black;
}
.column_content {
overflow-y: scroll;
width: 100%;
height: 100%;
padding: 20px;
}
.column {
display: none;
}
.column:first-child {
display: block;
}
li:hover {
cursor: pointer;
}
.active {
text-decoration: underline yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="column">
<div class="column_content">
<ul>
<li id="one_link">One</li>
<li id="two_link">Two</li>
<li id="three_link">Three</li>
</ul>
</div>
</div>
<div id="categories" class="column">
<div class="column_content">
<ul>
<li id="cats_link">Cats</li>
</ul>
</div>
</div>
<div class="column" id="cats_text">
<div class="column_content">
<p>The cat (Felis catus) is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family.</p>
</div>
</div>
<div class="column" id="text_two">
<div class="column_content">
<p>2 (two) is a number, numeral, and glyph. It is the natural number following 1 and preceding 3. It is the smallest and only even prime number. Because it forms the basis of a duality, it has religious and spiritual significance in many cultures.</p>
</div>
</div>
<div class="column" id="text_three">
<div class="column_content">
<p>3 (three) is a number, numeral, and glyph. It is the natural number following 2 and preceding 4, and is the smallest odd prime number. It has religious or cultural significance in many societies.</p>
</div>
</div>
</div>
If you click only »One« and then »Cats«, it looks exactly how it should be.
But if you click then for example »Two« or »Three«, then »One« has still a text-decoration. This shouldn't happen, it should also toggle.
Furthermore, the »▶« should be a part of this marking. It should be inserted at most once before each link.
Ah and I will need more categories, so it would be great if it were easily expandable.
Can someone help me?
Would be very happy! :)
Can't say that this is perfect, but I made some improvements.
For starters I cut down on the amount of repetitive Javascript by leveraging HTML attributes like class and some data-*
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*
Also note that I moved your ▶ into a pseudo element on the active class.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
$('.tab-opening-button').click(function(){
const openId = $(this).attr('data-open');
const linkParent = $(this).attr('data-parent-link');
if(!linkParent){
$('#categories').hide();
}
$('.text-panel').hide();
$(openId).show();
$('.tab-opening-button').not(linkParent).removeClass('active');
$(this).addClass('active');
});
* {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 30px;
line-height: 100%;
cursor: default;
font-family: Arial;
color: rgb(80, 80, 80);
box-sizing: border-box;
}
html,
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.content {
display: flex;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.column {
border-right: 3px solid;
flex-shrink: 0;
}
.text-panel {
flex-shrink: 1;
}
.column_content {
overflow-y: auto;
width: 100%;
height: 100%;
padding: 20px;
}
.column {
display: none;
}
.column:first-child {
display: block;
}
li:hover {
cursor: pointer;
}
.active {
text-decoration: underline yellow;
}
.active:before {
content: "▶ "
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="column">
<div class="column_content">
<ul>
<li data-open="#categories" class="tab-opening-button" id="one_link">One</li>
<li data-open="#text_two" class="tab-opening-button" id="two_link">Two</li>
<li data-open="#text_three" class="tab-opening-button" id="three_link">Three</li>
</ul>
</div>
</div>
<div id="categories" class="column">
<div class="column_content">
<ul>
<li data-open="#cats_text" data-parent-link="#one_link" class="tab-opening-button" id="cats_link">Cats</li>
</ul>
</div>
</div>
<div class="column text-panel" id="cats_text">
<div class="column_content">
<p>The cat (Felis catus) is a domestic species of small carnivorous mammal. It is the only domesticated
species in the family Felidae and is often referred to as the domestic cat to distinguish it from the
wild members of the family.</p>
</div>
</div>
<div class="column text-panel" id="text_two">
<div class="column_content">
<p>2 (two) is a number, numeral, and glyph. It is the natural number following 1 and preceding 3. It is the
smallest and only even prime number. Because it forms the basis of a duality, it has religious and
spiritual significance in many cultures.</p>
</div>
</div>
<div class="column text-panel" id="text_three">
<div class="column_content">
<p>3 (three) is a number, numeral, and glyph. It is the natural number following 2 and preceding 4, and is
the smallest odd prime number. It has religious or cultural significance in many societies.</p>
</div>
</div>
</div>

CSS Grid two rows nested in a single column

I am looking for a way to allow two rows within a single column while the other two columns to the right of it are equal/flexible to the height of those two rows. The width should be 100% when looking at all three columns (so around 33% each column). Here is an example of how I want it to look:
https://i.imgur.com/lLPzXhS.png
I will be filling those boxes with clickable boxes like shown below:
https://i.imgur.com/uyyDbL7.png
I have tried using display: row, display: cell, but I am not able to add any margins to it so this is the product I get:
https://i.imgur.com/Ok6EgT0.png
You can see that I have somewhat of the grid system set up, but not as ideally as I want it. There are no margins that can be set between the red and orange box, even though I am able to add margins to the turqoise and blue box.
Here is the code I have:
HTML:
<div class='d-table'>
<div class='t-row'>
<div class='t-cell one-third'>
<div class='turqoisebox'>
Turqoise box here
</div>
<div class='bluebox'>
Blue box here
</div>
</div>
<div class='t-cell one-third redbox'>
Red box here
</div>
<div class='t-cell one-third orangebox'>
Orange box here
</div>
</div>
</div>
CSS:
.d-table {
display: table;
}
.t-row {
display: table-row;
}
.t-cell {
display: table-cell;
margin-left: unset;
margin-right: unset;
/*border: 1px solid tomato;*/
}
.one-third {
width: 30%;
}
.two-thirds {
width: 200px;
}
.bluebox {
background-color: #9dd8dd;
margin: 25px;
border-radius: 25px;
border: solid #7dacb0;
border-width: 3px;
box-shadow: 2px 4px 8px 2px rgba(0,0,0,0.4);
transition: 0.3s;
text-align: center;
}
.bluebox:hover {
box-shadow: 2px 8px 16px 2px rgba(0,0,0,0.8);
}
Any thoughts on how to replicate the second image results neatly?
You could use flexbox. Take a look at this simplified example:
.content {
background: orange;
margin: 1rem;
padding: 1rem;
flex: 1;
color: white;
display: flex;
}
.content > span {
margin: auto;
}
.row {
display: flex;
flex-direction: row;
background-color: blue;
flex: 1
}
.col {
display: flex;
flex-direction: column;
flex: 1;
background-color: red;
}
<div class="row">
<div class="col">
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
<div class="col">
<div class="content">
<span>This is centered</span>
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
</div>
<div class="col">
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
You could also use a minimal flexbox-based grid library like Flexbox Grid.
Margin is used for setting where elements should start so instead use padding between those 2 elements to get the space you want.

Text only HTML button

I need to make a HTML button that appears as only text. My HTML must be completely semantic using external CSS and JS files.
I have been having a lot of trouble with this as I can't get the placement right nor can I get the background of the button to disappear.
#bttnPlacement {
text-align: center;
color: white;
background: transparent;
border: none;
outline: none;
display: block;
height: 100px;
width: 300px;
cursor: pointer;
}
myBttn {
text-align: center;
}
<div id="banner">
<img src="/images/gameTitle.jpg" alt="Banner">
</div>
<div class="menu">
<h>What Is Your Choice?</h>
<p>1. Be a Banker from Boston</p>
<p>2. Be a Carpenter from Ohio</p>
<p>3. Be a Farmer from Illinois</p>
<p>4. Learn About the Differences</p>
</div>
<div id="bttnPlacement">
<button id="myBttn">
Press Spacebar to Return to Main Menu
</button>
</div>
To make your background transparent as text only, you need to overwrite the default button css
button {
background: transparent;
border: 0;
}
button:focus {
outline: transparent;
}
I think you are pretty close, but you are targeting the wrong element.
#myBttn {
text-align: center;
color: black;
background: transparent;
border: none;
outline: none;
display: block;
height: 100px;
width: 300px;
cursor: pointer;
text-align: center;
}
<div id="banner">
<img src="/images/gameTitle.jpg" alt="Banner">
</div>
<div class="menu">
<h>What Is Your Choice?</h>
<p>1. Be a Banker from Boston</p>
<p>2. Be a Carpenter from Ohio</p>
<p>3. Be a Farmer from Illinois</p>
<p>4. Learn About the Differences</p>
</div>
<div id="bttnPlacement">
<button id="myBttn">
Press Spacebar to Return to Main Menu
</button>
</div>
I only changed the selector of the first class, to match the button, instead of its container div element.
Trade
<button id="myBttn">
Press Spacebar to Return to Main Menu
</button>
out with
<a id='myBttn' href='index.php'>Press Spacebar to Return to Main Menu</a>
(of course with the proper menu URL) then do
#myBttn:link,#myBttn:hover,#myBttn:active,#myBttn:visited{
text-decoration:none; color:#000;
}
in your CSS. Feel free to change that color.
Here you Press space you will see and use
background:unset;
border:unset
In here you try to select your button with its id. If you want to select as ID you must Declare this # before idname
#myBttn { //added # for select as id
text-align: center;
}
$(window).keypress(function (e) {
if (e.keyCode == 32) {
alert('Your Action in here')
}
})
#bttnPlacement {
text-align: center;
color: white;
background: transparent;
border: none;
outline: none;
display: block;
height: 100px;
width: 300px;
cursor: pointer;
}
#myBttn {
text-align: center;
background: unset;
border: unset;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner">
<img src="" alt="Banner">
</div>
<div class="menu">
<h>What Is Your Choice?</h>
<p>1. Be a Banker from Boston</p>
<p>2. Be a Carpenter from Ohio</p>
<p>3. Be a Farmer from Illinois</p>
<p>4. Learn About the Differences</p>
</div>
<div id="bttnPlacement">
<button id="myBttn">
Press Spacebar to Return to Main Menu
</button>
</div>
<html>
<head>
<style type="text/css">
#bttnPlacement {
text-align: center;
height: 100px;
width: 300px;
}
#myBttn {
text-align: center;
/*color: white;*/
background: transparent;
border: none;
outline: none;
display: block;
cursor: pointer;
}
</style>
</head>
<body>
<div id="banner">
<img src="/images/gameTitle.jpg" alt="Banner">
</div>
<div class="menu">
<h>What Is Your Choice?</h>
<p>1. Be a Banker from Boston</p>
<p>2. Be a Carpenter from Ohio</p>
<p>3. Be a Farmer from Illinois</p>
<p>4. Learn About the Differences</p>
</div>
<div id="bttnPlacement">
<button id="myBttn">
Press Spacebar to Return to Main Menu
</button>
</div>
</body>
</html>

CSS: Align children elements like 'filling up columns'

I have a div-container, which has one main image and optional multiple smaller images: http://jsfiddle.net/h5kc8ybm/
The multiple smaller images are generated dynamically, so there can be just 1 or 10 of them. On my JFiddle you can see, that the images are just displayed in one single row.
What I want to achieve is, that there are filled up 'by colomns':
First image on top next to the main image (like shown in this example)
Second image below that (not right of it, like in the example)
Third image right of first image (top)
Fourth image below third image
...and so on.
Is it possible to do that just with CSS?
Update
To avoid misunderstanding: All smaller images should be positioned right of the main image. But these small images should be displayed in two rows, filled up from first row to second row.
The main div-element will never change its height, but only its width.
Example
HTML
<div class="tnwrapper">
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
</div>
LESS
.tnwrapper {
background-color: #f5f5f5;
padding: 5px 5px 5px 9px;
border-radius: 4px;
display: inline-block;
.tn {
display: inline-block;
vertical-align:top;
position: relative;
margin-right: 5px;
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.thumbnail.child {
width: 40px;
}
}
}
I was able to do this with the following steps:
wrap the smaller children in a div and make it position:relative
apply position:absolute on even items and reposition them
float them left
http://jsfiddle.net/0neukb08/
The downside of this approach is that it hardcodes the image's size in the "reposition" step
Additionally, the reason I chose not to use flex-box here was this issue with growing its width (I also didn't like the highest voted answer), but flexbox is a good option if you know the container's width in advance.
You probably can do this by
Rotate the container -90deg and reflect it:
.tnwrapper {
...
transform: rotate(-90deg) scaleX(-1);
}
then apply the reverse transformation for the thumbnails:
.tnwrapper .tn {
...
transform: rotate(90deg) scaleX(-1);
}
JSFiddle: http://jsfiddle.net/h5kc8ybm/1/
Note though that the height limit of the container is now width, not height (because it was rotated -90deg.
CSS flexbox styling should do the trick:
.tnwrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
}
.tn:first-child {
height: 192px;
width: 192px;
}
<div class="tnwrapper">
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
</div>
EDIT: Sorry, the above snippet doesn't quite answer the question after all. This snippet places each subsequent image in left-to-right then top-to-bottom order, rather than top-to-bottom then left-to-right order as the question asked. I think adding a div around the first image would be the cleanest way to accomplish what you want.
I'm not quite clear on the order of the thumbnails but I think you wanta column format for those.
I that case wrap the main image and the thumbnails in separate divs and then flexbox can do the rest.
.wrap {
display: flex;
margin: 1em auto;
height: 280px;
}
.hero {
padding: 10px;
}
.sidekicks {
flex: 1;
padding: 10px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
}
.sidekicks .item {
width: 96px;
height: 96px;
margin: 10px;
background: lightblue;
line-height: 96px;
text-align: center;
}
<div class="wrap">
<div class="hero">
<img src="http://lorempixel.com/image_output/city-h-c-240-250-5.jpg" alt="" />
</div>
<div class="sidekicks">
<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>
<div class="item">Item4</div>
<div class="item">Item5</div>
<div class="item">Item6</div>
<div class="item">Item7</div>
<div class="item">Item8</div>
</div>
</div>
Codepen Demo
This is solution with flexbox and since you said that height of main-div wont change this should work http://jsfiddle.net/h5kc8ybm/13/
CSS
.tnwrapper {
background-color: #000;
padding: 5px 5px 5px 9px;
border-radius: 4px;
display: -webkit-flex;
display: flex;
}
.child-images {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 10px;
height: 170px;
}
.tnwrapper .tn .thumbnail {
padding: 4px;
margin: 10px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.child-images .tn img {
width: 40px;
}

Centralising nested Divs which have onclick elements

I have 2 rows, one which needs two images and the other which needs to show information if those images are clicked.
I'm having an issue centralising the images and text within the row div.
<div id="container">
<!-- Image row -->
<div class="row">
<div class="col-md-6">
<div id="badbutton"></div>
</div>
<div class="col-md-6">
<div id="goodbutton"></div>
</div>
</div>
<!-- Text Row -->
<div class="row">
<div class="col-md-6">
<div id="bad" style="display:none;">
<p>Oh no! We'd appreciate it if you'd share your experience with us so we can improve in the future. Just click below to get started.</p>
<p> FORM HERE </p>
</div>
</div>
<div class="col-md-6">
<div id="good" style="display:none;">
<p>Fantastic! Please share your experience with the world on of these popular websites. Just make a selection below to get started.</p>
<ol>
<li>Click here to review us on Google+ Reviews</li>
<li>Click here to review us on Facebook</li>
</ol>
</div>
</div>
</div>
</div>
What's happening is the col-md-6 takes up 45% of the row div but the buttons inside aren't centralising themselves.
Here is the CSS:
.row {
margin: 0 auto;
}
.col-md-6 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-md-6 {
width: 45%;
}
#good,
#bad {
width: 50%;
}
Here is the outcome:
Try using display:table-* it will make your elements behavior like a table.
.row {
margin: 0 auto;
display: table-row;
}
.col-md-6 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
Give style "text-align:center" to the "col-md-6" div. And display: inline-block to #goodbutton and #badbutton.
Just for example
#badbutton, #goodbutton {
height: 50px;
width: 50px;
display: inline-block;
background: #444;
vertical-align: middle;
}
Sample fiddle here
http://jsfiddle.net/Lw27ofb1/

Categories