How to link a progress bar with .click event jquery

How to link a progress bar with .click event jquery - javascript

I want to create a voting system. How can I link the .click event with the progress bar so that when a user clicks the button the progress bar updates in sync.
Here's my code
HTML
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div class="content">
<h3 class="title">Who's better ?</h3>
<ul>
<li class="option" id="option_1" >
Messi
<p id="score_1">0</p>
<div class="progressbar_1">
</div>
<br>
</li>
<br>
<li class="option" id="option_2" >
Ronaldo
<p id="score_2">0</p>
<div class="progressbar_2"></div>
<br>
</li>
<br>
</ul>
</div>
Jquery
$('#option_1').click(function() {
$('#score_1').html(function(i, num) { return num*1+1});
});
$('#option_2').click(function() {
$('#score_2').html(function(i, num) { return num*1+1 });
});
$(function() {
$( ".progressbar_1" ).progressbar({value: 50});
});
$(function() {
$( ".progressbar_2" ).progressbar({value: 50});
});
http://jsfiddle.net/h16nhz5c/5/

You need to re-call progressbar() upon voting. Something like:
HTML:
<ul>
<li class="option" id="option_1">
Messi
<p class="score" id="score_1">0</p>
<div class="progressbar">
</div>
</li>
<li class="option" id="option_2">
Ronaldo
<p class="score" id="score_2">0</p>
<div class="progressbar">
</div>
</li>
</ul>
Javascript:
$('.option').click(function() {
var $this = $(this);
// store voting value in data-voting
if (!$this.data('voting'))
$this.data('voting', 0);
var voting = parseInt($this.data('voting'), 10);
voting++;
$this.data('voting', voting);
$this.find('.score').html(voting);
$this.find('.progressbar').progressbar({value: voting});
});
See Fiddle

Related

Click through questions hiding the previous one each time using jQuery

I have 5 questions that I want to click through. I only want one question on the page at a time. There are back and next buttons below each question. But the jQuery I have worked on the first question, but fails after that. What am I doing wrong?
HTML
<div id="one">
<span>What is your first name?</span>
<div>
a href="#" id="back">back</a>
a href="#" id="next">Next</a>
</div>
</div>
<div id="two">
<span>What is your last name?</span>
<div>
a href="#" id="back">back</a>
a href="#" id="next">Next</a>
</div>
</div>
<div id="three">
<span>How old are you?</span>
<div>
a href="#" id="back">back</a>
a href="#" id="next">Next</a>
</div>
</div>
<div id="four">
<span>What is your favourite colour?</span>
<div>
a href="#" id="back">back</a>
a href="#" id="next">Next</a>
</div>
</div>
jQuery
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$("#two").hide();
$("#three").hide();
$("#four").hide();
$("#next").click(function () {
$("#one").hide();
$("#two").show();
});
});
$(document).ready(function () {
$("#next").click(function () {
$("#two").hide();
$("#three").show();
});
});
</script>

