Develop Reference

How to make a simple toggle button work using jQuery

I am trying to build a simple toggle button to change the classes on an element and its text of the containing 'p' element.
On the first click it works just fine, but then it doesn't toggle back.
What do I miss here?
$('.disclaimer').click(function() {
if ($('#disclaimerText').text = "Disclaimer Declined") {
$('.disclaimer').addClass("disclaimerAccepted");
$('#disclaimerText').text("Disclaimer Accepted")
} else {
$('.disclaimer').removeClass("disclaimerAccepted");
$('#disclaimerText').text("Disclaimer Declined")
}
});
.disclaimer {
font-family: 'Varela Round', sans-serif;
font-weight: bold;
font-size: 0.7vw;
width: 15%;
height: 50px;
border-radius: 20px;
background-color: #f96c8a;
color: #545d7b;
}
.disclaimerAccepted {
font-family: 'Varela Round', sans-serif;
font-weight: bold;
font-size: 0.7vw;
width: 15%;
height: 50px;
border-radius: 20px;
background-color: #30e83a;
color: #545d7b;
}
#disclaimerText {
display: block;
margin: auto;
font-size: 2vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="disclaimer">
<p id="disclaimerText">Disclaimer Declined</p>
</div>

You can use jQuery's .toggleClass():
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
Please Note: text is a jQuery method, to get the text you have to use .text() and also instead of assignment operator (=), you have to use comparison operator (== or ===) to compare the text:
$('.disclaimer').click(function() {
$('.disclaimer').toggleClass("disclaimerAccepted");
if ($('#disclaimerText').text() == "Disclaimer Declined") {
$('#disclaimerText').text("Disclaimer Accepted")
} else {
$('#disclaimerText').text("Disclaimer Declined")
}
});
.disclaimer {
font-family: 'Varela Round', sans-serif;
font-weight: bold;
font-size: 0.7vw;
width: 15%;
height: 50px;
border-radius: 20px;
background-color: #f96c8a;
color: #545d7b;
}
.disclaimerAccepted {
font-family: 'Varela Round', sans-serif;
font-weight: bold;
font-size: 0.7vw;
width: 15%;
height: 50px;
border-radius: 20px;
background-color: #30e83a;
color: #545d7b;
}
#disclaimerText {
display: block;
margin: auto;
font-size: 2vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="disclaimer">
<p id="disclaimerText">Disclaimer Declined</p>
</div>

You wrong at text() instead of text, and missing == instead of = is assign operator
Change from
if ($('#disclaimerText').text = "Disclaimer Declined") {
to
if ($('#disclaimerText').text() == "Disclaimer Declined") {
$('.disclaimer').click(function() {
if ($('#disclaimerText').text() == "Disclaimer Declined") {
$('.disclaimer').addClass("disclaimerAccepted");
$('#disclaimerText').text("Disclaimer Accepted")
}
else {
$('.disclaimer').removeClass("disclaimerAccepted");
$('#disclaimerText').text("Disclaimer Declined")
}
});
.disclaimer {
font-family: 'Varela Round', sans-serif;
font-weight: bold;
font-size: 0.7vw;
width: 15%;
height: 50px;
border-radius: 20px;
background-color: #f96c8a;
color: #545d7b;
}
.disclaimerAccepted {
font-family: 'Varela Round', sans-serif;
font-weight: bold;
font-size: 0.7vw;
width: 15%;
height: 50px;
border-radius: 20px;
background-color: #30e83a;
color: #545d7b;
}
#disclaimerText {
display: block;
margin: auto;
font-size: 2vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="disclaimer">
<p id="disclaimerText">Disclaimer Declined</p>
</div>

Apply Color Picker Selection to Div Font

How would I apply the selected color from the color-picker to the these divs: #header, #subHeader, #button ?
How can I hide the border of the div #button until the user types text into <input id="text3" class="textInput">
$(document).ready(function(){
var div1 = $('#header')[0];
$('#text1').bind('keyup change', function() {
div1.innerHTML = this.value;
});
var div2 = $('#subHeader')[0];
$('#text2').bind('keyup change', function() {
div2.innerHTML = this.value;
});
var div3 = $('#button')[0];
$('#text3').bind('keyup change', function() {
div3.innerHTML = this.value;
});
});
$(".basic").spectrum();
$(".override").spectrum({
color: "yellow"
});
$(".startEmpty").spectrum({
allowEmpty: true
});
.wrapper {
padding: 10px;
border: 2px solid black;
}
h2 {
margin: 20px 0 5px;
font-size: 16px;
font-family: "helevtica", sans-serif;
font-weight: 400;
}
#header {
font-size: 60px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 400;
margin: 10px 0;
padding: 20px;
}
#subHeader {
font-size: 24px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 300;
margin: 10px 0;
padding: 20px;
display: block;
}
#button {
font-size: 16px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 400;
margin: 30px 0;
padding: 16px 24px;
border: 2px solid #000;
border-radius: 3px;
text-align: center;
}
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/spectrum.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/spectrum.js"></script>
<div class="wrapper">
<div id="header"></div>
<div id="subHeader"></div>
<div id="button"></div>
</div>
<h2>Header</h2><input id="text1" class="textInput">
<h2>Subheader</h2><input id="text2" class="textInput">
<h2>Button</h2><input id="text3" class="textInput">
<h2>Color</h2>
<input type='text' class="basic" />

