Expanding Image Grid Issues - javascript

Goal: Attempting to incorporate an expanding image grid into my site, with 3 columns and 4 rows. I am working with an area of 810w x 1050h.
Issues: I can't seem to get the 3 x 4 grid to render correctly. You can see what I mean by this here: http://rthhockey.com/coaching2 I've played minimum/maximum heights to no avail.
Things I have tried: I have distributed each link by 33.3333....% Nothing seems to be working. I've been playing with the code for about 3 days now and I don't want to make things worse. I'm sure one of you guys can catch what I'm missing fairly quickly.
This is the CodePen where I found this grid: https://codepen.io/DanBoulet/pen/YXQBbZ
Any and all assistance would be greatly appreciated. Thanks for your time.
CSS
body {
background-color: #fff;
color: #ffffff;
font-family: open sans;
font-size: 100%;
font-weight: 400;
line-height: 1.5;
margin: 0 auto;
max-width: 100%;
height: 1050px;
max-height: 1050px;
overflow-y: scroll;
padding: 5px;
}
.expanding-grid {
position: relative;
width: 100%;
max-width: 100%;
}
.expanding-grid .links {
display: block;
margin: 0 -1em;
overflow: hidden;
padding: 5px;
}
.expanding-grid .links > li {
box-sizing: border-box;
float: left;
padding: 1em;
}
.expanding-grid .links > li a {
background: #ff2200;
color: #fff;
display: block;
font-size: 24px;
line-height: 1;
padding: 25% 1em;
position: relative;
width: 250px;
height: 150px;
text-align: center;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.expanding-grid .links > li a:hover {
background: #ffb733;
}
.expanding-grid .links > li a.active {
background: #cc8400;
}
.expanding-grid .links > li a.active:after {
background-color: transparent;
border-bottom: 0.375em solid #888;
border-left: 0.375em solid transparent;
border-right: 0.375em solid transparent;
bottom: -0.5em;
content: '';
height: 0;
left: 50%;
margin-left: -0.375em;
position: absolute;
width: 0;
}
#media only screen and (max-width: 810px) {
.expanding-grid .links > li {
width: 50%;
}
.expanding-grid .links > li:nth-of-type(2n+1) {
clear: left;
}
}
#media only screen and (min-width: 40em) and (max-width: 810px) {
.expanding-grid .links > li {
width: 33.3333333333%;
}
.expanding-grid .links > li:nth-of-type(3n+1) {
clear: left;
}
}
#media only screen and (min-width: 810px) {
.expanding-grid .links > li {
width: 33.3333333333%;
}
.expanding-grid .links > li:nth-of-type(4n+1) {
clear: left;
}
}
.expanding-grid .spacer {
background-color: #ff2200;
clear: both;
display: block;
margin: 0 1em;
}
.expanding-grid .expanding-container {
clear: both;
display: none;
overflow: hidden;
width: 100%;
}
.expanding-grid .expanding-container.expanded, .expanding-grid .expanding-container:target {
display: block;
}
.expanding-grid .hentry {
background: #494949;
box-sizing: border-box;
clear: both;
color: #fff;
min-height: 4em;
overflow: hidden;
padding: 1em;
width: 100%;
}
.expanding-grid .hentry .entry-image {
box-sizing: border-box;
float: right;
margin-left: 1em;
padding: 0.25em 0 0.52em 1em;
text-align: center;
width: 50%;
}
.expanding-grid .hentry .entry-title {
font-size: 28px;
}
.expanding-grid .close-button {
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNLjcuN2wxOCAxOG0tMTggMGwxOC0xOCIvPjwvc3ZnPg==) no-repeat scroll 50% 50% transparent;
color: #fff;
display: inline-block;
height: 20px;
line-height: 1;
overflow: hidden;
padding: 1.5em 2em;
text-decoration: none;
text-indent: 5em;
white-space: nowrap;
width: 20px;
will-change: opacity;
z-index: 5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.expanding-grid .close-button.active {
transition: opacity 0.2s;
}
.expanding-grid .close-button:hover {
opacity: 0.5;
}
.img-placeholder {
background: #ffffff;
color: #fff;
font-size: 4em;
font-weight: 300;
line-height: 1;
width: 400px;
height: 350px;
padding: 5px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
HTML
<div class="expanding-grid">
<ul class="links">
<li>Jackson 5</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
<div id="section1" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Jackson 5</h1>
<div class="entry-image"><div class="img-placeholder"><img src="https://i.imgur.com/Pa3wzWI.png?1"></div></div>
<p>- 3 Skaters Run This Drill At Once<br>- F1 Skates Top Of Circle And Takes Shot On Goal<br>- F2 Skates Full Circle Without Puck<br>- F3 Skates Inside/Out Pattern Around Face-Off Dot With Puck, Breaks On Goal For Shot<br>- F1 Picks Up Puck Below Far Circle, Matches Timing Of F2 Through Neutral Zone And Dishes Pass To F2<br>-F2 Breaks In On Goal For Shot While F1 Crashes Net For Rebound</p>
</article>
</div>
<div id="section2" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">2</div></div>
<p>- 3 Skaters Run This Drill At Once<br>- F1 Skates Top Of Circle And Takes Shot On Goal<br>- F2 Skates Full Circle Without Puck</p>
</article>
</div>
<div id="section3" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">3</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section4" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">4</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
<div id="section5" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">5</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section6" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">6</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
<div id="section7" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">7</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section8" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">8</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
<div id="section9" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">9</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section10" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">10</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
<div id="section11" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">11</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section12" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">12</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
</div>
Script
var getLastSiblingInRow = function (element) {
var candidate = element,
elementTop = element.offsetTop;
while (candidate.nextElementSibling !== null) {
if (candidate.nextElementSibling.offsetTop > elementTop) {
return candidate;
}
candidate = candidate.nextElementSibling;
}
return candidate;
};
var calculatePageScrollDistance = function (top, bottom) {
var windowScrollDistance = $(window).scrollTop(),
windowHeight = $(window).height(),
scrollDistanceToTop,
scrollDistanceToBottom;
if (windowScrollDistance >= top) {
return top - windowScrollDistance;
}
else if ((windowScrollDistance + windowHeight) >= bottom) {
return 0;
}
else {
scrollDistanceToTop = top - windowScrollDistance;
// Find the distance we need to scroll to reveal the entire section.
scrollDistanceToBottom = bottom - (windowScrollDistance + windowHeight);
return Math.min(scrollDistanceToTop, scrollDistanceToBottom);
}
};
var expandingGrid = function (context, options) {
var defaults = {
animationDuration: 250,
linksSelector: '.links a',
expandingAreaSelector: '.expanding-container',
closeButtonMarkup: 'Close',
spacerMarkup: '<span class="spacer" aria-hidden="true"/>',
elementActiveClass: 'active',
elementExpandedClass: 'expanded',
onExpandBefore: false,
onExpandAfter: false
};
var settings = $.extend({}, defaults, options);
var isExpanded = false;
var activeLink = false;
var activeExpandedArea = false;
var activeExpandedAreaTop = false;
var activeExpandedAreaHeight = false;
var lastItemInActiveRow = false;
var activeRowChanged = false;
var checkExpandedAreaResize = false;
var $links = $(settings.linksSelector, context);
var $expandingAreas = $(settings.expandingAreaSelector, context);
var $closeButton = $(settings.closeButtonMarkup);
var $spacer = $(settings.spacerMarkup);
var $secondarySpacer = $spacer.clone();
var scrollSectionIntoView = function (top, bottom, duration, callback) {
var animate;
var scroll = 0;
var distance = calculatePageScrollDistance(top, bottom);
var windowScrollDistance = $(window).scrollTop();
var timeLeft;
duration = (typeof duration === 'undefined') ? settings.animationDuration : duration;
timeLeft = duration;
var start = new Date().getTime();
var last = start;
var tick = function() {
timeLeft = Math.max(duration - (new Date() - start), 0);
var x = (timeLeft === 0 || distance === 0) ? 0 : ((new Date() - last) / timeLeft * distance);
var diff = (distance > 0 ? Math.min(x, distance) : Math.max(x, distance));
distance = distance - diff;
scroll += diff;
window.scrollTo(0, windowScrollDistance + scroll);
last = new Date().getTime();
if (last - start <= duration) {
animate = (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
}
else {
if (typeof callback === 'function') {
callback();
}
}
};
tick();
};
$links.each(function () {
var $this = $(this);
var targetId = $this.attr('href').match(/#([^\?]+)/)[1];
var target = document.getElementById(targetId);
if (target) {
$this.click(function (event) {
var clickedLink = this;
var scrollTargetOffset;
var closeButtonAnimationDelay;
event.preventDefault();
// Is this link already expanded?
if (isExpanded && activeLink === clickedLink) {
$closeButton.click();
}
else {
$links.removeClass(settings.elementActiveClass).filter($this).addClass(settings.elementActiveClass).parent('li').each(function () {
var lastSibling = getLastSiblingInRow(this);
activeRowChanged = lastSibling !== lastItemInActiveRow;
if (activeRowChanged) {
lastItemInActiveRow = lastSibling;
}
if (isExpanded && activeRowChanged) {
$secondarySpacer.height($spacer.height());
$spacer.height(0).replaceWith($secondarySpacer);
}
$(lastItemInActiveRow).after($spacer);
});
if (isExpanded && activeRowChanged) {
$secondarySpacer.animate({height: 0}, settings.animationDuration, function () {
$(this).detach();
});
$closeButton.removeClass(settings.elementActiveClass).hide();
}
scrollTargetOffset = ($secondarySpacer.position().top < $spacer.position().top ? $secondarySpacer.height() : 0);
activeExpandedAreaTop = ($spacer.position().top - scrollTargetOffset);
$expandingAreas.removeClass(settings.elementExpandedClass).hide().filter(target).each(function () {
var $this = $(this);
var autoHeight = $this.height();
var autoOuterHeight = $this.outerHeight();
var initialHeight = (isExpanded && activeExpandedAreaHeight && (activeRowChanged === false)) ? activeExpandedAreaHeight : 0;
stopExpandedAreaMonitor();
$spacer.animate({height: autoHeight + 'px'}, settings.animationDuration);
$this.css({
height: initialHeight + 'px',
position: 'absolute',
left: 0,
top: $spacer.position().top + 'px'
}).show(0, function () {
if (typeof settings.onExpandBefore === 'function') {
settings.onExpandBefore.call(this);
}
}).animate({
height: autoHeight + 'px',
top: activeExpandedAreaTop + 'px'
}, settings.animationDuration, function () {
$this.css({height: 'auto'}).addClass(settings.elementExpandedClass);
activeExpandedAreaHeight = $this.height();
checkExpandedAreaResize = setInterval(function () {
var activeExpandedAreaNewHeight = $this.height();
if (activeExpandedAreaNewHeight !== activeExpandedAreaHeight) {
activeExpandedAreaHeight = activeExpandedAreaNewHeight;
syncExpandedAreaWithSpacer();
}
}, 1000);
if (typeof settings.onExpandAfter === 'function') {
settings.onExpandAfter.call(this);
}
});
var scrollTargetTop = $(clickedLink).offset().top - scrollTargetOffset;
var scrollTargetBottom = $this.offset().top + autoOuterHeight + 20 - scrollTargetOffset;
scrollSectionIntoView(scrollTargetTop, scrollTargetBottom);
});
closeButtonAnimationDelay = (isExpanded && activeRowChanged && ($this.parent().index() > $(activeLink).parent().index())) ? settings.animationDuration : (settings.animationDuration / 4);
$closeButton.css({
position: 'absolute',
right: 0,
top: activeExpandedAreaTop + 'px'
}).delay(closeButtonAnimationDelay).fadeIn(settings.animationDuration, function () {
$(this).addClass(settings.elementActiveClass);
});
activeLink = this;
activeExpandedArea = target;
isExpanded = true;
}
});
}
});
$closeButton.appendTo(context).hide().click(function (event) {
var $activeLink = $(activeLink);
var activeLinkTopOffset = $activeLink.offset().top;
var activeLinkBottomOffset = activeLinkTopOffset + $activeLink.outerHeight();
event.preventDefault();
$links.removeClass(settings.elementActiveClass);
$expandingAreas.slideUp(settings.animationDuration).removeClass(settings.elementExpandedClass);
$closeButton.removeClass('active').hide();
$spacer.animate({height: 0}, settings.animationDuration, function () {
$spacer.detach();
});
scrollSectionIntoView(activeLinkTopOffset, activeLinkBottomOffset);
stopExpandedAreaMonitor();
isExpanded = false;
activeLink = false;
activeExpandedArea = false;
});
var stopExpandedAreaMonitor = function () {
if (checkExpandedAreaResize) {
clearInterval(checkExpandedAreaResize);
}
};
var syncExpandedAreaWithSpacer = function () {
if (activeExpandedArea && isExpanded) {
$spacer.height($(activeExpandedArea).height());
activeExpandedAreaTop = $spacer.position().top;
$closeButton.add(activeExpandedArea).css({top: activeExpandedAreaTop + 'px'});
}
};
var positionSpacer = function () {
var lastSibling;
if (activeLink && lastItemInActiveRow && isExpanded) {
$spacer.detach();
lastSibling = getLastSiblingInRow($(activeLink).parent()[0]);
if (lastItemInActiveRow !== lastSibling) {
console.log(lastSibling);
lastItemInActiveRow = lastSibling;
}
$(lastItemInActiveRow).after($spacer);
}
};
$(window).resize(function () {
if (isExpanded) {
positionSpacer();
syncExpandedAreaWithSpacer();
}
});
};
// Create the jQuery plugin.
$.fn.expandingGrid = function (options) {
return this.each(function () {
expandingGrid(this, options);
});
};
})(jQuery, window, document);
$(document).ready(function () {
$('.expanding-grid').expandingGrid();
});

This can be done very easily using CSS grid. W3 Schools has a great, easy to follow example that can be found here.
Here is a 3x4 responsive grid using using the linked code:
.grid-container {
max-width: 810px;
max-height: 1050px;
display: grid;
grid-template-columns: auto auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
</div>
I've set the grid container to allow a max width of 810 px and a max height of 1050 px, as you specified in your post. Just add your content for each grid item inside the corresponding div tag, and you're set!

Related

Copying text from accordion triggers click button

Hello I have this siple accordion, and I have an issue, that whenever i copy text from accordion, click event listener triggers and closes the accordion.
I would like to make it work without using jQuery
How could I fix it?
and how would I make it , so when i click somewhere else than on .question / .answer it would close automaticaly? i tried adding event listener to window, but after a long time of not figuring out how to makeit work I gave up.
here is my codepen : https://codepen.io/drabfi/pen/LYrBxzWhttps://codepen.io/drabfi/pen/LYrBxzW
<div class="accordion">
<h2 class="accordion-title">Frequently asked questions</h2>
<div class="content-container active">
<div class="question">What is the return Policy</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Where can you find us</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Some other text</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
</div>
const accordion = document.querySelectorAll(".content-container");
for(let i=0;i<accordion.length;i++){
accordion[i].addEventListener("click", function (){
if(this.classList.contains("active")){
accordion.forEach((panel)=>panel.classList.remove("active"));
}else{
accordion.forEach((panel)=>panel.classList.remove("active"));
this.classList.add("active");
}
})
}
.accordion{
margin: 0 auto;
width: 60%;
border-color: #fff;
padding: 2rem;
border-radius: 30px;
&-title{
margin-bottom: 2rem;
text-align: center;
}
.content-container
.question{
padding: 1rem 0;
font-size: 22px;
cursor: pointer;
border-bottom: 1px solid #000;
position: relative;
&::after{
content: "+";
position: absolute;
right: -5px;
}
}
.answer{
padding-top: 1rem;
font-size: 22px;
line-height: 1.5;
width: 100%;
height: 0px;
overflow: hidden;
transition: all .5s;
}
}
// js styling link
.accordion .content-container.active{
.question{
&::after{
content: "-";
font-size: 2rem;
transition: .5s;
}
}
.answer{
height: 150px;
}
}
I would be very happy to see the solutions so I could move on from this spot. Thank you for any advices.
you need to learn a bit about event delegation...
const
accordion = document.querySelector('.accordion')
, accordionEl = accordion.querySelectorAll('.content-container')
;
accordion.onclick = ({target: elmAcc}) =>
{
if (!elmAcc.matches('.content-container > div.question')) return // select only this div
let elContainer = elmAcc.closest('.content-container')
if (elContainer.classList.toggle('active'))
accordionEl.forEach( panel => panel.classList.toggle('active', panel===elContainer))
}
// clicking outside will close accordion :
document.addEventListener('click', event =>
{
if (!accordion.contains(event.target))
accordionEl.forEach( panel => panel.classList.remove('active'))
});
.accordion {
margin : 0 auto;
width : 60%;
border-color : #fff;
padding : 2rem;
border-radius : 30px;
}
.accordion-title {
margin-bottom : 2rem;
text-align : center;
}
.accordion .content-container .question {
padding : 1rem 0;
font-size : 22px;
cursor : pointer;
border-bottom : 1px solid #000;
position : relative;
}
.accordion .content-container .question::after {
content : "+";
position : absolute;
right : -5px;
}
.accordion .answer {
padding-top : 1rem;
font-size : 22px;
line-height : 1.5;
width : 100%;
height : 0px;
overflow : hidden;
transition : all 0.5s;
}
.accordion .content-container.active .question::after {
content : "-";
font-size : 2rem;
transition : 0.5s;
}
.accordion .content-container.active .answer {
height : 150px;
}
<div class="accordion">
<h2 class="accordion-title">Frequently asked questions</h2>
<div class="content-container">
<div class="question">What is the return Policy</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Where can you find us</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Some other text</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
</div>

On which element should i apply transition?

I was creating a project in which i needed to show heading for a topic and when the mouse goes over it, it changes to information of that heading. I have managed to make it work however i don't want it to change instantly, i want to apply transition on it so it makes it more pleasing. The problem is i don't know which element to put it on. I tried to put it on all three but it didn't work. I would appreciate if someone helped me with it. Here's my code:
HTML
<div class="sop-container">
<div class="sop-body" onmouseover="showSop()" onmouseout="hideSop()">
<h1 id="sop-head">Lorem Ipsum</h1>
<p class="sop-p" id="sop-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, tempore laudantium maiores eligendi tempora ab repellat nam possimus sit molestiae cumque officiis corporis optio officia commodi consequatur aperiam quaerat odit.</p>
</div>
<div class="sop-img">
<img src="masks.jpg" alt="">
</div>
</div>
CSS
.sop-body{
flex: 1;
background-color: #EAC435;
transition: 3s ease;
}
.sop-body h1{
text-align: center;
margin-top:125px;
transition: 3s ease-in-out;
}
.sop-body p{
display: none;
margin:5%;
letter-spacing: 1px;
font-size: large;
margin-top: 80px ;
transition: 3s ease-in-out;
}
.sop-img{
flex: 1;
overflow-y: hidden;
}
Javascript (just in case)
var sopBody = document.getElementById("sop-p");
var sopHead = document.getElementById("sop-head")
function showSop(){
sopBody.style.display = "block"
sopHead.style.display = "none"
}
function hideSop(){
sopBody.style.display = "none"
sopHead.style.display = "block"
}
transition doesn't work on the display property. Just think for a moment about how could you render a partial display element. You can't.
Alternatively, you can use opacity here
var sopBody = document.getElementById("sop-p");
var sopHead = document.getElementById("sop-head")
function showSop() {
sopBody.style.opacity = "1"
sopHead.style.opacity = "0"
}
function hideSop() {
sopBody.style.opacity = "0"
sopHead.style.opacity = "1"
}
.sop-body {
flex: 1;
background-color: #EAC435;
}
.sop-body h1 {
text-align: center;
margin-top: 125px;
transition: 1s ease-in-out;
}
.sop-body p {
opacity: 0;
margin: 5%;
letter-spacing: 1px;
font-size: large;
margin-top: 80px;
transition: 1s ease-in-out;
}
.sop-img {
flex: 1;
overflow-y: hidden;
}
<div class="sop-container">
<div class="sop-body" onmouseover="showSop()" onmouseout="hideSop()">
<h1 id="sop-head">Lorem Ipsum</h1>
<p class="sop-p" id="sop-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, tempore laudantium maiores eligendi tempora ab repellat nam possimus sit molestiae cumque officiis corporis optio officia commodi consequatur aperiam quaerat odit.</p>
</div>
<div class="sop-img">
<img src="masks.jpg" alt="">
</div>
</div>

Changing the color of an element on every click (Vice-Versa)

Hey I am trying to change an elements background color to red when its beige and beige when its red. I've tried using the right if statement but i cant seem to find to solution. I would be super happy if someone helped me! Thanks.
HTML
<div id="first" class="firstdiv">
<h2>DenemeTahtası</h2>
<div>
<section id="lorem">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis sit dolor, soluta ab illum aperiam
quam! Eum, delectus aliquam ipsa perspiciatis modi perferendis laudantium aut vel, ut veniam quae
eligendi?
</section>
</div>
</div>
</body>
</html>
<script src="script.js"></script>
CSS
.firstdiv{
background-color: antiquewhite;
height: 50vh;
h2{
margin-left: 40%;
padding-top: 20px;
}
#lorem{
margin: 0 auto;
width: 65%;
margin-top: 25px;
text-align: center;
}
}
JS
let exp = document.querySelector("#lorem")
exp.style.backgroundColor = "beige"
exp.addEventListener("click", colorChange)
function colorChange() {
if (exp.style.backgroundColor = "beige") {
exp.style.backgroundColor = "red"
}
else if (exp.style.backgroundColor = "red") {
exp.style.backgroundColor == "beige"
}
}
It's very close to being correct. The thing to watch out for is the amount of equals signs.
When doing a comparison you should use ==. You can also use === which is the same, but the variable type must also match.
When doing assignment you should use =.
That means this code:
if (exp.style.backgroundColor = "beige") {
exp.style.backgroundColor = "red"
} else if (exp.style.backgroundColor = "red") {
exp.style.backgroundColor == "beige"
}
Needs to be:
if (exp.style.backgroundColor == "beige") {
exp.style.backgroundColor = "red"
} else if (exp.style.backgroundColor == "red") {
exp.style.backgroundColor = "beige"
}
The finished result would be:
let exp = document.querySelector("#lorem")
exp.style.backgroundColor = "beige"
exp.addEventListener("click", colorChange)
function colorChange() {
if (exp.style.backgroundColor == "beige") {
exp.style.backgroundColor = "red"
} else if (exp.style.backgroundColor == "red") {
exp.style.backgroundColor = "beige"
}
}
.firstdiv {
background-color: antiquewhite;
height: 50vh;
}
h2 {
margin-left: 40%;
padding-top: 20px;
}
#lorem {
margin: 0 auto;
width: 65%;
margin-top: 25px;
text-align: center;
}
<div id="first" class="firstdiv">
<h2>DenemeTahtası</h2>
<div>
<section id="lorem">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis sit dolor, soluta ab illum aperiam
quam! Eum, delectus aliquam ipsa perspiciatis modi perferendis laudantium aut vel, ut veniam quae
eligendi?
</section>
</div>
</div>
The beige/red rectangle is essentially a clickable button, so you may want to add a couple of CSS properties to make that more intuitive to the user. Specifically:
cursor: pointer; /* turn the mouse cursor into a hand */
user-select: none; /* disable selecting of text */
The result of doing that would be:
let exp = document.querySelector("#lorem")
exp.style.backgroundColor = "beige"
exp.addEventListener("click", colorChange)
function colorChange() {
if (exp.style.backgroundColor == "beige") {
exp.style.backgroundColor = "red"
} else if (exp.style.backgroundColor == "red") {
exp.style.backgroundColor = "beige"
}
}
.firstdiv {
background-color: antiquewhite;
height: 50vh;
}
h2 {
margin-left: 40%;
padding-top: 20px;
}
#lorem {
margin: 0 auto;
width: 65%;
margin-top: 25px;
text-align: center;
cursor: pointer;
user-select: none;
}
<div id="first" class="firstdiv">
<h2>DenemeTahtası</h2>
<div>
<section id="lorem">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis sit dolor, soluta ab illum aperiam
quam! Eum, delectus aliquam ipsa perspiciatis modi perferendis laudantium aut vel, ut veniam quae
eligendi?
</section>
</div>
</div>
What you tried to do is right, but you have a few mistakes that make it not work.
In the CSS:
close the curly bracket of .firstDiv
In the JS:
use the identity operator (===) in the conditions of both of the if statements
if (exp.style.backgroundColor === "beige")
use the assignment operator in the body of the if to assign a new value
exp.style.backgroundColor == "beige"

