I'm trying to trigger an animation through when the page is scrolled to a certain point. Here's what I have so far (Codepen version):
$(window).scroll(function () {
var hT = $('#photoshop').offset().top,
hH = $('#photoshop').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
console.log((hT - wH), wS);
if (wS > (hT + hH - wH)) {
// I need the CSS to happen here, so it happens when the page is scrolled to "photoshop". //
}
});
body {
background-color: black;
}
#photoshop {
font-family: 'Roboto', sans-serif;
color: #FF5444;
text-align: left;
background-color: transparent;
width: 20%;
margin-left: 24%;
margin-bottom: 3px;
padding: 2px;
margin-top: 10px;
padding-left: 3px;
font-size: 80%;
}
/* this is what I need to happen when the page is scrolled to id="photoshop"
#photoshop {
width: 40%;
background-color: #134;
transition: ease-in 400ms;
-moz-transition: ease-in 400ms;
-webkit-transition: ease-in 400ms;
transition-delay: 200ms;
}
*/
.percent {
display: inline;
color: #fff;
margin-right: 3px;
font-size: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="photoshop">
<div class="percent">80%</div> photoshop
</div>
</body>
I've tried doing a get element by ID function, but it won't load the css when I need it to. I don't know much about JavaScript and would like to do this with as little scripting as possible. Is there a way to change CSS after the if (wS > (hT + hH - wH)) { line?
Try the below,
You can use jQuery addClass method,
Just create a new class using css and apply that class using addClass method when the div is visible in the viewport
$(window).scroll(function() {
var hT = $('#photoshop').offset().top,
hH = $('#photoshop').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
console.log((hT - wH), wS);
if (wS > (hT + hH - wH)) {
$('#photoshop').addClass("photoshop_trans");
}
});
body {
background-color: black;
}
.dummy {
height: 500px;
}
#photoshop {
font-family: 'Roboto', sans-serif;
color: #FF5444;
text-align: left;
background-color: transparent;
width: 20%;
margin-left: 24%;
margin-bottom: 3px;
padding: 2px;
margin-top: 10px;
padding-left: 3px;
font-size: 80%;
}
/* this is what I need to happen when the page is scrolled to id="photoshop" */
#photoshop.photoshop_trans {
width: 40%;
background-color: #134;
transition: ease-in 400ms;
-moz-transition: ease-in 400ms;
-webkit-transition: ease-in 400ms;
transition-delay: 200ms;
}
.percent {
display: inline;
color: #fff;
margin-right: 3px;
font-size: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="dummy"></div>
<div id="photoshop">
<div class="percent">80%</div>photoshop
</div>
</body>
You can use the jquery .css() function (see docs). It takes a json object with the css properties and values you wish to apply. So you would do something like this:
if (wS > (hT + hH - wH)) {
$('#photoshop').css({
'width': '40%',
'background-color': '#134',
'transition': 'ease-in 400ms',
'-moz-transition': 'ease-in 400ms',
'-webkit-transition': 'ease-in 400ms',
'transition-delay': '200ms',
});
}
Related
Specifically, I want to change colors of sticky and fixed elements on my page dynamically as the user scrolls into specific sections. I know that this is possible with the pixel height on scroll, but I can't use this technique, because the background of my page consists of a stack of images. This causes the pixel height of the page to change dramatically on window resize due to the height needing to increase as the image gets wider
.
I guess it would be possible to do this with a bunch of media calls, but I'm trying to avoid this, and I'm not even sure it would work.
My main goal would be:
When a div is scrolled into view, the style (mainly color and font-weight) of the navigation bar and fixed footer change.
Also - This has to be in Vanilla JS.
If someone has a pure CSS solution, that's very acceptable as well, I just can't think of a way this would work.
Thank you!
How About Using This?
These are VanillaJS SpyScroll
https://github.com/cferdinandi/gumshoe
https://github.com/ederssouza/vanillajs-scrollspy
From Codepen zchee/pen/ogzvZZ
HTML
<div class="m1 menu">
<div id="menu-center">
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>Portfolio
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div id="home" class="section"></div>
<div id="portfolio" class="section"></div>
<div id="about" class="section"></div>
<div id="contact" class="section"></div>
SCSS
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.menu {
width: 100%;
height: 75px;
background-color: rgba(0, 0, 0, 1);
position: fixed;
background-color: rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.light-menu {
width: 100%;
height: 75px;
background-color: rgba(255, 255, 255, 1);
position: fixed;
background-color: rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
ul {
margin: 15px 0 0 0;
li {
list-style: none;
margin: 0 30px 0 0;
display: inline;
}
}
}
.active {
font-family: 'Droid Sans', serif;
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 50px;
}
a {
font-family: 'Droid Sans', serif;
font-size: 14px;
color: black;
text-decoration: none;
line-height: 50px;
}
#home {
background-color: grey;
height: 100%;
width: 100%;
overflow: hidden;
}
#portfolio {
height: 100%;
width: 100%;
}
#about {
background-color: blue;
height: 100%;
width: 100%;
}
#contact {
background-color: red;
height: 100%;
width: 100%;
}
JS
(function() {
'use strict';
var section = document.querySelectorAll(".section");
var sections = {};
var i = 0;
Array.prototype.forEach.call(section, function(e) {
sections[e.id] = e.offsetTop;
});
window.onscroll = function() {
var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
for (i in sections) {
if (sections[i] <= scrollPosition) {
document.querySelector('.active').setAttribute('class', ' ');
document.querySelector('a[href*=' + i + ']').setAttribute('class', 'active');
}
}
};
})();
I want to be able to type in the aspect ratio for the div and not have to manually calculate and input the height in the CSS each time.
It's not a big deal, but it would be more elegant this way and I want to learn what the mistake was for future reference.
window.onload = function() {
var x = document.getElementById("movie");
var ar = 1.33;
x.style.height = x.style.height / ar;
};
body {
background: black;
margin: 0 auto;
max-width: 200px;
height: auto;
}
#movie {
width: 200px;
height: 100px;
background: navy;
}
.t {
-webkit-animation: change 48s infinite;
-moz-animation: change 48s infinite;
-o-animation: change 48s infinite;
animation: change 48s infinite;
}
.name {
font-family: 'Alegreya Sans', Helvetica, sans-serif;
font-size: 13px;
color: gold;
text-align: center;
letter-spacing: 3px;
margin-top: 36px;
opacity: 0.3;
}
#keyframes change {
from {
background-color: black;
}
to {
background-color: white;
}
}
<body>
<div id="movie" class="t"></div>
<p class="name">Pedro Costa</p>
</body>
CSS actually has a calc method that you can use.
width: calc(100% - 100px);
Ex: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_func_calc
x.style.height is an empty string because it's looking at the #movie element's style attribute (which is initially empty). The error likely stems from attempting to divide a string by a number.
To figure out what styles are applied via a style sheet or <style> block, you could look at document.getComputedStyle(). However, where you're interested in the height of the element, you might find it preferable to look at the element's offsetHeight property instead. Once you've computed the new height, you'll also need to make sure you append the correct units (e.g. px) before adding it as a style to the element.
x.style.height = x.offsetHeight / ar + 'px';
window.onload = function() {
var x = document.getElementById('movie');
var ar = 1.33;
x.style.height = x.offsetHeight / ar + 'px';
};
body {
background: black;
margin: 0 auto;
max-width: 200px;
height: auto;
}
#movie {
width: 200px;
height: 100px;
background: navy;
}
.t {
-webkit-animation: change 48s infinite;
-moz-animation: change 48s infinite;
-o-animation: change 48s infinite;
animation: change 48s infinite;
}
.name {
font-family: 'Alegreya Sans', Helvetica, sans-serif;
font-size: 13px;
color: gold;
text-align: center;
letter-spacing: 3px;
margin-top: 36px;
opacity: 0.3;
}
#keyframes change {
from {
background-color: black;
}
to {
background-color: white;
}
}
<body>
<div id="movie" class="t"></div>
<p class="name">Pedro Costa</p>
</body>
Alternatively, you could seed the #movie element's height as an inline style, but this is generally considered poorer practice.
x.style.height = parseInt(x.style.height) / ar + 'px';
window.onload = function() {
var x = document.getElementById('movie');
var ar = 1.33;
x.style.height = parseInt(x.style.height) / ar + 'px';
};
body {
background: black;
margin: 0 auto;
max-width: 200px;
height: auto;
}
#movie {
width: 200px;
background: navy;
}
.t {
-webkit-animation: change 48s infinite;
-moz-animation: change 48s infinite;
-o-animation: change 48s infinite;
animation: change 48s infinite;
}
.name {
font-family: 'Alegreya Sans', Helvetica, sans-serif;
font-size: 13px;
color: gold;
text-align: center;
letter-spacing: 3px;
margin-top: 36px;
opacity: 0.3;
}
#keyframes change {
from {
background-color: black;
}
to {
background-color: white;
}
}
<body>
<div id="movie" class="t" style="height: 100px;"></div>
<p class="name">Pedro Costa</p>
</body>
I am creating a relationship editor. The user create some elements and is able to link them creating a relationship (bidirectional). I've created the first part (users creating elements). Now I need to create lines connecting two DIVs when users double click an element, for example.
I know that may have a couple of ways to do it, but actually I have no idea how to start it. What would be a starting point?
$(function() {
$("#BtInsert").button()
.click(function() {
var pad = "000000"
var cor = "" + Math.floor(Math.random() * 16777215).toString(16);
cor = "#" + pad.substring(0, pad.length - cor.length) + cor;
var newDIV = document.createElement('div');
$(newDIV).addClass("base")
.appendTo($("#container"))
.html('N')
.dblclick(function() {
alert('Want to start to create a line from this div to another double click');
})
.draggable({
containment: "parent"
})
.css({
left: Math.floor(Math.random() * ($("#container").width() - $(".base").width())),
top: Math.floor(Math.random() * ($("#container").width() - $(".base").width()))
})
.css("background-color", cor);
})
});
#BtInsert {
top: 405px;
width: 400px;
position: absolute;
}
body {
margin: 0px;
padding: 0px;
}
#container {
border: solid 1px #CCC;
width: 400px;
height: 400px;
padding: 0;
margin: 0;
top: 0;
left: 0;
background-color: whitesmoke;
}
.base {
height: 50px;
width: 50px;
top: 30px;
left: 30px;
border-radius: 25px;
box-shadow: 2px 2px 2px #888888;
vertical-alignment: middle;
line-height: 50px;
text-align: center;
margin-bottom: 5px;
font-family: Calibri;
font-weight: bold;
font-size: 2em;
color: white;
background-color: #CCC;
cursor: pointer;
-webkit-transition: width 3s, height 3s, border-radius 3s, line-height 3s, box-shadow 3s;
transition: width 3s, height 3s, border-radius 3s, line-height 3s, box-shadow 3s;
float: left;
position: absolute;
z-index: 0;
}
.base:hover {
z-index: 1000;
color: #333;
width: 80px;
height: 80px;
border-radius: 50px;
line-height: 80px;
box-shadow: 4px 4px 4px #888888;
-webkit-transition: width 1s, height 1s, border-radius 1s, line-height 1s, box-shadow 1s;
transition: width 1s, height 1s, border-radius 1s, line-height 1s, box-shadow 1s;
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="container">
</div>
<a href="#" id="BtInsert">
Insert an element
</a>
JS Fiddle
Its better to use SVG instead of HTML for this kind of representations. you will have more flexibility in drawing shapes in SVG.
You can take a look at http://d3js.org/ or http://raphaeljs.com/
See this examples:
http://bl.ocks.org/enoex/6201948
http://blog.stephenboak.com/2012/06/15/d3-flow-vis-tutorial.html
-> https://web.archive.org/web/20130108020533/http://blog.stephenboak.com:80/2012/06/15/d3-flow-vis-tutorial.html
it's doing something similar to what you want.
I'm making a custom jQuery slider and for whatever reason, my jQuery function is not firing on the first click, only subsequent clicks.
I've searched stackoverflow for solutions, but none of them seem to match my issue. Here is my code:
var theTestimonial = jQuery('.testimonial-wrapper');
var theWidth = theTestimonial.width();
var widthCount = theWidth;
jQuery('.testimonial-container').wrap('<div class="extra-wrapper"></div>');
jQuery('.testimonial-container').css('margin-left', '0px');
jQuery('.extra-wrapper').css({
width: function() {
return theWidth;
},
position: 'relative',
overflow: 'hidden'
});
//get total of image sizes and set as width for ul
var totalWidth = theTestimonial.length * theWidth;
jQuery('.testimonial-container').css({
width: function(){
return totalWidth;
}
});
jQuery('.next').on("click", function () {
if (widthCount < totalWidth) {
widthCount = widthCount + 995;
jQuery('.testimonial-container').animate({
"margin-left": theWidth = theWidth - 996
}, 750);
}
});
jQuery('.prev').on("click", function () {
if (widthCount >= totalWidth && widthCount > 0) {
jQuery('.testimonial-container').animate({
"margin-left": theWidth = theWidth + 996
}, 750);
widthCount = widthCount - 996;
}
});
HMTL:
<div class="testimonial-outer">
<span class="prev"><</span>
<span class="next">></span>
<div class="wrapper testimonial-container">
<?php if( have_rows('testimonials') ) : ?>
<?php while( have_rows('testimonials') ) : the_row(); ?>
<div class="testimonial-wrapper">
<div class="section-title">
<h3><?php echo the_sub_field('section_title',$postID);?></h3>
</div>
<div class="testimonial">
<div class="testimonial-left">
<img src="<?php the_sub_field('testimonial_image',$postID);?>" alt="">
</div>
<div class="testimonial-right">
<div class="testimonial-right-inner">
<?php the_sub_field('testimonial_copy',$postID);?>
<span><?php the_sub_field('testimonial_by',$postID);?></span>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<div class="clear"></div>
</div>
</div>
CSS
.testimonial-outer {
float: left;
width: 100%;
background: #fbb52e;
padding: 40px 0 74px;
}
.testimonial-outer .section-title h3 {
color: #fff;
}
.wrapper {
width: 996px;
margin: 0 auto;
}
.testimonial-outer .testimonial {
float: left;
width: 100%;
padding: 37px 0 0;
}
.testimonial-left {
float: left;
width: 32.3%;
}
.testimonial-left img {
max-width: 100%;
}
.testimonial-right {
float: right;
width: 65%;
padding: 50px 0 0 70px;
background: url(images/quote-start.png) no-repeat left top;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 43px 0 0;
}
.testimonial-right-inner {
float: right;
width: 100%;
background: url(images/quote-end.png) no-repeat right 90%;
padding: 0 70px 0 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.testimonial-right p {
margin: 0 0 11px 0;
color: #555555;
font-family: Calibri;
font-size: 15px;
line-height: 20px;
}
.testimonial-right span {
float: right;
color: #555555;
font-family: Calibri;
font-size: 20px;
line-height: 24px;
font-weight: bold;
}
.clear {
clear: both;
}
.testimonial-container {
margin-left: 0px;
}
.testimonial-wrapper {
float: left;
width: 996px;
}
.extra-wrapper {
margin: 0 auto;
}
.testimonial-outer {
position: relative;
}
.next {
color: white;
z-index: 5;
position: absolute;
right: 2%;
top: 34%;
font-size: 78px;
cursor: pointer;
background: rgba(30, 30, 30, .5);
width: 50px;
height: 50px;
display: inline-block;
line-height: 45px;
padding: 15px;
text-align: center;
border-radius: 100%;
border: 3px solid #c48100;
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-ms-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.next:hover {
color: #fbb52e;
background: white;
border: 3px solid white;
}
.prev {
color: white;
z-index: 5;
position: absolute;
left: 2%;
top: 34%;
font-size: 78px;
cursor: pointer;
background: rgba(30, 30, 30, .5);
width: 50px;
height: 50px;
display: inline-block;
line-height: 45px;
padding: 15px;
text-align: center;
border-radius: 100%;
border: 3px solid #c48100;
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-ms-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.prev:hover {
color: #fbb52e;
background: white;
border: 3px solid white;
}
I made a few changes to the javascript, I think the first click issue was that on the animate section, it was animating before calculating the new margin. I also updated some values to theWidth variable for consistency.
Also the if statement on the .prev click was stopping the slider getting back as widthCount doesn't get above totalWidth.
https://jsfiddle.net/xyvzdenj/
var theTestimonial = jQuery('.testimonial-wrapper');
var theWidth = theTestimonial.width();
var widthCount = theWidth;
jQuery('.testimonial-container').wrap('<div class="extra-wrapper"></div>');
jQuery('.testimonial-container').css('margin-left', '0px');
jQuery('.extra-wrapper').css({
width: function () {
return theWidth;
},
position: 'relative',
overflow: 'hidden'
});
//get total of image sizes and set as width for ul
var totalWidth = theTestimonial.length * theWidth;
jQuery('.testimonial-container').css({
width: function () {
return totalWidth;
}
});
jQuery('.next').on("click", function () {
if (widthCount < totalWidth) {
widthCount = widthCount + theWidth;
jQuery('.testimonial-container').animate({
"margin-left": "-=" + theWidth
}, 750);
}
});
jQuery('.prev').on("click", function () {
if (widthCount > theWidth) {
jQuery('.testimonial-container').animate({
"margin-left": "+=" + theWidth
}, 750);
widthCount = widthCount - theWidth;
}
});
FYI I had just the same problem, an event fired on second click. The cause turned out to be simple, I accidentally swapped actions:
$('.element').click(function{
$(this).toggleClass('iWantAction');
if($(this).hasClass('iWantAction')){
sitStill(); //WRONG! Had to be doAction1();
} else {
doAction(); //WRONG! Had to be sitStill();
}
})
So, the outcome was the same, the event didn't fire until class was added on first click and then removed on second
I know it's got to be a stupid simple problem, but it's been holding my back for too long...
I want to click the menu icon (picture) in the top right corner and have it display a transparent div menu over the entire screen. Then when I click the icon again, I want it to disappear.
JQuery is supposed to be hiding and showing a div on each click of the button. It shows the div the first time but after that, it doesn't register the click. I'm using transparent divs quite a lot on this project so my first guess is that something loads that is covering the button and that is stopping the click from "reaching" the button in question. But I've set a z-index to the button so it appears above everything else (also corroborated by the background color property) and yet when I click the button a second time, the div that it is supposed to hide stays there.
Here's my JQuery code:
$("#menuButton").click(function(){
if($("#menuOverlay").hasClass("displayIt")){
$("#menuOverlay").fadeOut(400);
} else {
$("#menuOverlay").fadeIn(400);
}
});
And here's my HTML:
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="container">
<header>
<p class="homeLink">Company Name Here</p>
<div id="menuButton"><img class="menuIcon" src="images/menuIcon.png"/></div>
</header>
<div class="slider">
<div class="sliderPic"></div>
<div class="sliderText"><p>This is come content just chilling right here.</p></div>
</div>
</div>
<footer>
<div id="arrowJumper"><img class="arrowIcon" src="images/greyArrow.png"/></div>
</footer>
<div id="menuOverlay" class="menuDiv">
<ul id="menu">
<li>Work.</li>
<li>About.</li>
<li>Careers.</li>
<li>Ideas.</li>
<li>News.</li>
<li>Events.</li>
<li>Contact.</li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
And just in case it's relevant, here's my CSS:
html, body {
width: 100%;
height: 100%;
}
body, html, .non-footer {
height: 100%;
min-height: 100%;
width: 100%;
}
.footer {
height: 55px;
margin-top: -55px;
width: 100%;
}
#arrowJumper {
width: 100%;
height: 55px;
margin-top: -56px;
background: rgba(0, 0, 0, 0);
/*background-image: url('../images/greyArrow.png');
background-position: center -15px;
background-repeat: no-repeat;*/
text-align: center;
position: absolute;
}
header {
position: absolute;
width: 100%;
z-index: 90;
}
footer {
position: absolute;
width: 100%;
background: rgba(0, 0, 0, 0);
z-index: 90;
}
.slider {
position: absolute;
height: 100%;
width: 100%;
z-index: 5;
display: block;
background: blue;
}
.homeLink {
float: left;
margin-left: 40px;
margin-top: 50px;
color: #ff6633;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 26px;
}
#menuButton {
float: right;
margin-right: 40px;
margin-top: 50px;
}
#arrowJumper img{
-webkit-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
-moz-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
-o-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570); /* custom */
margin-top: -15px;
}
#arrowJumper:hover {
background-color: #ff6633;
-webkit-transition: background-color 600ms linear;
-moz-transition: background-color 600ms linear;
-o-transition: background-color 600ms linear;
-ms-transition: background-color 600ms linear;
transition: background-color 600ms linear;
}
#arrowJumper:hover img {
-webkit-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
-moz-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
-o-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570); /* custom */
margin-top: 4px;
}
#container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#menuOverlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#menuOverlay {
position: absolute;
z-index: 10;
display: none;
background: rgb(200, 102, 51); /* The Fallback */
background: rgba(200, 102, 51, 0.5);
text-align: center;
height: 960px;
}
#menuOverlay ul{
vertical-align: center;
position: absolute;
top: 10%;
transform: translateY(-50%);
width: 100%;
font-size: 56px;
font-weight: normal;
color: #fff;
}
#menuOverlay ul li{
margin: 0;
padding-top: 0.25em;
padding-bottom: 0.25em;
}
#menuOverlay ul li:hover{
color: #ff6633;
background: #fff;
}
.displayIt {
display: block;
}
And here's a fiddle for convenience: http://jsfiddle.net/yv9mr/
I'm pretty new at all of this so I really appreciate your assistance. I'm sure it's something simple. Thanks all!
You need to add/remove class on each click like this in your if-else block
if($("#menuOverlay").hasClass("displayIt")){
$("#menuOverlay").fadeOut(400);
$("#menuOverlay").removeClass("displayIt"); //remove class
} else {
$("#menuOverlay").fadeIn(400);
$("#menuOverlay").addClass("displayIt"); //add class
}
But the simplest way would be to fadeToggle the required div , in order to hide/show:
$("#menuOverlay").fadeToggle();
I suggest you use jQuerys .fadeToggle() method. In my opinion cleaner to let jQuery manage the toggle effect:
$("#menuButton").click(function(){
$("#menuOverlay").fadeToggle(400);
});
Tested and works with your example: JSFiddle.
Try this:
var clicked = false;
$("#menuButton").click(function(){
if (clicked == true){
$("#menuOverlay").fadeOut(400);
clicked = false;
} else {
$("#menuOverlay").fadeIn(400);
clicked = true;
}
});
The issue is that you are not adding or removing the class. Your event listener is working correctly, but you should add
$("#menuOverlay").toggleClass("displayIt");
to the end of your javascript (after the if/else).
A class such as "expanded" would be more semantic.
Reason Function is called again but your condition if($("#menuOverlay").hasClass("displayIt")) is always true so else never executes.. You can do
$("#menuButton").click(function(){
if($("#menuOverlay").hasClass("displayIt")){
$("#menuOverlay").removeClass("displayIt");
$("#menuOverlay").fadeOut(400);
} else {
$("#menuOverlay").addClass("displayIt");
$("#menuOverlay").fadeIn(400);
}
});
Fiddle
Or Simply
var shown=false;
$("#menuButton").click(function(){
if(!shown)
{
$("#menuOverlay").fadeOut(400);
shown =true;
}
else
{
$("#menuOverlay").fadeIn(400);
shown=false;
}
});