Develop Reference

Why isn't my CSS being applied when the class is added to the element?

What I am trying to do is, when i press a button, do put a border around it, to show it as active. I am also trying to have in JavaScript that the button is active, but I haven't gotten to that yet. Can anyone help me?
$('button').on('click', function() {
$('button').removeClass('active_button');
$(this).addClass('active_button');
});
//Home button active on page load
$(document).ready(function() {
$('#Home').addClass('active_button');
});
.cable-choose {
margin-bottom: 20px;
}
.cable-choose button {
border: 2px solid #E1E8EE;
border-radius: 6px;
padding: 13px 20px;
font-size: 14px;
color: #5E6977;
background-color: #fff;
cursor: pointer;
transition: all .5s;
}
.cable-choose button:hover,
.cable-choose button:active,
.cable-choose button:focus {
border: 2px solid #000;
outline: none;
}
.active_button {
border: 2px solid black;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="cable-config">
<span>Select Entries</span>
<div class="cable-choose">
<button id="Home">50 Entries<br>$5.00</button>
<button>100 Entries<br>$10.00</button>
<button>250 Entries<br>$25.00</button>
<button>500 Entries<br>$50.00</button>
</div>
</div>

You just need to make your CSS selector more specific. It was being overridden by the standard button styles.
$('button').on('click', function() {
$('button').removeClass('active_button');
$(this).addClass('active_button');
});
//Home button active on page load
$(document).ready(function() {
$('#Home').addClass('active_button');
});
.cable-choose {
margin-bottom: 20px;
}
.cable-choose button {
border: 2px solid #E1E8EE;
border-radius: 6px;
padding: 13px 20px;
font-size: 14px;
color: #5E6977;
background-color: #fff;
cursor: pointer;
transition: all .5s;
}
.cable-choose button:hover,
.cable-choose button:active,
.cable-choose button:focus {
border: 2px solid #000;
outline: none;
}
.cable-choose button.active_button { /* <------------ RIGHT HERE */
border: 2px solid black;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="cable-config">
<span>Select Entries</span>
<div class="cable-choose">
<button id="Home">50 Entries<br>$5.00</button>
<button>100 Entries<br>$10.00</button>
<button>250 Entries<br>$25.00</button>
<button>500 Entries<br>$50.00</button>
</div>
</div>

I think it's working - I see class="active_button" when I inspect the one I clicked... Your active_button style is identical to your hover/focus/active state though (one sets to #000 and the other to "black" - same color)

Render a different div on different browsers

I am trying to get a different div to show for chrome and firefox. I can not get even the div to show up let alone change with each browser. Any help would be greatly appreciated. Thank you very much and have a great day.
console.log($.browser.name)
if($.browser.name == "chrome")
document.getElementById("chrome").style.display = "block";
else if($.browser.name == "mozilla")
document.getElementById("firefox").style.display = "block";
else
document.getElementById("other").style.display = "block";
#firefox, #chrome, #other {
display: none;
}
#chrome {
background-color: #8dc63f;
border: 2px solid #ffffff;
border-radius:5px;
box-shadow: none;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 25px;
padding: .7rem 2.5rem;
margin-left: 18px;
text-align: center;
text-decoration: none;
transition: 350ms ease all;
-webkit-transition: 350ms ease all;
}
#firefox {
background-color: #8dc63f;
border: 2px solid #ffffff;
border-radius:5px;
box-shadow: none;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 25px;
padding: .7rem 2.5rem;
margin-left: 18px;
text-align: center;
text-decoration: none;
transition: 350ms ease all;
-webkit-transition: 350ms ease all;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="firefox">
Yes, lets do it
</div>
<div id="chrome">
Yes, lets do it
</div>

You can try to use something simple as this. I guess that you don't need jQuery, we can use agent string to compare it, see test below
var tst = navigator.userAgent.toLocaleLowerCase().indexOf('chrome') ;
var chr = document.querySelector('.chrome') ;
var fox = document.querySelector('.firefox') ;
( tst > 0 ) ? chr.classList.add('sh') : fox.classList.add('sh')
div{ display: none }
div.sh{ display: block }
<div class="chrome">I'm shown on Chrome</div>
<div class="firefox">I'm shown on Firefox</div>

On JavaScript click event Content of my class is not applied to the html <p>

