Show div in another wrapper while hovering in another - javascript

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/

Related

Testimonial slider - css

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)

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>

CSS transition works only if Chrome Dev Tools open

I've run into a bizarre anomaly with CSS transitions. The transition is completely ignored on load; but if I open up Chrome Dev Tools and navigate the DOM tree to #popup > div > img and select it, then click on the main image, the transition becomes functional, and remains so even if Dev Tools is closed.
My suspicion is that I've made some weird mistake that I can't see. But when opening Dev Tools to try to probe my CSS makes it suddenly start working, it's a bit hard to debug!
Tested on Chrome 66.0.3359.139. The behaviour is the same in Codepen and as a stand-alone HTML file.
My intention is for clicking on the small image to show a larger one. With the popup visible, clicking anywhere will dismiss that popup. Both showing and dismissing the popup should transition smoothly; for this demo, that's an opacity change followed by a change to the image's top (making it scroll in from above the screen). The popup is controlled by setting a class on the HTML element.
document.getElementById("clickme").onclick = function(ev) {
document.documentElement.classList.add("show-modal");
ev.stopPropagation();
}
document.documentElement.onclick = function() {
this.classList.remove("show-modal");
}
#clickme {
max-height: 300px;
cursor: pointer;
margin: 20px;
border: 1px solid #ddd;
border-radius: .25rem;
padding: 10px;
}
#popup {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0px;
z-index: 2000;
padding-top: 30px;
display: none;
}
.show-modal #popup {
display: block;
}
#popup img {
display: block;
margin: auto;
position: relative;
top: -500px;
opacity: 0;
transition: top .5s 1s, opacity .25s;
}
.show-modal #popup img {
top: 0px;
opacity: 1;
}
#popup>div {
margin: auto;
}
<p><img id=clickme src="http://devicatoutlet.com/img/birthday.png"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod, ipsum at porttitor condimentum, turpis ex porta erat, et laoreet purus dui a quam. Vestibulum eget consequat neque, in faucibus turpis. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Praesent interdum sit amet odio eu consequat. Aliquam eget scelerisque odio. Suspendisse potenti. Aenean at risus a dolor facilisis dignissim. Sed et volutpat eros. Nam eget imperdiet lacus. Mauris imperdiet rutrum efficitur.</p>
<div id="popup">
<div><img src="http://devicatoutlet.com/img/birthday.png"></div>
</div>
View on CodePen
CSS can't animate between display: none; and display: block; (of the #popup element). I changed to visibility for #popup.
You can see the new code here: https://codepen.io/anon/pen/KRoPwM. Hope this helps.

Create new Isotope item and insert foreign content

I am currently working on a website in Wordpress. I have reached a point that is outside my understanding. I am using Isotope to create and filter my work on the main side of my website. Now, I would like to show a quick preview of the work if the viewer clicks on it. I thought about to insert a new isotope item after the selected work, but my grid falls apart every time I try or the work appears behind the grid.
<h1>Isotope - packery layout mode</h1>
<div class="container">
<div class="thumbs masonry">
<div class="project small"></div>
<div class="project small "></div>
<div class="project small"></div>
<div class="project small second">
<div class="title">Project 02</div>
<div class="slide-show"><ul class="slides">
<li class="flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; display: list-item;"><img src="slide_01.jpg"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative;"><img src="slide_02.jpg"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative;"><img src="slide_03.jpg"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative;"><img src="slide_04.jpg"></li>
</ul></div>
<div class="description">orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam</div>
</div>
<div class="project small"></div>
<div class="project small"></div>
<div class="project small"></div>
<div class="project small"></div>
<div class="project small"></div>
<div class="project small"></div>
<div class="project small">hello</div>
</div>
</div>
my css:
.thumbs.masonry:after {
content: '';
display: block;
clear: both;
}
#content .project.small{
width: 22.7%;
height: auto;
display: block;
margin: 0 2% 20px 0;
padding-bottom: 0;
cursor: pointer;
float: left;
}
#content .project.small.width2{
width: 100%;
height: 300px;
background-color: red;
position: absolute;
left: 0;
}
#content .project.small img{
width: 100%;
height: auto;
}
#content .project.small .title {
display: none;
color: #FFF;
position: absolute;
bottom: 0;
left: 0;
padding: 0;
font-size: 0.917em;
width: 100%;
font-size: 11px;
line-height: 1.1em;
background: transparent url(images/black_alpha_50.png);
}
#content .project.small.selected .title{
zoom: 1;
filter: alpha(opacity=100);
opacity: 1;
display: block;
visibility: visible;
}
#content .project.small .title span{
padding: 12px 17px 12px 17px;
display: block;
}
javascript:
var container = jQuery('.thumbs.masonry');
var colW = container.width() * 0.2475;
container.isotope({
animationEngine: 'jquery',
resizable: false,
layoutMode: 'packery',
packery: {
//columnWidth: colW
}
and
function gridResize() {
// update columnWidth on window resize
var container = jQuery('.thumbs.masonry');
var colW = container.width() * 0.2475;
container.isotope({
resizable: false,
packery: {
//columnWidth: colW
}
});
}
I already tried it out with codepen.io: http://codepen.io/anon/pen/ogwEJO
The red square would be the selected work in big. That one works.
I tried to do exactly the same in Wordpress but the red square always disappears.
What I would like help getting to work is implementing my idea. Maybe there is another solution.
Can anyone help me out with this ?
I am really grateful for any advice.
Thanks in advance.
brig
Use layout as an option after you click on an element and you apply a class with the new size, there is an example here: http://isotope.metafizzy.co/methods.html#layout

Categories

Resources