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
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
The code below belongs to a crossrider extension I am currently attempting to develop that hopefully will sync bookmarks across browsers. This file is currently the background.js file it will first retrieve a snapshot of the bookmarks file from the local database then compare that to the current list of bookmarks and if there are any differences (either additions to the bookmarks list or subtractions) they will be be returned with the getChanges() function and then sent to the server, finally the script updates the snapshot and waits 30 seconds before restarting the process. I dont really know how to make the getChanges() function. It needs to return presumably a json object indicating both the additions and subtractions (both their titles and urls). If someone could write the code for the function that would be great. Thanks
appAPI.ready(function() {
// Poll every 30 seconds
setInterval(function() {
appAPI.db.async.get('prevBookmarks', function(value) {
// Load or initialize previous bookmarks list
var prevBookmarks = (value) ? value : {};
// Get current bookmarks
appAPI.bookmarks.getTree(function(nodes) {
// Save bookmark list for next comparison
appAPI.db.async.set('prevBookmarks', nodes);
// In your getChanges functions, traverse the bookmark trees collating
// changes and then post then to your API server using appAPI.request
var changes = getChanges(prevBookmarks, nodes);
appAPI.request.post({
url: http://yourAPIserver.com,
postData: changes,
contentType: 'application/json'
});
});
});
}, 30 * 1000);
});
Ok, you've got jQuery as one of your tags, so try this link: Compare 2 arrays which returns difference.
It returns the differences between two arrays. You'll have to perform this twice for what you're doing, once to figure out what is in current that is not in previous and vice versa. I don't know what properties are contained in your bookmarks so this simple example might not exactly suit your needs, but it might point you in the right direction.
Good luck and welcome to JavaScript!
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));
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.
Working on a js app involving many objects, I want to be able to grab an object by a specific variable. Here is my code:
var pin = '0000';
$.each(employees, function(){
if(this.pin === pin){
curEmployee = this;
return false;
}
});
Though this approach works, I have a feeling that there are way better solutions out there... I was fiddling around with grep and tried:
var pin = '0000';
curEmployee = $.grep(employees, function(e,i){
return e[pin] === pin;
});
However, it is harder to determine a result, since now I will need to check the length to see if an array with provided back, and such.
Just looking for a best practices solution.
Since an Array is always returned from $.grep, just get the [0] index of the Array. If undefined, there was no match.
var pin = '0000';
curEmployee = $.grep(employees, function(e,i){
return e.pin === pin;
})[0]; // <--- always grab the first index
Without jQuery, you could use Array.prototype.filter in the same manner:
var pin = '0000';
curEmployee = employees.filter(function(e,i){
return e.pin === pin;
})[0];
You could always use jquery's filter method:
var pin = '0000';
curEmployee = $(employees).filter(function(e){
return e.pin === pin;
})[0];
In All honesty, IF you are using aloot of objects and performance is important...
.. and you want to avoid the asynchronous bugies in js.. you should go for a pure js. approach.
Something like for loop which god trough all objects. And possibly some result buffering. I know it is a pain in the ass and you probably wont like to do it. but it is the fastest way in most cases.
I personally use such aproach in a js. crm we are making, becouse the jquery way was a no go on 1000+ objects...
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.
I want validate if username already exists while user insert the username in textbox or just after the textbox lost focus.
Jquery or Ajax?
Please, someone have examples of that?
In the onblur event of the text box, get the value of textbox and using jQuery ajax, make a call to a server page where you check it and return appropriate results. based on the results show the message to user (Available or Not Available)
Include jQuery in your page and have this script also
$(function(){
$("#txtUserName").blur(function() {
var userName=$(this).val();
if(userName!="")
{
$.get("checkusername.aspx?username="+userName+"&t="+$.now(),function(data){
if(data=="1")
{
$("#msgDiv").html("Not Available");
}
else
{
$("#msgDiv").html("Available :) ");
}
});
}
});
});
Assumuing checkusername.aspx page will read the querystring value and check in the database and return(Response.Write()) "1" or "0"
I prefer to use a Generic handler (.ASHX file) to do the server side checking instead of using the aspx file.
Both.
Use jQuery to react to the onblur event for the textbox. Then, use jQuery to make an ajax call to a controller to see if the user name is already taken.
$('#usernameTextBox').blur(function() {
alert('Make your ajax call here.');
});
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.