I am trying to implement a show/hide function on one of my web pages. basically, there is a page on my website which shows 'Jargon' and the definitions. the user clicks on the title and the definition should then be displayed.
I have tried 2 different techniques, one works but is very harsh with no transition, it is basically open or closed:
jQuery(function($){
var acc = document.getElementsByClassName("jarg-container");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
}
else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
});
.jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
height: 4.5em;
width: 45% !important;
margin: 0 2.5% 2em;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container .jargon-desc {
height: 0;
display: none;
}
.jarg-container.active .jargon-desc{
height:100%;
display:block;
}
.jarg-container.active {
height: 100%;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.active h2::after {
content: "\2796";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>
The other I like but when one opens, they all open:
$('.jargon-header').on('click', function(){
$('.jargon-desc').toggleClass('show');
});
.jargon-desc {
height: 0px;
opacity: 0;
transition: all .75s ease;
}
.jargon-desc.show {
opacity: 1;
height: 100%;
}
.jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
width: 45% !important;
margin: 0 2.5% 2em;
transition:all .75s ease;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.show h2::after {
content: "\2796";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>
Ideally, I would like a combination of the 2... where all elements open individually and the use the transition effect that the second code uses...
any help combining the 2 would be amazing
To to achieve both the transition and only moving one element at a time, you can use the this keyword. When a function is called, in this case the function() inside of your click listener, it will bind this to that context. This allows you to select the element that was clicked by simply using $(this).
This may not be the most detailed explanation, so here is a bit more information on the topic.
$('.jargon-header').on('click', function() {
// Use this to select the element that was clicked
$(this)
// Then just select the next description
.next('.jargon-desc')
// And toggle the class on that description
.toggleClass('show');
});
.jargon-desc {
height: 0px;
opacity: 0;
transition: all .75s ease;
}
.jargon-desc.show {
opacity: 1;
height: 100%;
}
.jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
width: 45% !important;
margin: 0 2.5% 2em;
transition: all .75s ease;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.show h2::after {
content: "\2796";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>
Related
I Have Problem With Script.....I am a beginner for Web Developing and i found some filter plugin in internet, when i use that to my Website(Demo) ,i have some issue...example.
enter image description here
This is What I want.....But when i use filter query my items were shown in single column. like this
enter image description here
Html
$(function() {
var $grid = $('#container');
$grid.isotope({
itemSelector: '.item'
});
var filters = []; // A convenient bucket for all the filter options,
// just so we don't have to look them up in the DOM every time.
// (a global array is maybe sort of not the most elegant
// way you could deal with this but you get the idea.)
// Search event handlers
$('.quicksearch').on('keyup', function() {
// debounce removed for brevity, but you'd put it here
filters[0] = this.value;
runFilter();
});
$('#filter-select').on('change', function() {
filters[1] = this.value;
runFilter();
});
// and so on if more filters needed
// The filter itself
var runFilter = function() {
$grid.isotope({
filter: function() {
if (filters[0]) {
// at least some search text was entered:
var qsRegex = new RegExp(filters[0], 'gi');
// if the title doesn't match, eliminate it:
if (!$(this).find('.content-title').text().match(qsRegex)) {
return false;
}
}
if (filters[1]) {
// a category was selected; filter out others:
if (!($(this).hasClass(filters[1]))) {
return false;
}
}
// etcetera, for any other filters
// successfully passed all conditions, so:
return true;
}
});
}
});
body {
background-color: #333642;
margin: 0;
}
.item {
display: block;
}
.red .content {
background-color: tomato;
padding: 10px;
color: white;
border: none;
border-radius: 8px 8px 0px 0px;
text-align: center;
}
.blue .content {
background-color: dodgerblue;
padding: 10px;
color: white;
border: none;
border-radius: 8px 8px 0px 0px;
text-align: center;
}
.green .content {
background-color: green;
padding: 10px;
color: white;
border: none;
border-radius: 8px 8px 0px 0px;
text-align: center;
}
.comedy .content {
background-color: #131417;
padding: 10px;
color: white;
border: none;
border-radius: 8px 8px 0px 0px;
text-align: center;
}
.content-title {
background-color: gray;
border-radius: 0 0 8px 8px;
text-align: center;
padding: 8px;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://isotope.metafizzy.co/v1/jquery.isotope.min.js"></script>
<div id="filters">
Color:
<select id="filter-select">
<option value="">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="comedy">Comedy</option>
</select><br> Title: <input type="text" class="quicksearch">
</div>
<div class="container" id="container">
<div class="row">
<div class="red item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>fy Title 1</h3>
</div>
</div>
<div class="blue item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 2</h3>
</div>
</div>
<div class="green item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 3</h3>
</div>
</div>
<div class="red item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 4</h3>
</div>
</div>
<div class="comedy item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 5</h3>
</div>
</div>
<div class="comedy item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 6</h3>
</div>
</div>
<div class="green item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 7</h3>
</div>
</div>
<div class="blue item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 8</h3>
</div>
</div>
<div class="green item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 9</h3>
</div>
</div>
<div class="red item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 10</h3>
</div>
</div>
<div class="comedy item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 11</h3>
</div>
</div>
<div class="blue item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 12</h3>
</div>
</div>
</div>
</div>
<script src="js/filter.js"></script>
</body>
</html>
Removed 'id="container"' then working fine
$(function() {
var $grid = $('#container');
$grid.isotope({
itemSelector: '.item'
});
var filters = []; // A convenient bucket for all the filter options,
// just so we don't have to look them up in the DOM every time.
// (a global array is maybe sort of not the most elegant
// way you could deal with this but you get the idea.)
// Search event handlers
$('.quicksearch').on('keyup', function() {
// debounce removed for brevity, but you'd put it here
filters[0] = this.value;
runFilter();
});
$('#filter-select').on('change', function() {
filters[1] = this.value;
runFilter();
});
// and so on if more filters needed
// The filter itself
var runFilter = function() {
$grid.isotope({
filter: function() {
if (filters[0]) {
// at least some search text was entered:
var qsRegex = new RegExp(filters[0], 'gi');
// if the title doesn't match, eliminate it:
if (!$(this).find('.content-title').text().match(qsRegex)) {
return false;
}
}
if (filters[1]) {
// a category was selected; filter out others:
if (!($(this).hasClass(filters[1]))) {
return false;
}
}
// etcetera, for any other filters
// successfully passed all conditions, so:
return true;
}
});
}
});
body {
background-color: #333642;
margin: 0;
}
.item {
float: left;
width: calc(50% - 20px);
padding: 10px;
}
.red .content {
background-color: tomato;
padding: 10px;
color: white;
border: none;
border-radius: 8px 8px 0px 0px;
text-align: center;
}
.blue .content {
background-color: dodgerblue;
padding: 10px;
color: white;
border: none;
border-radius: 8px 8px 0px 0px;
text-align: center;
}
.green .content {
background-color: green;
padding: 10px;
color: white;
border: none;
border-radius: 8px 8px 0px 0px;
text-align: center;
}
.comedy .content {
background-color: #131417;
padding: 10px;
color: white;
border: none;
border-radius: 8px 8px 0px 0px;
text-align: center;
}
.content-title {
background-color: gray;
border-radius: 0 0 8px 8px;
text-align: center;
padding: 8px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://isotope.metafizzy.co/v1/jquery.isotope.min.js"></script>
<div id="filters">
Color:
<select id="filter-select">
<option value="">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="comedy">Comedy</option>
</select><br> Title: <input type="text" class="quicksearch">
</div>
<div id="container" class="container">
<div class="row">
<div class="red item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>fy Title 1</h3>
</div>
</div>
<div class="blue item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 2</h3>
</div>
</div>
<div class="green item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 3</h3>
</div>
</div>
<div class="red item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 4</h3>
</div>
</div>
<div class="comedy item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 5</h3>
</div>
</div>
<div class="comedy item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 6</h3>
</div>
</div>
<div class="green item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 7</h3>
</div>
</div>
<div class="blue item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 8</h3>
</div>
</div>
<div class="green item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 9</h3>
</div>
</div>
<div class="red item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 10</h3>
</div>
</div>
<div class="comedy item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 11</h3>
</div>
</div>
<div class="blue item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 12</h3>
</div>
</div>
</div>
</div>
I click Click Me! to display the #formcontainer div.
I click it again to hide it, but it doesn't hide :-(
Can someone explain why?
Demo: https://jsfiddle.net/v809wxp9/
jQuery(document).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
} else {
$('#formcontainer').css('height', 'auto');
}
});
});
/*SUb Page Banner*/
#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
overflow: hidden;
height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You are not adding the class back to it when class is missing.
jQuery(document).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
} else {
$('#formcontainer').addClass('hassent');
$('#formcontainer').css('height', 'auto');
}
});
});
/*SUb Page Banner*/
#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
overflow: hidden;
height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You have to add Following Line in Else Condition :
$("#formcontainer").addClass('hassent');
You are only remove the class at time of click.Then else statement add with class$('#formcontainer').addClass('hassent');.Its get back with original position.
jQuery( document ).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function(){
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
}else{
$('#formcontainer').addClass('hassent');
$('#topimage').slideUp();
$('#formcontainer').css('height', 'auto');
}
});
});
/*SUb Page Banner*/
#sub-page-banner{
padding:15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size:30px;
text-transform:uppercase;
letter-spacing:3px;
}
#sub-page-banner .tog{
margin-top:0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer{
overflow:hidden;
height:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
jQuery(document).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
} else {
$('#formcontainer').addClass('hassent');
$('#formcontainer').css('height', 'auto');
}
});
});
/*SUb Page Banner*/
#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
overflow: hidden;
height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Add the class you remove
Use toggle() function
jQuery(document).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
//if ($("#formcontainer").hasClass("hassent")) {
// $('#formcontainer').removeClass('hassent');
// $('#topimage').slideDown();
// $('#formcontainer').css('height', '0');
//} else {
// $('#formcontainer').css('height', 'auto');
// }
$('#formcontainer').toggle();
});
});
/*SUb Page Banner*/
#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
See below code just need to addd $('#formcontainer').addClass('hassent');
jQuery(document).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
} else {
$('#formcontainer').addClass('hassent');
$('#formcontainer').css('height', 'auto');
}
});
});
/*SUb Page Banner*/
#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
overflow: hidden;
height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have tried to get both an iPad and iPhone to work with my current pen and it seems that I can't get it. I have tried to use and SomeContent as well as the normal . The will simply not scroll down to the div. I've tried to cut out the javascript, bootstrap, css, and even cut the page down to rudementary html for awhile but none of the tests seemed to fix it.
Included in the file are Bootstrap.js, Jquery.min.js, Bootstrap.min.css, and font-awesome.min.css
You can find the pen here: Gregory Buhler Portfolio
HTML:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="http://GregoryBuhler.com" target="_blank">Gregory Buhler</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div id="home" class="text-center">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="homecontent">
<h1>Gregory Buhler Website Design</h1>
<h3>Always on the fantastic side of life</h3>
</div>
<!-- End .homecontent -->
</div>
<!-- End .col-lg-12 -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #home -->
<div id="about">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-md-offset-2 text-background">
<h4>A Bit About Me</h4>
<p>When I was a kid my dad pushed for my brother and I to learn computers. I took to it like a fish to water. From 8 onwards my summers were spent indoors working away on simple scripting languages and later on some game modifications.</p>
<p>I won't lie, it wasn't easy getting past my <em>"it needs to be perfect all the time"</em> streak. In fact I still have that streak, I've just learned to fix and perfect as you go instead of making it perfect on the first go-round.</p>
<p>I absolutely love a challenge, critisism of my work used to cause me to clam up a bit. Over time I learned to take the constructive side of critisism and use it to better myself and the content I produce.</p>
<p>None of this would be possible without my amazing wife who puts up with my nose being buried in a book or in code for hours at a time every day. I want to provide the best life I can for her, and I'm good at tech and I love tech, this
is how I plan to provide for her the rest of our lives.</p>
</div>
<!-- End .com-sm-12 .col-md-4 .com-md-offset-2 .text-background -->
<div class="col-md-4 col-md-offset-1 text-center">
<img class="img-circle vertical-align" src="http://i66.tinypic.com/2ywz3w5.jpg" alt="Gregory Buhler in his black cowboy hat.">
</div>
<!-- end .col-md-4 .col-md-offset-1 .text-center -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #about -->
<div id="portfolio">
<div class="portfoliocontent text-center">
<div class="container">
<h1>Portfolio</h1>
<div class="row">
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="contact">
<div class="container">
<div class="row">
<div class="contactcontent text-center">
<div class="col-md-12">
<h1>Get ahold of me</h1>
<h3>Open Your Eyes to the Opportunities</h3>
</div>
<hr class="hor-big">
<div class="col-sm-12 col-md-2 col-md-offset-2">
<a href="https://www.facebook.com/GBProgramming" target="_blank" class="btn-inverse"><i class="fa fa-facebook"></i> Facebook
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://twitter.com/gregoryBuhler" target="_blank" class="btn-inverse"><i class="fa fa-twitter"></i> Twitter
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://github.com/Gregory-Buhler" target="_blank" class="btn-inverse"><i class="fa fa-github"></i> Github
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://www.linkedin.com/in/gregorybuhler" target="_blank" class="btn-inverse"><i class="fa fa-linkedin"></i> Linkedin
</a>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container text-center">
<p>© Website created by Gregory Buhler</p>
</div>
</footer>
</body>
CSS:
#about {
background: url(http://i63.tinypic.com/213ht14.jpg) 50% 0 no-repeat fixed;
background-size: cover;
padding-top: 10%;
padding-bottom: 10%;
font-size: 1.1em;
}
#about .text-background {
background: rgba(255, 255, 255, .3);
font-family: droid-serif;
color: rgb(30, 30, 30);
padding: 10px;
border-radius: 10px;
}
#about img {
padding: 20px;
}
#about,
#contact,
#home,
#portfolio {
overflow: hidden;
min-height: 900px;
}
a.btn-inverse {
position: relative;
display: inline-block;
margin-top: 10px;
width: auto;
transition: all .2s ease-in-out;
background-color: rgb(90, 90, 90);
border: rgb(60, 60, 60) 1px solid;
padding: 10px 15px;
border-radius: 5px;
color: white;
}
a.btn-inverse:hover {
background-color: rgb(0, 0, 0);
transform: scale(1.1);
text-decoration: none;
}
body {
padding-top: 50px;
}
#contact {
background: url(http://i63.tinypic.com/2rp9tau.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.contactcontent {
padding-top: 25%;
padding-bottom: 25%;
}
footer {
padding-top: 10px;
}
h1,
h2,
h3 {
font-family: Cinzel;
text-shadow: 1px 1px 1px #000;
}
h1 {
font-size: 4em;
color: rgb(100, 100, 100);
}
h2 {
font-size: 3em;
}
h3 {
font-size: 2em;
color: rgb(150, 150, 150)
}
h4 {
font-size: 1.7em;
font-weight: 700;
}
#home {
background: url(http://i65.tinypic.com/vht1c2.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.homecontent {
padding-top: 25%;
padding-bottom: 20%;
}
.hor-big {
clear: both;
border: 0;
height: 0;
box-shadow: 0 0 10px 1px black;
}
.hor-big:after {
content: "\00a0";
}
.imgholder {
margin: auto;
border-radius: 5px;
border: rgb(20, 20, 20) 1px solid;
background-color: rgb(250, 250, 250);
width: 190px;
height: 180px;
padding-top: 5px;
padding-left: 5px;
}
.imgholder img {
float: left;
}
.inset-shadow {
position: relative;
float: left;
}
.inset-shadow:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
}
#my-row {
display: table;
}
#my-row .content {
float: none;
display: table-cell;
vertical-align: middle;
}
.navbar {
margin-bottom: 0;
position: fixed;
}
.nav li:hover {
background-color: rgb(28, 28, 28);
}
#portfolio {
background: url(http://i67.tinypic.com/287nl8z.jpg) 50% 0 repeat fixed;
background-size: cover;
}
.portfoliocontent {
padding-top: 10%;
padding-bottom: 10%;
}
.portfoliocontent .row > div {
transform: all .4s ease-in-out;
margin-top: 10px;
}
JS:
$("nav ul li a[href^='#']").on('click', function(e) {
e.preventDefault();
// animate the scroll
y = $(this.hash).offset().top - 50;
if ((y - window.pageYOffset) > 0) {
time = y - window.pageYOffset;
} else {
time = window.pageYOffset - y;
}
$('html, body').animate({
scrollTop: y
}, time);
});
Any help would be greatly appreciated! Thank you!
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>
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.