How to set collapse on all other divs when one div is open?

I have seen many questions but none are similar to my case. I have bootstrap collapse and show for a few div contents. The div content shows when title is clicked. I want to close all other div contents when I click another content's title.
The color of the title div is gray and should change to white when its content shows. Once the content is collapsed, title div color should back to gray.
Here's my code:
function collapse (e, id, collapasibleName) {
var toggleColor = document.getElementById(id);
var collapsibles = document.getElementById(collapasibleName);
if(collapsibles.className == 'home__questions-content collapse' || collapsibles.className == 'home__questions-content collapsed')
{
alert("Sdfsdfdsf")
toggleColor.classList.remove('home__questions-title-show');
}
if(collapsibles.className == 'home__questions-content collapse show') {
alert("in show")
toggleColor.classList.add('home__questions-title-show');
}
}
.home__more-questions-content {
padding-right: 40px;
padding-left:40px;
padding-bottom: 20px;
background-color: $white-color;
position:relative;
max-width: 1080px;
margin: auto;
}
.home__questions-content-tile {
margin-bottom: 10px;
border:1px solid #eee;
}
.home__questions-content-title {
padding:20px;
background-color: #000
cursor: pointer;
}
.home__questions-content {
padding-top: 0;
padding-right:20px;
padding-left:20px;
padding-bottom:20px;
}
.home__questions-title-show { background-color: #fff; }
.collapse {
display:none;
}
.collapse.show {
display: block;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
transition: height 0.35s ease;
}
<div class="home__more-questions-content" id="accordion">
<div class="home__questions-content-tile">
<div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-one" data-parent="#accordion" id="collapse-one" onclick="collapse(event, this.id,'collapsible-one');">
<h2>
// title 1 here
</h2>
</div>
<div class="home__questions-content collapse" id="collapsible-one">
//title 1's content here
</div>
</div>
<div class="home__questions-content-tile">
<div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-two" data-parent="#accordion" id="collapse-two" onclick="collapse(event, this.id,'collapsible-two');">
<h2>
//title 2
</h2>
</div>
<div class="home__questions-content collapse" id="collapsible-two">
//title 2's content here
</div>
</div>
<div class="home__questions-content-tile">
<div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-three" data-parent="#accordion" id="collapse-three" onclick="collapse(event, this.id, 'collapsible-three');">
<h2>
//title 3
</h2>
</div>
<div class="home__questions-content collapse" id="collapsible-three">
// title 3's content here
</div>
</div>
</div>
Here is the code, explanation is in the comment of the question.
Add new code
if (e.target.parentNode.classList.contains('active')) {
e.target.parentNode.classList.remove('active')
return
}
If current block is opened, then close it and return from further processing.
const container = document.querySelector('.container')
container.addEventListener('click', e => {
if (e.target.parentNode.classList.contains('active')) {
e.target.parentNode.classList.remove('active')
return
}
const collapsable = document.querySelectorAll('.item')
Array.prototype.forEach.call(collapsable, el => {
el.classList.remove('active')
})
e.target.parentNode.classList.add('active')
})
.container {
width: 500px;
margin: 0 auto;
color:darkslategrey;
}
.item {
margin: 10px 0;
border-bottom: 1px solid #666;
padding: 5px 10px;
}
.item.active h3 {
color:aquamarine;
}
p {
overflow: hidden;
transition: height .5s ease;
height: 0px;
}
.item.active p {
height: 80px;
}
<div class="container">
<div class="item active">
<h3>I am a title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
</div>
<div class="item">
<h3>I am a title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
</div>
<div class="item">
<h3>I am a title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
</div>
</div>

how to return first image with cycle plugin

I'm using cycle2 plugin for my carousel and I wrote a basic function to start slide images on hover but there is something that I couldn't achieve is when I left my cursor from area carousel must return first image how to do that ?
$('.img-area').cycle({
fx: 'none',
speed: 750,
timeout: 100
}).cycle("pause");
$(".otel-list").hover(function() {
$(".img-area").cycle("resume");
}, function() {
$(".img-area").cycle("pause");
});
.otel-list {
width: 700px;
background: #f0f0f0;
border-bottom: 5px solid #ccc;
}
.otel-list:after,
.otel-list-:before {
content: "";
display: table;
clear: both;
}
.img-area {
width: 33%;
float: left;
position: relative;
}
.img-area img {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.content-area {
float: right;
width: 66%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.js"></script>
<div class="otel-list">
<div class="img-area">
<img src="http://malsup.github.io/images/p1.jpg" />
<img src="http://malsup.github.io/images/p2.jpg" />
<img src="http://malsup.github.io/images/p3.jpg" />
<img src="http://malsup.github.io/images/p4.jpg" />
</div>
<div class="content-area">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dolorem, nemo illo non aspernatur distinctio deleniti repudiandae in reprehenderit, explicabo, ullam. Fuga dolorum voluptates esse animi earum! Sint, officia, molestias!</p>
</div>
</div>
Just use $(".img-area").cycle(0) on mouse leave event.
$('.img-area').cycle({
fx: 'none',
speed: 750,
timeout: 100
}).cycle("pause");
$(".otel-list").hover(function() {
$(".img-area").cycle("resume");
}, function() {
$(".img-area").cycle("pause");
}).mouseleave(function(){
$(".img-area").cycle(0);
});
.otel-list {
width: 700px;
background: #f0f0f0;
border-bottom: 5px solid #ccc;
}
.otel-list:after,
.otel-list-:before {
content: "";
display: table;
clear: both;
}
.img-area {
width: 33%;
float: left;
position: relative;
}
.img-area img {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.content-area {
float: right;
width: 66%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.js"></script>
<div class="otel-list">
<div class="img-area">
<img src="http://malsup.github.io/images/p1.jpg" />
<img src="http://malsup.github.io/images/p2.jpg" />
<img src="http://malsup.github.io/images/p3.jpg" />
<img src="http://malsup.github.io/images/p4.jpg" />
</div>
<div class="content-area">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dolorem, nemo illo non aspernatur distinctio deleniti repudiandae in reprehenderit, explicabo, ullam. Fuga dolorum voluptates esse animi earum! Sint, officia, molestias!</p>
</div>
</div>

Categories

Resources