Jquery function isn't returning [duplicate] - javascript

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 5 years ago.
I'm writing a FreeCodeCamp project - a Pomedoro Countdown.
I need help in understanding why it does not return to the same place when the timer reaches zero.
var sessionLength=25;
var breakLength=5;
var sound = document.getElementById("audio");
var timer=10;
var count=breakLength*60;
$(document).ready(function(){
function timer()
{
count=count-1;
if (count <= 0)
{
$("#counterShow").html("00:00");
// clearInterval(counter);
console.log("hey");
}
$("#counterShow").html(Math.floor(count/60)+":"+count%60);
//Do code for showing the number of seconds here
}
$("img").click(function(){
counter=setInterval(timer, 1000); //1000 run ,every 1 second
count=sessionLength*60;
timer=10;
timer(); // <<----- HERE!
console.log("Check if timer returned and play sound");
sound.play()
});
});
$("#sessionMinus").click(function(){
if(sessionLength>1){
sessionLength--;
}
$("#sessionShow").html(sessionLength);
});
$("#sessionPlus").click(function(){
sessionLength++;
$("#sessionShow").html(sessionLength);
});
$("#breakMinus").click(function(){
if(breakLength>1){
breakLength--;
}
$("#breakShow").html(breakLength);
});
$("#breakPlus").click(function(){
breakLength++;
$("#breakShow").html(breakLength);
});
body{
font-family: 'Sedgwick Ave', cursive;
background-color:yellow;
}
.imageArea{
text-align:center;
margin:auto auto;
width:100%;
}
.image{
margin:auto auto;
}
h3{
position:absolute;
top:282px;
left:5px;
width:100%;
}
#sessionLength{
margin-top:20px;
text-align:center;
width:30%;
float:left;
margin-left:15%;
}
#breakLength{
margin-top:20px;
text-align:center;
width:30%;
float:right;
margin-right:15%;
}
.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
-webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
box-shadow:inset 0px 1px 0px 0px #f5978e;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f));
background:-moz-linear-gradient(top, #f24537 5%, #c62d1f 100%);
background:-webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%);
background:-o-linear-gradient(top, #f24537 5%, #c62d1f 100%);
background:-ms-linear-gradient(top, #f24537 5%, #c62d1f 100%);
background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f',GradientType=0);
background-color:#f24537;
-moz-border-radius:38px;
-webkit-border-radius:38px;
border-radius:38px;
border:1px solid #000000;
display:inline-block;
cursor:pointer;
color:#fff200;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:3px 15px;
text-decoration:none;
text-shadow:0px 1px 0px #810e05;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537));
background:-moz-linear-gradient(top, #c62d1f 5%, #f24537 100%);
background:-webkit-linear-gradient(top, #c62d1f 5%, #f24537 100%);
background:-o-linear-gradient(top, #c62d1f 5%, #f24537 100%);
background:-ms-linear-gradient(top, #c62d1f 5%, #f24537 100%);
background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537',GradientType=0);
background-color:#c62d1f;
}
.myButton:active {
position:relative;
top:1px;
}
#media only screen and (max-device-width: 480px) {
h1{
font-size:20px;
}
#sessionLength{
margin-top:20px;
text-align:center;
width:37%;
float:left;
margin-left:5%;
}
#breakLength{
margin-top:20px;
text-align:center;
width:37%;
float:right;
margin-right:5%;
}
h3{
position:absolute;
top:254px;
left:3px;
width:100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Sedgwick+Ave" rel="stylesheet">
</head>
<body>
<audio id="audio" src="http://www.soundjay.com/button/beep-07.wav" autostart="false" ></audio>
<a onclick="PlaySound()"></a>
<script>
</script>
<div id="sessionLength" >
<h1> Session length </h1>
<button style="display:inline" class="myButton" id="sessionMinus">-</button>
<p id="sessionShow" style="display:inline" >25</p>
<button style="display:inline" class="myButton" id="sessionPlus">+</button>
</div>
<div id="breakLength">
<h1> Break length</h1>
<button style="display:inline" class="myButton" id="breakMinus">-</button>
<p id="breakShow" style="display:inline">5</p>
<button style="display:inline" class="myButton" id="breakPlus">+</button>
</div>
<div class=imageArea>
<div class="image">
<img src=https://image.ibb.co/nLqzma/pom.png />
<h3 id="counterShow"> 00:00</h3>
</div>
</div>
</body>
</html>
After calling "timer()" function, it wont come back here, why?

Here try this plunker
var sessionLength=25;
var breakLength=5;
var sound = document.getElementById("audio");
var timer=10;
var count=breakLength*60;
$(document).ready(function(){
function checkCount(){
count=count-1;
if (count <= 0){
$("#counterShow").html("00:00");
clearInterval(counter);
console.log("hey");
console.log("Check if timer returned and play sound");
sound.play()
}
$("#counterShow").html(Math.floor(count/60)+":"+count%60);
}
$(".img").click(function(){
counter=setInterval(checkCount, 1000); //setInterval is an async function. It returns immediately, and your program continues running from the next line. The function checkCount is called everyone 1000ms.
count=sessionLength*60;
timer=10;
});
});
Just click the 'hi' button.

Related

Clone the table while printing in angularjs

I have one table with some data. If I print this page, I want to print the same table two times side by side. Want to make copy.
Exactly like this in this image. But in this image datas are different. Its just for sample to show. But my need is same data table sholud come side by side while printing.
plunkr
/* Larger Side Border */
.tb8 {
width: 230px;
height:24px;
border: 1px solid #3366FF;
border-left: 4px solid #3366FF;
}
.button{
border:4px solid #26759E;-webkit-box-shadow: #878787 0px 2px 2px ;-moz-box-shadow: #878787 0px 2px 2px ; box-shadow: #878787 0px 2px 2px ; -webkit-border-radius: 23px; -moz-border-radius: 23px;border-radius: 23px;font-size:13px;font-family:arial, helvetica, sans-serif; padding: 10px 20px 10px 20px; text-decoration:none; display:inline-block;text-shadow: 2px 2px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
background-color: #3093C7; background-image: -webkit-gradient(linear, left top, left bottom, from(#3093C7), to(#1C5A85));
background-image: -webkit-linear-gradient(top, #3093C7, #1C5A85);
background-image: -moz-linear-gradient(top, #3093C7, #1C5A85);
background-image: -ms-linear-gradient(top, #3093C7, #1C5A85);
background-image: -o-linear-gradient(top, #3093C7, #1C5A85);
background-image: linear-gradient(to bottom, #3093C7, #1C5A85);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093C7, endColorstr=#1C5A85);
}
.button:hover{
border:4px solid #26759E;
background-color: #26759E; background-image: -webkit-gradient(linear, left top, left bottom, from(#26759E), to(#133D5B));
background-image: -webkit-linear-gradient(top, #26759E, #133D5B);
background-image: -moz-linear-gradient(top, #26759E, #133D5B);
background-image: -ms-linear-gradient(top, #26759E, #133D5B);
background-image: -o-linear-gradient(top, #26759E, #133D5B);
background-image: linear-gradient(to bottom, #26759E, #133D5B);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759E, endColorstr=#133D5B);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Print Directive of html templates </title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.printToCart = function(printSectionId) {
var innerContents = document.getElementById(printSectionId).innerHTML;
var popupWinindow = window.open('', '_blank', 'width=600,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
popupWinindow.document.open();
popupWinindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + innerContents + '</html>');
popupWinindow.document.close();
}
});
</script>
</head>
<body id="printSectionId" ng-app="myApp">
<div ng-controller="myCtrl">
<h1>AngularJS Print html templates</h1>
<form novalidate>
First Name:
<input type="text" ng-model="firstName" class="tb8">
<br>
<br> Last Name:
<input type="text" ng-model="lastName" class="tb8">
<br>
<br>
<button ng-click="Submit()" class="button">Submit</button>
<button ng-click="printToCart('printSectionId')" class="button">Print</button>
</form>
</div>
<div>
<br/>
<br/>More About AngularJS Print...</div>
</body>
</html>
Can anyone please tell me if you know the answer.

InvalidArgumentError: Failed due to illegal value in property: 0

I am trying to program a geography quiz and it doesn't seem to work. Whenever I try to click the 'Submit' button, it prints out InvalidArgumentError: Failed due to illegal value in property: 0. do you have any ideas why this might be? Thanks in advance.
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function send() {
var q1 = document.getElementById("q1").value;
var q2 = document.getElementById("q2").value;
var q3 = document.getElementById("q3").value;
var q4 = document.getElementById("q4").value;
var q5 = document.getElementById("q5").value;
var q6 = document.getElementById("q6").value;
var q7 = document.getElementById("q7").value;
var q8 = document.getElementById("q8").value;
var Email = document.getElementById("EmailAddress");
var Result = ("Results: 1. " + q1 + " 2. " + q2 + " 3. " + q3 + " 4. " + q4 + " 5. " + q5 + " 6. " + q6 + " 7. " + q7 + " 8. " + q8);
google.script.run.send(Email, Result);
}
</script>
<script src="https://ws.sharethis.com/button/buttons.js">
</script>
<script>
stLight.options({
publisher: "a788dcd1-6dfb-49ee-ba6c-3b6822d69fd8",
doNotHash: false,
doNotCopy: false,
hashAddressBar: false
});
</script>
<style>
.myButton {
-moz-box-shadow: inset 0px 39px 0px -24px #e67a73;
-webkit-box-shadow: inset 0px 39px 0px -24px #e67a73;
box-shadow: inset 0px 39px 0px -24px #e67a73;
background-color: #e4685d;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #ffffff;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 15px;
padding: 6px 15px;
text-decoration: none;
text-shadow: 0px 1px 0px #b23e35;
}
.myButton:hover {
background-color: #eb675e;
}
.myButton:active {
position: relative;
top: 1px;
}
.myButton2 {
-moz-box-shadow: inset 0px -3px 7px 0px #29bbff;
-webkit-box-shadow: inset 0px -3px 7px 0px #29bbff;
box-shadow: inset 0px -3px 7px 0px #29bbff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
background: -moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background: -webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background: -o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background: -ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background: linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa', GradientType=0);
background-color: #2dabf9;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #9591ff;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 15px;
padding: 6px 23px;
text-decoration: none;
text-shadow: 0px 1px 0px #263666;
}
.myButton2:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
background: -moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background: -webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background: -o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background: -ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background: linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9', GradientType=0);
background-color: #0688fa;
}
.myButton2:active {
position: relative;
top: 1px;
}
</style>
</head>
<body>
<font face="Verdana">
<h1>
Geography Quiz
</h1>
<br/>
<br/>
Your teacher's email address:
<input type="text" id="EmailAddress"/>
<br/>
<br/>
<b>
Questions
</b>
<br/>
<br/>
Q (1): Which state has a climate suitable for growing citrus fruits—California or Maine?
<br/>
A:
<input type="text" id="q1"/>
<br/>
<br/>
Q (2): The North Atlantic current brings warm waters from the tropics to the west coast of which continent?
<br/>
A:
<input type="text" id="q2"/>
<br/>
<br/>
Q (3): Which Canadian province produces more than half of the country's manufactured goods?
<br/>
A:
<input type="text" id="q3"/>
<br/>
<br/>
Q (4): To visit the ruins of Persepolis, an ancient ceremonial capital of Persia, you would have to travel to what present-day country?
<br/>
A:
<input type="text" id="q4"/>
<br/>
<br/>
Q (5): What is the term for a part of an ocean or sea that cuts far into the bordering landmass and may contain one or more bays?
<br/>
A:
<input type="text" id="q5"/>
<br/>
<br/>
Q (6): Which country has the world's largest Muslim population—Indonesia or Mexico?
<br/>
A:
<input type="text" id="q6"/>
<br/>
<br/>
Q (7): The Rio Hondo forms a boundary between Mexico and which other country?
<br/>
A:
<input type="text" id="q7"/>
<br/>
<br/>
Q (8): Which lake is on the border between Chad and Cameroon?
<br/>
A:
<input type="text" id="q8"/>
<br/>
<br/>
<button onclick="send(); document.write('Thanks! Your teacher will receive your results in an email.')" class="myButton">
Submit
</button>
<br/>
<br/>
<br/>
<br/>
<span class='st_facebook_hcount'>
</span>
<span class='st_twitter_hcount'>
</span>
<span class='st_googleplus_hcount'>
</span>
<br/>
<br/>
<footer>
<font size="1px">
Posted by: Yona Klatchko | Contact information:
<a href="mailto:yona.klatchko#gmail.com">
yona.klatchko#gmail.com
</a>
</font>
</footer>
</font>
</body>
</html>
Google-Apps-Script doGet() function:
function doGet() {
return(HtmlService.createTemplateFromFile('Index.html').evaluate().setTitle('Geography Quiz').setSandboxMode(HtmlService.SandboxMode.IFRAME));
}
Google-Apps-Script send() function:
function send(Email, Result) {
MailApp.sendEmail(Email, Result);
}
In your send() function, you are extracting and sending email dom element instead of the string value:
var Email = document.getElementById("EmailAddress"); returns the dom element.
Change this to:
var Email = document.getElementById("EmailAddress").value;
will solve the problem of invalidArgumentError.
The next problem will be you will not receive the email.
That is because in your code:
function send(Email, Result) {
MailApp.sendEmail(Email, Result);
}
You are passing two parameters but as you see in the documentation, third parameter is not optional and you need to pass the third parameter as body.
MailApp.sendEmail(Email, Result, "");
Will send the email with empty body.

How to update a odometer value with a button click in Javascript?

<style>
body {
font-family: "Helvetica Neue"
}
#wrapper .counter {
display:inline-block;
font-size:2em;
line-height:1.2em;
}
.counter span.digit {
background:#161616;
background: #3F3F3F; /* Old browsers */
background: linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -o-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -moz-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -webkit-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -ms-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0A0A0A), color-stop(0.5, #2B2B2B), color-stop(1, #3F3F3F));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF0A0A0A', endColorstr='#FF3F3F3F'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF0A0A0A', endColorstr='#FF3F3F3F')"; /* IE8 */
zoom:1; -webkit-border-radius:0.1em;
-moz-border-radius:0.1em;
border-radius:0.1em;
background-clip:border;
color:#FFF;
display:inline-block;
float:left;
height:44px;
margin:0 1px;
overflow:hidden;
padding:0;
position:relative;
text-align:center;
}
.counter span.digit span {
line-height:44px;
position:relative;
top:0;
}
.counter span.digit hr {
border-color: transparent;
-webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.5);
box-shadow: inset 0 2px 1px rgba(0,0,0,0.5);
height: 3px;
margin: -2px 0 0 0;
position: absolute;
top: 50%;
width: 100%;
z-index: 1;
}
.counter span.separator {
display:block;
float:left;
font-family:Georgia, serif;
font-size:0.5em;
position:relative;
top:0.5em;
}
.counter span.separator hr {
display:none;
}
</style>
<div id="sidebar" class="sidebar" style="float:left;">
<div class="textwidget"><p style="text-align:left; color:#000000; padding-left: 10px; padding-right: 10px; bottom-margin: 40px;">Boomerang Giving™ is a national movement of Baby Boomers working to make our communities stronger by reinvesting what we save from senior discounts to charity.</p>
<br>
<br></div>
<div class="textwidget"><p style="color=#ff6600; text-align:center;">Since Nov. 2014:<br></p>
<span class="counter"><span class="digit">
<span title="0">0</span>
<hr>
</span>
<span class="digit">
<span title="0">0</span>
<hr>
</span>
<span class="separator">
<span title=",">,</span>
<hr>
</span>
<span class="digit">
<span title="0">0</span>
<hr>
</span>
<span class="digit">
<span title="0">0</span>
<hr>
</span>
<span class="digit">
<span title="4">4</span>
<hr>
</span>
</span>
<div style="clear:both">
<p style="color=#ff6600; text-align:center; margin-top: 10px; margin-bottom:20px;">Boomers have taken the<br>
BOOMERANG PLEDGE<br></p></div>
</div>
<div class="textwidget"><div class="aligncenter"><style>#wrapper .fusion-button.button-1{border-width:1px;color:#ffffff;border-color:#ffffff;}#wrapper .fusion-button.button-1:hover,.fusion-button.button-1:focus,.fusion-button.button-1:active{border-width:1px;border-color:#ffffff;color:#ffffff;}#wrapper .fusion-button.button-1{background: #f15a22;
background-image: -webkit-gradient( linear, left bottom, left top, from( #ef871f ), to( #f15a22 ) );
background-image: -webkit-linear-gradient( bottom, #ef871f, #f15a22 );
background-image: -moz-linear-gradient( bottom, #ef871f, #f15a22 );
background-image: -o-linear-gradient( bottom, #ef871f, #f15a22 );
background-image: linear-gradient( to top, #ef871f, #f15a22 );}#wrapper .fusion-button.button-1:hover,.button-1:focus,.fusion-button.button-1:active{background: #d17c57;
background-image: -webkit-gradient( linear, left bottom, left top, from( #e8b38f ), to( #d17c57 ) );
background-image: -webkit-linear-gradient( bottom, #e8b38f, #d17c57 );
background-image: -moz-linear-gradient( bottom, #e8b38f, #d17c57 );
background-image: -o-linear-gradient( bottom, #e8b38f, #d17c57 );
background-image: linear-gradient( to top, #e8b38f, #d17c57 );}</style><a class="button xlarge button default fusion-button button-flat button-pill button-xlarge button-default button-1 buttonshadow-1" type="button" target="_self" title="Take the Boomerang Pledge!" href="http://boomeranggiving.org/take-the-boomerang-pledge/"><span class="fusion-button-text">TAKE THE PLEDGE!</span></a></div>
<br>
<br>
</div>
<div class="textwidget"><br>
<h2 style="text-align:center; margin-top:15px; margin-bottom:5px;">Tell Your Friends About<br>BOOMERANG GIVING!</h2></div>
<!-- Simple Share Buttons Plus (v0.4.2) simplesharebuttons.com/plus --><div class="ssbp-wrap"><div class="ssbp-container" data-ssbp-share-text="" data-ssbp-url="http://boomeranggiving.org/" data-ssbp-title="Private: Take the Pledge" data-ssbp-short-url="" style="display: block;"><span class="ssbp-text">Facebook</span><span class="ssbp-total-shares ssbp-total-facebook-shares ssbp-each-share">0</span><span class="ssbp-text">Twitter</span><span class="ssbp-total-shares ssbp-total-twitter-shares ssbp-each-share">4</span><span class="ssbp-text">Linkedin</span><span class="ssbp-total-shares ssbp-total-linkedin-shares ssbp-each-share">0</span><span class="ssbp-text">Email</span></div></div> <div class="textwidget"><br>
<br>
<br>
<br>
<div style="background-color:#363839; border-top: 12px solid #e9eaee; border-bottom: 12px solid #e9eaee; border-left: 2px solid #e9eaee; border-right: 2px solid #e9eaee;">
<p style="text-align:center; line-height: 22px; color:#fff;"><strong>Let's Stay in Touch!</strong></p>
<p style="text-align:center !important; line-height: 22px; color:#fff;">Enter e-mail to stay informed about<br>BOOMERANG GIVING</p>
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:none; font: 18px 'PTSansRegular', Arial, Helvetica, sans-serif; width:100%; text-align:center !important;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//boomeranggiving.us9.list-manage.com/subscribe/post?u=081f420813d884ff7b9270435&id=823e7c4392" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="novalidate">
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" aria-required="true">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_081f420813d884ff7b9270435_823e7c4392" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="SUBMIT" name="SUBMIT" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
<p style="font-size:13px; text-align:center;">*We will not share your e-mail.</p></div>
<br>
<br>
<br>
<br>
<br></div>
</div>
I need the following Javascript odometer to increase by 1 every time a button is clicked. This is part of a charity site and each time someone donates the odometer will update.
The following is the script:
<script>
;(function($){
/*
Function: initCounter
Initializes the scrolling counter using the value currently displayed in the element.
Parameters:
$this - the counter container
e - jQuery Event object
*/
function initCounter($this, e){
$this.find('.digit').each(function(){
var $display = $(this);
var $digit = $display.find('span');
$digit.html([0,1,2,3,4,5,6,7,8,9,0].reverse().join('<br/>'))
$digit.css({
top: '-' + (parseInt($display.height()) * (10 - parseInt($digit.attr('title')))) + 'px'
});
});
animateDigit($this.find('.digit:last'), e);
}
/*
Function: animateDigit
Moves the digit indicated by $this one step. If the end of the counter has been reach, the subsequent digit(s) will also be rotated
Parameters:
$this - digit to be rotated
e - jQuery Event object
*/
function animateDigit($this, e){
var $counter = $this.closest('.counter');
var $display = $this;
var $digit = $display.find('span');
// If we've reached the end of the counter, tick the previous digit
if(parseInt($digit.css('top')) == -1 * parseInt($display.height())){
animateDigit($display.prevAll('.digit:first'), e);
}
$digit.animate({
top: '+=' + $display.height() + 'px'
}, 500, function(){
// Repeat the animation on a semi-random interval
if($display.index('.counter .digit') == $counter.find('.digit').length - 1){
setTimeout(function(){
animateDigit($display, e);
}, Math.max(550, Math.random() * 10000));
}
// If we've reached the end of the counter, loop back to the top
if(parseInt($digit.css('top')) > -1 * parseInt($display.height())){
$digit.css({
top: '-' + (parseInt($display.height()) * 10) + 'px'
});
}
});
}
// Remove comments to animate odometer
$(function(){
initCounter($('.counter'), $.Event('load'));
});
})(jQuery);
</script>
Thank you so much in advance for any help you can give. Again this is my first time, so please go easy on me.
In jquery, binding an event to a click event on a button can be done like so:
HTML:
<button id="mybuttonID">Click me to increment odometer!</button>
JS:
$(document).ready(function() {
// wait for the dom to initialize before binding events
$('body').on('click', '#mybuttonID', animateDigit);
});
Hope this helps!
if you don't have the necessity to store it on db, i think it could help you.
http://jsbin.com/quvulabaro/2/edit?html,css,js,output

jQuery Animate Won't Work (even samples don't)

I'm trying to get a simple jQuery animation to work and I can't seem to make it happen. I'm not sure if I'm overlooking a simple syntax issue or something bigger. The samples I've found online don't seem to work either, so I figured I'd try to get a second opinion.
The relevant portions of the head is as follows:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
$('.menu_ul li').mouseenter(
function() {
$('#menuitem1').animate({
'background-image': 'linear-gradient(to bottom, #1058c4 0%, #1058c4 100%)',
'color' : '#ffffff'
},500);
}
);
$('.menu_ul li').mouseleave(
function() {
$(this).animate({
'background-image' : 'linear-gradient(to bottom, #A2A2A2 0%, #7D7D7D 100%)',
'color' : '#343434'
},500);
}
);
});
</script>
The HTML is as follows:
<ul class="menu_ul" style="display:block;position:absolute">
<li id="menuitem1">HOME</li>
<li id="menuitem2">PLAYLIST</li>
<li id="menuitem3">COMMUNITY</li>
<li id="menuitem4">ABOUT US</li>
</ul>
The CSS for it as follows:
.menu_ul li {
padding-top:13px;
text-align:center;
display:block;
float:left;
color:#343434;
width:237px;
height:35px;
background-image: linear-gradient(to bottom, #A2A2A2 0%, #7D7D7D 100%);
}
Thanks in advance.
Here's one way to change the background gradient with an opacity change on a secondary element:
HTML
<ul class="menu_ul" style="display:block;position:absolute">
<li id="menuitem1">HOME<span> </span></li>
<li id="menuitem2">PLAYLIST<span> </span></li>
<li id="menuitem3">COMMUNITY<span> </span></li>
<li id="menuitem4">ABOUT US<span> </span></li>
</ul>
jQuery
$('.menu_ul a').mouseenter(
function() {
$(this).siblings('span').animate({
'opacity' : 1
},500);
}
);
$('.menu_ul a').mouseleave(
function() {
$('.menu_ul span').animate({
'opacity' : 0
},500);
}
);
CSS
.menu_ul li {
padding:12px 0;
margin:0;
text-align:center;
display:block;
float:left;
color:#343434;
width:237px;
height:35px;
position:relative;
background-image: linear-gradient(to bottom, #A2A2A2 0%, #7D7D7D 100%);
}
.menu_ul a,
.menu_ul span{
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
.menu_ul a{
z-index:1;
line-height:55px;
display:block;
}
.menu_ul span{
opacity:0;
z-index:0;
display:block;
background-image: linear-gradient(to bottom, #A2A2A2 0%, #000000 100%);
}
jsFiddle Here
But let's be real here - CSS3 is better. (depending on the browser support needed)
HTML
<ul class="menu_ul" style="display:block;position:absolute">
<li id="menuitem1">HOME</li>
<li id="menuitem2">PLAYLIST</li>
<li id="menuitem3">COMMUNITY</li>
<li id="menuitem4">ABOUT US</li>
</ul>
CSS
.menu_ul li {
padding:0;
margin:0;
text-align:center;
display:block;
float:left;
width:237px;
}
.menu_ul a{
margin:0;
padding:12px 0;
display:block;
color:#343434;
background-image: linear-gradient(to bottom, #A2A2A2 0%, #7D7D7D 100%);
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.menu_ul a:hover{
color:#fff;
background-image: linear-gradient(to bottom, #A2A2A2 0%, #000000 100%);
}
jsFiddle.

If A Radio Button is Checked Call Function Handler

http://liveweave.com/rFqNTl
Fixed by using the property selector, and triggering change on the element - http://liveweave.com/ZTirGp
I have a few radio buttons that act as a menu. When design is checked a designer div is shown, when code is checked, a textarea is shown.
One problem I ran into is when I click New I want the on function declared for #designer so that when it's checked to show that div, and hide the others.
I've added the code below along with a demo to show what I'm having trouble with.
HTML
<div id='header'>
<center>
<div class="menubtn" id='newdoc'>
<input name="opt" id="opt-1" checked="checked" type="radio">
<label for="opt-1">New</label>
</div>
<div class="menubtn" style='display:none;' id='openload'>
<input name="opt" id="opt-2" type="radio">
<label for="opt-2">Browse</label>
</div>
<div class="menubtn" onclick='saveTextAsFile()'>
<input name="opt" id="opt-3" type="radio">
<label for="opt-3">Save</label>
</div>
<div class="menubtn" id='dropbox'>
<input name="opt" id="opt-4" type="radio">
<label for="opt-4">Dropbox</label>
</div>
<div class="menubtn" id='designer'>
<input name="opt" id="opt-5" type="radio">
<label for="opt-5">Design</label>
</div>
<div class="menubtn" id='settings'>
<input name="opt" id="opt-6" type="radio">
<label for="opt-6">Settings</label>
</div>
<div class="menubtn" id='codecanvasdisplay'>
<input name="opt" id="opt-7" type="radio">
<label for="opt-7">Code</label>
</div>
<div class="menubtn" id='fullcode'>
<input name="opt" id="opt-8" type="radio">
<label for="opt-8">Full Code</label>
</div>
<div class="menubtn" style='display:none;' id='intcolorpick'>
<input name="opt" id="opt-9" type="radio">
<label for="opt-9">Color Picker</label>
</div>
</center>
</div>
CSS
#header {
color: #2234cb;
text-shadow: 0px 0px 2em #fff;
background:#e0e2f9; /* Old browsers */
background:-moz-linear-gradient(top, #e0e2f9 0%, #d7dbf8 100%); /* FF3.6+ */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e2f9), color-stop(100%,#d7dbf8)); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(top, #e0e2f9 0%,#d7dbf8 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top, #e0e2f9 0%,#d7dbf8 100%); /* Opera 11.10+ */
background:-ms-linear-gradient(top, #e0e2f9 0%,#d7dbf8 100%); /* IE10+ */
background:linear-gradient(to bottom, #e0e2f9 0%,#d7dbf8 100%); /* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e2f9', endColorstr='#d7dbf8',GradientType=0 ); /* IE6-9 */
width: 100%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
#header input[type="radio"] { display:none; }
#header div { display:inline-block; margin:0; }
#header label {
cursor: pointer;
display: inline-block;
margin:.25em;
padding:.7em;
border-radius:50em;
font: 12px arial, sans-serif;
color: #444;
text-shadow: 0px 0px .25em #fff;
background:#f6f7fd; /* Old browsers */
background:-moz-linear-gradient(top, #f6f7fd 0%, #e0e2f9 100%); /* FF3.6+ */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f7fd), color-stop(100%,#e0e2f9)); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(top, #f6f7fd 0%,#e0e2f9 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top, #f6f7fd 0%,#e0e2f9 100%); /* Opera 11.10+ */
background:-ms-linear-gradient(top, #f6f7fd 0%,#e0e2f9 100%); /* IE10+ */
background:linear-gradient(to bottom, #f6f7fd 0%,#e0e2f9 100%); /* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f7fd', endColorstr='#e0e2f9',GradientType=0 ); /* IE6-9 */
}
#header label:hover { color: #111; background: #f6f7fd; }
#header label:active { color: #111; background: #c1c5f6;}
#header input[type="radio"]:checked + label { color: #e0e2f9; background: #666; box-shadow:inset 0 0 .25em #000; text-shadow: 0px 0px .25em #e0e2f9; }
JQuery/JavaScript
// Call New
$('#newdoc').click(function() {
$("#designer")[0].click();
code.val('');
preview.html(code.val());
});
$('#opt-1').click(function(){
if($('#opt-1').attr('checked')=="checked"){
$(this).attr('checked', false);
$('input#opt-5').attr('checked', true);
}else{
$('input#opt-5').attr('checked', false);
}
});
// Call Designer UI
$('#designer').on('change',function() {
$('#canvasbg, #canvas').show();
$('#settingsdisplay').hide();
$("#fullwebsitecode").hide();
$("#bottom, #code").hide();
return false;
});
// Call Settings
$('#settings').on('change',function() {
$('#settingsdisplay').show();
$('#canvasbg, #canvas, #bottom, #code').hide();
$("#fullwebsitecode").hide();
return false;
});
// Call Show Code
$('#codecanvasdisplay').on('change',function() {
$("#bottom, #code").show();
$('#settingsdisplay').hide();
$('#canvasbg, #canvas').hide();
$("#fullwebsitecode").hide();
return false;
});
This is what you want: $("#designer").trigger('change');
Change your "New Doc" handler to:
// Call New
$('#newdoc').click(function() {
code.val('');
preview.html(code.val());
$("#designer").trigger('change');
});
You can use trigger to trigger events bound to a given element.
$("#designer").trigger('click');
Also, much of your code uses the "change" event on a div that contains a radio element. So the change event bubbles up from the input, and you're handling it at the div level. Unless you have a good reason for it, the inputs are not really needed, and you can go with a click event on a div element. Much more straightforward.
Here is your code with the modifications to the events I mentioned:
http://liveweave.com/Lsmg7B
Documentation & Related Reading
jQuery.trigger - http://api.jquery.com/trigger/
Event bubbling on javascripter.net - http://www.javascripter.net/faq/eventbubbling.htm

Categories