$(document).ready(function() {
$('.tests').click(function() {
$(this).css('background-color', '#FFBF38');
});
});
This code works ok, but when I click other button (.tests), I want to back to color was previously.
how to do it? Thanks!
$(document).ready(function() {
$('.tests').click(function() {
$(".tests").css('background-color', "YOUR PREVIOUS COLOR");
$(this).css('background-color', '#FFBF38');
});
});
var startColor = "yourStartColor";
$(document).ready(function()
{
$('.tests').click(function()
{
if($(this).css('background-color') == "#FFBF38")
$(this).css('background-color', startColor);
else
$(this).css('background-color', "#FFBF38");
});
});
you need to use toggleClass("");
HTML
<div class="place"></div>
CSS
.place {
width: 50px;
height: 50px;
background-color: #336699;
}
.green{
background-color: black;
}
Script
$(".place").click(function () {
$(this).toggleClass("green");
});
Demo
Try this,
$('.tests').click(function() {
$('.tests').css('background-color', 'your_old_color');
$(this).css('background-color', '#FFBF38');
});
Related
The below code is working fine, but i want merge checked and click functions in single function. Is it possible?
$(function () {
if($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
});
$(function () {
$("#enablepromo0").click(function () {
if ($(this).is(":checked")) {
$("#PromoPanel").show(300);
} else {
$("#PromoPanel").hide(300);
}
});
});
Use the change event and trigger it, it can then detect the current state of the checkbox. I altered the code to toggle a class instead to avoid a "flash" initially.
$(function() {
$("#enablepromo0").on('change', function() {
let isChecked = !this.checked;
$("#PromoPanel").toggleClass("hidden", isChecked, {
duration: 300
});
}).trigger('change');
});
.panel {
border: solid lime 1px;
background: #ddffdd;
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
Check to show: <input type="checkbox" id='enablepromo0' />
<div class="container">
<div id="PromoPanel" class="panel hidden">
<h2>Hi There</h2>Get stoked</div>
</div>
both function do the same job so i changed something to show an alert:
$(function () {
$("#enablepromo0").click(function () {
alert("dddddd")
if($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="checkbox" id='enablepromo0'/>
<div id="PromoPanel" style="border: 1px solid red; width:50px; heigth:50px; display:none;">uuu</div>
Move the code to its own function and call as required:
function showHide() {
if ($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
}
$(function () {
showHide();
$("#enablepromo0").click(function () {
showHide();
});
});
I got these panels which have options to be filtered by Red, Green and Yellow class, and another Show All option. They are behaving ok, but what I would like to achieve is following: When clicked on Show All, and after that on for example on Yellow -> it should hide everything except yellow. Also, you should be able to select only Yellow + Green, Red + Yellow etc., so that only those buttons stay selected then. And when user clicks on all three buttons, it could automatically select "Show All"...
I'm little confused about logic how to set this up so any help would be welcome, thanks a lot!
Here's a pen with example: https://codepen.io/anon/pen/YOgqRX
$('.main__container').masonry({
itemSelector: '.item',
columnWidth: '.item'
});
$("#filter-show-all").on('click', function() {
$(".item").each(function(item) {
$(this).removeClass("panel-hide");
$('.main__container').masonry();
});
});
$("#filter-red").on('click', function() {
$(".red").toggleClass("panel-hide");
$('.main__container').masonry();
});
$("#filter-green").on('click', function() {
$(".green").toggleClass("panel-hide");
$('.main__container').masonry();
});
$("#filter-yellow").on('click', function() {
$(".yellow").toggleClass("panel-hide");
$('.main__container').masonry();
});
Open my code in codePen:
CodePen
Explainations are comments along with the coding.
Head:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
CSS:
<style>
.main__container {
width: 100%;
}
.item {
width: 100%;
box-shadow: 1px 1px 1px rgba(0,0,0,.1);
padding: 10px;
}
#media(min-width: 800px) {
.item {
width: 49%;
}
}
.red {
background: red;
}
.green {
background: green;
}
.yellow {
background: yellow;
}
/*added css*/
.on{
border: 3px solid blue;
}
.off{
border: none;
}
</style>
HTML:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="filters">
<button id="filter-show-all" class="on">Show all</button>
<button id="filter-red" class="on">Show red</button>
<button id="filter-green" class="on">Show green</button>
<button id="filter-yellow" class="on">Show yellow</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="main__container">
<div class="item red">
<h4>Red</h4>
</div>
<div class="item green">
<h4>Green</h4>
</div>
<div class="item red">
<h4>Red</h4>
</div>
<div class="item yellow">
<h4>Yellow</h4>
</div>
<div class="item yellow">
<h4>Yellow</h4>
</div>
<div class="item green">
<h4>Green</h4>
</div>
</div>
</div>
</div>
</div>
JQuery:
$('.main__container').masonry({
itemSelector: '.item',
columnWidth: '.item'
});
/*
Check if clicked button state is 'on' or 'off'
if it is 'on', After click, let matched color block disappear,
if it is 'off', After click, let matched color block show
*/
/* turn showAll button off, hide all the items */
function showAllOff_hideItems(){
if($('#filter-show-all').attr('class')=='on'){
$('#filter-show-all').click();
}
}
$("#filter-show-all").on('click', function() {
if($(this).attr('class')=="on"){
$(".item").each(function(item) {
$(this).hide();
});
}else{
$(".item").each(function(item) {
$(this).show();
});
}
$('.main__container').masonry();
});
$("#filter-red").on('click', function() {
showAllOff_hideItems();
if($(this).attr('class')=="on"){
$(".red").hide();
}else{
$('.red').show();
}
$('.main__container').masonry();
});
$("#filter-green").on('click', function() {
showAllOff_hideItems();
if($(this).attr('class')=="on"){
$(".green").hide();
}else{
$('.green').show();
}
$('.main__container').masonry();
});
$("#filter-yellow").on('click', function() {
showAllOff_hideItems();
if($(this).attr('class')=="on"){
$(".yellow").hide();
}else{
$('.yellow').show();
}
$('.main__container').masonry();
});
/* Esstential Coding here : */
$('.filters button').on('click',function(){
if($(this).attr('id')!="filter-show-all"){
/*Toggle the clicked button*/
if($(this).attr('class')=="on"){
$(this).attr('class','off');
}else{
$(this).attr('class','on');
}
}else{
/* if show all button is clicked */
/* if it is on, turn all the buttons off */
if($(this).attr('class')=="on"){
$('.filters button').each(function(){
$(this).attr('class','off');
});
/* if it is off, turn all the buttons on */
}else{
$('.filters button').each(function(){
$(this).attr('class','on');
});
}
}
});
Use this jquery and if it doesn't work then let me know
$('.main__container').masonry({
itemSelector: '.item',
columnWidth: '.item'
});
$("#filter-show-all").on('click', function() {
$(this).toggleClass("selected");
if($(this).hasClass("selected"))
{
$(".item").each(function(item) {
$(this).toggleClass("panel-hide");
$('.main__container').masonry();
});
}
else{
$(".item").each(function(item) {
$(this).toggleClass("panel-hide");
$('.main__container').masonry();
});
}
});
$("#filter-red").on('click', function() {
$(this).toggleClass("selected");
if($(this).hasClass("selected"))
{
$(".red").removeClass("panel-hide");
}
else
{
$(".red").addClass("panel-hide");
}
if($('#filter-red').hasClass("selected") && $('#filter-green').hasClass("selected")&& $('#filter-yellow').hasClass("selected"))
{
$($('#filter-show-all').addClass("selected"))
}
else
{
$($('#filter-show-all').removeClass("selected"))
}
$('.main__container').masonry();
});
$("#filter-green").on('click', function() {
$(this).toggleClass("selected");
if($(this).hasClass("selected"))
{
$(".green").removeClass("panel-hide");
}
else
{
$(".green").addClass("panel-hide");
}
if($('#filter-red').hasClass("selected") && $('#filter-green').hasClass("selected")&& $('#filter-yellow').hasClass("selected"))
{
$($('#filter-show-all').addClass("selected"))
}
else
{
$($('#filter-show-all').removeClass("selected"))
}
$('.main__container').masonry();
});
$("#filter-yellow").on('click', function() {
$(this).toggleClass("selected");
if($(this).hasClass("selected"))
{
$(".yellow").removeClass("panel-hide");
}
else
{
$(".yellow").addClass("panel-hide");
}
if($('#filter-red').hasClass("selected") && $('#filter-green').hasClass("selected")&& $('#filter-yellow').hasClass("selected"))
{
$($('#filter-show-all').addClass("selected"))
}
else
{
$($('#filter-show-all').removeClass("selected"))
}
$('.main__container').masonry();
});
$(document).on('click', '.tbtn', function(e) {
$('#loading-image').show();
if(error){
$('loading-image').hide();
else{
val = $('.barbtn input:checked').val();
draw_summary($.parseJSON(data['summary']),val);
draw_barchart($.parseJSON(data['barchart']),val);
draw_scatter($.parseJSON(data['table']),val);
$('#loading-image').show();
}
});
Here i have drawing charts using d3...charts are coming correctly but i need to set loading image when i onclick the button...this code is not working
how to set loading image when onclick the button?
You just need to set CSS for it. Otherwise you are following right path. Please check below snippet.
$(document).on('click', '.tbtn-hide', function(e) {
$('#loading-image').hide(); //hide loader
});
$(document).on('click', '.tbtn-show', function(e) {
$('#loading-image').show(); //show loader
});
#loading-image
{
background: white url("http://smallenvelop.com/demo/simple-pre-loader/images/loader-64x/Preloader_1.gif") no-repeat scroll center center;;
height: 80%;
left: 0;
position: fixed;
top: 10;
width: 100%;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="tbtn-hide">Hide</button>
<button class="tbtn-show">show</button>
<div id="loading-image" style="display:none">
</div>
$(document).on('click', '.tbtn', function(e) {
$('#loading-image').show();
$.ajax({
success:function(result){
val = $('.barbtn input:checked').val();
draw_summary($.parseJSON(data['summary']),val);
draw_barchart($.parseJSON(data['barchart']),val);
draw_scatter($.parseJSON(data['table']),val);
$('#loading-image').hide();
}
});
});
I have a problem:
When I click on my '.glass' div it opens multiple '.permalinks' divs, but I just want to open the one I click.
This is my code:
<script type="text/javascript">
$(window).ready(function() {
$('.glass').click(function() {
$('.permalinks').slideToggle(function() {
});
});
});
</script>
This is the CSS:
.permalinks {
display:none;
position:absolute;top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.7);
}
.reblog, .link, .like {
display:inline-block;
margin:2%;
margin-top:45%;
padding:7% 7% 4% 7%;
}
.reblog, .link, .like {
width:10%;
}
.reblog {
background:#317FD4;
}
.link {
background:#38C264;
}
.like {
background:#ED4A4A;
}
.glass {
position:absolute;
top:0;
left:0;
background:#f3f3f3;
}
And this the html:
<div class="permalinks">
<div class="reblog"><center><img src=""></center></div>
<div class="link"><center><img src=""></center></div>
<div class="like"><center><img src=""></center></div>
</div>
<img class="glass" src="" width="5%">
If you could tell me what I've done wrong, please.
assign the click handler to .permalinks and use $(this).slideToggle()
$(window).ready(function() {
$('.permalinks').click(function() {
$(this).slideToggle();
});
});
http://jsfiddle.net/yRFSV/
If .permalinks is a child of .glass, then it's easy:
$(window).ready(function() {
$('.glass').click(function() {
$(this).find('.permalinks').slideToggle(function() {
});
});
});
If .permalinks is a child of .glass, then you can select it directly upon click.
$('.glass').on('click', function() {
$(this).find('.permalinks').slideToggle();
});
you probably want
<script type="text/javascript">
$(window).ready(function() {
$('.glass').click(function() {
$(this).children('.permalinks').slideToggle(function() {
});
});
});
</script>
Two options:
.permalinks is after .glass in the DOM tree
Use $(this).next('.permalinks').slideToggle(function() {
.permalinks is before .glass in the DOM tree
Use $(this).prev('.permalinks').slideToggle(function() {
When using slideToggle, how to change the Text close/show?
I did a simple one, but cannot get the text change back.
Here is what I did:
$(document).ready(function(){
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
$(this).text('close');
});
$('.open2').click(function(){
$('.showpanel2').slideToggle('slow');
$(this).text('close');
});
});
body{
font-size:20px;
}
#box{
border:2px solid #000;
width:500px;
min-height:300px;
}
.open,.open2 {
width:450px;
height:50px;
background:blue;
margin:5px auto 0 auto;
color:#fff;
}
.showpanel,.showpanel2{
width:450px;
height:300px;
margin:0 auto 10px auto;
background:red;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<div class="open">Show</div>
<div class="showpanel">This is content</div>
<div class="open2">Show</div>
<div class="showpanel2">This is content</div>
</div>
http://jsfiddle.net/9EFNK/
You can use the is() assertion method to check whether the panel is open or closed in the animation's callback and set the text accordingly - http://jsfiddle.net/9EFNK/7/
$('.open').click(function(){
var link = $(this);
$('.showpanel').slideToggle('slow', function() {
if ($(this).is(':visible')) {
link.text('close');
} else {
link.text('open');
}
});
});
Just add a simple if statement to test the text like so
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
if($(this).text() == 'close'){
$(this).text('Show');
} else {
$(this).text('close');
}
});
Like this DEMO
Not the prettiest of methods, but it does the job in a single statement.
$(this).text(($(this).text() == 'Close') ? 'Show' : 'Close');
Use .toggle()
Here is Working Demo
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
}).toggle(function() {
$(this).text('Hide');
}, function() {
$(this).text('Show');
});
check this may be user question is solve Fiddle
Here's an updated version http://jsfiddle.net/9EFNK/1/
You can simply toggle a class on close/open, perform a check for that class and change the contained text accordingly
if( $(this).hasClass('active') )
$(this).text('open');
else
$(this).text('Show');
$(this).toggleClass('active');
try this demo
$(document).ready(function(){
$('.open').toggle(function(){
$('.showpanel').slideToggle('slow');
$(this).text('close');
}, function(){
$('.showpanel').slideToggle('slow');
$(this).text('Show');
});
$('.open2').toggle(function(){
$('.showpanel2').slideToggle('slow');
$(this).text('close');
}, function(){
$('.showpanel2').slideToggle('slow');
$(this).text('Show');
});
});
Use this
jQuery.fn.toggleText = function() {
var altText = this.data("alt-text");
if (altText) {
this.data("alt-text", this.html());
this.html(altText);
}
};
Here is how you use it
jQuery.fn.toggleText = function() {
var altText = this.data("alt-text");
if (altText) {
this.data("alt-text", this.html());
this.html(altText);
}
};
$('[data-toggle="offcanvas"]').click(function () {
$(this).toggleText();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button data-toggle="offcanvas" data-alt-text="Close">Open</button>
You can even use html provided it's html encoded properly