Develop Reference

Add and remove classes when click on multiple divs using jquery

I'm trying to style a menu I built and I add a different class on each div element every time someone clicks on them. How can I remove the already added class from this element when I click anyone of the other 3 divs?
$('.fashion-btn').click(function() {
$(this).addClass("active-btn-red");
});
$('.garden-btn').click(function() {
$(this).addClass("active-btn-pink");
});
$('.technology-btn').click(function() {
$(this).addClass("active-btn-purple");
});
$('.auto-btn').click(function() {
$(this).addClass("active-btn-deep-purple");
});
.categories-sidebar-popup-menu-row {
padding: 10px 15px;
cursor: pointer;
display: block;
position: relative;
margin-left: 20px;
margin-right: 20px;
border-radius: 28px;
margin-bottom: 10px;
font-weight: 500;
font-size: 16px;
letter-spacing: -0.5px;
color: #555B66;
}
.active-btn-red {
background: #E53935;
color: #fff!important;
}
.active-btn-pink {
background: #D81B60;
color: #fff!important;
}
.active-btn-purple {
background: #8E24AA;
color: #fff!important;
}
.active-btn-deep-purple {
background: #5E35B1;
color: #fff!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="categories-sidebar-popup-menu-row fashion-btn">FASHION</div>
<div class="categories-sidebar-popup-menu-row garden-btn">GARDEN</div>
<div class="categories-sidebar-popup-menu-row technology-btn">TECHNOLOGY</div>
<div class="categories-sidebar-popup-menu-row auto-btn">AUTO</div>
I know that i could do something like that for each one of them:
$('.fashion-btn').click(function() {
$(this).addClass("active-btn-red");
$('.garden-btn').removeClass("active-btn-pink");
$('.technology-btn').removeClass("active-btn-purple");
$('.auto-btn').removeClass("active-btn-deep-purple");
});
But as I will add more than 20 elements in my menu, I would like to ask if there any smarter/shorter way to make this work.

As #disinfor said in the comments, you could do something like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="categories-sidebar-popup-menu-row fashion-btn" data-active-class ='active-btn-red '>FASHION</div>
<div class="categories-sidebar-popup-menu-row garden-btn">GARDEN</div>
<div class="categories-sidebar-popup-menu-row technology-btn">TECHNOLOGY</div>
<div class="categories-sidebar-popup-menu-row auto-btn">AUTO</div>
.categories-sidebar-popup-menu-row {
padding: 10px 15px;
cursor: pointer;
display: block;
position: relative;
margin-left: 20px;
margin-right: 20px;
border-radius: 28px;
margin-bottom: 10px;
font-weight: 500;
font-size: 16px;
letter-spacing: -0.5px;
color:#555B66;
}
.fashion-btn.active {
background:#E53935;color:#fff!important;
}
.garden-btn.active {
background:#D81B60;color:#fff!important;
}
.technology-btn.active {
background:#8E24AA;color:#fff!important;
}
.auto-btn.active {
background:#5E35B1;color:#fff!important;
}
$(".categories-sidebar-popup-menu-row" ).each(function (){
$(this).click(function(){
clearStyle();
$(this).addClass("active");
});
});
function clearStyle(){
buttonWithActive = $('.categories-sidebar-popup-menu-row.active');
buttonWithActive.removeClass('active');
}

Toggle icon slide to addcart button onclick

I have a plus icon which on-hover, slides to add to cart button. I want to achieve same functionality, using button-click.
I have tried CSS but it does not work. Will JQuery can achieve this?
codepen.io
HTML
<div class="socialIcons">
<div class="add-cart-new">
<a href="" class="add-cart-a">
<i class="fa-3x fa fa-plus-circle"></i>
<span class="text-add-cart"> Add to cart </span>
</a>
</div>
</div>
CSS
.add-cart-a
{
width: 181px;
}
.add-cart-new
{
height: 56px;
}
.socialIcons .add-cart-new {
background-color: yellow;
list-style: none;
display: inline-block;
margin: 4px;
border-radius: 2em;
overflow: hidden;
}
.socialIcons .add-cart-new a {
display: block;
padding: 0.5em;
min-width: 2.5em;
max-width: 2.5em;
height: 2.28571429em;
white-space: nowrap;
line-height: 1.5em; /*it's working only when you write text with icon*/
transition: 0.5s;
text-decoration: none;
font-family: arial;
color: #fff;
}
.socialIcons .add-cart-new i {
margin-right: 0.5em;
}
.socialIcons .add-cart-new:hover a {
max-width: 205px;
padding-right: 1em;
}
.socialIcons .add-cart-new {
background-color: #EC7F4A;
}
.socialIcons .add-cart-new a
{
position:relative;
bottom:5px;
right:0.3px;
}
.text-add-cart
{
position:relative;
right:7px;
bottom:12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
This is the code I have tried: JSFiddle

If you want this as a CSS only solution you could use a checkbox and the focus pseudo class this might be a bit overkill. It could easily be done with a small amount of JS.
$('.add-cart-new').click(function() {
$(this).toggleClass('is-open');
});
You can then replace the .socialIcons .add-cart-new:hover a with .socialIcons .add-cart-new.is-open a.

Changing the height works for two of my input fields but not the other ones. Why?

So i am trying to make a form field in which i require users to enter their name, email, a subject and a message. I am trying to write code through javascript where if the user hits the send button I have made and does not have any or some of the information not filled out, there will be a red border around that specific input field where they did not fill out the required information. To accomplish this, I made a class in CSS that is added onto those input fields through javascript that adds that red border and decreases the height of the input fields slightly so that the added height through adding the red border does not move the input fields out of place. Everything works fine except when I try to decrease the height of the input fields. The height will only decrease on the name and email fields but not on any of my other fields and it will consequently move the input fields out of place a little bit when the red border is added. I have tried a lot of things but I cannot figure out any solution. I will add my section of code that has this issue. Thanks in advance.
var validate_contact_field = function() {
var name = document.getElementById("name_field");
var email = document.getElementById("email_field");
var subject = document.getElementById("contact_subject_field");
var message = document.getElementById("contact_message_field");
if (name.value === "" && email.value === "" && subject.value === "" &&
message.value === "") {
document.getElementById("valid").style.display = "none";
document.getElementById("invalid").style.display = "inline-block";
document.getElementById("invalid").style.color = "red";
document.getElementById("invalid").innerHTML = "You did not enter any \
contact information";
name.className = name.className + " contact_error";
email.className = email.className + " contact_error";
}
}
var input_focus_name = function() {
var name = document.getElementById("name_field");
name.className = name.className.replace(" contact_error", "");
}
var input_focus_email = function() {
var email = document.getElementById("email_field");
email.className = email.className.replace(" contact_error", "");
}
span {
color: rgb(79, 87, 170);
}
input {
text-indent: 5px;
font-size: 14px;
color: rgba(0, 0, 0, 0.5);
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
border: none;
}
input:focus {
outline: none;
}
input::-webkit-input-placeholder {
font-family: 'myFont', Arial, Helvetica, sans-serif;
font-size: 15px;
opacity: 0.5;
}
textarea {
padding-left: 7px;
padding-top: 5px;
padding-right: 7px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
color: rgba(0, 0, 0, 0.5);
line-height: 20px;
resize: none;
border: none;
}
textarea:focus {
outline: none;
}
textarea::-webkit-input-placeholder {
font-size: 15px;
opacity: 0.5;
font-family: 'myFont', Arial, Helvetica, sans-serif;
}
#contact_inner_div_2 {
margin-top: 6.7%;
width: 60%;
float: left;
}
.contact_name_and_email_fields_span {
width: 35%;
float: left;
}
.contact_name_and_email_fields {
width: 147px;
height: 30px;
}
#contact_subject_field {
width: 313px;
height: 30px;
margin-top: 10px;
}
#contact_message_field {
width: 301px;
height: 141px;
margin-top: 10px;
}
#contact_send_button {
display: block;
margin-top: 7px;
margin-left: auto;
margin-right: 60%;
background-color: rgb(79, 87, 170);
border: none;
width: 317px;
height: 40px;
cursor: pointer;
}
#text_inside_of_buttion {
color: black;
opacity: 0.5;
font-size: 15px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}
.text_align {
text-align: center;
}
#contact_div_for_span_validator {
margin-top: 2.5%;
width: 317px;
}
.contact_validator_spans {
display: none;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
}
.contact_error {
border: 1px solid red;
width: 146px;
height: 28px;
}
<form>
<span id="contact_inner_div_2">
<span class="contact_name_and_email_fields_span">
<input type="text" placeholder="Name"
class="contact_name_and_email_fields" id="name_field"
onfocus="input_focus_name();">
</span>
<span class="contact_name_and_email_fields_span">
<input type="text" placeholder="Email"
class="contact_name_and_email_fields" id="email_field"
onfocus="input_focus_email();">
</span>
<input type="text" placeholder="Subject" id="contact_subject_field" onfocus="input_focus();">
<textarea placeholder="Message" id="contact_message_field" onfocus="input_focus();"></textarea>
<button type="button" id="contact_send_button" onclick="validate_contact_field();">
<span id="text_inside_of_buttion">Send</span>
</button>
<div class="text_align" id="contact_div_for_span_validator">
<span class="contact_validator_spans" id="valid">
Validation Passed
</span>
<span class="contact_validator_spans" id="invalid">
Validation Failed
</span>
</div>
</span>
</form>
I would have posted a JSFiddle link but for some reason it looks like my javascript was not working on it for some reason.

