Develop Reference

Consent Popup not triggering on click

I want a popup to appear when the ID is click on. In the popup there would be two buttons: one to accept, which places a true value in local storage. So the user will not see popup again, if they accepted. The other button is decline, which simply closes the the popup, places nothing in local storage, and will popup again if ID is clicked on again.
Everything in the code is working as I would like, except I would like it to activate on an ID click event. I have tried replacing:
window.onload = () => {
with
$( "#gtranslate_popup" ).click(function() {
HTML
<div id="gtranslate_popup">
Click Here
</div>
<div id="consent_popup" class="hidden">
<div id="consent_popup_content">
<h3>Language Selection</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Pulvinar neque laoreet suspendisse interdum consectetur. Praesent semper feugiat nibh sed pulvinar. Dui nunc mattis enim ut tellus elementum sagittis vitae. Enim blandit volutpat maecenas volutpat blandit. Eget est lorem ipsum dolor sit amet consectetur adipiscing.</p>
<div id="consent-btns"><a id="gt_accept" class="btn btn-default" href="#">Accept</a> <a id="gt_decline" class="btn btn-red" href="#">Decline</a></div>
</div>
</div>
CSS
#consent_popup {
background-color: rgba(0, 0, 0, 0.8);
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 99999;
&.hidden {
opacity: 0;
}
}
#consent_popup_content {
background-color: #fff;
border: 1px solid #ddddd5;
border-radius: 15px;
height: auto;
left: 15%;
padding: 20px;
position: fixed;
text-align: center;
top: 1%;
width: 70%;
}
#consent_popup_content h3 {
color: #4e4646;
font-size: 2em;
font-weight: 600;
text-transform: uppercase;
}
#consent-popup-content h3:after {
background-color: #4e4646;
content: ' ';
display: block;
height: 1px;
margin: 0.3em auto;
width: 10%;
}
#consent_popup_content p {
font-size: 1.25em;
}
#consent-btns .btn {
font-size: 2em;
margin: 0.25em 0.75em;
text-transform: uppercase;
font-weight: 600;
}
#consent-btns .btn-red {
background-color: #d34727;
}
Script
(function($) {
$(document).ready(function() {
//Language Module Consent Popup
const storageType = localStorage;
const consentPropertyName = 'lang_consent';
const shouldShowPopup = () => !storageType.getItem(consentPropertyName);
const saveToStorage = () => storageType.setItem(consentPropertyName, true);
window.onload = () => {
const acceptFn = event => {
saveToStorage(storageType);
consentPopup.classList.add('hidden');
}
const declineFn = event => {
consentPopup.classList.add('hidden');
}
const consentPopup = document.getElementById('consent_popup');
const acceptBtn = document.getElementById('gt_accept');
const declineBtn = document.getElementById('gt_decline');
acceptBtn.addEventListener('click', acceptFn);
declineBtn.addEventListener('click', declineFn);
if (shouldShowPopup(storageType)) {
consentPopup.classList.remove('hidden');
}
};
//End of Language Module Consent Popup
});
// End of the making the menu navigate with keyboard
})(jQuery);

The most browser disable popups by default.

Prev and next buttons in modal gallery doesn't work

I found modal gallery example and tried to adapt it to my needs but now I have a problem with the prev - next buttons... Do you have any suggestion? (javascript newbee)
CODEPEN
HTML
<div class="row">
<div class="col">
<img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" onclick="openLightbox(this);toSlide(1)" class="hover-shadow preview">
</div>
<div class="col">
<img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" onclick="openLightbox(this);toSlide(2)" class="hover-shadow preview">
</div>
<div class="col">
<img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" onclick="openLightbox(this);toSlide(3)" class="hover-shadow preview">
</div>
</div>
<div id="Lightbox" class="modal">
<span class="close pointer" onclick="closeLightbox()">×</span>
<div class="modal-content">
<div class="slide">
<img id="modal-slides" class="image-slide" alt="END OF SLIDESHOW GROUP" />
</div>
<a class="previous" onclick="changeSlide(-1)">❮</a>
<a class="next" onclick="changeSlide(1)">❯</a>
</div>
</div>
</div>
</div>
JS
var slideIndex = 1;
showSlide(slideIndex);
function openLightbox(element) {
document.getElementById('Lightbox').style.display = 'block';
document.getElementById("modal-slides").src = element.src;
}
function closeLightbox() {
document.getElementById('Lightbox').style.display = 'none';
}
function changeSlide(n) {
showSlide(slideIndex += n);
}
function toSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n) {
const slides = document.getElementsByClassName('slide');
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = 'block';
}
I have tried various options but my javascript knowledge is poor. I am grateful for any help.
EDIT
prettyInPink I tried to do what you suggested, here is example:
CODEPEN
When I open modal by clicking in last picture (number 8), everything is OK, but when modal is opened with any other picture, PREV - NEXT doesn't works right... Displayed images are in some way random... Any suggestion?

