jQuery ".each()" function only applying script to last class on page

jQuery ".each()" function only applying script to last class on page - javascript

I'm attempting to create a script that changes the colour of the navigation bar if the nav is currently hovered over a part of the page that has a light/white background to keep the nav visible.
I want to change the colour of the hamburger menu which is laid out like so:
<div id="nav_ham" onclick="openNav()">
<span class=""></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
</div>
To change the colour of the spans, I want to add a class ham_dark which does the following:
.ham_dark { background: #000!important;}
I've given the white backgrounds a class of section_white and have applied the following code:
//CHANGES COLOR OF NAV ON WHITE SECTIONS
function onScreen() {
// Check if the top of the page collides with each section
jQuery('.section_white').each(function() {
var windowScroll = jQuery(document).scrollTop();
var navHeight = jQuery('.nav').height();
// Complex line checks if windowScroll (top of page) + nav bar hits Section Top / Bottom
if( windowScroll + navHeight >= jQuery(this).offset().top && windowScroll + navHeight <= jQuery(this).offset().top + jQuery(this).height()) {
// This section is active! Add Highlight
console.log('working');
jQuery('#nav_ham span').addClass('ham_dark')
} else {
// No - Remove highlight class
jQuery('#nav_ham span').removeClass('ham_dark')
}
});
}
jQuery(window).on('scroll resize', function () {
onScreen();
});
The console is logging "working" when the nav is hovering over all of the the section_white classes, however it only applies the addClass to the final section_white class on the page, ignoring all others.
Why is it that the console.log is firing on all of the classes but only applying the addClass to the final instance of section_white?
I have mocked this up and the error is still occuring (nav changes colour on final section_white div but not the first): jsfiddle
Thanks

As per my comments, your loop is not ending once you have added the dark class so it is being removed again. Try this (have returned false when class is added to break loop):
//CHANGES COLOR OF NAV ON WHITE SECTIONS
function onScreen() {
// Check if the top of the page collides with each section
$('.section_white').each(function() {
var windowScroll = $(document).scrollTop();
var navHeight = $('.nav').height();
// Complex line checks if windowScroll (top of page) + nav bar hits Section Top / Bottom
if (windowScroll + navHeight >= $(this).offset().top && windowScroll + navHeight <= $(this).offset().top + $(this).height()) {
// This section is active! Add Highlight
console.log('working');
$('.cls-1').addClass('logo_dark');
$('#nav_ham span').addClass('ham_dark')
return false; // break loop
} else {
// No - Remove highlight class
$('.cls-1').removeClass('logo_dark');
$('#nav_ham span').removeClass('ham_dark')
}
});
}
$(window).on('scroll resize', function () {
onScreen();
});
.nav {
position: fixed;
height: 10px;
}
.section_black {
background: black;
height: 300px;
}
.section_white {
background: white;
height: 300px;
}
.ham_dark { background: black!important; }
#nav_ham {
width: 30px;
height: 30px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav_ham span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #fff;
border-radius: 1px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav_ham span:nth-child(1) {
top: 0px;
}
#nav_ham span:nth-child(2),
#nav_ham span:nth-child(3) {
top: 8px;
}
#nav_ham span:nth-child(4) {
top: 16px;
}
#nav_ham.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav_ham.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav_ham.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav_ham.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<div id="nav_ham" onclick="openNav()">
<span class=""></span>
<span class=""></span>
<span class=""></span>
<span class=""></span></div>
</div>
<div class="section_black">
BLACK
</div>
<div class="section_white">
WHITE
</div>
<div class="section_black">
BLACK
</div>
<div class="section_white">
WHITE
</div>
<div class="section_black">
BLACK
</div>
<div class="section_black">
BLACK
</div>

Related

Run jQuery function on initial page load and scroll