function checkField(field) {
if (field.value == '') {
//add the error class (border)
field.classList.add("errorClass")
}
else if(field.classList.contains("errorClass")){
//else if its not empty and has the class remove it
field.classList.remove("errorClass");
}
}
Then call it with
onblur="checkField(this);"
with your HTML elements.

CSS: Why do i have a scrollbar at 100% height?

I am working on a page, which is separated into 4 divs, which add up to a 100% height. The container also uses 100% height and there are no margins or paddings defined.
So why does my page show a scrollbar?
Note that there is only one container shown not both, because of this javascript:
$(document).ready(function() {
var bgArr = ["image.jpg", "image.jpg", "image.jpg"];
var i = 0;
var $bg1 = $('.background-1').css('background-image', 'url(' + bgArr[0] + ')').css('left', '0%');
var $bg2 = $('.background-2').css('background-image', 'url(' + bgArr[1] + ')').css('left', '-100%');
var bgSlide = function($bg) {
$bg.animate({
left: '+=100%'
}, 600, function() {
if (parseInt($bg.css('left')) > 0) {
$bg.css('left', '-100%');
(i < bgArr.length - 1) ? i++ : i = 0;
$bg.css("background-image", "url(" + bgArr[i] + ")");
}
});
}
setInterval(function() {
bgSlide($bg1);
bgSlide($bg2);
}, 10000);
});
#container {
min-height: 100%;
}
#first_div {
height: 5.5%;
width: 100%;
text-align: center;
border-bottom: 1px solid black;
}
#second_div {
height: 31.5%;
width: 100%;
border-bottom: 1px solid black;
}
#third_div {
width: 100%;
height: 31.5%;
border-bottom: 1px solid black;
}
#fourth_div {
height: 31.5%;
width: 100%;
}
body,
html,
#container {
height: 100%;
background-color: #f4f5f2;
}
body {
position: relative;
background: transparent;
overflow-x: hidden;
color: black;
}
h1 {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 28px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 30px;
}
h3 {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 15.4px;
}
p {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 19.99px;
padding-left: 1em
}
blockquote {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 21px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 29.99px;
}
pre {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 18.57px;
}
.background-1,
.background-2 {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background: transparent;
}
<div class="background-1">
<div id="container">
<div id="first_div">
<h1>Headline1</h1>
</div>
<div id="second_div">
<p><b>Text:</b> Text</p>
</div>
<div id="third_div">
<p><b>Room</b> Text</p>
</div>
<div id="fourth_div">
<p><b>Start:</b> 10:45 Uhr</p>
</div>
</div>
</div>
<div class="background-2">
<div id="container">
<div id="first_div">
<h1>Headline2</h1>
</div>
<div id="second_div">
<p><b>Text:</b> Text</p>
</div>
<div id="third_div">
<p><b>Room</b> Text</p>
</div>
<div id="fourth_div">
<p><b>Start:</b> 10:45 Uhr</p>
</div>
</div>
</div>
Here is the jsfiddle