You could use data attributes set to your images data-image and target those.
let _body = document.querySelector('body'),
galleryImg = document.querySelectorAll('.gallery img'),
modalWindow = document.getElementById('modal-gall'),
modalImg = document.getElementById('modal-slides'),
closeModal = document.getElementById('closem'),
nextBtn = document.getElementById('nextm'),
prevBtn = document.getElementById('prevm'),
curSlide;
galleryImg.forEach((img) => {
img.addEventListener('click', function() {
curSlide = Number(this.dataset.image);
modalImg.src = this.src;
_body.classList.add('modal-open');
});
});
nextBtn.addEventListener('click', function() {
curSlide === galleryImg.length ? curSlide = 1 : curSlide += 1
modalImg.src = document.querySelector('.gallery img[data-image="'+(curSlide)+'"]').src;
});
prevBtn.addEventListener('click', function() {
curSlide === 1 ? curSlide = galleryImg.length : curSlide -= 1
modalImg.src = document.querySelector('.gallery img[data-image="'+(curSlide)+'"]').src;
});
closeModal.addEventListener('click', function(e) {
e.preventDefault();
_body.classList.remove('modal-open');
});
body {
font-family: Tahoma, sans-serif;
margin: 0;
background-color: #514c5c;
color: white;
}
.gall-container {
text-align: left;
padding: 0 2% 0 2%;
width: auto;
}
.gall-text {
text-align: left;
font-size: 16px;
padding: 50px 5px 2px 5px;
width: 100%;
}
.gallery {
display: flex;
height: auto;
flex-wrap: wrap;
justify-content: left;
align-content: flex-start;
padding: 5px 0 5px 0;
}
.gallery > img {
max-width: 90vw;
max-height: 200px;
cursor: zoom-in;
display: block;
padding: 6px;
}
#modal-gall {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
bottom: 0;
right: 0;
padding: 8px;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.97);
align-items: center;
justify-content: center;
}
.modal-open #modal-gall {
display: block;
}
.modal-content {
position: relative;
width: 100%;
height: auto;
text-align: center;
}
#modal-slides {
display: block;
max-width:100%;
max-height: calc(100vh - 16px);
margin: auto;
}
#closem {
cursor: pointer;
color: #9e97b1;
position: absolute;
top: 26px;
right: 0px;
font-size: 40px;
font-weight: bold;
border-radius: 5px 0 0 5px;
padding: 2px 16px 8px 16px;
z-index: 2;
background-color: #29272e;
text-decoration: none;
}
#closem:hover,
#closem:focus {
color: red;
cursor: pointer;
}
#prevm,
#nextm {
cursor: pointer;
position: absolute;
top: 46%;
width: auto;
padding: 10px 22px;
margin-top: -10px;
color: #9e97b1;
font-weight: bold;
font-size: 30px;
user-select: none;
-webkit-user-select: none;
background-color: #29272e;
text-decoration: none;
}
#prevm {
left: 0;
border-radius: 0 5px 5px 0;
}
#nextm {
right: 0;
border-radius: 5px 0 0 5px;
}
#prevm:hover,
#nextm:hover {
background-color: #322c42;
}
<div class="gall-container">
<div class="gall-text"><b style="color: silver; font-size: 120%;">EXIBITION 02</b>
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas mauris rhoncus, aliquam turpis a, tempus erat. Proin sit amet cursus felis. Etiam rhoncus tortor id nunc viverra, sed imperdiet leo congue. Nam tristique elementum gravida. In efficitur odio at lorem pretium, at lobortis dui hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eu erat facilisis, ullamcorper mi id, semper libero. Suspendisse iaculis in ipsum sed luctus. Duis cursus varius dui at fringilla.
<br><span style="color: #b1afaf; font-size: 80%;">>> Cras non commodo massa.</span><br>
</div>
<div class="gallery">
<img src="https://i.postimg.cc/sxLJ4WgV/08.jpg" alt="08 Image description" data-image="8">
<img src="https://i.postimg.cc/vm73wD3z/07.jpg" alt="07 Image description" data-image="7">
<img src="https://i.postimg.cc/qvyG2zVT/06.jpg" alt="06 Image description" data-image="6">
<img src="https://i.postimg.cc/MTWt6xL8/05.jpg" alt="05 Image description" data-image="5">
<div class="gall-text"><b style="color: silver; font-size: 120%;">EXIBITION 01</b>
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas mauris rhoncus, aliquam turpis a, tempus erat. Proin sit amet cursus felis. Etiam rhoncus tortor id nunc viverra, sed imperdiet leo congue. Nam tristique elementum gravida. In efficitur odio at lorem pretium, at lobortis dui hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eu erat facilisis, ullamcorper mi id, semper libero. Suspendisse iaculis in ipsum sed luctus. Duis cursus varius dui at fringilla.
<br> <span style="color: #b1afaf; font-size: 80%;">>> Cras non commodo massa.</span><br>
</div>
<img src="https://i.postimg.cc/HsJzs66j/04.jpg" alt="04 Image description" data-image="4">
<img src="https://i.postimg.cc/jq3vbpQG/03.jpg" alt="03 Image description" data-image="3">
<img src="https://i.postimg.cc/Xqq85L3H/02.jpg" alt="02 Image description" data-image="2">
<img src="https://i.postimg.cc/C1m7dXyn/01.jpg" alt="01 Image description" data-image="1">
</div>
<div id="modal-gall">
×
<div class="modal-content">
<img id="modal-slides" alt="">
</div>
<a id="prevm">❮</a>
<a id="nextm">❯</a>
</div>
</div>