I'm working on a design and I would like make a few blocks "slide in" from the sides when they're in-view of the window. I have it working after following some tutorials online, but it will only work if the elements are not in-view and you scroll down the page to see them. What I would like to do is have the elements also "slide" when the page loads initially. I feel this might be too much code to just post here, so I added everything to a fiddle.
/*Interactivity to determine when an animated element in in view. In view elements trigger our animation*/
$(document).ready(function() {
//window and animation items
var animation_elements = $.find('.animation-element');
var web_window = $(window);
//check to see if any animation containers are currently in view
function check_if_in_view() {
//get current window information
var window_height = web_window.height();
var window_top_position = web_window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
//iterate through elements to see if its in view
$.each(animation_elements, function() {
//get the elements information
var element = $(this);
var element_height = $(element).outerHeight();
var element_top_position = $(element).offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)
if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
element.addClass('in-view');
} else {
element.removeClass('in-view');
}
});
}
//on or scroll, detect elements in view
$(window).on('scroll resize', function() {
check_if_in_view()
})
//trigger our scroll event on initial load
$(document).ready('scroll');
});
.container {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.row {
border-bottom: solid 1px transparent;
margin-bottom: 2em;
}
.row>* {
float: left;
}
.row:after,
.row:before {
content: '';
display: block;
clear: both;
height: 0;
}
.row.uniform>*> :first-child {
margin-top: 0;
}
.row.uniform>*> :last-child {
margin-bottom: 0;
}
.wrapper {
padding: 1em 0em 4em;
}
.profiles {
margin-bottom: 4em;
padding-top: 4em;
background-color: #fff;
height: 200px;
}
.profile {
width: 24%;
height: 100px;
margin-bottom: 2em;
margin-right: 2px;
text-align: center;
background-color: #666;
border: 1px solid #000;
color: black;
}
.animation-element {
opacity: 0;
position: relative;
}
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(-150px, 0px, 0px);
-webkit-transform: translate3d(-150px, 0px, 0px);
-o-transform: translate(-150px, 0px);
-ms-transform: translate(-150px, 0px);
transform: translate3d(-150px, 0px, 0px);
}
.animation-element.slide-left.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
/*animation element sliding right*/
.animation-element.slide-right {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(150px, 0px, 0px);
-webkit-transform: translate3d(150px, 0px, 0px);
-o-transform: translate(150px, 0px);
-ms-transform: translate(150px, 0px);
transform: translate3d(150px, 0px, 0px);
}
.animation-element.slide-right.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="wrapper">
<div class="container">
<section class="profiles">
<div class="row">
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-right">
</section>
<section class="profile animation-element slide-right">
</section>
</div>
</section>
</div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
The bit of code that I've been playing with is at the bottom of the jquery bit, but nothing I change seems to effect anything.
//trigger our scroll event on initial load
$(document).ready('scroll');
But I will admit I have very little knowledge of this, and I'm just following tutorials and examples online. On the fiddle, if you scroll down and back up, you'll see the boxes slide into view. What I'm wanting to do is make them slide in on the initial page load and also as you scroll down the page (i'm using the same code on other elements further down the page on the full version).
Thank you to anyone who can help me!

Pass your function as a reference to both the event listener and ready()
$(window).on('scroll resize', check_if_in_view);
$(document).ready(check_if_in_view);

You are almost there... all you need to do is trigger your check_if_in_view function when all the html is ready - that just means passing in the function by name to your last document.ready call. Your snippet works with that one tweak.
For some general advice, I wouldn't try to "fake" a scroll event just to trigger other behaviours - it may get confusing with changes later on. What you really want is to run your custom function right after pageload, and jquery will let you do precisely that.
/*Interactivity to determine when an animated element in in view. In view elements trigger our animation*/
$(document).ready(function() {
//window and animation items
var animation_elements = $.find('.animation-element');
var web_window = $(window);
//check to see if any animation containers are currently in view
function check_if_in_view() {
//get current window information
var window_height = web_window.height();
var window_top_position = web_window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
//iterate through elements to see if its in view
$.each(animation_elements, function() {
//get the elements information
var element = $(this);
var element_height = $(element).outerHeight();
var element_top_position = $(element).offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)
if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
element.addClass('in-view');
} else {
element.removeClass('in-view');
}
});
}
//on or scroll, detect elements in view
$(window).on('scroll resize', function() {
check_if_in_view()
})
//trigger our scroll event on initial load
$(document).ready(check_if_in_view);
});
.container {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.row {
border-bottom: solid 1px transparent;
margin-bottom: 2em;
}
.row>* {
float: left;
}
.row:after,
.row:before {
content: '';
display: block;
clear: both;
height: 0;
}
.row.uniform>*> :first-child {
margin-top: 0;
}
.row.uniform>*> :last-child {
margin-bottom: 0;
}
.wrapper {
padding: 1em 0em 4em;
}
.profiles {
margin-bottom: 4em;
padding-top: 4em;
background-color: #fff;
height: 200px;
}
.profile {
width: 24%;
height: 100px;
margin-bottom: 2em;
margin-right: 2px;
text-align: center;
background-color: #666;
border: 1px solid #000;
color: black;
}
.animation-element {
opacity: 0;
position: relative;
}
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(-150px, 0px, 0px);
-webkit-transform: translate3d(-150px, 0px, 0px);
-o-transform: translate(-150px, 0px);
-ms-transform: translate(-150px, 0px);
transform: translate3d(-150px, 0px, 0px);
}
.animation-element.slide-left.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
/*animation element sliding right*/
.animation-element.slide-right {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(150px, 0px, 0px);
-webkit-transform: translate3d(150px, 0px, 0px);
-o-transform: translate(150px, 0px);
-ms-transform: translate(150px, 0px);
transform: translate3d(150px, 0px, 0px);
}
.animation-element.slide-right.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="wrapper">
<div class="container">
<section class="profiles">
<div class="row">
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-right">
</section>
<section class="profile animation-element slide-right">
</section>
</div>
</section>
</div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