It is because browser taking default margin and padding. First remove it like following.
* {
margin: 0;
padding: 0;
}
Then your first three div having border of 1px remove it.
border-bottom: 1px solid black;
Because your all four div height total is like:
31.5 + 31.5 + 31.5 + 5.5 = 100% + 1px * 3 border
Fiddle

Because the body has a default margin.
Do like this to reset it.
html, body {
margin: 0;
}
To make the border be included within your div's height, add this
#first_div,
#second_div,
#third_div {
box-sizing: border-box;
}

* {
margin: 0;
padding: 0;
}
or you can add to css
overflow:hidden

Try to change overflow axis from x to y
body {
position: relative;
background: transparent;
overflow-y: hidden;
color: black;
}

javascript is not working

jsp and a loginValidate.js i have provided a link to js in jsp. But the login form is not getting validates. I have a span id which should display an error message but its not happening.
my login.jsp is:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Header</title>
<script type="text/javascript" src="js/LoginValidate.js"></script>
<link href="CSS/Header.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top">
<div class="wrapper col1">
<div id="header">
<div id="logo">
<h1>
<U>SK Business Group, Inc.</U>
</h1>
<p>
<strong>Helping GROW your business</strong>
</p>
</div>
<div class="wrapper col6">
<div id="head">
<div id="login">
<h2>Login !</h2>
<B>Already have an account.LOGIN here</B>
<form name="login" action="LoginValidateServlet" method="post"
onSubmit="return loginValidate()">
<input type="hidden" name="pagename" value="login" />
<fieldset>
<legend>Client Login</legend>
<div class="fl_left">
<input type="text" name="txtUsername" id="uname" value="Enter Username…" onfocus="this.value=(this.value=='Enter Username…')? '' : this.value;" /><br />
<span id="errorUserNameMissing" style="display: none;"><font
color="red">*Enter user name.</font></span>
<input type="password" name="txtPassword" id="pass" value="Enter Password…" onfocus="this.value=(this.value=='Enter Password…')? '' : this.value ;" /><br/> <br/><span
id="errorPasswordMissing" style="display: none;"><font
color="red">*Enter Password.</font></span>
<select name="txtCategory" id="txtCategory" style="width: 230px">
<option value="unknown">Select your Category</option>
<option value="Admin">Admin</option>
<option value="Affiliate">Affiliate</option>
<option value="Client">Client</option>
</select>
</div>
<div class="fl_right">
<input type="submit" name="login_go" id="login_go"
value="»" />
</div>
</fieldset>
</form>
<p>
» Lost Your Password | Create An Account »
</p>
</div>
<br class="clear" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
And this is my CSS
#CHARSET "ISO-8859-1";
#top {
margin: 0;
padding: 0;
font-size: 12px;
font-family: verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #DDDDDD;
}
.clear {
clear: both;
}
br.clear {
clear: both;
margin-top: -15px;
}
a {
outline: none;
text-decoration: none;
}
.fl_left {
float: left;
}
.fl_right {
float: right;
}
div.wrapper {
display: block;
width: 100%;
margin: 0;
text-align: left;
}
div.wrapper h1,div.wrapper h2,div.wrapper h3,div.wrapper h4,div.wrapper h5,div.wrapper h6
{
margin: 0 0 20px 0;
padding: 0 0 8px 0;
font-size: 20px;
font-weight: normal;
font-family: Georgia, "Times New Roman", Times, serif;
border-bottom: 1px dotted #DDDDDD;
}
.col1 {
color: #2684B7;
background-color: #E3F1F9;
}
.col6 {
color: #999999;
background-color: #F3F3F3;
}
.col6 a {
color: #2684B7;
background-color: #F3F3F3;
}
#logo {
width: 378px;
}
#header,#head {
color: #2684B7;
position: relative;
margin: 0 auto 0;
display: block;
width: 960px;
}
#header {
padding: 30px 0;
font-family: Georgia, "Times New Roman", Times, serif;
}
#header #logo {
display: block;
float: left;
width: 300px;
width: 100%;
margin-top: 7px;
}
#header #logo h1,#header #logo p {
margin: 0;
padding: 0;
line-height: normal;
}
#header #logo h1 {
margin: 0 0 10px 0;
padding: 0;
font-size: 36px;
border: none;
}
#header h1 a {
color: #3A6C86;
background-color: #E3F1F9;
}
#header #login {
width: 300px;
height: 250px;
float: right;
padding: 10px 10px 12px 10px;
color: #000000;
background-color: #ADD6ED;
}
#header #login p {
margin: 0 0 8px 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#head {
padding: 30px 0;
}
#head h2 {
margin-bottom: 10px;
border-bottom: 1px dotted #999999;
}
#login {
display: block;
float: right;
width: 300px;
}
form,fieldset,legend {
margin: 0;
padding: 0;
border: none;
}
legend {
display: none;
}
#header input {
display: block;
float: left;
width: 155px;
margin: 0 11px 0 0;
padding: 5px;
color: #4C4C4C;
background-color: #FFFFFF;
border: 1px solid #396B86;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#header input#login_go {
width: auto;
height: auto;
margin: 0;
padding: 4px;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
background-color: #4D9FC7;
cursor: pointer;
}
#head form {
display: block;
width: 300px;
margin: 0;
padding: 10px 0 0 0;
border: none;
}
#head input {
display: block;
width: 218px;
margin: 0 0 10px 0;
padding: 5px;
color: #FFFFFF;
background-color: #2684B7;
border: 1px solid #1C5E82;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#head input#login_go {
width: 58px;
height: 100px;
margin: 0;
padding: 0;
font-weight: bold;
text-transform: uppercase;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 60px;
cursor: pointer;
}
#head select#txtCategory {
width: width:956px;
}
And this is my LoginValidate.js
function loginValidate() {
var valid = true;
var validationMessage = 'Please correct the following errors:\r\n';
document.getElementById('errorUserNameMissing').style.display = 'none';
document.getElementById('errorPasswordMissing').style.display = 'none';
if ((document.getElementById('uname').value = 'Enter Username…')||(document.getElementById('uname').value.length == 0) ){
validationMessage = validationMessage + ' - UserName is missing\r\n';
document.getElementById('errorUserNameMissing').style.display = 'block';
valid = false;
} else {
document.getElementById('errorUserNameMissing').style.display = 'none';
}
if ((document.getElementById('pass').value = 'Enter Password…')||(document.getElementById('pass').value.length == 0) ){
validationMessage = validationMessage + ' - Password is missing\r\n';
document.getElementById('errorPasswordMissing').style.display = 'block';
valid = false;
} else {
document.getElementById('errorPasswordMissing').style.display = 'none';
}
if (valid == false) {
alert(validationMessage);
}
return valid;
}
please some one help in validating the login page with errors on not providing any input(it should display respective error message).
Thanks in advance

In the JavaScript
document.getElementById('uname').value
returns "Enter Username…" that is the default value and
document.getElementById('uname').value.length
returns 15 that's why the condition is not matched.
You have to check for default value along with length.
document.getElementById('uname').value = 'Enter Username…'
But once this field is focused the value is empty and it works fine.

your code provide null pointer exception here
document.getElementById('errorPassWordMissing').style.display = '';
exception raise and your function does not return false and form post data.
use placeholder property instead of value and focus event, for example
<input type="password" name="txtPassword" id="pass" placeholder="Enter password…" />
also may be you should use jQuery and validation plugin
http://plugins.jquery.com/validate/

One obvious problem I can see. This is wrong:
document.getElementById('errorUserNameMissing').style.display = '';
You shouldn't be setting style.display to a blank string. It should be one of the standard CSS display types, like "inline" or "block" (and there are other types).