As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
Im working for a quiz application using php, mysql, javascript and jquery.
I want to create a timer in which I can set how many mins:secs.
The timer should also be able to show a warning when you have less that 20 seconds left:
20 seconds left to attempt or finish!
Suppose if I kept it for three minutes..that will be 180 secs...when it reaches to 160 secs... a pop up message should come to inform that you have only 20 secs left to attempt or finish
Some suggestions, demo links that you know would be appreciated.
You can start with this:
var countdown = {
counter:undefined,
seconds:5, //total seconds left for the countdown
warning:1, //when seconds==warning show message
alert: function() {
//whatever your warning message should do
console.log("Hurry up!");
},
count: function() {
//tic tac
this.seconds = this.seconds-1;
if (this.seconds==this.warning) {
this.alert();
}
if (this.seconds==0) {
clearInterval(this.counter);
this.finished();
}
console.log(this.seconds+" remaining");
},
finished: function() {
//no more seconds left!
console.log("Game over!");
}
};
//start the countdown
countdown.counter = setInterval( function(){ countdown.count(); }, 1000 );
Change the alert function so that it does what you want. You can also change the count function so that it shows remaining seconds in a div instead of the console.
And of course, change both seconds:5 and warning:1 to 180 and 20 for example.
Hope it works, let me know if I'm missing anything.
#user2331153 consider this my "welcome to StackOverflow" message, and accept also a friendly advice: Try to demonstrate some effort before asking here. Post some code you have tried, some links you have found, and write an elaborated question, not just 3 lines with errors. That would help both you and SO. Good luck!
I could be wrong, but it sounds like you just need a timeout:
minutes = 3;
seconds_left_warning_time = 20;
setTimeout(function() { alert('you only have ' + seconds_left_warning_time + ' seconds left'); }, (minutes*60*1000) - (seconds_left_warning_time*1000));
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Please consider the following example.
var secondsCount = 0;
if( secondsCount <= 1800 )
{
setInterval(function(){
secondsCount++;
console.log( secondsCount )
}, 1000);
}
If we run the above code nearly to 1800 seconds ( 30 mins ) we could see that secondsCount value & actual seconds ( or minutes ) lapsed are not equal.
Try this...
var secondsCount = 0;
var x = setInterval(function() {
secondsCount++;
console.log(secondsCount);
if (secondsCount >= 1800) {
clearInterval(x);
}
}, 1000);
Note that, setInterval and setTimeout are forced to use at least the minimum delay. See Reasons for delays longer than specified. In practice, there's no guarantee that your callback will be called in the "exact" set amount of time.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
So i have this script:
<script id="_wauwgs">var _wau = _wau || []; _wau.push(["small", "p00ystfryeuc", "wgs"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/small.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>
And i would like to reload it every 20 or 30 seconds. I tried using this:
<script type="text/javascript">
function refresh() {
document.getElementById('online').src = document.getElementById('online').src;
}
window.setInterval("refresh()",30000);
</script>
With the script in <div id="online"></div> but it didn't work.
I think this is what you want:
setInterval(function(){
$("#online").attr('src', 'http://widgets.amung.us/small.js', 3000 /*or 2000*/);
})
I think the only way to refresh a script is to insert it again.
var script = $('#online').html();
function reloadScript() {
$time = 500;
$('#online').html('');
setTimeout(function() {
$('#online').html(script);
reloadScript();
}, $time);
}
reloadScript();
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
So I have been spending a lot of time lately on codecademy and it is amazing. I feel like I am starting to really grasp JavaScript and programming in general. However, I want to start the basics of implementing my new skills into use. I am sure I am not alone with this desire and while I have some books coming in the mail (for jQuery, Ajax and Ruby) I thought Stack Overflow might be a good place to start.
Let's say for example I wanted to use the code (or something like it) below that I just wrote to calculate someones BMI and interpret it for them. It prompts them to input their weight and height and then calculates their BMI.
The code works in the codecademy scratch pad but I would have no idea how to put this code to use in the real world. I have a feeling it would have something to do with creating an HTML form and taking the input names as variables but I'm not sure.
If this isn't the correct place to ask the question, I apologize, this is my first question on Stack Overflow!
var weight = prompt("How much do you weigh, in pounds?");
var height = prompt("How tall are you, in inches?");
var BMI = (weight*703)/(height*height);
console.log("You have a BMI of " + Math.floor(BMI));
if (BMI<=15){
console.log("You are very severly underweight!");
}else if (BMI<16 && BMI>=15){
console.log("You are severly underweight!");
}else if (BMI<19 && BMI>=16){
console.log("You are underweight");
}else if (BMI<25 && BMI>=19){
console.log("You are healthy!");
}else if(BMI<30 && BMI >=25){
console.log("You are overweight" );
}else if(BMI<35 && BMI >=30){
console.log("You are moderately obese!");
}else{
console.log("lose weight fatty!");
}
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
What is the best way to provide a quick tour of a webapp using contextual tooltips?
Use case:
user navigates to the webapp
some form of popup asking if the user wants a guided tour of the interface
user can click next on each tooltip to be shown the next one
user can cancel the tour at any time by clicking some kind of exit X or button
Is there an easy library out there that does this?
Thanks!
The easiest way to do this is with Jeff Pickhardt's Guider-JS javascript tooltip walk-through library. It's very easy to use (although it has several very advanced features as well), and does exactly what you described.
You can check out this excellent example of a tooltip walk-through made with Guider-JS.
If you want to see a working example on a production site, it is used extensively on optimizely.com to provide help and walk-through guides for the user interface.
UPDATE: ZURB Foundation is now maintaining the excellent "Joyride" tooltip tour javascript library.
You could also write the tour part yourself using a linked list with an iterator that always calls a callback to set up the tooltip and one to close it. You can then use any tooltip script you want. Here's a quick proof of concept that should show you what I mean:
var toolTipList = {
tooltips: [],
currentTooltip: {},
addTooltip: function(tooltip){
var currentTail = this.tooltips.length > 0 ? this.tooltips[this.tooltips.length - 1] : {};
var newTail = {
tooltip: tooltip,
prev: currentTail
};
currentTail.next = newTail;
this.tooltips.push(newTail);
},
initialize: function(){
this.currentTooltip = this.tooltips[0];
this.currentTooltip.tooltip.callback();
},
next: function(){
if(this.currentTooltip.next){
this.currentTooltip.tooltip.close();
this.currentTooltip = this.currentTooltip.next;
this.currentTooltip.tooltip.callback();
}
}
};
for(var i = 0; i < 10; i++){
toolTipList.addTooltip({
callback: function(){
// called every time next is called
// open your tooltip here and
// attach the event that calls
// toolTipList.next when the next button is clicked
console.log('called');
},
close: function(){
// called when next is called again
// and this tooltip needs to be closed
console.log('close');
}
});
}
toolTipList.initialize();
setInterval(function(){toolTipList.next();}, 500);
JSFiddle link
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
Ok, we run a website that has a shopping cart. Here's the scenario: a customer comes to the site and adds a product to their cart. They go to dinner and leave the item in their cart without checking out. The next day they want to buy the item. They go to the website and, without noticing it's in their cart already, attempt to add it to the cart again where they receive an error saying it's out of stock (because there is only one in stock and they have it in their cart already.) Now we lose a sale.
What I am trying to do is create 2 cookies: one that lasts 7 days (same as the cart cookie) and one for the session. The way it works is this: their first visit it creates 2 cookies: one for 7 days and one for the session. Now lets say the customer adds a product and closes their browser. The session cookie expires, leaving the 7 Day cookie there. Now when they come back, the script will check that the 7 Day Cookie is present, but not the session cookie, triggering some of my own code to be run.
The basic structure would be like this.
If 7DayCookie Exists {
If SessionCookie Exists {
End Script;
}
Else if SessionCookie Does Not Exist {
[Insert My Own Code]
}
}
Else if 7DayCookie Does not Exist {
Create SessionCookie;
Create 7DayCookie;
End Script;
}
Anybody able to make this for me? I assume it'll be a cinch for anybody that is very good with cookies and javascript.
Thanks in advance!
Final working code.
var wc = readCookie('wfwc');
var sc = readCookie('wfsc');
if (wc) {
if (sc) { }
else if (!sc) {
alert("It works.");
}
}
else if (!wc) {
createCookie('wfwc','week',7);
createCookie('wfsc','session',0);
}
I highly recommend the cookie functions from Peter Paul Koch's quirksmode. The 3 functions you need are createCookie, eraseCookie, and readCookie.
For the session cookie, you'll want to create a cookie that contains no "expires" header. for the 7 day cookie, you'll want to create a cookie that expires in 7 days.
Then, in javascript, you can do something like:
theme = readCookie("theme");
// if a cookie called "theme" isn't present, initialize.
if (!theme) {
theme = "sky.json";
}
I use PPK's scripts myself, I did change the == to === to avoid type coercion in the functions, although it's not strictly necessary.