This will change your #subHeader color.
$(document).ready(function(){
var div1 = $('#header')[0];
$('#text1').bind('keyup change', function() {
div1.innerHTML = this.value;
});
var div2 = $('#subHeader')[0];
$('#text2').bind('keyup change', function() {
div2.innerHTML = this.value;
});
var div3 = $('#button')[0];
$('#text3').bind('keyup change', function() {
div3.innerHTML = this.value;
if(this.value.length > 0) {
$('#button').css('display', 'block')
} else {
$('#button').css('display', 'none')
}
});
});
$(".basic").spectrum({
change: function(color) {
console.log(color.toHexString());
$('#subHeader').css('color',color.toHexString());
var s = '2px solid ' + color.toHexString();
$('#button').css('border', s);
}
});
$(".override").spectrum({
color: "yellow"
});
$(".startEmpty").spectrum({
allowEmpty: true
});
.wrapper {
padding: 10px;
border: 2px solid black;
}
h2 {
margin: 20px 0 5px;
font-size: 16px;
font-family: "helevtica", sans-serif;
font-weight: 400;
}
#header {
font-size: 60px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 400;
margin: 10px 0;
padding: 20px;
}
#subHeader {
font-size: 24px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 300;
margin: 10px 0;
padding: 20px;
display: block;
}
#button {
display:none;
font-size: 16px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 400;
margin: 30px 0;
padding: 16px 24px;
border: 2px solid #000;
border-radius: 3px;
text-align: center;
}
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/spectrum.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/spectrum.js"></script>
<div class="wrapper">
<div id="header"></div>
<div id="subHeader"></div>
<div id="button"></div>
</div>
<h2>Header</h2><input id="text1" class="textInput">
<h2>Subheader</h2><input id="text2" class="textInput">
<h2>Button</h2><input id="text3" class="textInput">
<h2>Color</h2>
<input type='text' class="basic" />

Add this:
$(".basic").spectrum({
change: function(color) {
console.log(color.toHexString());
//add your code here
}
});
Then you should add your code to change what you want based on the selected color. Let me know if this helped you, or if you have any other question.

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.

What is wrong with this tabbed content?

