Menu toggleClass open doesn't work - javascript

I'm just trying to simply using toggleClass to trigger a class of .open on a closed menu. Here's an image of what it should look like before and after:
So I know this is pretty simple as I've made it work before, but I can't figure out why it won't work now.
My HTML is like this:
<div id="nav">
<h1>SAKURA GARAGE</h1>
<a href="javascript:void(0)" id="button" class="menu_toggle_container">
<span class="menu_toggle"></span>
</a>
<ul class="menu">
<li>Products</li>
<li>Services</li>
<li>Gallery</li>
<li>About</li>
</ul>
</div>
My css is:
#nav{
background-color:black;
position:absolute;
z-index:115;
top:0;
padding:18px 0 18px 25px;
#include span-columns(12);
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
h1{
#include span-columns(5);
letter-spacing: .1em;
}
.menu{
height:0em;
max-height:0%;
overflow:hidden;
}
.open{
height:10em;
max-height:100%;
overflow:hidden;
}
}
Jquery:
$("#button").click(function(){
$(".menu").toggleClass(".open");
});
And here's a live version:Live Example
I have a hamburger icon that when clicked, animates to change to an x. I found the code online and it works fine, but I'm not sure if that's what's messing with the toggle class. When I inspect element, I can see the class of .open being added and removed, but nothing changes.
Hopefully this isn't toooo simple of a solution...Thanks for reading though!

Try without the . in the toggleClass method:
$(".menu").toggleClass("open");
Also, your CSS is a little off. You have an extra closing } after the .open class. Is this a typo on Stack Overflow? The closing } should be after the #nav properties have been declared.
Something like this:
#nav{
background-color:black;
position:absolute;
z-index:115;
top:0;
padding:18px 0 18px 25px;
#include span-columns(12); /* not sure what this does? */
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
}
h1{
#include span-columns(5); /* not sure what this does? */
letter-spacing: .1em;
}
.menu{
height:0em;
max-height:0%;
overflow:hidden;
}
.open{
height:10em;
max-height:100%;
overflow:hidden;
}

Use this:
$(".menu").toggleClass("open");
Instead of this
$(".menu").toggleClass(".open");
You do not need a dot as a prefix as the method already assumes its argument to be a class.

Related

enlarge images with hover on slider bootstrap3 Slide Carousel

I view this code sample to enlarge an image.
I try used it in bootstrap3 Slide Carousel.
I try add 'enlarge' class bootstrap3 slide carousel items.:
<div class="item active">
<div class="item-item col-md-3 col-sm-4">
<a href="#">
<img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive enlarge">
</a>
</div>
</div>
css:
.enlarge {
width: 100%;
float: left;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.enlarge:hover {
width: 120%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
cursor: pointer;
}
you can see change here in jsfiddle.
but it can not enlarge.how can I do it?
The issue is that, if you want to increase the width of the image to suppose 120%, the increase will work perfectly fine. But bootstrap.min.css has the following style properties for img element.
CSS:
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
Thus you are not able to scale above 100% if you add the class.
.carousel .img-responsive{
max-width:none;
}
It will override the CSS in bootstrap, if you any reason you are not able to view the changes you can add !important, which will override on priority.
.carousel .img-responsive{
max-width:none !important;
}
This will apply to all the images under the carousels.
If you want to specify only for one carousel, you can specify the ID of the carousel, like
#myCarousel .img-responsive{
max-width:none;
}
Here is a working DEMO.
JSFiddle Demo

Fade in on switching classes in javascript