I'm setting JavaScript class to the p, so it should change a colour when it's clicked, here is <p> element:
<p class="classItem"></p>
Here is classItem css class:
.classItem {
display: block;
width: 90%;
margin: 5px auto 0 auto;
height: 40px;
text-align: center;
color: #fff;
background-color: #3266cc;
border-radius: 2px;
line-height: 40px;
font-size: 14px;
transition: all 0.3s ease-in-out;
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
cursor: pointer;
font-family: Roboto, sans-serif;
}
And there you can see background color(#3266cc) - blue, I want to change it to red on a click, so I created css class
.activeClassItem {
background-color: red!important;
}
And on javascript I said, when I click this item let's apply also activeClassItem class, so it will set a colour of background to red, and class is really applied but colour is not changed:
$("body").on("click", ".classItem", function () {
$(".activeClassItem").removeClass("activeClassItem");
$(this).addClass("activeClassItem");
});
When I inspect window, class is there:
<p class="classItem activeClassItem"></p>
So guys, even if Class is applied I can not see changed background unfortunatelly...
Any kind of help is awesome,
Thanks

Here is a working example , if still the issue persist , please consider testing with another browser or try to update your browser
$("body").on("click", ".classItem", function () {
$(".activeClassItem").removeClass("activeClassItem");
$(this).addClass("activeClassItem");
});
.classItem {
display: block;
width: 90%;
margin: 5px auto 0 auto;
height: 40px;
text-align: center;
color: #fff;
background-color: #3266cc;
border-radius: 2px;
line-height: 40px;
font-size: 14px;
transition: all 0.3s ease-in-out;
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
cursor: pointer;
font-family: Roboto, sans-serif;
}
.activeClassItem{
background-color:red !important
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p class="classItem"></p>
</body>

Make button link - Javascript

I have this code to embed on my site from Setmore to allow appointment booking on the website, this opens a popup in the website like you would expect on a hotel booking website.
<script id="setmore_script" type="text/javascript" src="https://my.setmore.com/js/iframe/setmore_iframe.js"></script><a id="Setmore_button_iframe" style="float:none" href="https://my.setmore.com/bookingpage/c6461561-7478-43ef-97ee-d4e8d6c89436"><img border="none" src="https://my.setmore.com/images/bookappt/SetMore-book-button.png" alt="Book an appointment with HouseKeep using SetMore" /></a>
This uses a really boring button so I made a custom one in photoshop to replace. However, I wanted to make one in CSS so that it changes when the user hovers over it.
<Center>
<button class="button button1">BOOK NOW</button>
</Center>
<style>
.button {
background-color: #2f896b; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #2f896b;
}
.button1:hover {
background-color: #2f896b;
color: white;
</style>
I Would like to make it so that I can use the button that I've made but it still has the exact same functionality as the image being there in the original code to code to embed. Any ideas?

By Adding this below CSS you can easily override the Setmore button.
This Below CSS will help you to do following changes
Text of Setmore button
Add Hover Effect
Change Button Style
a#Setmore_button_iframe
{
position: relative;
}
a#Setmore_button_iframe > img {
display: none;
}
a#Setmore_button_iframe:after
{
content:"Book Free Appointment"; /* TEXT YOU WANT */
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
background-color: white;
color: black;
border: 2px solid #27C3BB;
font-family: sans-serif;
}
a#Setmore_button_iframe:hover:after {
background-color: #27C3BB;
color: white;
}
For Demo Check this link Setmore Custom Button

Have you tried setting button's background to the one you made? Check it below:
background: url("../images/button.png") no-repeat;

Figure out what button change was made using Javascript?

I am quite new to Javascript and have been trying to use Javascript within my ASP.NET MVC project.
I have a button that onclick changes e.g. from ON to OFF. There are many of these buttons - one for each record.
I want to figure out which change a button makes when pressed i.e did it become OFF or ON?
Currently, I am using an if statement to check the toggleClass, however, I don't believe this is the current approach and the statement does not result in True when required.
Here is some example code:
<a id="menu-toggle_#j" href="#" class="btn btn-xs"><i class="glyphicon glyphicon-chevron-up"></i></a>
<script>
$('#menu-toggle_#j').click(function () {
$(this).find('i').toggleClass('glyphicon glyphicon-chevron-up').toggleClass('glyphicon glyphicon-down');
$(if('#menu-toggle_#j').toggleClass('glyphicon glyphicon-down')){
Any help would be greatly appreciated.

You can easily retrieve a button's status if it is determined by a class. Just use $.hasClass():
$('button').click(toggleBtn);
$('#getEveryStatus').click(getEveryStatus);
function toggleBtn(){
$(this).toggleClass('on');
if($(this).hasClass('on')){
$(this).next('.status')
.text('The button above is now ON.');
} else {
$(this).next('.status')
.text('The button above is now OFF.');
}
}
function getEveryStatus(){
var list = '';
$('button').each(function(i){
list += 'Button #' + i + ' is ' + ($(this).hasClass('on')? 'ON':'OFF') + '.\n';
});
alert(list);
}
button{
width: 4em;
height: 2em;
border-radius: 2em;
border: none;
outline: none;
position: relative;
background: #ddd;
cursor: pointer;
-webkit-transition: background .2s ease;
transition: background .2s ease;
}
button.on{
background: #63e63e;
}
button:before{
content: '';
position: absolute;
top: 50%;
left: 3em;
height: 2em;
width: 2em;
margin-top: -1em;
margin-left: -1em;
background: #fff;
border-radius: 2em;
box-shadow: 0 0 5px rgba(0,0,0,.5);
-webkit-transition: left .2s ease;
transition: left .2s ease;
}
button.on:before{
left: 1em;
}
#getEveryStatus{
color: blue;
text-decoration: underline;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button></button>
<p class="status">The button above is now OFF.</p>
<button></button>
<p class="status">The button above is now OFF.</p>
<p id="getEveryStatus">Click here to get every status</p>