https://api.jquery.com/ready/
Description: Specify a function to execute when the DOM is fully loaded.
You can't just pass in "scroll", as that is not a function. What you can do is call $(window).trigger('scroll') at the end, or do $(document).ready(check_if_in_view), as check_if_in_view is a function.
/*Interactivity to determine when an animated element in in view. In view elements trigger our animation*/
$(document).ready(function() {
//window and animation items
var animation_elements = $.find('.animation-element');
var web_window = $(window);
//check to see if any animation containers are currently in view
function check_if_in_view() {
//get current window information
var window_height = web_window.height();
var window_top_position = web_window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
//iterate through elements to see if its in view
$.each(animation_elements, function() {
//get the elements information
var element = $(this);
var element_height = $(element).outerHeight();
var element_top_position = $(element).offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)
if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
element.addClass('in-view');
} else {
element.removeClass('in-view');
}
});
}
//on or scroll, detect elements in view
$(window).on('scroll resize', function() {
check_if_in_view()
})
//trigger our scroll event on initial load
$(window).trigger('scroll');
});
.container {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.row {
border-bottom: solid 1px transparent;
margin-bottom: 2em;
}
.row>* {
float: left;
}
.row:after,
.row:before {
content: '';
display: block;
clear: both;
height: 0;
}
.row.uniform>*> :first-child {
margin-top: 0;
}
.row.uniform>*> :last-child {
margin-bottom: 0;
}
.wrapper {
padding: 1em 0em 4em;
}
.profiles {
margin-bottom: 4em;
padding-top: 4em;
background-color: #fff;
height: 200px;
}
.profile {
width: 24%;
height: 100px;
margin-bottom: 2em;
margin-right: 2px;
text-align: center;
background-color: #666;
border: 1px solid #000;
color: black;
}
.animation-element {
opacity: 0;
position: relative;
}
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(-150px, 0px, 0px);
-webkit-transform: translate3d(-150px, 0px, 0px);
-o-transform: translate(-150px, 0px);
-ms-transform: translate(-150px, 0px);
transform: translate3d(-150px, 0px, 0px);
}
.animation-element.slide-left.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
/*animation element sliding right*/
.animation-element.slide-right {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(150px, 0px, 0px);
-webkit-transform: translate3d(150px, 0px, 0px);
-o-transform: translate(150px, 0px);
-ms-transform: translate(150px, 0px);
transform: translate3d(150px, 0px, 0px);
}
.animation-element.slide-right.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="wrapper">
<div class="container">
<section class="profiles">
<div class="row">
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-right">
</section>
<section class="profile animation-element slide-right">
</section>
</div>
</section>
</div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

jQuery functions are not working