I am sure my problem is pretty easy to solve. I want to apply fade in when my header became visible and fadeout when it isn't visible. So i don't want to be that rough. I tried with header.removeClass('clearHeader').addClass("darkHeader").fadeIn(slow); but that didn't help me. I also tried to add transitions in CSS but that didn't help me too.
Javascript:
$(function() {
//caches a jQuery object containing the header element
var header = $(".clearHeader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
header.removeClass('clearHeader').addClass("darkHeader");
} else {
header.removeClass("darkHeader").addClass('clearHeader');
}
});
});
CSS:
header {
width:100%;
height: 70px;
position: fixed;
z-index:999;
background-color:#fff;
box-sizing:border-box;
}
header nav {
display:inline-block;
float:right;
line-height:70px;
}
header nav a {
margin-left: 25px;
font-weight: 700;
font-size: 18px;
}
header nav a:hover {
text-shadow:1px 1px 1px red;
}
.clearHeader{
display:none;
opacity:0;
width: 100%;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}
.darkHeader {
display:visible;
opacity:1;
z-index:999;
}
CODE PEN
try by remove opacity and display visible code from css and try fadeIn and fadeOut Like:
if (scroll >= 50) {
header.removeClass('clearHeader').addClass("darkHeader").fadeIn('slow');
} else {
header.removeClass("darkHeader").addClass('clearHeader').fadeOut('slow');
}
To solve your problem you can simply use jQuery's animate. Here's the syntax and explanation. It smoothly animates any css property you would want to animate. Therefore you can do:
CSS:
header {
opacity:1;
}
(just sets the default)
JS:
header.animate({opacity: "0"}, 500);
To fade out, and the same thing but with opacity 1 to fade in. You may want to comment out the display part of your classes for testing though, as it may influence how it all behaves.

How to apply transition when the hover is removed or gone? [duplicate]

This question already has answers here:
CSS Transition - eases in but doesn't ease out?
(2 answers)
Closed 8 years ago.
I have given header a transition using pseudo class hover. But i want it to go to it's original position with the same cubic-bezier transition function in 0.5s. You can see it abruptly goes back when hover is taken off. So is there any pseudo class for hover out or will i have to use jQuery?
header{
background:#000;
padding:50px ;
-webkit-transition: 0s padding-bottom;
}
header:hover{
padding-bottom:90px;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.175,0.885,0.320,1.275);
}
<header>
</header>
You need to put all the transition related styles on the header class, not the :hover state. Try this:
header {
background: #000;
padding: 50px ;
-webkit-transition: 0.5s padding-bottom;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
header:hover {
padding-bottom: 90px;
}
<header></header>
you just have to give the transition to the header.. so the element still has the style also you do not hover any more.
right now the transition is set to the hover so it only transitions on hover ;)
see code snippet
header {
background: #000;
padding: 50px;
-webkit-transition: padding-bottom 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
header:hover {
padding-bottom: 90px;
}
<header>
</header>
Set the duration properties outside the :hover style too, as you did with the transition one...
header{
background:#000;
padding:50px ;
-webkit-transition: 0s padding-bottom;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.175,0.885,0.320,1.275);
}
header:hover{
padding-bottom:90px;
}
<header>
</header>

Smooth Transition On Hovering

