I'd like to know how to close multiple popup boxes by clicking close buttons with Pure Javascript.
I tried the code below, but it didn't work.
JavaScript
const buttons = document.querySelectorAll('.button');
buttons.forEach((button) => {
button.addEventListener('click', () => {
this.parentElement.querySelector('.popup').style.display = 'none';
});
});
HTML
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.1
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.2
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.3
</div>
</div>
</div>
CSS
.popup {
border: 3px solid gray;
}
.button {
position: absolute;
left: -15px;
top: -15px;
display: block;
border: 1px solid #000;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.content-wrapper {
max-height: 50vh;
overflow-y: auto;
padding: 20px;
}
.content {
overflow: hidden;
}
.popup {
width: 300px;
position: relative;
position: fixed;
right:30px;
}
.popup:nth-child(1) {
bottom:30px;
}
.popup:nth-child(2) {
bottom:130px;
}
.popup:nth-child(3) {
bottom:230px;
}
const buttons = Array.prototype.slice.call(document.querySelectorAll('.button'));
buttons.forEach((button) => {
button.addEventListener('click', () => {
button.parentElement.style.display ='none';
});
});
.popup {
border: 3px solid gray;
}
.button {
position: absolute;
left: -15px;
top: -15px;
display: block;
border: 1px solid #000;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.content-wrapper {
max-height: 50vh;
overflow-y: auto;
padding: 20px;
}
.content {
overflow: hidden;
}
.popup {
width: 300px;
position: relative;
position: fixed;
right:30px;
}
.popup:nth-child(1) {
bottom:30px;
}
.popup:nth-child(2) {
bottom:130px;
}
.popup:nth-child(3) {
bottom:230px;
}
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.1
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.2
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.3
</div>
</div>
</div>
Try this
<!DOCTYPE html>
<html>
<head>
<style>
.popup {
border: 3px solid gray;
}
.closePopup{
display:none;
}
.button {
position: absolute;
left: -15px;
top: -15px;
display: block;
border: 1px solid #000;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.content-wrapper {
max-height: 50vh;
overflow-y: auto;
padding: 20px;
}
.content {
overflow: hidden;
}
.popup {
width: 300px;
position: relative;
position: fixed;
right:30px;
}
.popup:nth-child(1) {
bottom:30px;
}
.popup:nth-child(2) {
bottom:130px;
}
.popup:nth-child(3) {
bottom:230px;
}
</style>
</head>
<body>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.1
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.2
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.3
</div>
</div>
</div>
<script>
const buttons = document.querySelectorAll('.button');
const popups = document.querySelectorAll('.popup');
buttons.forEach(function(button,index){console.log('index:',index);
let newIndex =index; button.addEventListener('click', () => {
console.log('newIndex: ',popups[newIndex]);
popups[newIndex].classList.add("closePopup");
});
});
</script>
</body>
</html>
Related
I want to resize my navigation bar items, so there will be enough distance between them and the sticky logo. How can I achieve that? I tried to edit the container, but it didn't resize and instead overlapping appeared. I mean, it should be put to the right side and leave enough distance between the logo and the menu bar.
body {
font-family: Arial, sans-serif;
margin: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.testmonial {
background-image: url(images/testimonial-bg.jpg);
position: relative;
background-repeat: no-repeat;
}
.testmonial:after {
content: "";
background: #1baaba;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .6;
z-index: 1;
}
.owl-wrapper {
padding: 80px 20px;
z-index: 999;
position: relative;
}
.owl-testmonial {
background: #FFF;
/* max-width: 400px; */
margin: 0 auto;
padding: 40px 25px;
position: unset;
}
.owl-testmonial:before {
content: "\f10d";
font-family: "Font Awesome 5 Free";
font-weight: 900;
text-align: center;
display: block;
font-size: 92px;
color: #e7e7e7;
margin-top: -106px;
}
.owl-testmonial .owl-prev {
position: absolute;
left: 0;
top: 45%;
font-size: 36px !important;
border: 1px solid #FFF !important;
width: 33px !important;
height: 36px !important;
line-height: 17px !important;
color: #FFF;
}
.owl-testmonial .owl-next {
position: absolute;
right: 0;
top: 45%;
font-size: 36px !important;
border: 1px solid #FFF !important;
width: 33px !important;
height: 36px !important;
color: #FFF;
line-height: 17px !important;
}
nav {
overflow: hidden;
background-color: #333;
}
nav.sticky {
position: fixed;
top: 0;
width: 100%;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
}
nav li {
margin: 0 30px;
}
nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
nav a:hover {
background-color: #ffeb3b;
color: black;
}
a.active {
background-color: #2196f3;
color: white;
}
.content {
padding: 20px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 60px;
}
.sticky ul {
height: 50px;
/* or any other desired height */
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.sticky a {
height: 100%;
/* or any other desired height */
line-height: 50px;
padding: 0 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
background-color: #fff;
width: 30%;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
float: left;
}
input[type="text"],
input[type="email"],
input[type="tel"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 10px;
border: 1px solid #ccc;
}
button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #ffeb3b;
color: #2196f3;
border-radius: 10px;
border: 1px solid #2196f3;
margin-top: 20px;
cursor: pointer;
}
.office-map {
margin-top: 50px;
}
/* Responsive styles */
#media screen and (max-width: 992px) {
nav li {
margin: 0 10px;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 80%;
}
}
#media screen and (max-width: 768px) {
header {
height: 60vh;
}
nav {
top: 60vh;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 90%;
}
}
#media screen and (max-width: 576px) {
header {
height: 40vh;
}
nav {
top: 40vh;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 95%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Add JS for owl carousel -->
<link rel="stylesheet" href="fontawesome/css/all.min.css">
<link rel="stylesheet" href="owlcarousel/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/dist/assets/owl.theme.default.min.css">
<script src="main.js"></script>
<link rel="stylesheet" href="style.css">
<title>My Homepage</title>
</head>
<body>
<div class="testmonial">
<div class="container">
<div class="owl-wrapper">
<div class="owl-carousel owl-testmonial">
<div class="slide-item">
<img src="testimony/slider1585663811.png" alt="Slide 1">
</div>
<div class="slide-item">
<img src="testimony/slider1589942091.png" alt="Slide 2">
</div>
<div class="slide-item">
<img src="testimony/slider1590030001.png" alt="Slide 3">
</div>
</div>
</div>
</div>
</div>
<!-- 7 items sticky menu bar -->
<nav id="navbar">
<ul id="nav-ul">
<li><a class="active" href="#home">Home</a></li>
<li>About Us</li>
<li>Tabungan</li>
<li>Kredit</li>
<li>Deposito</li>
<li>Berita</li>
<li>Pengajuan Kredit</li>
</ul>
</nav>
<main class="content">
<!-- 3 static benefits -->
<section class="benefits">
<div class="card">
<h3>Benefit 1</h3>
<p>Description</p>
</div>
<div class="card">
<h3>Benefit 2</h3>
<p>Description</p>
</div>
<div class="card">
<h3>Benefit 3</h3>
<p>Description</p>
</div>
</section>
<!-- 3 types of product -->
<section class="products">
<h2>Products</h2>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</section>
<!-- ID tracking -->
<section class="id-tracking">
<h2>ID Tracking</h2>
<p>Description</p>
</section>
<!-- 3 dynamic testimonies -->
<section class="testimonies">
<h2>Testimonies</h2>
<div class="owl-carousel owl-theme">
<div class="testimony-1">Testimony 1</div>
<div class="testimony-2">Testimony 2</div>
<div class="testimony-3">Testimony 3</div>
</div>
</section>
<!-- 4 dynamic slider of news -->
<section class="news">
<h2>News</h2>
<div class="owl-carousel owl-theme">
<div class="news-1">News 1</div>
<div class="news-2">News 2</div>
<div class="news-3">News 3</div>
<div class="news-4">News 4</div>
</div>
</section>
<!-- suggestion box -->
<section class="suggestion-box">
<h2>Suggestion Box</h2>
<form action="#">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phone-number">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
<button type="submit">Submit</button>
</form>
</section>
<!-- static map to the office -->
<section class="map">
<h2>Map to the Office</h2>
<img src="map.jpg" alt="Map to the Office">
</section>
</main>
<script src="owlcarousel/jquery.min.js"></script>
<script src="owlcarousel/dist/owl.carousel.min.js"></script>
<script>
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
var logo = document.createElement("img");
logo.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
logo.style.height = "50px";
logo.style.marginLeft = "40px";
logo.style.float = "left";
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
if (!navbar.classList.contains("logo")) {
navbar.classList.add("logo");
navbar.insertBefore(logo, navbar.firstChild);
navbar.style.height = "50px";
}
} else {
navbar.classList.remove("sticky");
navbar.classList.remove("logo");
navbar.removeChild(logo);
navbar.style.height = "auto";
}
}
window.onscroll = function() {
myFunction();
};
</script>
</body>
</html>
im looking for this problem the last 2 days but didnt find any solution.
I prepared this jsFiddle for you to show you my exact problem.
How do I make the image only visible for section 2? Like it should scroll behind the layer of section 1.
It works from section 2 into section 3 but i cant find a solution to place it behind section 1.
JsFiddle Demo
h2 {
margin: 0;
}
/** Section 1 **/
.textbox {
position: absolute;
z-index: 1;
text-align: center;
top: 300px;
left: 0%;
right: 0%;
}
.textboxcontent {
position: relative;
margin-bottom: 25px;
font-family: 'Roboto', sans-serif;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
font-weight: normal;
}
.background-video {
overflow: hidden;
}
.background-video video {
height: 100%;
width: 177.77777778vh;
min-width: 100%;
min-height: 56.25vw;
object-fit: cover;
opacity: 0.3;
}
/** Section 2 **/
.relative {
position: relative;
background-color: orange;
margin-top: -4px;
}
.frame {
width: 400px;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
}
.section2 {
min-height: 50vh;
}
/** Section 3 **/
.relative2 {
position: relative;
background-color: yellow;
}
.section3 {
min-height: 50vh;
}
/** Section 3 **/
.relative3 {
position: relative;
background-color: purple;
}
.section4 {
min-height: 50vh;
}
/** Section 4 **/
.relative4 {
position: relative;
background-color: pink;
}
.section5 {
min-height: 50vh;
}
.animation {
width: 200px;
height: 150px;
position: fixed;
right: 0;
top: 300px;
z-index: 0;
}
.animation img {
width: 100%;
height: 100%;
}
<main>
<div class="section1">
<div class="background-video">
<video src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" autoplay></video>
</div>
<div class="textbox">
<div class="textboxcontent">
<h2>Welcome</h2>
</div>
</div>
</div>
<div class="relative">
<div class="animation">
<img src="https://www.webkit.org/blog-files/acid3-100.png" alt="">
</div>
<div class="frame">
<div class="section2">
<h2>Section 2</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative2">
<div class="frame">
<div class="section3">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative3">
<div class="frame">
<div class="section4">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative4">
<div class="frame">
<div class="section5">
<h2>Section 4</h2>
<p>example text</p>
</div>
</div>
</div>
</main>
I added this CSS:
.section1 {
position: relative;
z-index: 100;
background-color: lightgray;
}
No background on section1 allowed the element to be seen through div.section1
h2 {
margin: 0;
}
.section1 {
position: relative;
z-index: 100;
background-color: lightgray;
}
/** Section 1 **/
.textbox {
position: absolute;
z-index: 100;
text-align: center;
top: 300px;
left: 0%;
right: 0%;
}
.textboxcontent {
position: relative;
margin-bottom: 25px;
font-family: 'Roboto', sans-serif;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
font-weight: normal;
}
.background-video {
overflow: hidden;
}
.background-video video {
height: 100%;
width: 177.77777778vh;
min-width: 100%;
min-height: 56.25vw;
object-fit: cover;
opacity: 0.3;
}
/** Section 2 **/
.relative {
position: relative;
background-color: orange;
margin-top: -4px;
}
.frame {
width: 400px;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
}
.section2 {
min-height: 50vh;
}
/** Section 3 **/
.relative2 {
position: relative;
background-color: yellow;
}
.section3 {
min-height: 50vh;
}
/** Section 3 **/
.relative3 {
position: relative;
background-color: purple;
}
.section4 {
min-height: 50vh;
}
/** Section 4 **/
.relative4 {
position: relative;
background-color: pink;
}
.section5 {
min-height: 50vh;
}
.animation {
width: 200px;
height: 150px;
position: fixed;
right: 0;
top: 300px;
z-index: 0;
}
.animation img {
width: 100%;
height: 100%;
}
<main>
<div class="section1">
<div class="background-video">
<video src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" autoplay></video>
</div>
<div class="textbox">
<div class="textboxcontent">
<h2>Welcome</h2>
</div>
</div>
</div>
<div class="relative">
<div class="animation">
<img src="https://www.webkit.org/blog-files/acid3-100.png" alt="">
</div>
<div class="frame">
<div class="section2">
<h2>Section 2</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative2">
<div class="frame">
<div class="section3">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative3">
<div class="frame">
<div class="section4">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative4">
<div class="frame">
<div class="section5">
<h2>Section 4</h2>
<p>example text</p>
</div>
</div>
</div>
</main>
fiddle
I am using data-attributes to hold values for product names. When a user clicks on .compProdBlock I want the data-fastName to populate within the fastTitle field.
In my attempt I am using the push and each function. I am not getting any errors, but the data is not populating.
Does anyone see what I am doing wrong? Only the top two choices have data associated with them.
var fastShowName = [];
$('.compProdBlock').click(function() {
$('.compProdBlock').each(function() {
fastShowName.push($($(this).data('fastName')));
});
$('#fastTitle').html(fastShowName);
});
#compSec2Block1,
#compSec2Block2 {
display: inline-block;
vertical-align: top;
height: 80vh;
}
#compSec2Block1 {
width: 40%;
}
#compSec2Block2 {
width: 60%;
}
#compSec2Block2inner {
width: 100%;
height: 100%;
}
.compProdBlock {
width: 50%;
height: 50%;
display: inline-block;
position: relative;
border-right: 2px solid #000;
box-sizing: border-box;
cursor: pointer;
}
.compProdBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pTitleWrap {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.boxTitleWrap {
background: rgba(0, 0, 0, .6);
width: 100%;
}
.boxTitle25 {
color: #FFF;
font-size: 2rem;
font-family: 'Muli', sans-serif;
font-weight: 400;
line-height: 1.4em;
padding: 10px 0px 10px 20px;
text-transform: uppercase;
width: 85%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="compSec2" class="sec">
<div id="compSec2Block1">
<h3 class="dG" id="fastTitle"></h3>
</div>
<div id="compSec2Block2">
<div id="compSec2Block2inner">
<div class="compProdBlock" data-fastName="Standard Fastener" data-fastImg="">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
<div class="pTitleWrap">
<div class="boxTitleWrap">
<h2 class="boxTitle25">Standard Fastener</h2>
</div>
</div>
</div>
<div class="compProdBlock" data-fastName="Universal Fastener">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
<div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
<div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
</div>
</div>
</section>
The name of the data-* attribute should be data-fast-name instead of data-fastName.
No need for loop you could set the data of the current clicked element using :
$('#fastTitle').text( $(this).data('fast-name') );
$(function() {
$('.compProdBlock').click(function() {
$('#fastTitle').text($(this).data('fast-name'));
});
$('.compProdBlock:first').click();
});
#compSec2Block1,
#compSec2Block2 {
display: inline-block;
vertical-align: top;
height: 80vh;
}
#compSec2Block1 {
width: 40%;
}
#compSec2Block2 {
width: 60%;
}
#compSec2Block2inner {
width: 100%;
height: 100%;
}
.compProdBlock {
width: 50%;
height: 50%;
display: inline-block;
position: relative;
border-right: 2px solid #000;
box-sizing: border-box;
cursor: pointer;
}
.compProdBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pTitleWrap {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.boxTitleWrap {
background: rgba(0, 0, 0, .6);
width: 100%;
}
.boxTitle25 {
color: #FFF;
font-size: 2rem;
font-family: 'Muli', sans-serif;
font-weight: 400;
line-height: 1.4em;
padding: 10px 0px 10px 20px;
text-transform: uppercase;
width: 85%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="compSec2" class="sec">
<div id="compSec2Block1">
<h3 class="dG" id="fastTitle"></h3>
</div>
<div id="compSec2Block2">
<div id="compSec2Block2inner">
<div class="compProdBlock" data-fast-name="Standard Fastener" data-fastImg="">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
<div class="pTitleWrap">
<div class="boxTitleWrap">
<h2 class="boxTitle25">Standard Fastener</h2>
</div>
</div>
</div>
<div class="compProdBlock" data-fast-name="Universal Fastener">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
<div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
<div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
</div>
</div>
</section>
Use $('#id').attr('data-fastName') instead of $('#id').data('fastName')
If you only want to display the clicked item as title, you don't need to push all the fastName into an array.
var fastShowName = [];
$('.compProdBlock').click(function () {
$('#fastTitle').html($(this).attr('data-fastName'));
});
#compSec2Block1, #compSec2Block2 {
display: inline-block;
vertical-align: top;
height: 80vh;
}
#compSec2Block1 {
width: 40%;
}
#compSec2Block2 {
width: 60%;
}
#compSec2Block2inner {
width: 100%;
height: 100%;
}
.compProdBlock {
width: 50%;
height: 50%;
display: inline-block;
position: relative;
border-right: 2px solid #000;
box-sizing: border-box;
cursor: pointer;
}
.compProdBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pTitleWrap {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.boxTitleWrap {
background: rgba(0,0,0,.6);
width: 100%;
}
.boxTitle25 {
color: #FFF;
font-size: 2rem;
font-family: 'Muli', sans-serif;
font-weight: 400;
line-height: 1.4em;
padding: 10px 0px 10px 20px;
text-transform: uppercase;
width: 85%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="compSec2" class="sec">
<div id="compSec2Block1">
<h3 class="dG" id="fastTitle"></h3>
</div><div id="compSec2Block2">
<div id="compSec2Block2inner">
<div class="compProdBlock" data-fastName="Standard Fastener" data-fastImg="">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
<div class="pTitleWrap">
<div class="boxTitleWrap">
<h2 class="boxTitle25">Standard Fastener</h2>
</div>
</div>
</div><div class="compProdBlock" data-fastName="Universal Fastener">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div><div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div><div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
</div>
</div>
</section>
There were 2 issues in your code. First you created array and that array would not be printed inside <h3> tag. because it's still an object. you can't print that. and another is after creation on DOM. Data part will be insensitive from case. so if you taking $(this).data('fastName') then it will return undefined. you will need to use $(this).data('fastname')
var fastShowName = '';
$('.compProdBlock').click(function () {
fastShowName = '';
$('.compProdBlock').each(function () {
fastShowName = fastShowName + $(this).data('fastname');
});
console.log(fastShowName);
$('#fastTitle').html(fastShowName);
});
#compSec2Block1, #compSec2Block2 {
display: inline-block;
vertical-align: top;
height: 80vh;
}
#compSec2Block1 {
width: 40%;
}
#compSec2Block2 {
width: 60%;
}
#compSec2Block2inner {
width: 100%;
height: 100%;
}
.compProdBlock {
width: 50%;
height: 50%;
display: inline-block;
position: relative;
border-right: 2px solid #000;
box-sizing: border-box;
cursor: pointer;
}
.compProdBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pTitleWrap {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.boxTitleWrap {
background: rgba(0,0,0,.6);
width: 100%;
}
.boxTitle25 {
color: #FFF;
font-size: 2rem;
font-family: 'Muli', sans-serif;
font-weight: 400;
line-height: 1.4em;
padding: 10px 0px 10px 20px;
text-transform: uppercase;
width: 85%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="compSec2" class="sec">
<div id="compSec2Block1">
<h3 class="dG" id="fastTitle"></h3>
</div><div id="compSec2Block2">
<div id="compSec2Block2inner">
<div class="compProdBlock" data-fastName="Standard Fastener" data-fastImg="">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
<div class="pTitleWrap">
<div class="boxTitleWrap">
<h2 class="boxTitle25">Standard Fastener</h2>
</div>
</div>
</div><div class="compProdBlock" data-fastName="Universal Fastener">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div><div class="compProdBlock">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div><div class="compProdBlock" data-fastName="Standard 32b Fastener">
<img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
</div>
</div>
</div>
</section>
You need to modify the javascript to get the attribute 'data-fastName' of the div:
var fastShowName = [];
$('.compProdBlock').click(function () {
$('.compProdBlock').each(function () {
fastShowName.push($(this).attr('data-fastName'));
});
$('#fastTitle').html(fastShowName);
});
so I found this cool JQuery fader which does exactly what I wanted. The background fades, but when the transistion from image to image occurs all my other divs hide and then show basically.
I want to make it so only the background image will fade and the divs won't essentially flicker. I can produce a short video if need be.
HTML and JQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function fader() {
$("img").first().appendTo('#wrap').fadeOut(3000);
$("img").first().fadeIn(3000);
setTimeout(fader, 4200);
}
</script>
</head>
<body onLoad="fader();">
<div id="wrap">
<img src="images/Blue.png">
<img src="images/Green.png">
<img src="images/Orange.png">
<img src="images/Pink.png">
<img src="images/Purple.png">
<img src="images/Red.png">
<img src="images/Yellow.png">
<div id="wrapper">
<div id="header">
<div id="sv_title">Title</div>
<div id="sv_subtitle">Subtitle</div>
</div>
<div id="content_left">
<div id="text">
Lorem ipsum
</div>
</div>
<div id="content_right">
<div id="text">
Lorem ipsum
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
CSS:
html { overflow-x: hidden; overflow-y: hidden; }
img{
position:absolute;
top:0;
display:none;
width:1920px;
height:1080px;
border: none;
}
body{
margin: 0;
padding: 0;
}
#wrap {
margin: 0;
padding: 0;
}
/* End Setup */
/* Detail */
#wrapper {
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
}
#header {
height: 100px;
width: 900px;
background-color: #000000;
opacity: 0.7;
}
#content_left {
height: 500px;
width: 445px;
background-color: #000000;
opacity: 0.7;
display: inline;
float: right;
margin-top: 10px;
}
#content_right {
height: 500px;
width: 445px;
background-color: #000000;
opacity: 0.7;
display: inline;
float: left;
margin-top: 10px;
}
#footer {
height: 50px;
width: 900px;
background-color: #000000;
opacity: 0.7;
position: absolute;
bottom: 0;
margin-bottom: 30px;
}
this should do the job:
function fader() {
$("#background img:first").appendTo('#background').fadeOut(3000);
$("#background img:first").fadeIn(3000);
setTimeout(fader, 4200);
}
and the fix in the html
<div id="wrap">
<span id="background">
<img src="images/Blue.png">
<img src="images/Green.png">
<img src="images/Orange.png">
<img src="images/Pink.png">
<img src="images/Purple.png">
<img src="images/Red.png">
<img src="images/Yellow.png">
</span>
<div id="wrapper">
<!-- and the rest of the markup -->
it's not tested, I'm to lazy at the moment to create a fiddle and mock your images.
I am working on a website for a project of mine, and I am trying to incorporate some simple jQuery commands. They don't seem to be working. Please read through and let me know if I am missing something.
HTML Code:
<div class="button"> Home</div>
<div class="button"> About us</div>
<div class="button"> Contact us</div>
<div class="button-right" id="businesses"> <a href="forbusinesses.htm" class="a-top">For
businesses</a></div>
<div class="button-right"> For users</div>
<div class="fluid-margin">
<div class="orange-body">
<div class="fake-header">
<img src="http://i879.photobucket.com/albums/ab358/dylanhusted/bulletnlogotranssmall_zpsa04c3fed .png" id="logo"/>
</div>
</div>
</div>
<div id="landing-page">
<div id="call-to-action">
<img src="https://scontent-b-lga.xx.fbcdn.net/hphotos-prn1/v/1608452_3821343707689_2110853534_n.jpg?oh=ab5ebfd5dce574e97a43e9a7c0739583&oe=52D0F2AC" id="learn-button"/>
</div>
<img src="https://scontent-b-lga.xx.fbcdn.net/hphotos-prn1/v/1551908_3821359708089_1101636385_o.jpg?oh=aa19a9ac5f5b5e4f3cf704858482803d&oe=52D11726"id="line"/>
</div>
<div class="footer">
Home
About Us
Contact Us
</div>
</body>
</html>
CSS Code:
body {
background-color: #ffffff;
}
#landing-page {
width: 100%;
position:relative;
width:100%;
padding-bottom: 40%;
height:0;
overflow:hidden;
z-index: -1;
}
#line {
margin-left: 0;
margin-bottom: 0;
width: 100%;
}
.orange-body {
width: 70%;
z-index: -3;
border-radius: 5px;
margin: auto;
}
.fluid-margin {
position:relative;
width:100%;
padding-bottom:8%;
height:0;
overflow:hidden;
}
.fake-header {
width: 70%;
position: absolute;
border-radius: 5px;
margin-top: 1%;
margin-left: 15%;
z-index: -0;
}
#logo {
width: 28%;
height: 63%;
margin-top: .7%;
margin-left: 14%;
z-index: 1;
}
.button {
display: inline-block;
font-family: Trebuchet MS;
color: #8d8d8d;
font-size: 110%;
padding: 5px;
}
jQuery Code:
$(document).ready(function() {
$('a').mouseover(function() {
(this).css("color", "#dfdbd8");
});
});
Thanks!
Try:
$('a').mouseover(function() {
$(this).css("color", "#dfdbd8");
});
So I am an idiot!
In your css add:
a:hover{color:#dfdbd8}
I didn't read close enough, and you dont actually require JS to do it!