How to display a div when clicking on a button with js?

-"Maybe this question is one of the duplicate question options as I took it from another answer"
What I am trying to do is that when clicking on a button of an article tag (it is an example) a div with specific information of that article is shown and that the button changes logo. The point is that if that button is clicked, another div from another article cannot be displayed at the same time
The images explain them better:
This is how it should look at first
This is what it should look like when the button is clicked
And this should be seen when clicking on the other button:
(This is how it should look on a cell phone, that's important because of the code I'm going to show)
And this is a code that I found and that more or less works, but it fails when it is for example a cell phone or when wanting to include more articles:
var sharedCont = document.getElementById('shared-container');
var allCont = document.querySelectorAll('#accordion-container');
var jsaccordion = {
init : function (target) {
var headers = document.querySelectorAll("#" + target + " .accordion-btn");
if (headers.length > 0) { for (var head of headers) {
head.addEventListener("click", jsaccordion.select);
}}
},
select : function () {
var targ1 = this.parentElement.closest('#accordion-container'), // find parent
targText = targ1.querySelector('.accordion-text').innerHTML; // grab text for shared container
if( targ1.classList.contains('active') ){
// when clicked, if active, reset them all
targ1.classList.remove('active');
sharedCont.innerHTML = '';
sharedCont.classList.remove('active');
} else {
// when clicked, reset them all, then activate
for (let i = 0; i < allCont.length; i++) {
var el = allCont[i];
el.classList.remove('active');
}
targ1.classList.add('active');
sharedCont.innerHTML = targText;
sharedCont.classList.add('active');
}
}
};
window.addEventListener('load', function(){
jsaccordion.init("accordion-container");
});
body {
max-width: 90%;
margin: 0 auto;
overflow: hidden;
}
#accordion-container {
position: relative;
}
#accordion-container button::before {
content: '+' !important;
}
#accordion-container.active button::before {
content: '-' !important;
}
#accordion-container.active::after {
content: '';
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid orange;
position: absolute;
bottom: -2rem;
left: 50%;
transform: translateX(-50%);
color: orange;
z-index: 100;
font-size: 3rem;
line-height: 1;
}
#accordion-container .accordion-text {
display: none;
color: #808080;
padding: 15px;
border: 1px solid #ffcc4b;
}
/* .accordion-btn.open + .accordion-text{
display: block;
} */
#shared-container {
margin-top: 2rem;
display: block;
width: 100%;
padding: 2rem;
border: 1px solid orange;
display: none;
}
#shared-container.active {
display: block;
text-align: center;
}
#shared-container p {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Testing testing testing</h1>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
<div id="accordion-container" class='col-6'>
<div class="my-3">
<h3 class=" text-center">First one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis natoque penatibus et magnis. Duis convallis convallis tellus id interdum velit laoreet. </p>
</div>
</div>
</div>
<div id="accordion-container" class='col-6'>
<div class="my-3">
<h3 class='text-center'>second one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium lectus quam id leo.</p>
</div>
</div>
</div>
</div>
<div id="shared-container"></div>
</body>
</html>
I repeat, that is taken from this question: how to display different div on button click with JS?
I am very newbie, but I liked the idea of ​​that question and wanted to know if it is possible to do it.

