How to make slide toggle on click?

How to make slide toggle on click? - javascript

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>

Related

How to prevent page scroll to the top while menu opened

There is a menu button on the page. When a user taps the button full-page menu opens. There is a problem - the main content page automatically scrolls to the top. Could you advise me on how to prevent it? I've already checked a similar question here How to disable scrolling in the background when the mobile menu is open?, but nor position:fixed or oveflow:hidden helped
const menuOpen = document.querySelector('.menu-open');
const menuClose = document.querySelector('.menu-close');
const body = document.querySelector('.root');
function lockScroll() {
body.classList.add('lock');
}
function unLockScroll() {
body.classList.remove('lock');
}
menuOpen.addEventListener('click', lockScroll);
menuClose.addEventListener('click', unLockScroll);
.lock {
position: fixed;
height: 100vh;
overflow-y: hidden;
}
.menu-open {
position: fixed;
top: 0;
right: 0;
cursor: pointer;
transition: all ease 0.6s;
border: 0;
background: none;
padding: 1rem 1rem 2rem 2rem;
}
.nav-container {
position: absolute;
left: -100%;
width: 100%;
height: 100vh;
background: #f5f5f1;
z-index: 5;
}
<header class="header">
<button type="button" class="menu-open"><img src="./images/menu.svg" alt=""></button>
<div class="nav-container">
<button type="button" class="menu-close"><img src="./images/close.svg" alt=""></button>
<div class="menu__wrapper">
<div class="socials">
<img src="./images/logo.png" alt="" class="logo" title="">
</div>
<nav class="menu">
<div class="menu__item">
<a class="menu__item-link">menu</a>
</div>
<div class="menu__item">
<a class="menu__item-link">menu</a>
</div>
<div class="menu__item">
menu
</div>
<div class="menu__item">
<a class="menu__item-link">menu</a>
</div>
<div class="menu__item">
<a class="menu__item-link">menu</a>
</div>
</nav>
</div>
</div>
</header>
doesn't help.

I think your main body elements are positioned static (or relative if defined?), untill you change it by overriding with position fixed.
A better behaviour would be to leave your nav container be positioned absolute on "menuOpen" and leave the remainder of elements in their already defined flow so your full screen simply overlay's the rest of the elements.

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>

ToggleClass rule is not applied

I have the following HTML/CSS/JS code:
function addClass() {
document.getElementById('shopping-cart-body').classList.add('open');
}
function removeClass() {
document.getElementById('shopping-cart-body').classList.remove('open');
}
.cart-preview .body {
visibility: hidden;
position: fixed;
height: 100%;
top: 0;
width: 400px;
background-color: #fff;
right: -400px;
}
.cart-preview .body .open {
visibility: visible;
transition: right 1s linear;
right: 0px;
}
<div id="blockcart-wrapper">
<div class="blockcart cart-preview">
<div class="header">
<a rel="nofollow" href="#">
<img class="cart-icon" src="https://placehold.it/100" onclick="addClass()">
</a>
</div>
<div class="body" id="shopping-cart-body">
<div class="close">X</div>
<ul>
</ul>
<div class="cart-subtotals">
<div class="products">
<span class="label">Subtotal</span>
<span class="value">0</span>
</div>
<div class="">
<span class="label"></span>
<span class="value"></span>
</div>
<div class="shipping">
<span class="label">Shipping</span>
<span class="value">0</span>
</div>
<div class="">
<span class="label"></span>
<span class="value"></span>
</div>
</div>
<div class="cart-total">
<span class="label">Total</span>
<span class="value">0</span>
</div>
<div class="checkout">
<button>Checkout</button>
</div>
</div>
</div>
</div>
I also tried to use toggle and when I alert the class list of the element, the new class is shown, but the css rule is not applied, the element gets not visible. Interesting: when alerting the class, the superclass of body (cart-preview) is missing, but the new one (open) is there.
For readability, the css only contains the two needed classes and not the whole style for the HTML part.
Can someone explain me, why this is not working?

Your css is looking for an element with css-class .open under an element with .body class. That element does not exist. If you want the css to apply to element with both classes use .body.open
.cart-preview .body {
visibility: hidden;
position: fixed;
height: 100%;
top: 0;
width: 400px;
background-color: #fff;
right: -400px;
}
.cart-preview .body.open {
visibility: visible;
transition: right 1s linear;
right: 0px;
}

How to make 2 column portfolio page, left is navigation, right is image display when image gets hovered on the left nav words