I have a google map and a contact form on my contact.html file. They were displayed block as default. I wanted to change it to a tabbed look.
Let's say i have a code like this in HTML:
<div id="tab-group" class="tab-group">
<h3 class="tab-header activate" id="tab-header-1">We are here</h3>
<div class="tab-content activate" id="tab-content-1"></div>
<h3 class="tab-header" id="tab-header-2">Contact us</h3>
<div class="tab-content" id="tab-content-2">
The content in that div with the id="tab-content-1" , I have a google map with the necessary script in the head. And in div with the id="tab-content-2", I have a contact form like;
<form class="tab-content-2" method="post" action="contact-post.html">
<div>
<span><label>NAME</label></span>
<span><input name="userName" type="text" class="textbox"></span>
</div>
<div>
<span><label>E-MAIL</label></span>
<span><input name="userEmail" type="text" class="textbox"></span>
</div>
<div>
<span><label>PHONE</label></span>
<span><input name="userPhone" type="text" class="textbox"></span>
</div>
<div>
<span><label>YOUR MESSAGE</label></span>
<span><textarea name="userMsg"> </textarea></span>
</div>
<div>
<span><input type="submit" value="Send me"></span>
</div>
</form>
Here is the JavaScript:
"use strict";
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('tab-group').className = 'activate';
var headerClass = 'tab-header',
contentClass = 'tab-content';
document.getElementById('tab-group').addEventListener('click', function(event) {
var myHeader = event.target;
if (myHeader.className !== headerClass) return;
var myID = myHeader.id, // e.g. tab-header-1
contentID = myID.replace('header', 'content'); // result: tab-content-1
deactivateAllTabs();
myHeader.className = headerClass + ' activate';
document.getElementById(contentID).className = contentClass + ' activate';
});
function deactivateAllTabs() {
var tabHeaders = document.getElementsByClassName(headerClass),
tabContents = document.getElementsByClassName(contentClass);
for (var i = 0; i < tabHeaders.length; i++) {
tabHeaders[i].className = headerClass;
tabContents[i].className = contentClass;
}
}
});
I know I have to clean all these up but i am lost in such a basic thing and getting angry, here is the CSS:
#tab-group h3 {
text-align: left;
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
}
.activate {
position: relative;
margin-bottom: 2em;
}
#tab-group.activate .tab-header {
font-weight: normal;
font-size: 13px;
text-transform: uppercase;
padding: 4px 6px;
display:inline;
}
.activate .tab-header {
position: absolute;
top: 0;
margin: 0;
padding: 0.25em 0.5em;
left: 0;
background: rgba(168, 161, 152, 0.34);
border: 1px solid #161616;
border-radius: 4px 4px 0 0;
z-index: 2;
cursor: pointer;
}
.activate .tab-header.activate {
background: #000;
}
.activate .tab-content {
position: relative;
top: 0;
margin: 0;
padding: 0.5em;
top: 24px;
border: 1px solid #999;
z-index: 1;
background: white;
zoom: 1;
}
.activate .tab-content:after {
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.activate #tab-header-2 {
left: 9em;
}
.activate .tab-content {
}
.activate .tab-content:active {
display: block;
}
#tab-content-1 {
width: 56.4em;
height:30em;
}
#tab-header-1 {
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
}
#tab-header-2 {
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
}
#tab-content-2{
position:relative;
padding-bottom:30px;
background-color:#000;
}
I want it to act like a simple tabbed content. Yet, the contents of the tabs are displayed as block and it doesn't change the content when you click on h3 tab-headers.
it looks like this.....
What am I doing wrong ? Thanks in advance...

It should just be a simple fix. Try adding:
.activate .tab-content { display: none; }
.activate .tab-content.activate { display: block; }
That way, only the active tab is visible, and the others are hidden.
Check it out: http://jsfiddle.net/t8G57/2/

Why jQuery .width() and .css( "width" ) produces different width in IE

When I set width:100px; (just for testing purposes) in CSS, all the browsers alert as 100-100px which is fine however when I remove width:100px; (because the content is always in different lengths) in CSS, IE result is either less or more about a few pixels than the other browsers.
Any idea why it is happening?
Thanks
HTML:
<div id="clickhere">CLICK HERE</div>
<div id="login">This is login box</div>
JQUERY:
$(document).ready(function()
{
$('#clickhere').click(function(event)
{
alert($('#login').width() + '-' + $('#login').css( "width" ));
event.stopPropagation();
});
});
CSS:
*
{
margin: 0;
padding: 0;
}
body, html
{
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-weight: normal;
}
#login
{
position: absolute;
z-index: 100;
right: 0px;
/*width:100px;*/
top: 21px;
text-align: right;
font-size: 11px;
padding: 3px 7px;
border: 1px solid #DDDDDD;
background-color: #F5F5F5;
}