var jsaccordion = {
init: function(target) {
var headers = $("." + target + " .accordion-btn");
if (headers.length) {
headers.on('click', jsaccordion.select);
}
},
select: function() {
var tar = $(this).closest('.accordion-container');
$('#shared-container').remove();
if (tar.hasClass('active')) {
tar.removeClass('active')
} else {
$('.active').removeClass('active')
tar.addClass('active');
var targText = tar.find('.accordion-text').html();
var sharedCont = "<div id='shared-container'>" + targText + "</div>";
if($('body').width() > 768){
tar = tar.parent();
}
tar.after(sharedCont);
}
}
}
window.addEventListener('load', function() {
jsaccordion.init("accordion-container");
});
body {
max-width: 90%;
margin: 0 auto;
}
.accordion-container {
position: relative;
}
.accordion-container button::before {
content: '+' !important;
}
.accordion-container.active button::before {
content: '-' !important;
}
.accordion-container.active::after {
content: '';
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid orange;
position: absolute;
bottom: -2rem;
left: 50%;
transform: translateX(-50%);
color: orange;
z-index: 100;
font-size: 3rem;
line-height: 1;
}
.accordion-container .accordion-text {
display: none;
color: #808080;
padding: 15px;
border: 1px solid #ffcc4b;
}
#shared-container {
margin-top: 2rem;
display: block;
width: 100%;
padding: 2rem;
border: 1px solid orange;
text-align: center;
}
#shared-container p {
margin: 0;
}
#media (max-width : 768px){
.col-6{
max-width: 100%;
min-width: 100%;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<h1>Testing testing testing</h1>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class='row'>
<div class='col-6 accordion-container'>
<div class="my-3">
<h3 class=" text-center">First one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis natoque penatibus et magnis. Duis convallis
convallis tellus id interdum velit laoreet. </p>
</div>
</div>
</div>
<div class='col-6 accordion-container'>
<div class="my-3">
<h3 class='text-center'>second one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium lectus quam id leo.</p>
</div>
</div>
</div>
</div>
</body>

Show div in another wrapper while hovering in another

I'm trying to hover on a div inside a wrapper to reveal some text inside another rapper.
I've had a stab at it with the following CSS, to no avail. Here's my attempt thus far:
Fiddle
Here's what I was trying to do with CSS:
/* My attempt */
#assotxt {
display: none;
}
#assodiv:hover ~ #assotxt {
display: block !important;
background-color: white;
}
Javascript may be the way to go here, but I'm a bit of a novice in that regard.
Your help would be greatly appreciated.

Plain JS:
var assodiv = document.getElementById("assodiv"),
assotxt = document.getElementById("assotxt");
assodiv.onmouseover = function(e) {
assotxt.style.display = "block";
};
assodiv.onmouseout = function(e) {
assotxt.style.display = "none";
};
insert this in a <script>-block on bottom of your body-tag

