The issue I am having is if I click on the checkout button right after clicking the remove button it would still change the color of the box eventhough I already have the $(".blueClass").removeClass('classOne'); on the jquery function. What I am trying to accomplish is that when I click on remove, the said box should not change its color when I click checkout unless I click the box again. The complete source code is on the link below.
$( document ).ready(function() {
$(".boxes" ).click(function() {
$(this).addClass('classOne');
});
$(".btn-primary").click(function(){
$(".classOne").addClass('blueClass');
$(".classOne").append("<div class='wraps'><br><strong>Ordered</strong>");
$(".classOne").append("<br><button type='button' class='btn btn-info'>Remove</button></div>");
$(".blueClass").removeClass('classOne');
$(".btn-info").click(function(){
$(this).parent().removeClass('blueClass classOne').empty('');
});
});
});
.leftbox{
min-height: 100%;
}
.rightbox{
min-height: 100%;
}
.boxes{
border: 1px solid black;
border-radius: 10px;
min-height: 9em;
float: left;
margin: 1em 1em 1em 1em;
width: 100%;
}
.wrapper{
padding-top: 1em;
}
.btn-holder{
margin-top: 3em;
}
.redClass{
background-color: red;
}
.greenClass{
background-color: green;
}
.yellowClass{
background-color: yellow;
}
.blueClass{
background-color: blue;
}
.rightbox input{
width:50%;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" col-md-3 text-center">
Item 11
<div class="boxes text-center">
</div>
</div>
<div class=" col-md-3 text-center">
Item 12
<div class="boxes text-center">
</div>
</div>
</div>
<button type="button" class="btn btn-primary">Checkout</button>
When a .btn-info is clicked, the event bubbles to the .boxes element, then triggering the listener adding .classOne again :
$(".boxes" ).click(function() {
$(this).addClass('classOne');
})
You want to stop this bubbling, by simply adding event.stopPropagation in the .btn-info click listener :
$(".btn-info").click(function(e){
e.stopPropagation();
$(this).parent()
.removeClass('blueClass classOne')
.empty('');
});
And, by the way, adding the listener to the document outside the .btn-primary click callback as #Ankit Agarwal states is a better design, because you will add only one listener one time, not every time the checkout button is clicked.
EDIT
A more proper solution I think, if you don't want to stop your event propagation, which could cause you trouble if for example you want to listen for some "general clicks" on the whole document, you can check the event.target in the .boxes callback, and remove the event.stopPropagation part in the .btn-info callback :
$(".boxes").click(function(e) {
if(event.target === this)
$(this).addClass('classOne');
});
$(".btn-info").click(function(){
$(this).parent()
.removeClass('blueClass classOne')
.empty('');
});
Since btn-info button is added dynamically you need to assign click event to that button using the reference of document object. Changing that click function will fix your issue:
$( document ).ready(function() {
$(".boxes" ).click(function() {
$(this).addClass('classOne');
});
$(".btn-primary").click(function(){
$(".classOne").addClass('blueClass');
$(".classOne").append("<div class='wraps'><br><strong>Ordered</strong>");
$(".classOne").append("<br><button type='button' class='btn btn-info'>Remove</button></div>");
$(".blueClass").removeClass('classOne');
});
$(document).on("click",".btn-info",function(e){
$(this).parent().removeClass('blueClass classOne').empty('');
});
});
.leftbox{
min-height: 100%;
}
.rightbox{
min-height: 100%;
}
.boxes{
border: 1px solid black;
border-radius: 10px;
min-height: 9em;
float: left;
margin: 1em 1em 1em 1em;
width: 100%;
}
.wrapper{
padding-top: 1em;
}
.btn-holder{
margin-top: 3em;
}
.redClass{
background-color: red;
}
.greenClass{
background-color: green;
}
.yellowClass{
background-color: yellow;
}
.blueClass{
background-color: blue;
}
.rightbox input{
width:50%;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" col-md-3 text-center">
Item 11
<div class="boxes text-center">
</div>
</div>
<div class=" col-md-3 text-center">
Item 12
<div class="boxes text-center">
</div>
</div>
<button type="button" class="btn btn-primary">Checkout</button>
Related
I have made a custom card component with plain html and css. This is my code for HTML:
<div class="item">
<div class="item-content">
<div class="item-title">
Title 1
</div>
<div class="item-subtitle">
<label>test, test, test</label>
<i class="icon-basket remove-item"></i>
</div>
</div>
</div>
And this is my css code for the styling:
.item {
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
padding-top: 15px;
padding-bottom: 15px;
box-shadow: 0px 4px 10px rgba(176, 176, 176, 0.2);
}
.item:hover {
cursor: pointer;
background-color: #EEF5FF;
}
.item-title {
font-weight: 600;
padding-left: 24px;
}
.item-subtitle {
padding-left: 24px;
font-weight: 100;
}
.item-subtitle label {
width: calc(100% - 64px);
display: inline-block;
padding-top: 10px;
}
The card component is looking good. Now I want to add an active class to the item. I have made a hover and when I click on the item and I want that the hover color stays (active).
This is my JQuery code:
$(document).ready(function(){
$('item').click(function(){
$('item').removeClass("active");
$(this).addClass("active");
});
});
The hover is working good but when I click on it the background-color doesn't stay active.
I have made a jsfiddle so you can see the behaviour:
https://jsfiddle.net/gvu9nk8d/2/
Can someone point me in the right direction?
Two things you need to correct
1. your jquery click event selector is missing dot for class item
2. You need to add class active in the CSS
$(document).ready(function(){
$('.item').click(function(){ //added dot here
$('.item').removeClass("active");//added dot here
$(this).addClass("active");
});
});
.item {
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
padding-top: 15px;
padding-bottom: 15px;
box-shadow: 0px 4px 10px rgba(176, 176, 176, 0.2);
}
.item:hover, .item.active { /* added class here*/
cursor: pointer;
background-color: #EEF5FF;
}
.item-title {
font-weight: 600;
padding-left: 24px;
}
.item-subtitle {
padding-left: 24px;
font-weight: 100;
}
.item-subtitle label {
width: calc(100% - 64px);
display: inline-block;
padding-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="item">
<div class="item-content">
<div class="item-title">
Title 1
</div>
<div class="item-subtitle">
<label>test, test, test</label>
<i class="icon-basket remove-item"></i>
</div>
</div>
</div>
JSFiddle Demo
You are missing the dot at class item
$(document).ready(function(){
$('.item').click(function(){
$('.item').removeClass("active");
$(this).addClass("active");
});
});
The problem with your code was that you have used the wrong selector.
It should be $('.item') since item is a class. Then the active class will be added
Also include some style to make changes when the item is active
Hello people I created two divs and when i hover to h3 shows me something. I want display this only when i click on h3. How i can do this?
How to change hover to click? When i do this doesn't working.
Sorry for my bad language.
$(document).ready(function () {
$('li.requirement').hover(function () {
$(this).find('span').show();
}, function () {
$(this).find('span').hide();
});
});
#wrap {
background: #e7e7e7;
padding: 0px;
text-align: center;
width: 100%;
}
#left, #right {
background: #ccc;
display: inline-block;
padding: 20px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}
h3 {text-align:center;}
h3.praw {float:left;}
h3.lew {float:right;}
.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="left"><div class="lef">
<li class="requirement" id="requirement_1">
<h3 class="lew">SPR</h3>
<span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>
</div></div>
<div id="right"><div class="praf">
<li class="requirement" id="requirement_2">
<h3 class="praw">SPR 2</h3>
<span class="fr drag prawy" style="display:none;">2 kontakt</span>
</li>
</div></div>
</div>
You can use .on('click', function(){}); and then inside this function you check to see if it's already visible or not. Take a look here
EDIT
As you want to be just the <h3> clickable, i made an adjustment in the code below, and now you need to cehck for the visibility of the h3 parent, because now the context of this is now h3 and no more the li
$(document).ready(function () {
$('.clickableH3').on('click', function () {
if ($(this.parentElement).find('span').is(":visible")){
$(this.parentElement).find('span').hide();
}else{
$(this.parentElement).find('span').show();
}
});
});
#wrap {
background: #e7e7e7;
padding: 0px;
text-align: center;
width: 100%;
}
#left, #right {
background: #ccc;
display: inline-block;
padding: 20px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}
h3 {text-align:center;}
h3.praw {float:left;}
h3.lew {float:right;}
.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="left"><div class="lef">
<li class="requirement" id="requirement_1">
<h3 class="lew clickableH3">SPR</h3>
<span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>
</div></div>
<div id="right"><div class="praf">
<li class="requirement" id="requirement_2">
<h3 class="praw clickableH3">SPR 2</h3>
<span class="fr drag prawy" style="display:none;">2 kontakt</span>
</li>
</div></div>
</div>
Well you see, in your js code, where you have "hover" ? Well you type "click" there instead ...
The jQuery hover function can have 2 parameters, which is your case. The first one for the hover, the second is for the unhover
So if you want to be able to close and hide on click I advise to use some css and use toggleClass. But if you wan to keep only javascript you can do like this:
$(document).ready(function () {
$('li.requirement').click(function () {
var $elm = $(this);
if( $elm.hasClass('showed') ){
$elm.find('span').removeClass('showed').hide();
}else{
$elm.find('span').addClass('showed').show();
}
});
});
I have a page where multiple div and within each div there is a option to click and toggle the information, I am able to create by defining different IDs of DIV but I think that can be done somehow dynamically, here is what I have created in JSFiddle
CSS
.boxwrap {
float: left;
width: 200px;
height: 250px;
border: 1px solid #ccc;
margin: 0 5px 0 0;
text-align: center;
box-sizing: border-box;
padding: 10px;
}
.boxwrap_inner {
float: left;
width: 100%;
background: #ddd;
padding: 5px 0;
text-align: center;
}
.noDisplay {
display: none;
}
HTML
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>
JQuery
$('#button1').click(function () {
$("#content1").slideToggle(200);
});
$('#button2').click(function () {
$("#content2").slideToggle(200);
});
Check this:
$('.boxwrap > a').click(function () {
$(this).next().slideToggle(200);
});
.boxwrap {
float: left;
width: 200px;
height: 250px;
border: 1px solid #ccc;
margin: 0 5px 0 0;
text-align: center;
box-sizing: border-box;
padding: 10px;
}
.boxwrap_inner {
float: left;
width: 100%;
background: #ddd;
padding: 5px 0;
text-align: center;
}
.noDisplay {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>
The previous answers rely on the fact that the DOM is going to remain the same and the next() element after the button will always be the content div.
For a more robust solution, I would add a class to the buttons in the boxwrap(i.e. .boxbtn) and a class to the content divs (i.e. boxcontent) and then I would do something like the following:
$('.boxbtn').click(function () {
$(this).closest('.boxwrap')..find('.boxcontent').slideToggle(200);
});
Try this way,
It's better to specify the element with it's parent on which you're calling a click event.
$('.boxwrap > a').click(function(){
$(this).next('div').slideToggle(200);
});
Here with 2 options
using relative attribute value
using finding relative don element
/*$('.toggle_link').click(function () {
$($(this).data('toggle')).slideToggle(200);
});
OR
*/
$('.toggle_link').click(function () {
$(this).parent().find('.noDisplay').slideToggle(200);
});
.boxwrap{float:left; width:200px; height:250px; border:1px solid #ccc; margin:0 5px 0 0; text-align:center; box-sizing:border-box; padding:10px;}
.boxwrap_inner{float:left; width:100%; background:#ddd; padding:5px 0; text-align:center;}
.noDisplay{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>
I have this menu in HTML / CSS:
HTML:
<div id="outer">
<div id="inner">King Kong</div>
<div id="inner">Table</div>
CSS:
#inner {
background-color: #547980;
width: 130px;
margin-left: 8px;
}
#inner:first-child {
background-color: #547980;
width: 130px;
margin-left: 8px;
margin-top: 8px;
}
div {
border-radius: 5px;
border: 2px solid black;
}
and I want load page in jQuery.
It can be like printer, after click on link from menu it should start from margin-left position 140 and printing to margin-right position 20 or
Loading like book when you go to another page.
But I don't know how to do it. Any advice please?
With jQuery you can use this script:
$('body').on('click', 'a', function(event) {
event.preventDefault();
var href = $(this).attr('href');
$('.result').load(href);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Menu Link
<div class="result"></div>
So I'm trying to make multiple lights activate on button clicks and I'm not sure what I'm doing wrong here.
I thought I could make this into a function and then pass it the id name but it looks like it's not acting the way I want.
html
<div class="lights">
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
</div>
<div class="button">
<button id="red_button"> Red Button </button>
<button id="yellow_button">Yellow Button </button>
<button id="green_button">Green Button </button>
</div>
css
.lights{
height: 600px;
width: 200px;
background-color: black;
padding-top: 15px;
}
.button{
padding-top: 20px;
}
#red,
#yellow,
#green {
margin: 0 auto;
background-color: black;
border-radius: 50%;
width: 180px;
height: 180px;
margin-top: 10px;
}
#red.active {
background-color: red;
}
#yellow.active {
background-color: yellow;
}
#green.active {
background-color: green;
}
jquery
function click(e) {
$('#red,#yellow,#green').removeClass('active');
$('e').addClass('active');
}
$('#red_button').click(click('#red'));
$('#yellow_button').click(click('#yellow'));
$('#green_button').click(click('#green'));
http://jsfiddle.net/0m9wos1r/1/
A few things. I wouldn't recommend naming your function after an event, although it should still work. The issue with your code is that you're immediately calling the function, and in the function you quoted the parameter. Use this instead:
function click(e) {
$('#red,#yellow,#green').removeClass('active');
$(e).addClass('active');
}
$('#red_button').click(function () {
click('#red')
});
$('#yellow_button').click(function () {
click('#yellow')
});
$('#green_button').click(function () {
click('#green')
});
.lights {
height: 600px;
width: 200px;
background-color: black;
padding-top: 15px;
}
.button {
padding-top: 20px;
}
#red, #yellow, #green {
margin: 0 auto;
background-color: black;
border-radius: 50%;
width: 180px;
height: 180px;
margin-top: 10px;
}
#red.active {
background-color: red;
}
#yellow.active {
background-color: yellow;
}
#green.active {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="lights">
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
</div>
<div class="button">
<button id="red_button">Red Button</button>
<button id="yellow_button">Yellow Button</button>
<button id="green_button">Green Button</button>
</div>
Fixed: http://jsfiddle.net/0m9wos1r/4/
2 issues you need to fix:
The function call within the click call. Like so, using an anonymous function:
$('#red_button').click(function(){click('#red')});
The selector within the click function. Like so:
$(e).addClass('active');