I modified the menu animation code from this page ...
https://codepen.io/designcouch/pen/Atyop
... and have the button open and close my menu (on click, it should show and hide #mainmenu ... by toggling the class .menuview on and off). However, it's not working. Not sure what happened ... and need some help. I've been racking my brain over this for awhile...
My code is below...
JAVASCRIPT. I don't see anything wrong...
// Menu Button
$(document).ready(function(){
$('#nav-icon3').click(function(){
$('#mainmenu').toggleClass('menuview');
$(this).toggleClass('open');
});
});
HTML (I'm using WordPress to show the menu)
<div id="mainmenu">
<?php wp_nav_menu( array( 'theme_location' => 'main-navigation', 'container' => '', 'items_wrap' => '<ul id="menu" class="%2$s">%3$s</ul>' ) ); ?>
</div>
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
STYLES (this is the responsive section of the stylesheet. Full stylesheet at http://www.silkvodka.com/wp-content/themes/silkvodka/style.css )
#mainmenu { position: absolute; top: -59999px; left: -59999px; /* Hide Menu */}
#mainmenu.menuview { position:absolute; top:60px; left:10px; display:block; float:none; width:146px; z-index:99; }
#nav-icon3 { display:block;
width: 60px;
height: 60px;
float:none;
position: absolute;
top:0; left:200px;
background-color:#494949;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span {
display: block;
position: absolute;
height: 3px;
width: 40px;
margin:0 10px;
background: #FFF;
border-radius: 1px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon3 span:nth-child(1) { top: 17px; }
#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) { top: 30px; }
#nav-icon3 span:nth-child(4) { top: 43px; }
#nav-icon3.open span:nth-child(1) { top: 14px; width: 0%; left: 50%;}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) { top: 14px; width: 0%; left: 50%; }
You can view the entire page here: http://www.silkvodka.com/cocktails/ (use a small browser window, otherwise, the responsive button wont be visible)

you are loading your javascript.js file before jquery. Your javascript.js file attempts to use jquery... switch these script tags around like:
<script type="text/javascript" src="http://www.silkvodka.com/wp-content/themes/silkvodka/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.silkvodka.com/wp-content/themes/silkvodka/js/javascript.js"></script>
This was evident by the console error "Uncaught ReferenceError: $ is not defined" which indicates you are attempting to use jquery berfore it's available.

When using wordpress, use jQuery instead of $
jQuery(document).ready(function(){
jQuery('#nav-icon3').click(function(){
jQuery('#mainmenu').toggleClass('menuview');
jQuery(this).toggleClass('open');
});
});
That should run :)

CSS animation is working only one way

I have a div that when clicked it slides up another div, but when I close the div that had slid up, it doesn't slide down, it just abruptly goes away.
I tried putting the transition on .agent-modal instead, but it achieved the same result.
$('[data-agent]').click(function() {
var element = $(this);
var target = element.data('agent');
$('body').addClass('agentLoaded');
$('[data-agent-target="' + target + '"]').addClass('active');
return false;
});
$('.close').click(function() {
$('[data-agent-target]').removeClass('active');
$('body').removeClass('agentLoaded');
return false;
});
.agent-modal {
position: fixed;
transform: translateY(100%);
-webkit-transform: translateY(100%);
left: 275px;
opacity: 1;
width: calc(100% - 275px);
height: 100%;
background-color: $c-blue;
&.active {
overflow: auto;
top: 0;
padding-top: 40px;
padding-bottom: 40px;
transform: translateY(0);
-webkit-transform: translateY(0);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-2 col-md-4 agent">
<a href="#" data-agent="alexander-cuturilo">
<div class="agent-meta">
<div class="agent-name">
<h5>Alexander Cuturilo</h5>
</div>
</div>
</a>
</div>

HTML modal popup animation not working second time

I have created the following code to display a popup, and it works fine with the animation I added afterwards to have a pop-out effect. However, if I close it and attempt to reopen it, the animation does not show? the modal just instantly appears.
How do I fix it?
<div id="overlay">
<div class="popout">
<p>Content you want the user to see goes here.</p>
Click here to [<a href='#' onclick='overlay()'>close</a>]
</div>
</div>
<style>
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
}
#overlay div {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}
.popout {
animation: popout 1s ease;
-webkit-animation: popout 1s ease;
}
#keyframes popout {
from{transform:scale(0)}
80%{transform:scale(1.2)}
to{transform:scale(1)}
}
#-webkit-keyframes popout {
from{-webkit-transform:scale(0)}
80%{-webkit-transform:scale(1.2)}
to{-webkit-transform:scale(1)}
}
</style>
<script>
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
<a href='#' onclick='overlay()'>Click here to show the overlay</a>

Look at this please
<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
Click here to [<a href='#' onclick='overlay()'>close</a>]
</div>
</div>
<style>
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
text-align: center;
z-index: 1000;
}
#overlay div {
width: 300px;
margin: 100px auto;
background-color: #fff;
border: 1px solid #000;
padding: 15px;
text-align: center;
}
.popout {
visibility: visible !important;
animation: popout 1s ease;
-webkit-animation: popout 1s ease;
-moz-animation: popout 1s ease;
-ms-animation: popout 1s ease;
}
#keyframes popout {
from {
transform: scale(0)
}
80% {
transform: scale(1.2)
}
to {
transform: scale(1)
}
}
#-webkit-keyframes popout {
from {
-webkit-transform: scale(0)
}
80% {
-webkit-transform: scale(1.2)
}
to {
-webkit-transform: scale(1)
}
}
#-moz-keyframes popout {
from {
-moz-transform: scale(0)
}
80% {
-moz-transform: scale(1.2)
}
to {
-moz-transform: scale(1)
}
}
#-ms-keyframes popout {
from {
-ms-transform: scale(0)
}
80% {
-ms-transform: scale(1.2)
}
to {
-ms-transform: scale(1)
}
}
</style>
<script>
function overlay() {
el = document.getElementById("overlay");
var clases = el.className;
if (clases.indexOf('popout') == -1) {
el.className = 'popout';
} else {
el.className = '';
}
}
</script>
<a href='#' onclick='overlay()'>Click here to show the overlay</a>
https://jsfiddle.net/xapdhxv3/1/