You can try this.
Add this to head:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
Add this javascript:
var asso = $('#asso');
asso.on('mouseenter',function(){
$('.diagramTextWrapper').prepend('<p class="wrapper_text">test</p>');
});
asso.on('mouseleave',function(){
$('.wrapper_text').remove();
});

you can also hide and show your required div on hover event using jquery:
$(document).ready(function(){
$('#assodiv').on( "mouseenter",function() {
$('#assotxt').show();
$('#assotxt').css("background-color", "white");
$("#assotxt").appendTo($("#assotxt_target"));
});
$('#assodiv').on( "mouseleave",function() {
$('#assotxt').hide();
});
});
.btn {
text-decoration: none;
color: #fff;
font-size: 13px;
font-weight: bold;
padding: 0 15px;
line-height: 32px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
width: 100px;
text-align: center;
text-transform: uppercase;
margin-top: 20px;
margin-bottom: 20px;
cursor: pointer;
}
.btn.blue {
background-color: #19ace4;
}
.btn.blue:hover {
opacity: 0.85;
}
.btn.pill {
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
/* - - - MOBLE VIEW - - - */
#media only screen and (max-width: 640px) {
.mobileViewDiagram {
display: block !important;
margin-left: auto;
margin-right: auto;
transform: scale(0.7);
margin-top: -50px;
margin-bottom: -50px;
}
.HybridDiagram,
#leftWrapper,
#rightWrapper {
display: none;
}
}
/* - - - DESKOTP VIEW - - - */
section {
width: 100%;
height: 476px;
margin: auto;
}
div#leftWrapper {
width: 50%;
height: 476px;
float: left;
}
div#rightWrapper {
margin-left: 50%;
height: 476px;
}
.diagramTextWrapper {
display: block;
margin: auto;
text-align: center;
padding-left: 50px;
padding-right: 50px;
padding-top: 20px;
}
.HybridDiagram {
width: 476px;
height: 476px;
}
.HybridDiagram img {
max-width: 100%;
position: absolute;
}
/* Associates */
.HybridDiagram img:nth-child(1) {
left: 0;
top: 0;
}
/* Staff */
.HybridDiagram img:nth-child(2) {
left: 244px;
top: 0;
}
/* Client */
.HybridDiagram img:nth-child(3) {
left: 38px;
top: 301px;
}
.mobileViewDiagram {
display: none;
}
#asso:hover,
#staff:hover,
#client:hover {
opacity: 0.85;
}
/* My attempt */
#assotxt {
display: none;
}
#assodiv:hover ~ #assotxt {
display: block !important;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Mobile View -->
<div class="mobileViewDiagram">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572caeb520c647e2e6e352e8/1462546101367/download.png">
</div>
<!-- Desktop View -->
<section>
<div id="leftWrapper">
<div class="HybridDiagram">
<!-- HOVER TO REVEAL TEXT -->
<div id="assodiv">
<img id="asso" src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
</div>
<img id="staff" src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
<img id="client" src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png">
</div>
</div>
<div id="rightWrapper">
<div id="assotxt_target"></div>
<div class="diagramTextWrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget sapien sed risus suscipit cursus. Quisque iaculis facilisis lacinia. Mauris euismod pellentesque tellus sit amet mollis. Nulla a scelerisque turpis, in gravida enim. Pellentesque sagittis
faucibus elit, nec lobortis augue fringilla sed. Donec aliquam, mi in varius interdum, ante metus facilisis urna, in faucibus erat ex nec lectus. Cras tempus tincidunt purus, eu vehicula ante. Duis cursus vestibulum lorem.
Blue Button
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget sapien sed risus suscipit cursus. Quisque iaculis facilisis lacinia. Mauris euismod pellentesque tellus sit amet mollis. Nulla a scelerisque turpis, in gravida enim. Pellentesque sagittis
faucibus elit, nec lobortis augue fringilla sed. Donec aliquam, mi in varius interdum, ante metus facilisis urna, in faucibus erat ex nec lectus. Cras tempus tincidunt purus, eu vehicula ante. Duis cursus vestibulum lorem.
Blue Button
</p>
<!-- HOVER SHOULD REVEAL THS TEXT -->
<div id="assotxt">
This should appear on top of existing text inside rightWrapper.
</div>
</div>
</div>
</section>

