I want to move div.willshow when var about clicked.
But I click that btn, only It gets class active.
And I click that btn again It lose class. And If I click one more time, every task not working.
CSS
div.willshow {
width:calc(100% - 52px);
height:100%;
margin-left: 52px;
z-index:100;
background-color: white;
position: absolute;
left:-100%;
-ms-transition: -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
transition: -webkit-transform 0.5s ease-in-out;
}
div.willshow.active {
-ms-transform: translate(-100%, 0); /* IE 9 */
-webkit-transform: translate(-100%, 0); /* Safari */
transform: translate(-100%, 0);
}
Javascript
var about = $('ul.about > li > span');
var willshow = $('div.willshow');
about.click(function(){
willshow.addClass('active');
about.html('close');
about.click(function(){
willshow.removeClass('active');
about.html('about');
});
});
Use a single click event,toggle the text using if in the html function:
about.on('click',function(){
willshow.toggleClass('active');
about.html(function(){
if($(willshow).hasClass('active')) {
return 'close';
}
return 'about';
});
});
demo:https://jsfiddle.net/ztw7uxhy/1/
I think your script will work better makeing something like this
var about = $('ul.about > li > span');
var willshow = $('div.willshow');
var active;
about.click(function(){
if (active!='yes'){
willshow.addClass('active');
about.html('close');
active='yes';
else{
willshow.removeClass('active');
about.html('about');
active='no';
});
In the about click handler you can use jQuery#toggleclass() to set willshow class and then with the use of a Conditional (ternary) Operator you can get the proper about class in a clean way:
var about = $('ul.about > li > span'),
willshow = $('div.willshow');
about.click(function () {
willshow.toggleClass('active');
about.html(willshow.hasClass('active') ? 'close' : 'about');
});
Related
I'm working on a project that is using Intersection Observer to add animation to an element's style upon entry. However, what I'm noticing is that the : hover attribute no longer works when I apply the style. Am I doing this wrong, or, are these two not compatible? On the JS Fiddle, I've commented out the hover attribute by default. Try uncommenting it and see what happens.
I've tried banner.classList.add(/new class in here/) but that method also took away the :hover as well.
DEMO:
Demo
disable animation on hover because animations has a higher specificity
const options = {
root: null,
threshold: 1,
};
const banner = document.querySelector('.product-banner');
const observerAnim = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
}
banner.style.animation = '1s ease-in-out home-page-fade';
banner.style.animationFillMode = 'forwards';
observer.unobserve(banner);
});
}, options);
observerAnim.observe(banner);
body {
background-color: #fff;
min-height: 2000px;
}
img.product-banner {
opacity:0;
position: relative;
top: 1000px;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
transition: all ease 0.3s;
}
#keyframes home-page-fade {
0% {
transform: translateY(50%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
img.product-banner:hover {
animation: none !important;
opacity: 0.8;
transform: scale(0.9);
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
transition: all ease 0.3s;
}
<h1>
Scroll Effect
</h1>
<img class="product-banner" src="https://cdn.mos.cms.futurecdn.net/bQgcMwEnyhFu6ASuUFrtsn-1024-80.jpg" width="300">
I am creating a clone of the header and when the scroll reach a certain height, the clone version will display. This works, as I want. The problem is that I am trying to get the “hamburger” action to work in both headers. Now it only works in first section. I need to get it working in section two also. I know I have used an ID (“trigger-overlay”), which should only be used one time and be unique.
Is this correct and the reason why it is not working? Do you guys know a workaround to fix this problem?
I need it to be an ID because of a more complex code in another script, but if it’s not possible to keep it I will do it in another way. I appreciate any help here. See JSFiddle
HTML
<section id="one">
<header class=""> <a id="trigger-overlay" class=""><span class="hamburger"></span></a>
</header>
</section>
<section id="two"></section>
CSS
section {
height:100vh;
}
#one{
background-color:#0097a7;
}
#two{
background-color:#00bcd4;
}
.hamburger, #trigger-overlay .hamburger:before, #trigger-overlay .hamburger:after {
cursor: pointer;
background-color:#80deea;
width:25px;
height:3px;
display:block;
border-radius:6px;
-webkit-transition:top 0.3s 0.2s ease, bottom 0.3s 0.2s ease, background-color 0.3s ease, -webkit-transform 0.3s ease;
transition:top 0.3s 0.2s ease, bottom 0.3s 0.2s ease, background-color 0.3s ease, transform 0.3s ease;
}
#trigger-overlay {
float: left;
margin-left:15px;
}
.hamburger:before, .hamburger:after {
content:"";
position:absolute;
}
.hamburger {
position:relative;
top:19px;
}
.hamburger:before {
top:-7px;
}
.hamburger:after {
bottom:-7px;
}
/*Hamburger hover*/
#trigger-overlay .hamburger:hover, #trigger-overlay .hamburger:hover:before, #trigger-overlay .hamburger:hover:after {
background-color: #00838f;
}
header {
position: relative;
width: 100%;
height: 60px;
background-color:#00acc1;
}
header.clone {
position: fixed;
background-color: #00acc1;
top: 0px;
left: 0;
right: 0;
transform: translateY(-100%);
transition: 0.2s transform cubic-bezier(.3, .73, .3, .74);
}
body.down header.clone {
transform: translateY(0);
}
Vanilla JS
var triggerBttn = document.getElementById( 'trigger-overlay' );
var sticky = {
sticky_after: 200,
init: function () {
this.header = document.getElementsByTagName("header")[0];
this.clone = this.header.cloneNode(true);
this.clone.classList.add("clone");
this.header.insertBefore(this.clone, this.header.childNodes[1]);
this.scroll();
this.events();
},
scroll: function () {
if (window.scrollY > this.sticky_after) {
document.body.classList.add("down");
} else {
document.body.classList.remove("down");
}
},
events: function () {
window.addEventListener("scroll", this.scroll.bind(this));
}
};
function toggleOverlay() {
alert("I want to be active in both headers ");
}
triggerBttn.addEventListener( 'click', toggleOverlay );
document.addEventListener("DOMContentLoaded", sticky.init.bind(sticky));
Unfortunately just using the same ID won't give you the same EventListeners. But, it's easy to get around your problem by simply adding the same EventListeners to the newly created clone:
document.getElementsByClassName('clone')[0].addEventListener('click', toggleOverlay);
See a working version of your Fiddle here: http://jsfiddle.net/qfbq2b0k/4/
I am trying to make a menu like the semantic UI but I only achieved to click the menu button and open the menu and vice versa. I use toggle class to show the sidebar but I dont know if this way is completely right:
<div class="menu-button" id="menu-button"></div>
$('#menu-button').click(function(event) {
$('#hide-menu').toggleClass('show-menu');
});
.hide-menu {
background-color:#336ca6;
position: absolute;
top:0;
right:0;
z-index: 1;
width: 300px;
height: 100%;
-webkit-transform: translate3d(300px,0,0);
-moz-transform: translate3d(300px,0,0);
-o-transform: translate3d(300px,0,0);
-ms-transform: translate3d(300px,0,0);
transform: translate3d(300px,0,0);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.show-menu {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
I've tried the event propagation but I can't manage to make it play.
Edit your js code to following
$('#menu-button').click(function(e){
e.stopPropagation();
$('#hide-menu').toggleClass('show-menu');
});
$('#hide-menu').click(function(e){
e.stopPropagation();
});
$('body,html').click(function(e){
$('#hide-menu').removeClass('show-menu');
});
Hope this will work.
Here is fiddle.
http://jsfiddle.net/ex8ddv5q/1/
For a different take on it check this Fiddle
$('#menu-button').click(function (evt) {
evt.stopPropagation();
$('#hide-menu').toggleClass('show-menu');
});
$('body,html').click(function (e) {
var container = $("#hide-menu");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.removeClass('show-menu');
}
});
In case somebody comes here and is using Angular instead of JQuery, we got this to work with something similar to the above like this:
public toggleSideNav() {
this.showSideNav = !this.showSideNav;
console.log('show side nav', this.showSideNav);
event.stopPropagation();
}
public hideSideNav() {
this.showSideNav = false;
console.log('hide side nav');
}
And this in the template:
<app-sidenav></app-sidenav>
<div class="main-body" (click)="applicationService.hideSideNav()">
<router-outlet></router-outlet>
</div>
Suppose if your sidebar width is 270px,check the mouse click coordinate.If it's greater give its style left attribute as -270px;
function handleMousePos(event) {
var mouseClickWidth = event.clientX;
if(mouseClickWidth>=270){
document.getElementById("mySidenav").style.left='-270px'
}
}
document.addEventListener("click", handleMousePos);
Here is my sample:https://codepen.io/johncy/pen/oMyzZr
$('body').click(function(){
$('#hide-menu').removeClass('show-menu');
});
I start a CSS animation using the following JavaScript code (element is a div, name is the name of an existing rule, destination is where the element should move to). The first time this function is called, it works as intended (the div moves softly to its final destination). The second time, it simply jumps to the destination (because I explicitly set left and top), but no movement happens. If I set a breakpoint in the line, where the name assignment happens (webkitAnimationName), the animation is performed as it is the first time. Do I need a delay?
function flyTo(element, name, destination) {
var rule = findKeyframesRule(name);
if (rule != null) {
element.style.webkitAnimationName = "none";
// remove the existing 0% and 100% rules
rule.deleteRule("from");
rule.deleteRule("to");
// create new 0% and 100% rules
rule.insertRule("from {top: " + element.style.top + "; left: " + element.style.left + ";}");
rule.insertRule("to {top: " + px(destination.y) + "; left: " + px(destination.x) + ";}");
// assign the animation to our element (which will cause the animation to run)
element.style.left = px(destination.x);
element.style.top = px(destination.y);
element.style.webkitAnimationDuration = "1s";
element.style.webkitAnimationTimingFunction = "linear";
element.style.webkitAnimationName = name;
} else {
element.style.left = px(destination.x);
element.style.top = px(destination.y);
}
}
I am using Google Chrome
I'm not sure where the mistake in your code is. But i try to give you another (and in my opinion better solution). Example of my code of a sliding menu:
#tag-menu {
top: 0px;
width: 270px;
height: 100%;
left: -370px;
background: #2F535C;
z-index: 9;
box-shadow: 5px 5px 10px 0px rgba(84,84,84,0.25);
position: fixed;
display: block;
transition: left 0.25s ease-out;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-transform: translateX(-317px);
-moz-transform: translateX(-317px);
-o-transform: translateX(-317px);
-ms-transform: translateX(-317px);
}
#tag-menu.active{
left:0;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform:translateX(0px);
transition:all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
}
And then u just add and remove the "active" class. The menu will slide. Hope i could help you.
Cheers
I am trying to use jQuery animate to fly logos (<img> elements) into position from outside the screen. And once again, it is not working.
Here is my javascript (the relevant part is in the fly() method.)
$(document).ready( function () {
logoFlyer.init();
});
var logoFlyer = {
numberOfLogos : 0,
init: function () {
logoFlyer.numberOfLogos = $('.logo').length;
logoFlyer.fly(1);
},
fly: function (index) {
logo = "#logo_" + index;
$(logo).delay(300).animate({'left':'0px'}, 300, function () {
if (index < logoFlyer.numberOfLogos) {
logoFlyer.fly(index + 1);
}
});
}
}
And here is my css
.logo {
height: 100px;
display:inline-block;
margin-right: 30px;
overflow:visible;
border: 1px solid white;
}
.logo img {
height: 80px;
left: 1500px;
position:relative;
}
When I set the logos' left to 0, they are indeed where I want them to go. So the problem lies with jQuery animate
If someone can help me out here you might just save me from ditching jQuery altogether and switching to angular.js.
So this code:
$(logo).delay(300).animate({'left':'0px'}, 300, function () {
if (index < logoFlyer.numberOfLogos) {
logoFlyer.fly(index + 1);
}
});
The interesting part here is $(logo) which i assume treated something like $('#logo_1') or $('#logo_2') etc.. So now the point is only position relative/absolute elements are able to be animated.
So you can check if this element has the position relative/absolute.
There's already a solution, but this solution is without jQuery (only CSS3!)
HTML
<ul>
<li class='logo'>
--- Image 1 ---
</li>
<li class='logo'>
--- Image 1 ---
</li>
<li class='logo'>
--- Image 1 ---
</li>
<li class='logo'>
--- Image 1 ---
</li>
CSS
.logo {
list-style: none;
text-align: center;
/** To the left by default **/
-webkit-transform: translate(-100%);
-moz-transform: translate(-100%);
-o-transform: translate(-100%);
-ms-transform: translate(-100%);
transform: translate(-100%);
/** Translate Animation --> 0.3s ease effect **/
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.logo.show {
-webkit-transform: translate(0%);
-moz-transform: translate(0%);
-o-transform: translate(0%);
-ms-transform: translate(0%);
transform: translate(0%);
}
JS
var logoFlyer = {
numberOfLogos : 0,
init: function () {
logoFlyer.numberOfLogos = $('.logo').length;
setTimeout(function() {
logoFlyer.fly(0);
}, 300);
},
fly: function (index) {
// No need to add indexes
logo = $(".logo")[index];
$(logo).addClass("show");
setTimeout(function() {
logoFlyer.fly(index + 1);
}, 300);
}
}
$(function () {
logoFlyer.init();
});
Live Demo