Cannot update processbar - javascript

I am doing exactly like http://responsiweb.com/themes/preview/ace/1.3.3/elements.html
Here is the html code:
<div class="col-xs-4">
<div class="easy-pie-chart percentage" data-percent="0" data-color="#D15B47">
<span class="percent">0</span>%
</div>
<hr />
<div class="easy-pie-chart percentage" data-percent="0" data-color="#87CEEB">
<span class="percent">0</span>%
</div>
<hr />
<div class="easy-pie-chart percentage" data-percent="60" data-color="#87B87F">
<span class="percent">60</span>%
</div>
</div>
<!-- /.col -->
<button id="incre_know_one">
Increase processwheel</button>
and javascript:
$("#incre_know_one").click(function () {
$(".easy-pie-chart").attr('data-percent', '50');
$('.easy-pie-chart span').html('50');
});
It update the text but not fill the color..any suggestion???

Related

Count the number of checked check-boxes in multiple panels and show the relevant number in the correct panel using jQuery/JavaScript

I have multiple panels (class="panel-section) and I was to count the number of checked check-boxes in each and display this number in each panel, and have this number update when there is a check-box change.
This is my HTML code:
<div class="panel-section">
<!-- Layer Group Heading -->
<div class="panel-section-top">
<a href="javascript:;" class="expand-toggle">Group 1
<span id="layer_group_1_count_checkboxes" class="badge"></span></a>
</div> <!-- end (Group Name) -->
<div class="panel-section-main" id="layer_group_1">
<!-- Layer -->
<div class="layer">
<div class="list-group" style="margin-bottom: 0px;">
<label class="checkbox-inline switch-button" for="visible10">
<input type="checkbox" name="layer_10" class="visible" id="visible10">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 1</h4>
</div>
</div> <!-- end .layer -->
<!-- Layer -->
<div class="layer">
<div class="list-group" style="margin-bottom: 0px;">
<label class="checkbox-inline switch-button" for="visible11">
<input type="checkbox" name="layer_11" class="visible" id="visible11">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 2</h4>
</div>
</div> <!-- end .layer -->
</div> <!-- end .layer-main -->
</div> <!-- end .panel-section layer_group_1 -->
<div class="panel-section">
<!-- Layer Group Heading -->
<div class="panel-section-top">
<a href="javascript:;" class="expand-toggle">Group 2
<span id="layer_group_2_count_checkboxes" class="badge"></span></a>
</div> <!-- end (Group Name) -->
<div class="panel-section-main" id="layer_group_2">
<!-- Layer -->
<div class="layer">
<div class="list-group" style="margin-bottom: 0px;">
<label class="checkbox-inline switch-button" for="visible20">
<input type="checkbox" name="layer_20" class="visible" id="visible20">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 1</h4>
</div>
</div> <!-- end .layer -->
<!-- Layer -->
<div class="layer">
<div class="list-group" style="margin-bottom: 0px;">
<label class="checkbox-inline switch-button" for="visible11">
<input type="checkbox" name="layer_21" class="visible" id="visible21">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 2</h4>
</div>
</div> <!-- end .layer -->
</div> <!-- end .layer-main -->
</div> <!-- end .panel-section layer_group_2 -->
And I can get the number of total check-boxes that are active using the following:
//Get the number of total layers active
$(document).ready(function () {
$("input[type=checkbox]").each(function () {
$(this).change(updateCount);
});
updateCount();
function updateCount () {
var count = $("input[type=checkbox]:checked").size();
$("#count_checkboxes").text(count);
$("#status").toggle(count > 0);
};
});
But instead of just "#count_checkboxes" I want the id from the panel-section-main div to join with it so I can pass the number to the right section (eg "#layer_group_1_count_checkboxes").
I may not be going about this the best way so also open to better ideas people may have.
This is an example of the output I want:

When trying to genericise content, aka. DRY (Don't Repeat Yourself) it up, you should avoid id attributes as they are the opposite of what you need. Instead target elements by their classes so you can deal with them by their behaviour instead of targeting them directly.
As such you can achieve what you need when a checkbox is changed by looping through all the panels and finding the number of checked checkboxes and updating the .badge within that panel.
Also note that size() has been removed from the latest versions of jQuery. I'd suggest updating to jQuery 3.4 and using the length property instead. Try this:
jQuery(function($) {
$("input[type=checkbox]").on('change', updateCount);
updateCount();
function updateCount() {
$('.panel-section').each(function() {
var $panel = $(this);
var count = $panel.find(':checkbox:checked').length;
$panel.find('.badge').text(count);
});
};
});
.panel-section-main {
border: 1px solid #CCC;
}
a {
text-decoration: none;
}
.badge {
background-color: #C00;
border-radius: 50%;
padding: 5px 9px;
color: #FFF;
}
.panel-section-main .layer .list-group {
margin-bottom: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="panel-section">
<div class="panel-section-top">
<a href="#" class="expand-toggle">
Group 1
<span class="badge"></span>
</a>
</div>
<div class="panel-section-main">
<div class="layer">
<div class="list-group">
<label class="checkbox-inline switch-button">
<input type="checkbox" name="layer_10" class="visible" id="visible10">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 1</h4>
</div>
</div>
<div class="layer">
<div class="list-group">
<label class="checkbox-inline switch-button">
<input type="checkbox" name="layer_11" class="visible" id="visible11">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 2</h4>
</div>
</div>
</div>
</div>
<div class="panel-section">
<div class="panel-section-top">
<a href="#" class="expand-toggle">
Group 2
<span class="badge"></span>
</a>
</div>
<div class="panel-section-main">
<div class="layer">
<div class="list-group">
<label class="checkbox-inline switch-button" for="visible20">
<input type="checkbox" name="layer_20" class="visible" id="visible20">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 1</h4>
</div>
</div>
<div class="layer">
<div class="list-group">
<label class="checkbox-inline switch-button">
<input type="checkbox" name="layer_21" class="visible" id="visible21">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 2</h4>
</div>
</div>
</div>
</div>

Showing details on button click in jquery

I've three items in my page, each of them has its own button.
What I am trying to do is whenever a button is clicked, the details of the selected buttons should be shown inside .
I am completely new to this kind of programming situation.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!------first item--->
<div class="parentofitem">
<div class="item_name">
Item 1
</div>
<div class="item_price">
100
</div>
<div class="quantity">
<input type="number" value="1" max="10"/>
</div>
<div class="addbut">
<button class = "btn btn-default addwork" id="add1">ADD</button>
</div>
</div>
<!------second item--->
<div class="parentofitem">
<div class="item_name">
Item 2
</div>
<div class="item_price">
180
</div>
<div class="quantity">
<input type="number" value="1" max="10"/>
</div>
<div class="addbut">
<button class = "btn btn-default addwork" id="add2">ADD</button>
</div>
</div>
<!------Third item--->
<div class="parentofitem">
<div class="item_name">
Item 3
</div>
<div class="item_price">
280
</div>
<div class="quantity">
<input type="number" value="1" max="10"/>
</div>
<div class="addbut">
<button class = "btn btn-default addwork" id="add3">ADD</button>
</div>
</div>
</div>
<aside>
<div>Seleted items and there details should be shown here</div>
</aside>

Here is a reusable code that you can use to slove your issue , it also calculate the price , with a litle bit of styling it will look better :)
item1={
button:$(".addwork1"),
name:$(".item_name1"),
price:$(".item_price1"),
quantity:$(".quantity1 >input"),
result:$(".result1")
}
item2={
button:$(".addwork2"),
name:$(".item_name2"),
price:$(".item_price2"),
quantity:$(".quantity2 >input"),
result:$(".result2")
}
item3={
button:$(".addwork3"),
name:$(".item_name3"),
price:$(".item_price3"),
quantity:$(".quantity3 >input"),
result:$(".result3")
}
function getresult(data){
data.button.on("click",()=>{
data.result.text("The :" + data.name.text() +
" The total price: "+ (data.price.text() * data.quantity.val()) +
" Quantity: " + data.quantity.val() )
})
}
getresult(item1);
getresult(item2);
getresult(item3);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<!------first item--->
<div class="parentofitem">
<div class="item_name1">
Item 1
</div>
<div class="item_price1">
100
</div>
<div class="quantity1">
<input type="number" value="1" max="10"/>
</div>
<div class="addbut">
<button class = "btn btn-default addwork1" id="add1">ADD</button>
<div class="result1"></div>
</div>
</div>
<!------second item--->
<div class="parentofitem">
<div class="item_name2">
Item 2
</div>
<div class="item_price2">
180
</div>
<div class="quantity2">
<input type="number" value="1" max="10"/>
</div>
<div class="addbut">
<button class = "btn btn-default addwork2" id="add2">ADD</button>
<div class="result2"></div>
</div>
</div>
<!------Third item--->
<div class="parentofitem">
<div class="item_name3">
Item 3
</div>
<div class="item_price3">
280
</div>
<div class="quantity3">
<input type="number" value="1" max="10"/>
</div>
<div class="addbut">
<button class = "btn btn-default addwork3" id="add3">ADD</button>
<div class="result3"></div>
</div>
</div>
</div>

how to show/hide reply comment box on multiple displayed comments

so here is the code i use this for me to show/hide the comment box it works actually but the problem i encounter when i make multiple comments when i tried to click the reply on the 1st comment the comment box show/hide but when i tried to click other comments it doesnt work anymore it only works on the first one.... is there any way to fix this?..
HTML code
<div id="replybutton" class="btn4 like" style="margin-top:-25px;margin-left:-10px;">
<span class="btn reply" id="replyb">Reply</span> • 
</div>
<div class="col-lg-12" id="reply" style="background:#eff9c7;margin-left:50px;margin-top:-20px;display:none;" >
<img src="img/icons/no-icon-available.png" class="pull-left" style=" border-radius:50%;margin-bottom:3px;width:30px;height:30px;" />
<p style="margin-top:18px;line-height:15px;"><strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br>
<div class="btn4 disabled" style="margin-top:-25px;margin-left:-10px;">
<span style="margin-left:5px;font-size:12px;color:gray;"><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" style="width:88%;height:25px;margin-top:-10px;" placeholder="Write a reply..." />
</div>
JAVASCRIPT
<script type="text/javascript">
$(document).ready(function(){
$('#replybutton').click(function(){
$('#reply').toggle();
});
});
</script>

id must be unique in a HTML Page, you should change id to class replybutton and reply and jquery code would be,
$(document).ready(function(){
$('.replybutton').click(function(){
$(this).next('.reply').toggle();
});
});
Snippet,
$(document).ready(function() {
$('.replybutton').click(function() {
$(this).next('.reply').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> • 
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> • 
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> • 
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>

Change Nearest Class when checkbox is selected

I want to use jquery/javascript to change the class of the <span class="thm-card-status">Active</span> when the item is checked/unchecked. There will be a lot of <div class="thm-card"></div> containers so it should only be changed for that specific card.
<div class="thm-card">
<div class="thm-card-media">
<img id="editableimage1" src="https://thehomemag.com/Images/HomeSlider/8.jpg" alt="#" class="img-responsive">
<div class="thm-card-overlay">
<form class="thm-form">
<div class="form-group"><!--Default Checkbox Item-->
<label for="__FOR__">
<input type="checkbox" class="square thm-checkbox-status" id="__ID__" type="checkbox" value="true">
<span class="thm-form-label-side">Active</span>
</label>
<i class="fa fa-question-circle"></i>
</div>
</form><!--Form-->
</div>
<span class="thm-card-status">Active</span>
</div>
<div class="thm-card-content">
<div class="thm-card-details">
<h4>THM Slider Main</h4>
</div>
<div class="thm-card-control">
<div class="thm-card-links">
View
Edit
<span class="thm-card-info"><i class="fa fa-star-o"></i></span>
<span class="thm-card-info"><i class="fa fa-trash"></i></span>
</div>
</div>
</div>
</div>
EDIT:
I've tried:
$('.thm-checkbox-status').change(function() {
if($(this).is(':checked')) {
$('.thm-card-status').attr('checked', '').closest('.thm-card-status').addClass('thm-card-status-active');
} else {
$('.open_sub_ja').closest('div').removeClass('someclass');
}
});
And
$("thm-checkbox-status:checkbox").on('change', function(){
$(this).closest('.thm-card-status').attr('class', 'thm-card-status-active');;
});

Here's a working example. I made the thm-card-status-active green, so that you can see it work.
$(function() {
$('input.thm-checkbox-status').change(function() {
if($(this).prop("checked") == true){
$(this).closest('div.thm-card').find('span.thm-card-status').addClass('thm-card-status-active');
} else {
$(this).closest('div.thm-card').find('span.thm-card-status').removeClass('thm-card-status-active');
}
});
});
.thm-card-status-active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thm-card">
<div class="thm-card-media">
<img id="editableimage1" src="https://thehomemag.com/Images/HomeSlider/8.jpg" alt="#" class="img-responsive">
<div class="thm-card-overlay">
<form class="thm-form">
<div class="form-group"><!--Default Checkbox Item-->
<label for="__FOR__">
<input type="checkbox" class="square thm-checkbox-status" id="__ID__" type="checkbox" value="true">
<span class="thm-form-label-side">Active</span>
</label>
<i class="fa fa-question-circle"></i>
</div>
</form><!--Form-->
</div>
<span class="thm-card-status">Active</span>
</div>
<div class="thm-card-content">
<div class="thm-card-details">
<h4>THM Slider Main</h4>
</div>
<div class="thm-card-control">
<div class="thm-card-links">
View
Edit
<span class="thm-card-info"><i class="fa fa-star-o"></i></span>
<span class="thm-card-info"><i class="fa fa-trash"></i></span>
</div>
</div>
</div>
</div>

$('.thm-checkbox-status').change(function(){
$(this).closest('.thm-card-overlay').next().addClass('something');
});

Call Action method from jquery popup modal

OK I have made many searches before posting this but I couldn't really get what I needed, the thing is I have a popup modal for login/register
<!--Signin/Signup container-->
<div id="modal" class="popupContainer" style="display:none;">
<section class="popupBody">
<!-- Social Login -->
<div class="social_login">
<div class="">
<a href="#" class="social_box fb">
<span class="icon"><i class="fa fa-facebook"></i></span>
<span class="icon_title">سجل عن طريق الفيس بوك</span>
</a>
<a href="#" class="social_box google">
<span class="icon"><i class="fa fa-google-plus"></i></span>
<span class="icon_title">سجل عن طريق كوكل</span>
</a>
</div>
<div class="centeredText">
<span>أو استخدم الايميل الخاص بك</span>
</div>
<div class="action_btns">
<div class="one_half">Login</div>
<div class="one_half last"> Register</div>
</div>
</div>
<!-- Username & Password Login form -->
<div class="user_login">
<form>
<label>الايميل / اسم المستخدم</label>
<input type="text" />
<br />
<label>كلمة السر</label>
<input type="password" />
<br />
<div class="checkbox">
<input id="remember" type="checkbox" />
<label for="remember">احفظ معلومات الدخول على هذا الجهاز</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> رجوع</div>
<div class="one_half last">Login</div>
</div>
</form>
هل نسيت كلمة المرور؟
</div>
<!-- Register Form -->
<div class="user_register">
<form>
<label>الاسم الكامل</label>
<input type="text" />
<br />
<label>عنوان البريد الألكتروني</label>
<input type="email" />
<br />
<label>كلمة المرور</label>
<input type="password" />
<br />
<div class="checkbox">
<input id="send_updates" type="checkbox" />
<label for="send_updates">أرسل لي رسائل في حال وجود أي تحديثات</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> Back</div>
<div class="one_half last">Register</div>
</div>
</form>
</div>
</section>
</div>
<!--Signin/Signup End-->
and this is the script:
<script>
// Plugin options and our code
$("#modal_trigger").leanModal({
top: 100,
overlay: 0.6,
closeButton: ".modal_close"
});
$(function () {
// Calling Login Form
$("#login_form").click(function () {
$(".social_login").hide();
$(".user_login").show();
return false;
});
// Calling Register Form
$("#register_form").click(function () {
$(".social_login").hide();
$(".user_register").show();
$(".header_title").text('Register');
return false;
});
// Going back to Social Forms
$(".back_btn").click(function () {
$(".user_login").hide();
$(".user_register").hide();
$(".social_login").show();
$(".header_title").text('Login');
return false;
});
});
/*--------------------------------*/
</script>
</div>
Now what I need is to create an action method so when the user click Register or Login it get called to do what necessary
How can I do that. my knowledge in jquery and javascript is kind of limited
I will appreciate any help.
thank you in advance

Attach ids to your buttons:
<div id = "login_button" class="one_half last">Login</div>
Then attach an event listener to them:
$("#login_button").click(function() {
// Do something
});
Same for the Register button.

Categories