#assotxt is not a sibling of #assodiv; also :hover should be applied at .mobileViewDiagram element? You can use :hover:after at .mobileViewDiagram, with content set to text to be displayed. Use top, left properties to render text at appropriate position in viewport.
.mobileViewDiagram:hover:after {
display: block !important;
background-color: white;
content:"This should appear on top of existing text inside rightWrapper.";
position:absolute; /* use `top`, `left`, `right` to set position of `content` */
}
jsfiddle https://jsfiddle.net/vhswx2jg/2/

jQuery slider not going to beginning

I'm working on a little jQuery widget to add to my portfolio/knowledge base. The widget works, and cycles through 5 slides, however, it does not loop back around to slide 1 as it should. It only advances to a blank slide, and the page requires refreshing to move back or forward again. I am a Javascript/jQuery beginner, so I'm sure I'm missing something simple, but I can't figure it out for the life of me. Any assistance is greatly appreciated.
//(document).ready(); makes sure that all elements on the page are
//loaded before loading the script
$(document).ready(function() {
//alert('Doc is loaded');
//specifies speed to change from image to image, in ms
var speed = 500;
//specifies auto slider option
var autoswitch = true;
//Autoslider speed
var autoswitch_speed = 4000;
//Add initial active class
$('.slide').first().addClass('active');
//Hide all slides
$('.slide').hide();
//Show first slide
$('.active').show();
$('#next').on('click', function() {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldactive').is('slider:last-child')) {
//alert('true');
$('.slide').first().addClass('active');
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
});
$('#prev').on('click', function() {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldactive').is(':first-child')) {
$('.slide').last().addClass('active');
} else {
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
});
});
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
font-size: 14px;
color: #fff;
background: #333;
line-height: 1.6em;
}
a {
color: #fff;
text-decoration: none;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
#container {
width: 980px;
margin: 40px auto;
overflow: hidden;
}
#slider {
width: 940px;
height: 350px;
position: relative;
overflow: hidden;
float: left;
padding: 3px;
border: #666 solid 2px;
border-radius: 5px;
}
#slider img {
width: 940px;
height: 350px;
}
.slide {
position: absolute;
}
.slide-copy {
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
background: 7f7f7f;
background: rgba(0, 0, 0, 0.5);
}
#prev,
#next {
float: left;
margin-top: 130px;
cursor: pointer;
position: relative;
z-index: 100;
}
#prev {
margin-right: -45px;
}
#next {
margin-left: -45px;
}
<!DOCTYPE html>
<html>
<head>
<title>jQuery Content Slider</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="container">
<header>
<h1>jQuery Content Slider</h1>
</header>
<img src="img/arrow-left.png" alt="Prev" id="prev">
<div id="slider">
<div class="slide">
<div class="slide-copy">
<h2>Slider One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="img/slide1.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="img/slide2.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="img/slide3.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="img/slide4.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Five</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="img/slide5.jpg">
</div>
</div>
<img src="img/arrow-right.png" alt="Next" id="next">
</div>
</body>
</html>