I am making a portfolio website and I am trying to mimic this effect http://xavierbourdil.com/ I am able to create the hover effect with words appearing on the right, but if I try this with Images it won't let me place it in the right side div. Can anyone please help me with a simple html/css solution?
html
<nav>
<ul>
<li><a class="galleryhover" href="#menu1">SOLAR</a><img class="right" src="img/green.jpg" alt=""></li>
<li><a class="galleryhover" href="#menu2">INK CHEF</a><img src="img/gray.jpg" alt=""></li>
<li><a class="galleryhover" href="#menu3">BRANDING</a><img src="img/yellow.jpg" alt=""></li>
<li><a class="galleryhover" href="#menu4">POSTERS</a></li>
<li><a class="galleryhover" href="#menu5">LAYOUT</a></li>
</ul>
</nav>
css
container {
overflow: hidden;
margin: 100px auto;
width: 800px;
height: 500px;
}
.container img {
position: absolute;
top: 0;
left: 0;
z-index: -60;
}
.container li img {
position: absolute;
top: 0;
left: 800px;
z-index: -50;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
li a:hover {
background: #eee;
}
li a:hover + img {
left: 0px;
}
.galleryright {
right: -700px;
}
Possibility #2:
html
I have tried this before, but I need it to work with images instead of the words that are ('') next to hover on mouseover.... Can the script be altered for me to put an image in the onmouseover? I have tried multiple things already. Any help is appreciated! Thanks in advance guys!
<div id="content">
Stuff should be placed here.
</div>
<br/>
<br/>
<br/>
<ul>
<li onmouseover="hover('Apples are delicious')">Apple</li>
<li onmouseover="hover('oranges are healthy')">Orange</li>
<li onmouseover="hover('Candy is the best')">Candy</li>
</ul>
<script>
function hover(description) {
console.log(description);
document.getElementById('content').innerHTML = description;
}
</script>

One way to do this with JavaScript is to attach a listener on the nav, pick the one that was hovered, pick the src value and change the src of the image on the right side
Example: Fiddle
html
<article>
<section>
<ul class="portfolio-nav" id="js-portfolio-links">
<li><a data-img-src="http://placehold.it/400x150" href="">First Image</a></li>
<li><a data-img-src="http://placehold.it/350x150" href="">Second Image</a></li>
</ul>
</section>
<section class="portfolio-img">
<div class="img-placeholder">
<img src="http://placehold.it/400x150" id="js-img-placeholder">
</div>
</section>
</article>
js
var links = document.getElementById('js-portfolio-links');
var placeholder = document.getElementById('js-img-placeholder');
links.addEventListener('mouseover', function(e) {
if (e.target && e.target.nodeName === 'A') {
var srcPath = e.target.getAttribute('data-img-src');
placeholder.src = srcPath;
}
});

Sidebar fixed panel with fixed content block

I have a sidebar which is position:fixed; and overflow:auto; - this causes the scroll to happen within the fixed element.
Now when the sidebar is turned on, that element does not move, its just static on the page.
What i want to achieve: I would like to fix .super-image-thumb inside the scroll element, so when the scroll happens, the thumbnails at the top are fixed.
I have tried a javascript fix as well but its still not working. Any recommendations?
jQuery(function($) {
function fixDiv() {
var $cache = $('.super-image-thumb');
if ($('.sliding-panel-content').scrollTop() > 100)
$cache.css({
'position': 'fixed',
'top': '10px'
});
else
$cache.css({
'position': 'relative',
'top': 'auto'
});
}
$('.sliding-panel-content').scroll(fixDiv);
fixDiv();
});
.sliding-panel-content {
z-index: 1204;
}
.middle-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.middle-content {
position: fixed;
left: 8%;
top: auto;
width: 85%;
-webkit-transform: translateY(-115%);
-ms-transform: translateY(-115%);
transform: translateY(-115%);
transition: all .25s linear;
}
.sliding-panel-content {
overflow: auto;
top: 0;
bottom: 0;
height: 100%;
background-color: #fff;
-webkit-overflow-scrolling: touch;
}
.sliding-panel-content.is-visible {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="js-menu sliding-panel-content middle-content is-visible">
<span class="closeBtn sliding-panel-close"></span>
<div class="slide-content">
<div class="super-image-thumb">
<div id="product-gallery-super">
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=1">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=2">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=3">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=4">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=5">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=6">
</a>
</div>
</div>
<div class="main-image-container">
<img class="main-image" src="http://placehold.it/500x2045">
<button name="prev" id="super-prev">Prev</button>
<button name="next" id="super-next">Next</button>
</div>
</div>
</div>

Fixed inside Fixed is always buggy. Let's just change top: http://jsfiddle.net/s31edgao/
function fixDiv() {
$('.super-image-thumb').css({
'top': $('.sliding-panel-content').scrollTop()+'px'
});
}
$('.sliding-panel-content').scroll(fixDiv);
fixDiv();

Javascript for that will only make the things more complicated.
It is all about CSS, the position: fixed or absolute is always based on the first ancestor with position: relative, so you should play with it.
I would remove the jQuery code and add this CSS:
.slide-content {
position:relative;
}
.super-image-thumb {
position:fixed;
background: #FFF;
top:0;
width:100%;
z-index: 2;
}
.main-image-container {
position:absolute;
top:85px;
z-index: 0;
}
As in the jsfiddle

It looks like transitions and position: fixed does not work together in all browser, when you remove them, code works fine. Some solution for this you can find in css3 transform reverts position: fixed
I created snippet without transitions and also I removed JS part (I think is not needed), and propose CSS-only solution. It is not finished to the end, it needs some more aligments - but you can do it yourself - the way for solving your problem is clear, I think.
.sliding-panel-content {
z-index: 1204;
}
.middle-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.middle-content {
position: fixed;
left: 8%;
top: auto;
width: 85%;
}
.sliding-panel-content {
overflow: auto;
top: 0;
bottom: 0;
height: 100%;
background-color: #fff;
-webkit-overflow-scrolling: touch;
}
.super-image-thumb {
position: fixed;
top: 10px;
}
.main-image-container {
margin-top: 100px; // should be same as thumb height
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="js-menu sliding-panel-content middle-content is-visible">
<span class="closeBtn sliding-panel-close"></span>
<div class="slide-content">
<div class="super-image-thumb">
<div id="product-gallery-super">
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=1">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=2">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=3">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=4">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=5">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=6">
</a>
</div>
</div>
<div class="main-image-container">
<img class="main-image" src="http://placehold.it/500x2045">
<button name="prev" id="super-prev">Prev</button>
<button name="next" id="super-next">Next</button>
</div>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

How to make slide toggle on click? - javascript

Related

How to prevent page scroll to the top while menu opened

Blur Background When Popup Image

ToggleClass rule is not applied

How to make 2 column portfolio page, left is navigation, right is image display when image gets hovered on the left nav words

Sidebar fixed panel with fixed content block

Categories

Resources