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.
Related
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.
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.
This is my code. https://jsfiddle.net/3phzezfj/3/
function showhidediv(rad){
var rads=document.getElementsByName(rad.name);
document.getElementById('one').style.display=(rads[0].checked)?'block':'none' ;
document.getElementById('two').style.display=(rads[1].checked)?'block':'none' ;
document.getElementById('three').style.display=(rads[2].checked)?'block':'none' ;
document.getElementById('four').style.display=(rads[3].checked)?'block':'none' ;
}
function switchVisible()
{
$("#newpost").hide();
$("#newpost2").show();
}
function previousVisible()
{
$("#newpost").show();
$("#newpost2").hide();
}
How do I make the next button disappear once I've clicked it but if I press back, it will reappear?
Thanks.
You can use toggle();
Description: Display or hide the matched elements.
$("#newpost2").toggle();
If #newpost2 is hidden, it will show it, if it's shown, it will hide it.
Instead of onclick use addEventListener for click event.
I have edited your code here codepen
And you don't have to mix js and jquery like this
document.getElementById('four') and $("#newpost")
it's better to decide which one you want to use
Your fiddle was not having jquery js included.
Please check updated fiddle here.
Attached the event handler like below.
$("#btnBack").click(previousVisible);
$("#btnNext").click(switchVisible);
And moved the Next button inside the div.
Hope this is what you were trying to achieve.
I think this is what you want right?
var check = 0;
$(document).ready(function() {
$("#Button1").click(function() {
if(check == 0)
{
$("#Button1").hide();
}
});
$("#Button2").click(function() {
if(check == 0)
{
$("#Button1").show();
}
});
});
.btnSubmit {
background-color: #7f0000;
background-image: -webkit-linear-gradient(top, #7f0000, #6c0404);
background-image: -moz-linear-gradient(top, #7f0000, #6c0404);
background-image: -o-linear-gradient(top, #7f0000, #6c0404);
background-image: -ms-linear-gradient(top, #7f0000, #6c0404);
background-image: linear-gradient(top, #7f0000, #6c0404);
border: 0;
text-transform: uppercase;
color: white;
font-size: 14px;
font-weight: bolder !important;
height: 42px;
padding: 0 20px;
margin: 0;
text-shadow: -1px -1px 2px 2px #000, 1px 1px 2px 2px #aa4242;
border-bottom: 1px solid #383838;
font-family: garamond, serif;
text-shadow: 1px -1px 0px #090909;
width: 150px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid eightwidth" align="center" style="background-color: #282828; padding: 1px; padding-bottom: 0px;" id="disappear">
<button class="btn btnSubmit" id="Button1" type="button" value="Click">NEXT</button>
<button class="btn btnSubmit" id="Button2" type="button" value="Click">Appear</button>
</div>
Button disappear!!
$("#next").click(function(){
$("#next").hide();
$("#back").show();
});
$("#back").click(function() {
$("#back").show();
$("#next").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="button" id="next" value="Next"/>
<input type="button" id="back" value="Back"/>
<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
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
Check this page www.danielmalek.bugs3.com/oferta.html, on Chrome you can see its a bit too long so the beam on the left side is not reaching end of site.
On firefox and IE it is seems to be right, also at localhost Chrome displays well.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>Strony internetowe - Daniel Małek</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" type="text/css" rel="stylesheet" />
<script language="JavaScript" type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function (){
/*$("body").css("overflow-y", "hidden");*/
/*("#slider").css("overflow", "hidden");*/
function tytul() {
}
$(".galeria").click(
function()
{
$("#ukryte").toggle(200);
});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<div id="header2"></div>
<div id="pasek"></div>
</div>
<div id="przedluzenie"></div>
<div id="content">
<div id="menu">
<div id="menu2">
<a class="start" href="index.html"></a>
<a class="galeria" href="#"></a>
<div id="ukryte" style="display: none;">
<a class="webdesign" href="webdesign.html"></a>
<a class="grafika" href="grafika.html"></a>
</div>
<div id="oferta_b"></div>
<a class="omnie" href="omnie.html"></a>
<a class="kontakt" href="kontakt.html"></a>
</div>
</div>
<div id="prawa_strona">
<div id="omnietxt" style="margin-bottom:60px;">
<ul style="margin-left:20px;" class="ofertatxt">
<li>Administracja istniejącymi stronami internetowymi</li>
<li>Hosting, domeny i instalacja stron na serwerze</li>
<li>Projektowanie i kodowanie stron www</li>
<li>Identyfikacja wizualna (tworzenie logo)</li>
<li>Dedykowane systemy CMS</li>
<li>Blogi Wordpress</li>
<li>Oprogramowanie sklepów KQSStore</li>
</ul>
</br>
<p class="ofertatxt">
Ponadto, wraz ze znajomymi programistami tworzymy młody, ambitny zespół, który jest w stanie stworzyć w pełni funkcjonalne i rozbudowane serwisy internetowe.</br></br>
Nie wystawiam faktury VAT, preferowany rodzaj współpracy to umowa o zlecenie lub umowa o dzieło.</p>
</div>
<div id="footerx">
<img src="img/foot_linia.png"></img><br>
<p class="stopka">Copyright © 2013 Daniel Małek </p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var scrollSpeed = 70;
var step = 1;
var current = 0;
var imageWidth = 410;
var headerWidth = 410;
var restartPosition = -(imageWidth - headerWidth);
function scrollBg(){
current -= step;
if (current == restartPosition){
current = 0;
}
$('#header').css("background-position",current+"px 0");
}
var init = setInterval("scrollBg()", scrollSpeed);
</script>
<script type="text/javascript" charset="utf-8">
$(window).load(function(){
var content = $('#content').height();
var winh = $(window).height();
if(content>=winh){$('#menu').height(content);}
else{
winh=winh-200;
$('#menu').height(winh);}
});
</script>
</body>
</html>
And CSS:
* { padding: 0; margin: 0;}
.clear {clear: both;}
html{}
html, body, #container, #content{}
body {background: url('img/tekstura.png');background-repeat:repeat-y repeat-x;background-color:#d5d5d5;}
#container {margin: 0 auto; position:relative;}
#content {margin: 0 auto;position:relative;width:960px;overflow:auto;}
#header {background-color:#2099c8;background: url('img/heder/tekstura.png') repeat-x; height:160px; margin:0 auto; position:relative; width:100%;box-shadow: 0 0 30px 9px white;}
#pasek{height:3px;background: url('img/heder/pasek.png') repeat-x;}
#header2{background: url('img/heder/przod2.png') no-repeat;background-repeat:repeat-y repeat-x;margin: 0 auto;width:960px; height:157px;}
#gradient_poziom{height:37px; background: url('img/gradient_poziom.png') repeat-x;}
#prawa_strona{ float:right;width:720px; margin-right:10px;}
#przedluzenie{width:209px; height:40px;background-color:black;margin:0 auto;position:relative;right:376px;background: url('img/gradient_pion.png') repeat-y;}
#menu {float:left;width:209px;margin-right:5px;background: url('img/gradient_pion.png') repeat-y;}
#menu2{float:right;margin-right:20px;}
#ukryte {position:relative;left:23px;}
#start_b {background: url('img/start_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;}
.start {background:url('img/start.png') no-repeat;display:block;height:29px;width:169px;margin-bottom:15px;}
a.start:hover {background-position: 0px -29px;}
#galeria_b {background: url('img/galeria_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;}
a.galeria {background: url('img/galeria.png') no-repeat;display:block;height:29px;overflow:hidden;width: 169px;margin-bottom:15px;}
a.galeria:hover {background-position: 0px -29px;}
#webdesign_b {background: url('img/webdesign_b.png') no-repeat;height:20px;width: 142px;margin-bottom:15px;}
a.webdesign {background: url('img/webdesign.png') no-repeat;display:block;height:20px;overflow:hidden;width: 169px;margin-bottom:15px;}
a.webdesign:hover {background-position: 0px -20px;}
#grafika_b {background: url('img/grafika_b.png') no-repeat;height:20px;width: 142px;margin-bottom:15px;}
a.grafika {background: url('img/grafika.png') no-repeat;display:block;height:20px;overflow:hidden;width: 169px;margin-bottom:25px;}
a.grafika:hover {background-position: 0px -20px;}
#oferta{background: url('img/oferta_b.png') no-repeat;height:29px;width: 142px;margin-bottom:15px;}
a.oferta {background: url('img/oferta.png') no-repeat;display:block;height:29px;width: 142px;margin-bottom:15px;}
a.oferta:hover {background-position: 0px -29px;}
#omnie_b{background: url('img/omnie_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;}
a.omnie {background: url('img/omnie.png') no-repeat;display:block;height:29px;width: 169px;margin-bottom:15px;}
a.omnie:hover {background-position: 0px -29px;}
#oferta_b{background: url('img/oferta_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;}
a.oferta {background: url('img/oferta.png') no-repeat;display:block;height:29px;width: 169px;margin-bottom:15px;}
a.oferta:hover {background-position: 0px -29px;}
#kontakt_b {background: url('img/kontakt_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;}
a.kontakt {background: url('img/kontakt.png') no-repeat;display:block;height:29px;width: 169px;margin-bottom:15px;}
a.kontakt:hover {background-position: 0px -29px;}
.minwebd{border: 1px solid #2e2e2e;float:left;position:relative;left:10px;}
.cien{display:block;height:28px;width:216px;float:left;margin-left:22px;}
#cienie{z-index:-1;float:right;position:relative;top:-8px;}
#jrs{margin-top:25px;float:right;margin-left:7px;}
.jrs{background: rgba(255, 255, 255, 0.7);width:218px;float:left;}
.jrs_img{}
.jrs_tekst{margin: 0 10px 15px 10px; text-align:justify;color:#464646;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:12px;}
.znak_plus{position:relative;float:left;width:20px;font-size:20px;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;margin-top:15px;text-align:center;color:#3f3f3f;}
#footerx{float:right;margin:20px 0;width:412px;}
.stopka{float:right;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:0.6em;color:#2e2e2e;position:relative;margin-right:10px;margin-top:5px;}
.obrazek1{
height:159px;
width: 198px;
float:left;
border: 1px solid #417f99;
}
.obrazek2{}
#galgraf{margin-right:30px;float:left;}
#napis{ width:190px;float:right;height:35px;background: white;background: rgba(255, 255, 255, 0.7); display: block; padding: 5px ; margin: 0 0 20px 20px;}
#wstep{float:left; position:relative; width:auto; background: white; background: rgba(255, 255, 255, 0.7);margin: 0 0 30px 66px; padding:10px 15px 10px 15px;color:#464646;}
#gallery{
float:right;
}
#gallery2{
float:left;
width:200px;
}
#webdopisy{
float:left;
}
#webdopis{float:right;width: 430px; background: white;background: rgba(255, 255, 255, 0.7); display: block;margin: 0 0 15px 40px; padding:15px;color:#464646;}
#beczka{margin-bottom:30px;position:relative;float:left;}
.webdopis {}
.opis a {
text-decoration:none;
color:#006c96;
}
.opis a:hover{
text-decoration:underline;
color:#006c96;
}
h1 {
color:black;
font-size:0.9em;
font-family:tahoma,Helvetica,sans-serif;
font-weight:100;
text-align:center;
}
.omnietxt{line-height:20px;color:#464646;font-size:0.9em;float:left;font-family:arial,Helvetica,sans-serif;padding: 0 5px 0 5px;}
.ofertatxt{line-height:20px;color:#464646;font-size:0.9em;font-family:arial,Helvetica,sans-serif;text-align:justify}
#omnietxt{
float:left;
width: 500px;
background: white;
background: rgba(255, 255, 255, 0.7);
display: block;
padding:15px 15px 15px 15px;
margin: 0 0 110px 120px;
}
#wysokosc{
height:420px;
}
/* LAJTBOKS */
.thumb {
float:left;
margin: 0 0 0 20px ;
border: 1px solid #2e2e2e;
}
.clearFloat {
clear:both;
}
/* KONTAKT */
#numery{ padding:20px 20px 20px 20px;float:left;position:relative;left:265px;background: rgba(255, 255, 255, 0.7); margin-top:15px;margin-bottom:150px;}
.gg1 {position:relative;top:2px;left: 13px;}
.gg2 {font-style:italic;font-size:1.2em;position:relative;top:5px;left:15px;}
.adres1 {color:#015d81;font-size:15;font-family:Arial,Helvetica,sans-serif;}
.adres2 {position:relative;top:5px;color:#015d81;font-size:15;font-family:Arial,Helvetica,sans-serif;}
You have two scripts embedded into HTML:
<script type="text/javascript" charset="utf-8">
$(window).load(function(){
var content = $('#content').height();
var winh = $(window).height();
if(content>=winh){$('#menu').height(content);}
else{
winh=winh-200;
$('#menu').height(winh);}
});
</script>
<script type="text/javascript" charset="utf-8">
$(window).load(function(){
var content = $('#content').height();
$('#menu').height(content);
});
</script>
Both fire at the same time: $(window).load, and both do the same thing: $('#menu').height(value);, but the value is different.
Obviously, this is erroneous. Probably in Chrome those snippets finish in different order than in other browsers, thus the difference.
UPD #1
I'm opening your link now with Chrome, and the vertical scrollbar does not appear. I assume my solution worked, please don't forget to accept the question. ;)
But do you know that you don't need Javascript to solve this task?
Here's an example how vertical stretching can be done in pure CSS: CSS 3 col template 100% same height
Also, you should not use non-semantic elements for decoration: #przedluzenie, #pasek etc. That can be also solved in pure CSS without messing your HTML.