var cur = 0, // Start Slide Index. We'll use ++cur to increment index
pau = 2000, // Pause Time (ms)
fad = 500, // Fade Time (ms)
$ga = $('#slider'), // Cache Gallery Element
$sl = $('> div', $ga), // Cache Slides Elements
tot = $sl.length, // We'll use cur%tot to reset to first slide
itv ; // Used to clear on mouseenter
$sl.hide().eq( cur ).show(); // Hide all Slides but desired one
function stopFn() { clearInterval(itv); }
function loopFn() { itv = setInterval(fadeFn, pau); }
function fadeFn() { $sl.fadeOut(fad).eq(++cur%tot).stop().fadeIn(fad); }
$ga.hover( stopFn, loopFn );
loopFn(); // Finally, Start
Add this code in the script. this will enable looping effect. Tried working with your code, but its a little bit complex for me. Try this method, this will work like a charm.
See the DEMO
See the snippet
//(document).ready(); makes sure that all elements on the page are
//loaded before loading the script
$(document).ready(function() {
//alert('Doc is loaded');
//specifies speed to change from image to image, in ms
var speed = 1000;
//specifies auto slider option
var autoswitch = true;
//Autoslider speed
var autoswitch_speed = 4000;
//Add initial active class
$('.slide').first().addClass('active');
//Hide all slides
$('.slide').hide();
//Show first slide
$('.active').show();
$('#next').on('click', function() {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldactive').is('slider:last-child')) {
//alert('true');
$('.slide').first().addClass('active');
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
});
$('#prev').on('click', function() {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldactive').is(':first-child')) {
$('.slide').last().addClass('active');
} else {
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
});
});
var cur = 0, // Start Slide Index. We'll use ++cur to increment index
pau = 1000, // Pause Time (ms)
fad = 500, // Fade Time (ms)
$ga = $('#slider'), // Cache Gallery Element
$sl = $('> div', $ga), // Cache Slides Elements
tot = $sl.length, // We'll use cur%tot to reset to first slide
itv; // Used to clear on mouseenter
$sl.hide().eq(cur).show(); // Hide all Slides but desired one
function stopFn() {
clearInterval(itv);
}
function loopFn() {
itv = setInterval(fadeFn, pau);
}
function fadeFn() {
$sl.fadeOut(fad).eq(++cur % tot).stop().fadeIn(fad);
}
$ga.hover(stopFn, loopFn);
loopFn(); // Finally, Start
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
font-size: 14px;
color: #fff;
background: #333;
line-height: 1.6em;
}
a {
color: #fff;
text-decoration: none;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
#container {
width: 980px;
margin: 40px auto;
overflow: hidden;
}
#slider {
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
float: left;
padding: 3px;
border: #666 solid 2px;
border-radius: 5px;
}
#slider img {
width: 500px;
height: 300px;
}
.slide {
position: absolute;
}
.slide-copy {
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
background: 7f7f7f;
background: rgba(0, 0, 0, 0.5);
}
#prev,
#next {
float: left;
margin-top: 130px;
cursor: pointer;
position: relative;
z-index: 100;
}
#prev {
margin-right: -45px;
}
#next {
margin-left: -45px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div id="container">
<header>
<h1>jQuery Content Slider</h1>
</header>
<img src="http://leedspromoproducts.com/templates//img/thumbnails_prev_button.png" alt="Prev" id="prev">
<div id="slider">
<div class="slide">
<div class="slide-copy">
<h2>Slider One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="http://www.vectordiary.com/isd_premium/048-hot-air-balloon/hot-air-balloon.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="http://www.moneyindices.com/admin/upload/50193693.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="http://images.china.cn/attachement/jpg/site1007/20110808/000cf1a48f870fa9c75c55.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="http://cdn.allsteamboat.com/images/content/5418_gBVhd_Hot_Air_Balloon_Rodeo_in_Steamboat_Springs_md.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Five</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="http://www.moneyindices.com/admin/upload/50193693.jpg">
</div>
</div>
<img src="http://thehaircraftersco.com/wp-content/uploads/2015/10/next-button.png" alt="Next" id="next">
</div>
</body>

Your operation has the wrong syntax, it should be "is(':last-child'))"
if($('.oldActive').is(':last-child')){
//alert('true');
$('.slide').first().addClass('active');
} else {
$('.oldActive').next().addClass('active');
}

You can rewrite your code to use function for easy understanding and reading.
var hwSlideSpeed = 700;
var slideNum = 0;
slideCount = $("#slider .slide").size(); //Count of slides
var animSlide = function(arrow){
$('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
if(arrow == "next"){
if(slideNum == (slideCount-1)){slideNum=0;}
else{slideNum++}
}
else if(arrow == "prew")
{
if(slideNum == 0){slideNum=slideCount-1;}
else{slideNum-=1}
}
else{
slideNum = arrow;
}
$('.slide').eq(slideNum).fadeIn(hwSlideSpeed);
}
$('#nextbutton').click(function(){
animSlide("next");
})
$('#prewbutton').click(function(){
animSlide("prew");
})
Hope it helps