jquery combining multiple variables (elements set as vars)

I am trying to learn a bit of Javascript/JQuery for school and got stuck on something I don't quite understand.
Everything in my function "works" as I wanted it to, but it feels odd that I have to list each of my selectors on a different line in order to remove all classes from each.
I've tried .merge and .add as suggestions i read on other posts, but I couldn't make it work (possibly not implementing it right) and I was hoping someone can show me how to do it and maybe explain why something like this doesn't work:
$(menuWrapper, menuTrigger, menuIcon, contentWrapper).removeClass();
This is my entire function, along with it working(just desktop css) on jsFiddle
// JavaScript Document
function toggleNavSettings(swipeDirection) {
menuWrapper = $("#menu-wrapper");
menuIcon = $('#menu-icon');
menuTrigger = $("#menu-trigger-wrapper");
contentWrapper = $("#custom-wrapper");
if(menuWrapper.width() > 199){//if nav expanded
if($( document ).width() > 480){//if screen is not mobile
menuWrapper.removeClass();
menuTrigger.removeClass();
menuIcon.removeClass();
contentWrapper.removeClass();
menuWrapper.addClass("menu-collapsed");//collapse the emenu
menuTrigger.addClass("menu-trigger-wrapper-d-closed");//swing the trigger
menuIcon.addClass("open-d");
contentWrapper.addClass("closed-d");//collapse the content pane
}
else{//if screen is Mobile
menuWrapper.removeClass();
menuTrigger.removeClass();
menuIcon.removeClass();
contentWrapper.removeClass();
menuWrapper.addClass("menu-collapsed-m");//expand menu for desktop
menuTrigger.addClass("menu-trigger-wrapper-d-closed");//swing the trigger
menuIcon.addClass("open-d");
contentWrapper.addClass("closed-d");
}
}
else{//if NAV is collapsed
if($( document ).width() > 480){//if screen is not mobile
menuWrapper.removeClass();
menuTrigger.removeClass();
menuIcon.removeClass();
contentWrapper.removeClass();
menuWrapper.addClass("menu-expanded");//expand menu
contentWrapper.addClass("open-m");//expand the content pane
}
else{//if window screen is MOBILE
menuWrapper.removeClass();
menuTrigger.removeClass();
menuIcon.removeClass();
contentWrapper.removeClass();
menuWrapper.addClass("menu-expanded-m");//expand the menu
menuTrigger.addClass("menu-trigger-wrapper-m-open");//swing the trigger
menuIcon.addClass("open-m");
contentWrapper.addClass("open-d");//expand the content pane
}
}
}
$(document).ready(function() {
var menuTrigger = $("#menu-trigger-wrapper");
menuTrigger.click(function() {
toggleNavSettings(null);
});
});
https://jsfiddle.net/o5ogex6q/1/
Thanks in advance!

You could use something like this
$('#menu-wrapper, #menu-icon, #menu-trigger-wrapper, #custom-wrapper').removeClass();
EDIT
You can keep your variables and use following syntax object.selector to get the ID value. The only "messy" thing are the string commas.
$(menuWrapper.selector+","+ menuTrigger.selector+","+menuIcon.selector+","+ contentWrapper.selector).removeClass();

