Add a class and remove the current one so the button in J Query can be reused for another function
I'm fourteen years old trying to master a fairly new language, so please bear with me. I made a quick html document so that I can express my problem as clearly as possible.
If you run the snippet, you'll see that by clicking the menu button, the body is pushed 285px to the left, and the menu is pushed 0px from -285px.
I want to press the menu button again and set the body back to 0 and the menu to -285. Please see the J Query section to see the processes I've tried so far.
var main = function(){
$('.menu_button').click(function(){
$('.menu').animate({left: '0px'}, 200);
$('body').animate({left: '285px'}, 200);
$('.menu_button').addClass('menu_button_active').removeClass('menu_button');
});
$('.menu_button_active').click(function(){
$('.menu').animate({left: '-285px'}, 200);
$('body').animate({left: '0px'}, 200);
$('.menu_button_active').addClass('menu_button').removeClass('menu_button_active');
});
};
$(document).ready(main);
/* At first, I tried to just plug in the same class name in the second function, however I
quickly realized that by doing so the menu will automatically close since both functions
will run at the same time.
My understanding is that in order for the function to being separately, the menu button
would have to have a different class at the time of the click. So, I tried using
toggleClass to remove the menu_button class while at the same time adding the
menu_button_active class so that on click, the menu_button_active class can act as the
same button, but used for a different function (closing the menu.) Perhaps my understanding
of what the toggleClass method was used for was flawed, however here is the code anyway to
show you what I had done.
$('.menu_button').toggleClass("menu_button" "menu_button_active");
in place of
$('.menu_button').addClass('menu_button_active').removeClass('menu_button');
(this doesn't work)
So, my final method is shown above. By separately adding and removing the class I don't see
why it doesn't work after working out what the js would be doing. First the menu_button
would be clicked and the page is shifted, afterwards the menu_button would have a different
class name, so that it can be called by the menu_button_active function, which then
changes the class again so that the menu button can open again and so on.
*/
#first_row {
width: 100%;
height: 25em;
position: absolute;
top: 3em;
box-shadow: 0px 5px 5px #888888;
}
#sec2 {
background-color: #2CD148;
height: 100%;
width: 50%;
float: left;
}
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
header {
width: 100%;
height: 3em;
background-color: #404040;
position: fixed;
}
.menu {
background-color: black;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu_button {
width: 4em;
cursor: pointer;
}
.menu_button_active {
width: 4em;
cursor: pointer;
}
.menu_row {
width: 100%;
height: 0.25em;
margin-top: 0.5625em;
background-color: white;
border-bottom: 1px solid #2CD148;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
<html>
<head>
<title>Samer | Welcome</title>
<link rel="shortcut icon" href="media_items/favicon.ico" type="image/x-icon">
<link rel="icon" href="media_items/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/Interactive.js"></script>
</head>
<body>
<header>
<div class="menu"></div>
<div class = "menu_button">
<div class = "menu_row"></div>
<div class = "menu_row"></div>
<div class = "menu_row"></div>
</div>
<span></span>
</header>
<div id = first_row>
<section id = "sec1"></section>
<section id = "sec2"></section>
</div>
</body>
</html>
What is the error in this logic?
+3
source to share
3 answers
You are defining your class from javascript, so you need to attach the event to your class name. see http://api.jquery.com/on/
var main = function(){
$('body').on('click', '.menu_button', function(){
$('.menu').animate({left: '0px'}, 200);
$('body').animate({left: '285px'}, 200);
$(this).addClass('menu_button_active').removeClass('menu_button');
});
$('body').on('click', '.menu_button_active', function(){
$('.menu').animate({left: '-285px'}, 200);
$('body').animate({left: '0px'}, 200);
$(this).addClass('menu_button').removeClass('menu_button_active');
});
};
$(document).ready(main);
#first_row {
width: 100%;
height: 25em;
position: absolute;
top: 3em;
box-shadow: 0px 5px 5px #888888;
}
#sec2 {
background-color: #2CD148;
height: 100%;
width: 50%;
float: left;
}
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
header {
width: 100%;
height: 3em;
background-color: #404040;
position: absolute;
}
.menu {
background-color: black;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu_button {
width: 4em;
cursor: pointer;
}
.menu_button_active {
width: 4em;
cursor: pointer;
}
.menu_row {
width: 100%;
height: 0.25em;
margin-top: 0.5625em;
background-color: white;
border-bottom: 1px solid #2CD148;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
<html>
<head>
<title>Samer | Welcome</title>
<link rel="shortcut icon" href="media_items/favicon.ico" type="image/x-icon">
<link rel="icon" href="media_items/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/Interactive.js"></script>
</head>
<body>
<header>
<div class="menu"></div>
<div class = "menu_button">
<div class = "menu_row"></div>
<div class = "menu_row"></div>
<div class = "menu_row"></div>
</div>
<span></span>
</header>
<div id = first_row>
<section id = "sec1"></section>
<section id = "sec2"></section>
</div>
</body>
</html>
+1
source to share
var main = function(){
$('body').on('click', '.menu_button', function(){
// $('.menu_button').click(function(){
$('.menu').animate({left: '0px'}, 200);
$('body').animate({left: '285px'}, 200);
$('.menu_button').addClass('menu_button_active').removeClass('menu_button');
});
$('body').on('click', '.menu_button_active', function(){
$('.menu').animate({left: '-285px'}, 200);
$('body').animate({left: '0px'}, 200);
$('.menu_button_active').addClass('menu_button').removeClass('menu_button_active');
});
};
$(document).ready(main);
0
source to share