I've been working on finding a way to change out this <img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg" by using a :hover with an image called repair_h.svg. What I initially was doing was placing a :hover on #repair like so #repair :hover and giving repair a background-image:url but this was not working and I think there are a few reasons why.
That was my initial process...Since that did not work I did some research on how to achieve this correctly and found a way to achieve it with JS. Which is way less hackie than some other css and html solutions I was looking into.
Using JS ended up working great for the purpose of what I need done although there's one piece that I'd like to add to this and I'm not quite sure how to do it.
I'd like to add a smooth transition between the image's when hovered on.
LINK TO MY CURRENT BUILD http://kapena.github.io/pp_web/
The icon I am working on here is called Repair Services
HTML
<li>
<a href="#">
<img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg"
onmouseover="this.src='http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg'"
onmouseout="this.src='http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg'" border="0" alt="About Plumbing Repairs in Honolulu Hawaii">
</img>
</a>
</li>
JS
function hover(element) {
element.setAttribute('src', 'http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg');
}
function unhover(element) {
element.setAttribute('src', 'http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg');
Also if any of you have any suggestions on away to perform a this entire task without JS and entirely with HTML and CSS then I'd be open to seeing how you'd do it :)
Thanks
You can do something like this with markup and css only:
HTML:
<a href="#">
<img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg" border="0"
alt="About Plumbing Repairs in Honolulu Hawaii" />
</a>
CSS:
a {
background:url('http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg') 0 0 no-repeat;
width:150px;
margin:0;
padding:0;
float:left;
}
a img {
opacity:1;
transition:opacity .5s;
float:left;
}
a:hover img {
opacity:0;
transition:opacity .5s;
}
Demo
In CSS you cannot transition/animate directly between two images becuase CSS is incapable of interpolating keyframes between two none value-scale values.
That said, there are a few approaches using only CSS.
If you need to keep the same element/id the images are being transitioned on, the only approach would be to replace the image with a non-replaced element so you can use pseudo elements, then do e.g.:
span {
display: inline-block;
position: relative;
}
span:before,
span:after {
display: inline-block;
height: 300px;
width: 300px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
span:before {
content: url(http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg);
}
span:after {
opacity: 1;
transition: opacity 200ms ease-in;
content: url(http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg);
}
span:hover:after {
opacity: 0;
}
<span></span>
Alternatively if this isnt a consideration, a common approach is to overlap two images and transition the opacity of the correct image on hover, revealing the image underneath.
div:hover img:last-of-type {
opacity: 1;
transition: opacity 200ms ease-in;
}
div:hover img:last-of-type {
opacity: 0;
}
div img {
position: absolute;
top: 0;
left: 0;
}
<div>
<img src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg" />
<img src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg" />
</div>
If you remove the blue background from the image(s) and keep it transparent, you can do this easily with css:
<style type="text/css">
ul {
list-style: none;
}
a {
display: inline-block;
width: 230px;
height: 240px;
background-color: #8bdafc;
/* background-image: url(/path/to/img/with-transparent-bg.svg) */
background-repeat: no-repeat;
-webkit-transition: background-color .3s;
-moz-transition: background-color .3s;
-o-transition: background-color .3s;
transition: background-color .3s;
}
a:hover {
background-color: #4fc3fb;
}
</style>
<ul>
<li>
</li>
</ul>
Don't set an src attribute on the img
<img src='' width=500 height=500>
img{
background: url("src1");
}
img:hover{
background: url("src2");
}

Start a CSS transition via JS does not work

I want to start a CSS transition, that changes the background-color and the dimension if a button is clicked. But there is a mistake in the code:
js fiddle
jQuery
$(function() {
$('#change').click(function() {
$('#box').addClass('change');
});
});
HTML
<div id="box" class="start"></div>
<div id="button">click</div>
CSS
.start{
height:100px;
width:100px;
background: black;
transition: all 2.0s linear;
-webkit-transition: all 0.8s linear;
-moz-transition: all 0.8s linear;
-ms-transition: all 0.8s linear;
-o-transition: all 0.8s linear;
}
.change{
width: 200px;
height: 200px;
background:yellow;
}
#button{
width: 80px;
height: 20px;
padding: 4px;
margin: 5px;
border:solid 1px black;
background: grey;
cursor: pointer;
color: white;
}
The id of the button in the HTML & CSS (#button) is different from the id of the button in the JS (#change), that's why.
If you replace #change with #button in the JS, then it works.
Note: When you list transition rules for various browsers, you don't need the -ms- one (IE10 supports transitions unprefixed and IE9 does not support them at all; the -ms- prefix was only needed for early IE10 previews) and you should always put the unprefixed one last. At this point, all current versions of desktop browsers support transitions unprefixed.
Id of your button is button, not change.
Use $('#button') instead of $('#change').
DEMO HERE.
It should be using #button,
$(function() {
$('#button').click(function() {
$('#box').addClass('change');
});
});
as per your HTML
<div id="button">click</div>
http://jsfiddle.net/qsAZQ/

Categories

Resources