Develop Reference

Blur Background When Popup Image

I'm trying to blur the background when I click on an image and it popup.
I already have it where it blurs a section of the page. However, you can see anything that is outside of that section not blur-out.
CSS
.content2#blur.active{
filter: blur(20px);
pointer-events: none;
user-select: none;}
#popup{ /*NEW*/
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
#popup.active{
width: 650px;
top: 53%;
visibility: visible;
opacity: 1;
transition: 0.5s;
}
HTML
<section class="port" id="pLink">
<div class="heading" id="blur">
<h2>Title</h2>
<p>Description.</p>
</div>
<div class="content2" id="blur">
<div class="pBox">
<a href="#" class="anchor" onclick="toggle()" id="img-1">
<img src="../mywebsite/img/bp.jpg">
<div class="overlay">
<h5>Image Description</h5>
</div>
</a>
</div>
</div>
<div id="popup">
<a href="#" class="anchor" onclick="toggle()">
<img src="../mywebsite/img/bp.jpg" class="img-1">
</div>
</section>
<div class="footer">
<p>Copyright</p>
</div>
JavaScript
function toggle(){
var blur = document.getElementById('blur');
blur.classList.toggle('active');
var popup = document.getElementById('popup');
popup.classList.toggle('active');
}
I tried adding the same id="blur" to the footer but the problem is that it only works for one <div>.
I also tried adding a separate css code for let say `class="footer" but it doesn't work.
.footer#blur.active{
filter: blur(20px);
pointer-events: none;
user-select: none;}
I also tried moving the id tag to the section, but that only blurs the heading not the rest.

All you have to do is to add a "blur" class to anyone element you want to get the effect when the image is clicked.
The changes I made:
Change in CSS #blur to .blur
JS - The function takes all elements with class .blur and has add or remove class .active
HTML - added classes .blur to all elements that need to be blurred.
In one document you can have many classes with the same name, but you can have only one element with a unique ID! This is the reason I change the blur from ID to CLASS
function toggle() {
var blur = document.getElementsByClassName('blur');
for (var i = 0; i < blur.length; i++) {
blur[i].classList.toggle('active');
}
var popup = document.getElementById('popup');
popup.classList.toggle('active');
}
.blur.active {
filter: blur(2px);
pointer-events: none;
user-select: none;
}
#popup {
/*NEW*/
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
#popup.active {
width: 650px;
top: 53%;
visibility: visible;
opacity: 1;
transition: 0.5s;
}
<section class="port" id="pLink">
<div class="heading blur">
<h2>Title</h2>
<p>Description.</p>
</div>
<div class="content2 blur">
<div class="pBox">
<a href="#" class="anchor" onclick="toggle()" id="img-1">
<img src="https://blog.54ka.org/wp-content/uploads/2020/09/horse-galloping-close-up-action-photography_by_54ka-165x165.jpg">
<div class="overlay">
<h5>Image Description</h5>
</div>
</a>
</div>
</div>
<div id="popup">
<a href="#" class="anchor" onclick="toggle()">
<img src="https://blog.54ka.org/wp-content/uploads/2012/07/horses_XI_01_by_54ka.jpg" class="img-1">
</div>
</section>
<div class="footer blur">
<p>Copyright</p>
</div>

How to make slide toggle on click?

I'm currently doing responsive design for the website using media queries with (max-width: 480px). Now, I have an issue of making slideToggle on jQuery from left to right. Basically, I'm adding class to element by using jQuery and styling this in CSS. However, I might assume there are other ways to make it...
But this is my approach. Please guys help me out, maybe you have some other recommendations how to solve this.
So, here is my html:
<div class="header">
<div class="logo">Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts">
<p class="phone">+7(499)394-46-03<br />
+7(985)427-48-55<br />
</p>
<a id="js-close" class="js-close"></a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'></a>
<a id="js-cart" class="js-cart" href="/basket"></a>
<a id='js-mnu' class='js-mnu'></a>
<a id="js-cat" class="js-cat"></a>
<div class="mainmenu">
<a id='js-cross' class='js-cross'></a>
<ul>
<li><a href="/" ><span></span></a></li>
<li><a href="/menu/16" ><span></span></a></li>
<li><a href="/menu/3" ><span></span></a></li>
<li><a href="/menu/5" ><span></span></a></li>
<li><a href="/articles" ><span></span></a></li>
<li><a href="/menu/21" ><span></span></a></li>
<li><a href="/menu/22" ><span></span></a></li> </ul>
</div>
</div>
this is CSS
#js-close {display:block;display:none;width:35px;height:35px;margin:17px 10px; position: absolute;
right: 0;}
.js-close{background:url(images/close-icon.png) center center no-repeat; opacity: 0.75; }
and this is media
#media screen and (max-width: 480px) {
p.phone._opened {
position: fixed;
top: 0;
background-color: #fff;
width: 100%;
height: 100%;
transform: translateX(-100%);
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: all 0.3s ease-out;
display: block;
}
}
And my jQuery:
$(document).ready(function(){
$("#js-phone").click(function(){
$('p.phone').addClass("_opened");
});
$("js-close").click(function(){
$('p_phone').removeClass("_opened");
});
});

you have some problems with your code .
in JQ you are not writing the selectors correctly ( js-close needs to have # before it , and p_phone needs to be p.phone instead )
in CSS you need to hide your p.phone with transform:translateX(-100%) and then show it when has class opened with transform:translateX(0%) . Also add transition to the p.phone so when you close it , it will have transition
check snippet below ( Open = open button , Close = close button )
i changed the JQ a bit so it's more readable and easier to change, using selector caching ( the variables ) and event targeting. hope you don't mind
P.S i removed the media query so it will work in the snippet .
check fiddle with media query > jsFiddle
var open = $("#js-phone"),
close = $("#js-close"),
phone = $('p.phone')
$("body").on("click", function(e) {
var target = $(e.target)
if (target.is(open)) {
$(phone).addClass("opened")
}
if (target.is(close)) {
$(phone).removeClass("opened")
}
})
p.phone {
transform: translateX(-120%);
position: fixed;
top: 0;
transition: 0.3s;
-webkit-transition: all 0.3s ease-out;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
background-color: #fff;
display: block;
}
.contacts {
margin-top: 100px;
}
/*#media screen and (max-width: 480px) {*/
p.phone.opened {
transform: translateX(0);
}
/*}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="logo">Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts">
<p class="phone">+7(499)394-46-03
<br /> +7(985)427-48-55
<br />
</p>
<a id="js-close" class="js-close">Close</a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'>Open</a>
<a id="js-cart" class="js-cart" href="/basket"></a>
<a id='js-mnu' class='js-mnu'></a>
<a id="js-cat" class="js-cat"></a>
<div class="mainmenu">
<a id='js-cross' class='js-cross'></a>
<ul>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>
</div>

Use style='display:none' for first load. And After Link click show your div and add class using addClass.
$("#js-phone").click(function() {
$('.contacts').show();
$('p.phone').addClass("_opened");
});
$(".js-close").click(function() {
$('.contacts').hide();
$('p_phone').removeClass("_opened");
});
#media screen and (max-width: 480px) {
p.phone._opened {
position: fixed;
top: 0;
background-color: #fff;
width: 100%;
height: 100%;
transform: translateX(-100%);
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: all 0.3s ease-out;
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header" >
<div class="logo" >Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts" style='display:none'>
<p class="phone">+7(499)394-46-03<br /> +7(985)427-48-55
<br />
</p>
<a id="js-close" class="js-close">Close</a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'>Phone</a>
<a id="js-cart" class="js-cart" href="/basket">2</a>
<a id='js-mnu' class='js-mnu'>3</a>
<a id="js-cat" class="js-cat">4</a>
</div>

animate out image on click function while overlapping its sibling elements

First time user and in need of help.
I have three li li li elements, each has their own <img> inside it. I would like to animate the individual <img> inside outwards while overlapping other sibling elements (in this expanding effect, the siblings shouldn't be moving,)when the selected element is clicked.
The HTML markup i have:
<div class="wrapper">
<ul>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
</ul>
</div>
CSS Markup:
.card {
position: relative;
width: 28%;
height: 100px;
float: left;
margin: 2.5%;
overflow: hidden;
}
.content {
position: absolute;
width: 100%;
height: 100%;
top: -50%;
left: 0;
transition: all 1s ease-in;
}
img {
width: 100%;
}
JS:
$('.card').on('click','.content',function(){
$(this).css({
'position':'fixed',
'z-index':'10'
});
});
I've done different iterations of this code back and forth, but setting the position of the .content to fixed does somewhat close to what i'm trying to do, it overlaps the other siblings... but without any smooth transitions flowing outwards.
Here is a link to the code in codepen: http://codepen.io/broham89/pen/WrJmyB
I very very much appreciate any help on this.

z-index and position are not technically animatable properties, so whatever solution would have to be a little hacky. You can accomplish this by fiddling with CSS classes and jQuery toggle. I changed the code a bit so the primary animation/transition occurs on the parent li rather than the .content element. In order for all three lis to remain in the same position, I changed them to absolutely positioned elements with different :nth-child positioning declarations and gave the ul a position of relative. Currently, it's designed around three elements, but you can play around with the values if you need more (or use JS to determine the math).
The jQuery code here toggles .cardhover class which moves the element to left position of 0 -- the start of the ul container -- to prevent any overflow. And it also adds .cardactive for z-index which makes sure that the element is on top of other elements during the bigger/smaller transitions. (And it removes the class from any other siblings at the beginning.)
https://jsfiddle.net/nn454trm/11/
$('.card').on('click', '.content', function() {
$(this).parent().siblings().removeClass('cardactive');
$(this).parent().addClass('cardactive').toggleClass('cardhover');
});
ul {
position: relative;
}
.card {
position: absolute;
width: 28%;
height: 100px;
transition: 2s;
margin: 2.5%;
overflow: hidden;
}
.card:nth-child(1) {
left: 0;
}
.card:nth-child(2) {
left: 33.3%;
}
.card:nth-child(3) {
left: 66.66%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
left: 0;
transition: all 1s ease-in;
}
img {
width: 100%;
}
.cardhover {
width: 95%;
left: 0% !important;
}
.cardactive {
z-index: 20;
background: blue; //for demo purposes
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
<ul>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
</ul>
</div>

For smooth transitions, don't you want animate instead of css?
http://api.jquery.com/animate/

Hide bootstrap panels

I have panel content (not an accordian) setup to be hidden on page load. When a user clicks on one of the tabs, a "hidden" class is removed thus showing the panel content. Then I want to hide the content if the user clicks the tab for the open panel:
$('#section-navigation a').click(function (e) {
e.preventDefault()
if ($(this).closest("li").hasClass("active")) {
$('#section-navigation li.active').removeClass("active");
$(".tab-content").addClass("tab-content-hidden");
} else {
$(".tab-content").removeClass("tab-content-hidden");
$(this).tab('show');
}
});
This does show the panel content on first click, hide the panel content on second click of the same tab but it does not remove the "active" class from the panel content "li", and a third click on the same tab does nothing. Example here (coloured panels):
http://hawk.cloudlevel.me/
Fiddle: https://jsfiddle.net/uvvnpp0s/3/
How can I achieve my goal? I appreciate I might have gone about things in completely the wrong way, as I'm inexperienced with JS / jQuery.

Your custom tabs is conflicting with the bootstrap tabs implementation. Best would be have a custom tab implementation.
Here's a quick custom implementation - https://jsfiddle.net/nitincool4urchat/uvvnpp0s/9/
$("a[role=tab]").click(function() {
if ($(this).parent('li').hasClass('active')) {
$(this).parent('li').removeClass('active');
$(".tab-content").addClass('tab-content-hidden');
} else {
$("#section-navigation li").removeClass('active');
$(this).parent('li').addClass('active');
$(".tab-content").removeClass('tab-content-hidden');
$(".tab-content .tab-pane").hide(); //hide all
$($(this).attr('href')).show(); //show the selected one;
}
});
ul#section-navigation {
list-style-type: none;
padding: 0;
}
ul#section-navigation li {
position: relative;
float: left;
width: 25%;
padding-bottom: 15%;
overflow: hidden;
}
ul#section-navigation li > a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
border: 0;
color: #0e034f;
}
ul#section-navigation li > a,
ul#section-navigation li.active > a,
ul#section-navigation li a:hover,
ul#section-navigation li a:focus {
background: 0;
border: 0;
margin: 0;
outline: 0;
}
ul#section-navigation li > a h2 {
font-size: 24px;
margin-top: 1vw;
}
ul#section-navigation li > a p {
display: none;
}
ul#section-navigation li a div div {
position: absolute;
bottom: 0;
right: 0;
width: 15%;
}
ul#section-navigation li a div div:after {
content: "";
display: block;
padding-top: 100%;
}
ul#section-navigation li a div div div {
display: block;
width: 100%;
height: 100%;
}
ul#section-navigation li a div div div span {
display: block;
line-height: 100%;
color: #fff;
transition: 0.2s all;
font-size: 12vw;
}
ul#section-navigation li.active a div div span {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform-origin: 48% 48%;
}
.tab-content {
overflow: hidden;
max-height: 4000px;
transition: max-height .5s cubic-bezier(1, 0, .7, 1);
}
.tab-content .panel-padding {
padding-top: 2%;
}
.tab-content-close {
float: right;
font-size: 30px;
width: 30px;
text-align: center;
margin-left: 100%;
}
.learn-more-1,
.learn-more-2,
.learn-more-3,
.learn-more-4 {
overflow: hidden;
max-height: 4000px;
padding-top: 60px;
padding-bottom: 60px;
}
.tab-content-hidden,
.learn-more-hidden,
.bar-hidden {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
}
#link-learn-more-1,
#link-learn-more-2,
#link-learn-more-3,
#link-learn-more-4 {
position: relative;
top: -50px;
}
.learn-more .tab-content img {
width: 100%;
}
.panel-padding {
padding: 5%;
}
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-tabs" role="tablist" id="section-navigation">
<li role="presentation" class="gradient-white">
<a href="#panel-1" aria-controls="panel-1" role="tab">
<h2>Apprenticeships</h2>
<p>Learn more about the great opportunities apprenticeships offer</p>
<div>
<div>
<div class="bkg-blue"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
<li role="presentation" class="gradient-pink">
<a href="#panel-2" aria-controls="panel-2" role="tab">
<h2>Management</h2>
<p>Developing the next generation of leaders and managers</p>
<div>
<div>
<div class="bkg-pink"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
<li role="presentation" class="gradient-yellow">
<a href="#panel-3" aria-controls="panel-3" role="tab">
<h2>FE Teacher Training</h2>
<p>Get qualified to train and teach in the FE sector</p>
<div>
<div>
<div class="bkg-yellow"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
<li role="presentation" class="gradient-green">
<a href="#panel-4" aria-controls="panel-4" role="tab">
<h2>Learning Zone</h2>
<p>e-Learning on demand 24/7</p>
<div>
<div>
<div class="bkg-green"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
</ul>
<div class="tab-content tab-content-hidden">
<div role="tabpanel" class="tab-pane fade in active" id="panel-1">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/apprenticeshipsbanner.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-blue"><span class="stat-number">95%</span><span class="stat-desc">of apprentices would recommend us</span>
</div>
<h2>Learn more about the great opportunities apprenticeships offer</h2>
<p>
<br />Earn and learn across a variety of exciting sectors and jobs, improving your skills, gaining valuable experience and boosting your career from the very beginning.</p>
Learn more
Current vacancies
</div>
</div>
<span class="bar bkg-blue"></span>
</div>
<div role="tabpanel" class="tab-pane fade in" id="panel-2">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/managementsmall.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-pink"><span class="stat-number">88%</span><span class="stat-desc">increased employee satisfaction</span>
</div>
<h2>Developing the next generation of leaders and managers</h2>
<p>
<br />Enjoy progressive, flexible learning that improves prospects, boosts careers and brings immediate value to your organisation.</p>
Learn more
</div>
</div>
<span class="bar bkg-pink"></span>
</div>
<div role="tabpanel" class="tab-pane fade in" id="panel-3">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/tutortraining.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-yellow"><span class="stat-number">95%</span><span class="stat-desc">had a positive impact on their career</span>
</div>
<h2>Inspiring training for aspiring teachers and assessors</h2>
<p>
<br />Take advantage of our accredited Level 3 and 4 qualifications for those who want to get into teaching, external assessing or internal quality control for assessments. Flexible, relevant and giving you the practical skills you need, our
courses are designed to be easy to access, and help you take the next step in your career.</p>
Learn more
</div>
</div>
<span class="bar bkg-yellow"></span>
</div>
<div role="tabpanel" class="tab-pane fade in" id="panel-4">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/1.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-green"><span class="stat-number">93%</span><span class="stat-desc">would recommend to a friend</span>
</div>
<h2>Take the first steps towards being an outstanding apprentice</h2>
<p>
<br />Earn and learn across a variety of exciting sectors and jobs, improving your skills, gaining valuable experience and boosting your career from the very beginning.</p>
Learn more
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Logging an attribute from CSS Modal

My problem is that when attempting to log an attribute from an image, when there are multiple images on the page, I am only able to log the first attribute.
Here's a fiddle.
http://jsfiddle.net/fauverism/b9kwT/4/
CSS
#page1, #page2, #page3, #page4 {
display: inline-block;
}
.active-page {
border: 4px groove seagreen;
}
.inactive-page-unlocked {
border: 4px ridge papayawhip;
}
.modalbg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
background: rgba(0, 0, 0, 0);
z-index: 1000;
transition: all 0.2s ease-out;
pointer-events: none;
}
.modalbg .dialog {
display: inline-flex;
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
margin: auto;
background-clip: contain;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.modalbg:target {
opacity: 1;
pointer-events: auto;
background: rgba(0, 0, 0, 0.6);
transition: all 0.2s ease-out;
}
HTML
<div class="main-content">
<div id="page1" class="active-page">
<a class="magnify" href="#zoomWindow100100.GIF">
<img id="100100.GIF-img" name="100100.GIF" src="http://placekitten.com/100/100">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow100100.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/100/100)"></div>
</div>
</a>
</div>
<div id="page2" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow120120.GIF">
<img id="120120.GIF-img" name="120120.GIF" src="http://placekitten.com/120/120">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow120120.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/120/120)"></div>
</div>
</a>
</div>
<div id="page3" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow140140.GIF">
<img id="140140.GIF-img" name="140140.GIF" src="http://placekitten.com/140/140">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow140140.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/140/140)"></div>
</div>
</a>
</div>
<div id="page4" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow160160.GIF">
<img id="160160.GIF-img" name="160160.GIF" src="http://placekitten.com/160/160">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow160160.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/160/160)"></div>
</div>
</a>
</div>
JavaScript
function openZoomWindow() {
$('.magnify').on('click', function() {
var nameVal = $('img').attr('id');
console.log("show_inline_exhibit","name="+nameVal);
});
}
function closeZoomWindow() {
$('.modal-container').on('click', function() {
var nameVal = $('.modalbg').attr('id');
console.log("show_inline_exhibit","id="+nameVal);
});
}
openZoomWindow();
closeZoomWindow();
Some details...
I've tried using this in various ways to no avail. I've tried using .each() .children(). No dice. I tried using onclick to instantiate the functions.
I don't have to log the id attribute. Logging the name will work just fine.
Thanks so much for reading this and thanks in advance for helping out if you're submitting code. This has had me stumped.

You need to select the element you're clicking on, so find the img inside the anchor:
var nameVal = $(this).find('img').attr('id');