Your first problem is You cant give same id to your elements. Id is used to make element uniqeu. You can use class for same type elements.
Your second problem is syntax error before a tag elements.
As as way you first can hide all elements using class attribute and show spesific element with id attribute.
$(document).ready(function () {
$(".question").hide();
$("#one").show();
});
function NextBack(id){
$(".question").hide();
$("#"+id).show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one"class="question">
<span>What is your first name?</span>
<div>
back
Next
</div>
</div>
<div id="two"class="question">
<span>What is your last name?</span>
<div>
back
Next
</div>
</div>
<div id="three"class="question">
<span>How old are you?</span>
<div>
back
Next
</div>
</div>
<div id="four"class="question">
<span>What is your favourite colour?</span>
<div>
back
Next
</div>
</div>
Or you can use dom element to hide and show
$(document).ready(function () {
$(".question").hide();
$("#one").show();
});
$(".back").click(function(e) {
var id=e.target.closest(".question").previousElementSibling.getAttribute("id");
if(id){
$(".question").hide();
$("#"+id).show();
}
});
$(".next").click(function(e) {
var id=e.target.closest(".question").nextElementSibling.getAttribute("id");
if(id){
$(".question").hide();
$("#"+id).show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one"class="question">
<span>What is your first name?</span>
<div>
back
Next
</div>
</div>
<div id="two"class="question">
<span>What is your last name?</span>
<div>
back
Next
</div>
</div>
<div id="three"class="question">
<span>How old are you?</span>
<div>
back
Next
</div>
</div>
<div id="four"class="question">
<span>What is your favourite colour?</span>
<div>
back
Next
</div>
</div>

The main problem is that you are having multiple elements with the same id, id's should always be unique.
also please note that you forgot the < infront of your links (a)
You can also achieve it in a simple way like this.
$(document).ready(function() {
$(".questiontwo,.questionthree,.questionfour").hide();
$(".next").click(function() {
var current = $(this).closest("[class*=question]");
var next = current.next("[class*=question]");
if (next.length == 1){
current.hide();
next.show();
}
});
});
Demo
$(document).ready(function() {
$(".questiontwo,.questionthree,.questionfour").hide();
$(".next").click(function() {
var current = $(this).closest("[class*=question]");
var next = current.next("[class*=question]");
if (next.length == 1){
current.hide();
next.show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="questionone">
<span>What is your first name?</span>
<div>
back
Next
</div>
</div>
<div class="questiontwo">
<span>What is your last name?</span>
<div>
back
Next
</div>
</div>
<div class="questionthree">
<span>How old are you?</span>
<div>
back
Next
</div>
</div>
<div class="questionfour">
<span>What is your favourite colour?</span>
<div>
back
Next
</div>
</div>

how can i show the hidden content in jquery?

I want to hide all the content and show some content as the user click.
In anchor tag I used 'scr' before its id example: scrhome_screen.
But in div tag that I want to show has id home_screen.
Please explain why it is not working?
hideAll();
showTab("home_screen");
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attr('id');
if(id.substring(0, 3)=="scr"){
hideAll();
showTab(id.substring(3,id.length));
}
});
});
function hideAll(){
$('#home_screen').hide();
$('#sec_screen').hide();
$('#third_screen').hide(); //this is working
// document.getElementById("home_screen").style.display = "none";
// document.getElementById("sec_screen").style.display = "none";
// document.getElementById("third_screen").style.display = "none";
}
function showTab(divName){
console.log(divName);
$('#'+divName).show(); // it think this line is not working
}
----------edit-------------------
my html code
hideAll();
showTab("home_screen");
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attr('id');
if(id.substring(0, 3)=="scr"){
hideAll();
showTab(id.substring(3,id.length));
}
});
});
function hideAll(){
$('#home_screen').hide();
$('#sec_screen').hide();
$('#third_screen').hide(); //this is working
// document.getElementById("home_screen").style.display = "none";
// document.getElementById("sec_screen").style.display = "none";
// document.getElementById("third_screen").style.display = "none";
}
function showTab(divName){
console.log(divName);
$('#'+divName).show(); // it think this line is not working
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
<!-- MENU STARTS HERE -->
<ul id="menu">
<li><a href="#" id='scrhome_screen'>Home</a></li>
<li>
New/Open Project
<ul class="hidden">
<li><a href="#" id='scrsec_screen'>New Project</a></li>
<li><a href="#" id='scrthird_screen'>Open Project</a></li>
</ul>
</li>
<li>
Region
<!-- <ul class="hidden">
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
</ul> -->
</li>
<li>Insurance Indices</li>
<li>Insurance Scheme</li>
<li>Help</li>
</ul>
<!-- HOME STARTS HERE -->
<div id="home_screen">
<div id="description">
<fieldset>
<p class="descriptionHead">Crop-loss Assessment Monitor Toolbox (CAM)</p>
<p id="descritionText">CAM toolbox is specifically designed to estimate prevented sowing, sowing failure and yield loss occurring in a geographical area. The tool has been also embedded with financial viability analytics which determines farmers’ premium, maximum claim,
claim ratio etc. The CAM tool can also be used to test the important indicators to assess the feasibility of an insurance scheme. Moreover, loss assessment from multiple methods also enables a comparison of risk coverage under different technologies
and their subsequent effect on the economics of the insurance scheme.</p>
</fieldset>
</div>
<hr id="ver_line" width="1" size="200">
<div id="login_signup">
<fieldset>
<p class="descriptionHead">LOGIN</p>
<form>
<p id="loginBody">
<input type="text" class="loginForm" placeholder="Login Id"><br>
<input type="password" class="loginForm" placeholder="Password"><br>
<input type="submit" class="loginButton" value="LOGIN"><br><br>
</form>
Not registered?<br>
<a id="registerBtn"><input type="button" class="loginbutton" value="Register here"></a>
<br>
</p>
</fieldset>
</div>
</div>
<!-- 2nd FIELDSETS -->
<div id="sec_screen">
<p>another content is here</p>
</div>
<!-- 3rd FIELDSETS -->
<div id="third_screen">
<p>third content is here</p>
</div>

In your code this <li><a href="#" id='scrhome_screen')>Home</a></li> paranthesis is unwanted, it may be the reason. And then again <li><a href="#" id='scrthird_screen')>Open Project</a></li>
Here is another mistake
<form>
<p id="loginBody">
<input type="text" class="loginForm" placeholder="Login Id"><br>
<input type="password" class="loginForm" placeholder="Password"><br>
<input type="submit" class="loginButton" value="LOGIN"><br><br>
</form>
Not registered?<br>
<a id="registerBtn"><input type="button" class="loginbutton" value="Register here"></a>
<br>
</p>
Tags are closed in the wrong order
Your js works, I did not change anything.
By the way in .substr you can just do id.substring(3) instead of id.substring(3,id.length)
hideAll();
showTab("home_screen");
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attr('id');
if (id.substring(0, 3) == "scr") {
hideAll();
showTab(id.substring(3,id.length));
}
});
});
function hideAll() {
$('#home_screen').hide();
$('#sec_screen').hide();
$('#third_screen').hide();
}
function showTab(divName) {
$('#' + divName).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home_screen">home_screen</div>
<div id="sec_screen">sec_screen</div>
<div id="third_screen">third_screen</div>
home_screen
sec_screen
third_screen

how to active 4 same Data ID when onClick?

i wanna to click one button which is "c-1" but it can active and display the content for all same id,but in the same time, what can i add in to call all in different div?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mark-container">
<div class="c-1" data-id="tab-1">
<p>for 1 btn</p>
</div>
<div class="c-1-details" id="tab-1">
<p>for 1 details</p>
</div>
</div>
<div class="second-mark">
<ul>
<li class="tab-corner" data-tab="tab-1">tab-1-btn</li>
</ul>
<div class="tab-content" id="tab-1">
tab-1-content
</div>
</div>
<script>
$('.c-1').click(function() {
var tab = $(this).attr('data-id');
$('.c-1').removeClass('active');
$(".c-1-details").removeClass('active');
$(this).addClass('active');
$("#" + tab).addClass('active');
});
</script>

Note :Id is unique one .so better use class for multiple element match
I just coded from multiple id matches with attr matching [id="tab"]
$('.c-1').click(function() {
var tab = $(this).attr('data-id');
$('.c-1').removeClass('active');
$(".c-1-details").removeClass('active');
$(this).addClass('active');
$("[id='"+tab+"']").addClass('active');
});
.active{
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mark-container">
<div class="c-1" data-id="tab-1">
<p>for 1 btn</p>
</div>
<div class="c-1-details" id="tab-1">
<p>for 1 details</p>
</div>
</div>
<div class="second-mark">
<ul>
<li class="tab-corner" data-tab="tab-1">tab-1-btn</li>
</ul>
<div class="tab-content" id="tab-1">
tab-1-content
</div>
</div>

jQuery working in console but not when loading website

this is the code that is perfectly working in console:
jQuery(".cf7_wrap_com li").each(function(){
jQuery(this).find(".first_univer input").click(function(){
var label1 = jQuery(this).parent().find("label").html();
if( jQuery(this).is(":checked")) {
jQuery(this).parent().find(".first_high").show();
jQuery(".cf7_wrap_com li").not( jQuery(this).parent().parent() ).each(function(){
jQuery(this).find(".first_high").hide();
});
}
else {}
});
});
and the code below is what I saved in my custom js file and not working on website load
jQuery(document).ready(function( $ ){
jQuery(window).bind("load", function() {
jQuery(".cf7_wrap_com li").each(function(){
jQuery(this).find(".first_univer input").click(function(){
var label1 = jQuery(this).parent().find("label").html();
if( jQuery(this).is(":checked")) {
jQuery(this).parent().find(".first_high").show();
jQuery(".cf7_wrap_com li").not( jQuery(this).parent().parent() ).each(function(){
jQuery(this).find(".first_high").hide();
});
}
else {}
});
});
});
});
I also want to know if it is possible to trim this code as I think I might have added something which unnecessary.
I am using it on two radio buttons(which are inactive by default) and when a user clicks on either of them a short form opens.
Here's the image:
And this is the html:
<h1>What type of student?</h1>
<ul class="cf7_wrap_com first_use">
<li>
<div class="highschoolform first_univer"><input id="#school" name="School" type="radio" value="highschool" /> <label for="highschool">High School</label>
<div class="cf7_wrap_hs first_high">[contact-form-7 id="3552" title="High school"]</div>
</div>
</li>
<li>
<div class="unversityform first_univer"><input id="#University" name="School" type="radio" value="University" /> <label for="University">University</label>
<div class="cf7_wrap_uni first_high">[contact-form-7 id="3553" title="University"]</div>
</div>
</li>
</ul>

give the radios a class
use closest and siblings
$(function() {
$(".school").on("click",function() {
$(this).closest("ul").find(".first_high").hide();
$(this).siblings(".first_high").show();
});
});
.first_high { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>What type of student?</h1>
<ul class="cf7_wrap_com first_use">
<li>
<div class="highschoolform first_univer">
<input id="#school" class="school" name="School" type="radio" value="highschool" />
<label for="highschool">High School</label>
<div class="cf7_wrap_hs first_high">[contact-form-7 id="3552" title="High school"]</div>
</div>
</li>
<li>
<div class="unversityform first_univer">
<input id="#University" class="school" name="School" type="radio" value="University" />
<label for="University">University</label>
<div class="cf7_wrap_uni first_high">[contact-form-7 id="3553" title="University"]</div>
</div>
</li>
</ul>

how to rotationally change the content of 'div' on mouseover on each 'li'

whenever, I mouseover on the 'li', then, that particular 'li' attribute need to changed to 'clsSect'. On the other hand, based on the list[li] selection, the div content has to set to 'display:block' other should changed to 'display:none'.
if the first 'li' selected, then, the first 'div' need to be selected, likewise
if the second 'li' selected, then, the second 'div' need to be selected,
This below code does not work as expected. Any help please?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="js/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<div class="mainBodyContent" id="Contact">
<div class="perimgleft">
<img class="perImg" alt="This is for sample"/>
<div id="thisID3">
<p><span>sample3</span></p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a></p>
</div></div>
</div>
<div class="mainBodyContent" id="About">
<div class="perimgleft">
<img class="perImg" alt="This is for sample"/>
<div id="thisID2">
<p><span>sample3</span></p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a></p>
</div></div>
</div>
<div class="mainBodyContent" id="Careers">
<div class="perimgleft">
<img class="perImg" alt="This is for sample"/>
<div id="thisID1">
<p><span>sample1</span></p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a></p>
</div></div>
</div>
<div id="selRound">
<ul class="clearfix rouncorner">
<li id="fpn1" class="myList clsSect"></li>
<li id="fpn2" class="myList"></li>
<li id="fpn3" class="myList"></li>
</ul>
</div>
<script>
var $hover = $("div.perimgleft img");
$hover1 = $("#Contact div[class='perimgleft'] div");$hover2 = $("#About div[class='perimgleft'] div");$hover3 = $("#Careers div[class='perimgleft'] div");
$("#selRound .myList").mouseover(function(evt) {
if(evt.currentTarget.id == 'fpn1'){
$hover1.css('display', 'block');
($hover2, $hover3).css('display', 'none');
}
else if(evt.currentTarget.id == 'fpn2'){
($hover1, $hover3).css('display', 'none');
$hover2.css('display', 'block');
}else {
($hover1, $hover2).css('display', 'none');
$hover3.css('display', 'block');
}
});
$("#selRound .myList").mouseout(function(evt) {
});
</script>
</body>
</html>

Need to clean up the code.
In HTML we set the ID for the contents we should hide/show
...
<div id="fpn1" class="perimgleft">
...
<div id="fpn2" class="perimgleft">
...
<div id="fpn3" class="perimgleft">
...
Then we use them as data attributes for list elements
<li data-show="#fpn1" class="myList">fpn1</li>
<li data-show="#fpn2" class="myList">fpn2</li>
<li data-show="#fpn3" class="myList">fpn3</li>
Then with jquery we hide all contents
$('.perimgleft').hide();
So that we'll show the right content related to the hovered element:
$('ul.clearfix.rouncorner li').mouseover(function(){
$('ul.clearfix.rouncorner li').removeClass("clsSect");
$(this).addClass("clsSect");
var contentId = $(this).data("show");
$('.perimgleft').hide();
$(contentId).show();
})
DEMO HERE

try this :
var $hover = $("div.perimgleft img");
$hover1 = $("#Contact div[class='perimgleft']>div");$hover2 = $("#About div[class='perimgleft']>div");$hover3 = $("#Careers div[class='perimgleft']>div");
$("#selRound .myList").mouseover(function(evt) {
if(evt.currentTarget.id == 'fpn1'){
$hover1.css('display', 'block');
$hover2.css('display', 'none');
$hover3.css('display', 'none');
}
else if(evt.currentTarget.id == 'fpn2'){
$hover3.css('display', 'none');
$hover1.css('display', 'none');
$hover2.css('display', 'block');
}else {
$hover2.css('display', 'none');
$hover1.css('display', 'none');
$hover3.css('display', 'block');
}
});
$("#selRound .myList").mouseout(function(evt) {
});

Are you looking something like this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
.mainBodyContent{
display: none;
}
</style>
</head>
<body>
<div id="selRound">
<ul class="clearfix rouncorner">
<li id="fpn1" class="myList">contact</li>
<li id="fpn2" class="myList">about</li>
<li id="fpn3" class="myList">careers</li>
</ul>
</div>
<div class="mainBodyContent" id="Contact">
<div class="perimgleft">
<img class="perImg" alt="This is for sample" />
<div id="thisID3">
<p><span>sample1</span>
</p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a>
</p>
</div>
</div>
</div>
<div class="mainBodyContent" id="About">
<div class="perimgleft">
<img class="perImg" alt="This is for sample" />
<div id="thisID2">
<p><span>sample2</span>
</p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a>
</p>
</div>
</div>
</div>
<div class="mainBodyContent" id="Careers">
<div class="perimgleft">
<img class="perImg" alt="This is for sample" />
<div id="thisID1">
<p><span>sample3</span>
</p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a>
</p>
</div>
</div>
</div>
<script>
var hover1 = $("#Contact");
var hover2 = $("#About");
var hover3 = $("#Careers");
$(".myList").mouseout(function(evt) {
$('.mainBodyContent').css('display','none');
});
$(".myList").mouseover(function(evt) {
var currentId=$(this).attr('id');
if(currentId=='fpn1'){
hover1.css({'display':'block'});
}
if(currentId=='fpn2'){
hover2.css({'display':'block'});
}
if(currentId=='fpn3'){
hover3.css({'display':'block'});
}
});
</script>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

How to link a progress bar with .click event jquery - javascript

Related

Click through questions hiding the previous one each time using jQuery

how can i show the hidden content in jquery?

how to active 4 same Data ID when onClick?

jQuery working in console but not when loading website

how to rotationally change the content of 'div' on mouseover on each 'li'

Categories

Resources