This is riding the line of a duplicate question to: How to combine two jQuery results
One slight difference is you'd have to pass each collection individually, eg:
var allMenuObjects = menuWrapper.add(menuIcon).add(menuTrigger).add(contentWrapper);
Hopefully this helps and I appreciate your efforts in understanding how to use jQuery efficiently. (eg without engaging the selector engine repeatedly)

Try the below code,
You can use toggleClass
Find more information about toggleClass
function toggleNavSettings(swipeDirection) {
menuWrapper = $("#menu-wrapper");
menuIcon = $('#menu-icon');
menuTrigger = $("#menu-trigger-wrapper");
contentWrapper = $("#custom-wrapper");
if ($(document).width() > 480) { //if screen is not mobile
menuWrapper.toggleClass("menu-collapsed");
menuTrigger.toggleClass("menu-trigger-wrapper-d-closed");
menuIcon.toggleClass("open-d");
contentWrapper.toggleClass("closed-d");
} else { //if screen is Mobile
menuWrapper.toggleClass("menu-collapsed-m");
menuTrigger.toggleClass("menu-trigger-wrapper-d-closed");
menuIcon.toggleClass("open-d");
contentWrapper.toggleClass("closed-d");
}
}
$(document).ready(function() {
var menuTrigger = $("#menu-trigger-wrapper");
menuTrigger.click(function() {
toggleNavSettings(null);
});
});
#charset"utf-8";
/* CSS Document */
html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #121212;
color: #00c4e2;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.template-wrapper {
position: relative;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
#custom-wrapper,
#custom-wrapper.open-d {
padding-left: 210px;
transition: all 0.4s;
}
#custom-wrapper.closed-d {
padding-left: 10px;
}
.content-page {
position: relative!important;
}
#menu-wrapper {
background: url(../images/menu_pattern_1.png);
background-repeat: repeat;
border-right: #00c4e2 10px solid;
position: fixed;
display: block;
top: 0;
left: 0;
width: 200px;
overflow-y: auto;
height: 100%;
transition: all 0.4s;
z-index: 1001;
}
.menu-expanded {
width: 200px;
}
.menu-collapsed {
width: 0px!important;
}
.menu-collapsed-m {
width: 0px!important;
}
.menu-wrapper.scroll {
width: 210px;
border-right: none;
}
#menu-trigger-wrapper {
transition: all 0.4s;
position: fixed;
display: block;
top: 0px;
left: 209px;
background: #00c4e2;
width: 48px;
height: 48px;
color: #fff;
cursor: pointer;
z-index: 1002;
}
.menu-trigger-wrapper-d-closed {
left: 9px!important;
}
.menu-trigger {
width: 100%;
height: 100%;
position: relative;
}
/*MENU ANIMATIONS*/
/* Icon 1 */
#menu-icon {
width: 86%;
height: 100%;
position: relative;
margin: 10px 0px 0px 1px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#menu-icon span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #fff;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#menu-icon span:nth-child(1) {
top: 0px;
}
#menu-icon span:nth-child(1),
#menu-icon.open-d span:nth-child(1) {
top: 12px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#menu-icon span:nth-child(2) {
opacity: 0;
top: 12px;
}
#menu-icon.open-d span:nth-child(1) {
opacity: 100;
}
#menu-icon span:nth-child(3),
#menu-icon.open-d span:nth-child(3),
#menu-icon.open-m span:nth-child(3) {
top: 12px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
#menu-icon.open-d span:nth-child(1) {
top: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(-0deg);
-o-transform: rotate(-0deg);
transform: rotate(-0deg);
}
#menu-icon.open-d span:nth-child(2) {
top: 12px;
opacity: 100;
}
#menu-icon.open-d span:nth-child(3) {
top: 24px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(-0deg);
-o-transform: rotate(-0deg);
transform: rotate(-0deg);
}
.content-page {
margin-left: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu-trigger-wrapper">
<div id="menu-icon"> <span></span>
<span></span>
<span></span>
</div>
</div>
<div id="menu-wrapper" data-mcs-theme="inset">
<div class="menu-container"> Link 1
<br> Link 2
<br> Link 3
<br>
</div>
</div>
<div id="custom-wrapper">blah blah</div>

Develop Reference

JavaScript is the programming language of the Web.

jQuery ".each()" function only applying script to last class on page - javascript

Related

Run jQuery function on initial page load and scroll

jQuery functions are not working

CSS animation is working only one way

HTML modal popup animation not working second time

jquery combining multiple variables (elements set as vars)

Categories

Resources