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.
Related
I have the following code:
<div id="box">
<div class="wrapper">
<div class="testimonial-container" id="testimonial-container">
<div id="testimonial1" class="active">
<img src="" />
</div>
</div>
<button id="prev" onclick="prev()"><</button>
<button id="next" onclick="next()">></button>
</div>
</div>
#box {
position: relative;
width: auto;
left: auto;
margin: auto;
max-width: 70em;
min-height: 26em;
max-height: 70em;
}
.img-con {
position: absolute;
}
.img-con img {
height: 1px;
width: 1px;
}
.testimonial-container {
margin-top: 1%;
width: 85%;
height: 100%;
position: relative;
margin: auto;
padding: 1.8em 1.2em;
}
.testimonial-container p {
color: #8c8c90;
text-align: center;
font-size: 0.9em;
line-height: 2em;
letter-spacing: 0.05em;
}
.testimonial-container img {
display: block;
margin: 1.8em auto 1.25em auto;
border-radius: 50%;
width: 4.4em;
}
.testimonial-container h3 {
color: #2d3d67;
font-size: 1em;
text-align: center;
}
.testimonial-container h6 {
color: #bcc4da;
font-size: 0.9em;
letter-spacing: 0.03em;
font-weight: 400;
text-align: center;
}
.wrapper button {
font-size: 1.8em;
color: #0a69ed;
height: 2.2em;
width: 2.2em;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
background-color: #ffffff;
border: none;
border-radius: 50%;
-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
cursor: pointer;
}
button#next {
right: -1.1em;
}
button#prev {
left: -1.1em;
}
#media screen and (max-width: 650px) {
.wrapper {
font-size: 14px;
}
}
window.addEventListener("load", function() {
document.getElementById("loader").style.display = "none";
document.getElementById("box").style.display = "block";
});
const testimonials = [
{
name: "example",
job: "example",
image: "https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry",
testimonial:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et erat arcu. Quisque mi quam, accumsan non sagittis vitae, sodales ut elit. Donec a magna ut leo eleifend dapibus. Curabitur semper placerat fringilla. Suspendisse potenti. Suspendisse pretium elit vel vulputate varius. "
},
{
name: "example",
job: "example",
image: "https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry",
testimonial:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et erat arcu. Quisque mi quam, accumsan non sagittis vitae, sodales ut elit. Donec a magna ut leo eleifend dapibus. Curabitur semper placerat fringilla. Suspendisse potenti. Suspendisse pretium elit vel vulputate varius. "
},
{
name: "example",
job: "example",
image: "https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry",
testimonial:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et erat arcu. Quisque mi quam, accumsan non sagittis vitae, sodales ut elit. Donec a magna ut leo eleifend dapibus. Curabitur semper placerat fringilla. Suspendisse potenti. Suspendisse pretium elit vel vulputate varius. "
}
];
let f = 0; // current slide
let j = testimonials.length; // total slides
let testimonialContainer = document.getElementById("testimonial-container");
function next() {
f = (j + f + 1) % j;
displayTestimonial();
}
function prev() {
f = (j + f - 1) % j;
displayTestimonial();
}
let displayTestimonial = () => {
testimonialContainer.innerHTML = `
<p>${testimonials[f].testimonial}</p>
<img src=${testimonials[f].image}></img>
<h3>${testimonials[f].name}</h3>
<h6>${testimonials[f].job}</h6>
`;
};
window.onload = displayTestimonial;
This outputs:
The only problem is that for some reason, it cuts out the button at the end.
Expected Output:
How can I fix this? Thanks
I tried to change the width of the #box but it did not affect anything. Im pretty sure the problem is coming from #box but I'm not sure which part directly affects it, since doing width: auto wont change anything either.
I have solved this problem, you can take a look at my version
https://codepen.io/bozzhik/pen/bGKReqm
I tried to wrap it all in a container block and set the margins 50px
<div id="container"</div>
and properties for this block
#container { margin: 50px;}
It turned out what I needed (this is my first help on this site)
I have a <p> element inside a parent <div> container. The parent container is sized with width and height as a % of the viewport. Upon window-resize, I want to decrement the font-size of <p> until the height of the <p> element is less than 40% of the viewport height, which means the text will fit nicely into the parent container.
What's wrong with my function below?
The error I am getting is 'maximum call stack size exceeded'. I know that must be because the base case is not evaluating to true. However I don't understand why not.
I've run these various tests to try to debug without success:
Does adjusting font-size through my fontSize variable work: yes
Does adjusting font-size impact height of <p> element: yes
Can I adjust font-size multiple times and see decreased <p> element size in the console: yes
The function:
<script>
const pElement = document.getElementById('actualAboutTxt');
const style = window.getComputedStyle(pElement, null).getPropertyValue('font-size');
var fontSize = parseFloat(style);
function decrementFont () {
if(pElement.scrollHeight <= (window.innerHeight * 0.4)) {
// do nothing
} else {
pElement.style.fontSize = (fontSize - 1) + "px";
decrementFont();
};
};
addEventListener("load", () => {
decrementFont();
});
addEventListener("resize", () => {
decrementFont();
});
</script>
EDIT 1: Update with the HTML and CSS (anonymised some urls):
<section id="mainSection">
<div class="backBtnDiv">
<button id="backToFilter" onclick="window.location.href='<link to my url>';">↺ back to filter</button>
</div>
<video id="background-video" autoplay loop muted poster="<link to my poster img>">
<source src="<link to my video>">
</video>
<div id="aboutText">
<h1>Practice makes perfect</h1>
<p id="actualAboutTxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices enim id leo commodo, ac commodo dolor laoreet. Quisque eget facilisis dui. Ut sit amet dui ultrices, ultrices eros ut, auctor purus. Nulla bibendum velit in rhoncus rutrum.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices enim id leo commodo, ac commodo dolor laoreet. Quisque eget facilisis dui. Ut sit amet dui ultrices, ultrices eros ut, auctor purus. Nulla bibendum velit in rhoncus rutrum.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultrices enim id leo commodo, ac commodo dolor laoreet. Quisque eget facilisis dui. Ut sit amet dui ultrices, ultrices eros ut, auctor purus. Nulla bibendum velit in rhoncus rutrum.</p>
<button id="firstBtn" onclick="window.location.href='<link to myurl';">Start practicing</button>
</div>
</section>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Archivo', arial;
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
#mainSection {
position : relative;
width: 100vw;
height: 90vh;
overflow: hidden;
}
.backBtnDiv {
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
position: absolute;
top: 0;
display: flex;
justify-content: center;
}
#backToFilter {
background: transparent;
border: none;
font-size: 12px;
color: white;
}
#backToFilter:hover {
cursor: pointer;
}
#aboutText {
position: absolute;
left: 5%;
top: 50%;
transform: translateY(-50%);
background-color: rgba(255, 255, 255, 0.5);
height: 60%;
width: 40%;
border-radius: 10px;
}
h1 {
margin-top: 5%;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
}
#actualAboutTxt {
margin-bottom: 5%;
margin-left: 5%;
margin-right: 5%;
font-size: 15px;
}
#firstBtn {
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
height: 7.5vh;
width: 75%;
border-radius: 5px;
border-color: transparent;
background-color: rgb(77, 5, 232);
color: white;
font-size: 17px;
font-weight: bold;
}
#firstBtn:hover {
cursor: pointer;
background-color: #9bc969;
}
#background-video {
object-fit: cover;
object-position: center;
height: 100%;
width: 100%;
position: absolute;
left: 0;
right: 0;
z-index: -1;
}
#media only screen and (max-width: 1000px) {
#aboutText {
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
height: 80%;
width: 80%;
border-radius: 5px;
}
}
EDIT 2: A solution that kind of works:
Use a double recursive function to keep the <p> element between two vh values. Decrement font if the element is too high, increment font if the element is not heigh enough.
Code:
<script>
const pElement = document.getElementById('actualAboutTxt');
const style = window.getComputedStyle(pElement, null).getPropertyValue('font-size');
var fontSize = parseFloat(style);
function decrementFont () {
if(pElement.scrollHeight > (window.innerHeight * 0.30) && pElement.scrollHeight < (window.innerHeight * 0.42)) {
return;
} else if (pElement.scrollHeight > (window.innerHeight * 0.42)) {
pElement.style.fontSize = (--fontSize) + "px";
decrementFont();
} else if (pElement.scrollHeight < (window.innerHeight * 0.35)) {
pElement.style.fontSize = (++fontSize) + "px";
decrementFont();
};
};
addEventListener("load", () => {
decrementFont();
});
addEventListener("resize", () => {
decrementFont();
});
</script>
This snippet is an example of non-recursive solution as asked for by the OP. There is no HTML (at present), so it will not work.
Additionally, the code may not ever satisfy the condition, so the loop may run forever.
Using recursion for an non-recursive task is not ideal. You are creating an unnecessary stack when you use recursion here.
const pElement = document.getElementById('actualAboutTxt');
const style = window.getComputedStyle(pElement, null).getPropertyValue('font-size');
var fontSize = parseFloat(style);
function decrementFont()
{
let fontOK = false;
do
{
if (pElement.scrollHeight > (window.innerHeight * 0.30) && pElement.scrollHeight < (window.innerHeight * 0.42))
{
fontOK = true;
}
else if (pElement.scrollHeight > (window.innerHeight * 0.42))
{
pElement.style.fontSize = (--fontSize) + "px";
}
else if (pElement.scrollHeight < (window.innerHeight * 0.35))
{
pElement.style.fontSize = (++fontSize) + "px";
}
}
while(!fontOK);
}
addEventListener("load", () => {
decrementFont();
});
addEventListener("resize", () => {
decrementFont();
});
So as I understand here is a problem.
if(pElement.scrollHeight <= (window.innerHeight * 0.4)) {
// do nothing
}
so if height will be less or equal to whatever you want then this recursion should end yes? this is a point of recursion and if you will not write a break; it will continue so instead of writing // do nothing comment you should write a break; try this end and see if it works.
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>
-"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>
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/