I got a series of button and I wanna select one, but when that happens the other buttons disable.
I'm trying to do it, but it's not working. It selects but after that disables every button i have. Please help.
https://jsfiddle.net/KukApep3/cq45d3fq/#&togetherjs=Qg4mmTfbne
var supermercado;
$("button").click(function(){
$(this).toggleClass("selected");
$("button").each(function(){
if($(this).is(":selected")){
supermercado = $(this).text();
} else {
$(this).prop("disabled", true);
};
});
});
button {
border:none;
display:inline-block;
outline:0;
padding:8px 16px;
color:#fff;
background-color:#009688;
text-align:center;
cursor:pointer;
white-space:nowrap;
margin: 20px;
}
button:hover, .selected {
color:#000;
background-color:#bbb;
}
.selected {
border: 2px solid black;
}
.inline-list {display: inline-flex;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inline-list">
<button>Jumbo</button>
<button>Continente</button>
<button>Lidl</button>
<button>Pingo Doce</button>
</div>
Well, your code currently loops through all the buttons when any of them is clicked and then checks to see if each one is selected (rather that has the selected class applied to it), which will never happen with a button, so each one becomes disabled. And, once they are disabled, they can't be clicked to re-enable them.
Rather than disabling the buttons, I think you just want to remove the .selected class.
You don't need the loop at all because you can just remove the .selected class from all the buttons, apply it to just the button that was clicked and get the text of the button that was clicked - that is the selected button. Remove that loop and it works.
var supermercado;
$("button").click(function(){
// Remove the selected class from all buttons
$("button").removeClass("selected");
// Apply the selected class to just the clicked button
$(this).toggleClass("selected");
// Set the text to the text of the button that was just clicked
supermercado = $(this).text();
});
button {
border:none;
display:inline-block;
outline:0;
padding:8px 16px;
color:#fff;
background-color:#009688;
text-align:center;
cursor:pointer;
white-space:nowrap;
margin: 20px;
}
button:hover, .selected {
color:#000;
background-color:#bbb;
}
.selected {
border: 2px solid black;
}
.inline-list {display: inline-flex;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inline-list">
<button>Jumbo</button>
<button>Continente</button>
<button>Lidl</button>
<button>Pingo Doce</button>
</div>
Try using has class rather than the .is(":selected") as that attributed doesn't apply to buttons
var supermercado;
$("button").click(function(){
$(this).toggleClass("selected");
if($(this).hasClass("selected")){
$("button").each(function(){
if($(this).hasClass("selected")){
supermercado = $(this).text();
} else {
$(this).prop("disabled", true);
};
});
} else {
$("button").prop("disabled", false);
}
});
button {
border:none;
display:inline-block;
outline:0;
padding:8px 16px;
color:#fff;
background-color:#009688;
text-align:center;
cursor:pointer;
white-space:nowrap;
margin: 20px;
}
button:hover, .selected {
color:#000;
background-color:#bbb;
}
.selected {
border: 2px solid black;
}
.inline-list {display: inline-flex;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inline-list">
<button>Jumbo</button>
<button>Continente</button>
<button>Lidl</button>
<button>Pingo Doce</button>
</div>
Related
I would like to change the way the clear input option works.
By default, when selecting the X clear button, the search input is cleared.
Instead of clearing the search input when selected, I would like the clear input to trigger a page reload.
This is the X button in question:
I have been able to create a click button in an input box which does this, but I would like to change to use the X which becomes visible in bootstrap once a user begins to typing.
Javascript:
$('#clear').click(function () {
$('#input-outer input').val('');
window.location.reload();
});
HTML:
<div id="input-outer">
<input type="text">
<div id="clear">X</div>
</div>
CSS:
body {
font-family:"Tahoma";
}
#input-outer {
height:2em;
width:15em;
border:1px #e7e7e7 solid;
border-radius:20px;
}
#input-outer input {
height:2em;
width:80%;
border:0px;
outline:none;
margin:0 0 0 10px;
border-radius:20px;
color:#666;
}
#clear {
position:relative;
float:right;
height:20px;
width:20px;
top:5px;
right:5px;
border-radius:20px;
background:#f1f1f1;
color:white;
font-weight:bold;
text-align:center;
cursor:pointer;
}
#clear:hover {
background:#ccc;
}
What I am trying to change is instead of using this:
<div id="clear">X</div>
I am trying to target, bit with no success:
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
JSFiddle to hopefully help with my explanation: https://jsfiddle.net/mcmacca002/57mx3beq/1/
Thank you
in the JSFiddle you are not using jquery..
After i have added it it seems to working..
(it does reloads the page)
I would like to toggle 2 different classes. (A b), but i am not getting the result.
what is the issue with my code?
$('button').on('click', function () {
$('div').toggleClass("A B");
});
div{
height:20px;
}
.A{
border:1px solid red;
}
.B{
border:1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<button>Color Change</button>
Give your div a 'starter' class. Otherwise the first will 'toggle both on', the next 'toggle both off' etc.
Since both are setting the border, the last applied class is being used, whilst the other is being ignored, so hence you won't see the 'red' border.
Think of it like toggling between one class - on or off. If you start with no class, then the button will add the class (understandably).
If you're toggling with two classes, the same rules apply. You start with both off, then the button will toggle both on - and due to the order of css applied/specificity of css, the second will overwrite the first css definition.
So, in order to 'switch', you need to start with one in the 'on' position, and one in the 'off' position. And there you go! once the button is pressed, one will toggle from on to off, and the other vice versa.
$('button').on('click', function() {
$('div').toggleClass("A B");
});
div {
height: 20px;
}
.A {
border: 1px solid red;
}
.B {
border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A"></div>
<button>Color Change</button>
$('button').on('click', function () {
$('div').toggleClass("A B");
});
div{
height:20px;
}
.A{
border:1px solid red;
}
.B{
border:1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A"></div>
<button>Color Change</button>
No need to toggle both the classes. One class you need to assign and another class you can toggle.
HTML
<div class="A"></div>
<button>Color Change</button>
JQUERY
$('button').on('click', function () {
$('div').toggleClass("B");
});
CSS
div{
height:20px;
}
.A{
border:1px solid red;
}
.B{
border:1px solid blue;
}
JSFIDDLE DEMO
If you seen here the logic is simple. When you click the button it add the additional class called B into the div. Once you click the button your div code will become like this <div class="A B"></div>
So it is important that the order of A and B in your CSS. For example if you move B class to the top of A class then you won't get the desired result.
Not working CSS:
div{
height:20px;
}
.B{
border:1px solid blue;
}
.A{
border:1px solid red;
}
Otherwise you can use the important keyword, so that it will not worry about the order, but not good in the practice.
I just want to hide div if label which div contains set to 0.
here is my design:
<div id="pnltickethistory" class="thumb">
<img alt="" src="../images/emblem-library_64.png" name="ibtninquiryhistory" width="64" height="64" />
<br/>
<asp:LinkButton ID="lbut_inquiry_histrory" runat="server" onclick="lbut_inquiry_histrory_Click">Enquiry History</asp:LinkButton>
<div class="noti_bubble" id="noti_bubble1">
<asp:Label ID="lbl_inquiry_count" runat="server"></asp:Label>
</div>
</div>
-----------------------------------------Updated---------------------------------------------
and this is my java script code:
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var g1 = $('#lbl_inquiry_count').val();
if(g1=='0')
{
$('#noti_bubble1').hide();
}
var g2 = $('#lbl_query_count').val();
if(g2=='0')
{
$('#noti_bubble2').hide();
}
var g3 = $('#lbl_post_count').val();
if(g2=='0')
{
$('#noti_bubble3').hide();
}
});
</script>
this is my css:
.thumb
{
position:relative;
float:left;
width:110px;
height:90px;
padding:5px 5px 5px 5px;
margin-right:30px;
margin-bottom:20px;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
background-color:none;
border:#67849C solid 2px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.thumb:hover
{
width:110px;
height:90px;
background-color:#E7EBF3;
border:#67849C solid 2px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding: 5px 5px 5px 5px;
}
.thumb img
{
filter:alpha(opacity=100);
opacity:100;
}
.thumb:hover img
{
filter:alpha(opacity=40);
opacity:0.7;
}
.noti_bubble {
position:absolute;
top: -6px;
right:-6px;
padding:1px 5px 1px 5px;
background-color:red;
color:white;
font-weight:bold;
font-size:10pt;
border-radius:30px;
box-shadow:1px 1px 1px gray;
}
how to hide div using jquery
Assuming noti_bubble3 is class name of div to hide,
Simply,
$('.noti_bubble3').css('display', 'none'); // hide elements with class .noti_bubble3
or,
$('.noti_bubble3').toggle();
or
$('.noti_bubble3').hide();
For reference:
.css( property ) // will return property value
.css( property, value ) // will set property value
Edit as per comment,
$('#noti_bubble3').css('display', 'none'); // hide element with ID noti_bubble3
or,
$('#noti_bubble3').hide();
or,
$('#noti_bubble3').toggle();
Reference .css() .hide() .toggle()
Instead of .css('none'), do .css("display","none").
Then read up on jQuery .css().
use could use $('...').hide();
To hide something using jquery, you can use the built-in hide method :
$('your_selector').hide()
Try fadeOut() or hide() methods. For example:
$('#my_div').hide();
or
$('#my_div').fadeOut();
Assume that Label is set to 0 when it has text content '0'. Then you may use this code:
$('.noti_bubble').each(function() {
var el = $(this).find('Label');
if (!el.length) return true;
var v = el.text();
if (v == '0') $(this).hide();
});
Please try this. Selects elements that have the specified attribute with a value beginning exactly with a given string.
$("[id^= 'noti_bubble']").hide();
ok i got solution just add runat="server" to div which want to hide and you can simply use this div from code behind and make Visible = false;
I am trying to change a list item when the user clicks the selected class is changed to the clicked item. I have this code:
$(function() {
$("a.product-page li").click(function(){
$(this).parent("a").addClass("selected-page");
$("#options a.selected-page").removeClass("selected-page");
});
});
However the removeClass works however the addClass does not.
Here is the Site.
HTML:
<ul id="options">
<span></span><li>Summary</li>
<span></span><li>Specs</li>
<span></span><li>Media</li>
<span></span><li>Reviews</li>
</ul>
CSS:
ul#options {
margin-left:0px;
}
ul#options li{
list-style:none;
padding: 10px 20px;
background: #CCC;
border-top: 1px #999 solid;
border-left: 1px #999 solid;
border-right: 1px #999 solid;
}
ul#options a{
display:block;
border:none !important;
}
ul#options a.selected-page span{
position:absolute;
width:0px;
height:0px;
border-width:10px;
border-color:transparent #999999 transparent transparent;
border-style:solid;
margin-left:270px;
margin-top:11px;
}
ul#options a:last-child li {
border-bottom:1px #999 solid;
}
It's because you're immediately removing the class. Flip those two lines around, and it'll work.
$(function() {
$("a.product-page li").click(function(){
$("#options a.selected-page").removeClass("selected-page");
$(this).parent("a").addClass("selected-page");
});
});
As noted in a comment above, your HTML is terribly malformed as well. That will need to be fixed.
You should wrap <a> link tag inside li tag like below,
HTML:
<ul id="options">
<li><span></span>Summary</li>
<li><span></span>Specs</li>
<li><span></span>Media</li>
<li><span></span>Reviews</li>
</ul>
You are removing the class that you just added. You can move the remove class above the addclass or just use not to exclude this when you remove..
Code:
$(function() {
$("a.product-page", $('#options')).click(function(){
$(this).addClass("selected-page");
$("#options a.selected-page").not(this).removeClass("selected-page");
});
});
You are adding the class and then removing in the next line.
The order here
$(this).parent("a").addClass("selected-page");
$("#options a.selected-page").removeClass("selected-page");
is incorrect.
Reverse the lines
$(this).parent("a").addClass("selected-page");
$("#options a.selected-page").removeClass("selected-page");
I am having trouble with a navigation menu I have created. Basically, the navigation consists of several tabs that is collapsible upon click a button and then expandable when you click that button again. When collapsed, the ends of the tabs are still visible, and when you hover over the tabs will go back out, and go back in when hovering out.
So I have the following navigation laid out:
<ul id="navigation">
<li>Name1</li>
<li>Name2</li>
<li>Name3</li>
<li id = "collapser">Collapse All</li>
</ul>
And I have the following jQuery/javascript laid out to do this:
$("#collapser").click(function(){
if($("#collapser").hasClass("clicked")){
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-118px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'0px'},400);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-118px'},400);
}
);
});
$("#collapser").removeClass("clicked");
$("#collapser").addClass("unclicked");
$("#collapser").html('Expand All')
}
else{
$(function() {
$('#navigation a').stop().animate({'marginLeft':'0px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'0px'},400);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'0px'},400);
}
);
});
$("#collapser").removeClass("unclicked");
$("#collapser").addClass("clicked");
$("#collapser").html('Collapse All')
}
})
The code works, but only when you click the link a second time. I can't seem to figure out what I did to make it work only after clicking it once already.
Any help would be appreciated, thank you very much!!
-Quintin
EDIT:
Here is the CSS for the navigation:
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
font-size:14px;
top: 14px;
left: 0px;
list-style: none;
z-index:9999;}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display:block;
margin-bottom:3px;
width:126px;
padding:3px;
padding-left:15px;
background-color:#ffffff;
background-repeat:no-repeat;
background-position:center center;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
-moz-box-shadow: 0px 1px 3px #000;
-webkit-box-shadow: 0px 1px 3px #000;
}
ul#navigation .checked a{
color:#ffffff;
background-color:#000000;
}
You are verifying if your collapser div has or not the class clicked or unclicked, but you not initialize the div with some class. Adding the class clicked should adjust your effect:
<li id = "collapser" class='clicked'>Collapse All</li>
You can see it with this jsfiddle