|
F
FunkDaddy author
Sometimes users get overwhelmed or simply lost in your app because they don't know what to do once they get to a certain screen. I was searching for an easy way to provide some additional guidance beyond simple text or mouse hovering tooltips.
I found a few tools as follows (in case others want to experiment with them as well):
I chose to go with the first one I mention in the list above. Here is how to implement it in PHPR 5.3. The "joyride" one (last bullet above) requires jquery version above what is included with PHPR 5.3 and I ran into issues when trying to include that lib in the project because it started to conflict with the lower jquery library.
Step 1:
Download the files from the example shown on the tympanus.net site (from here: http://tympanus.net/Development/WebsiteTour/WebsiteTour.zip)
Step 2:
Extract the zip file and create a folder called "codrops" in your project output folder (where your web files are hosted, ex: c:\wamp\www\myproject)
Step 3:
Insert a PHP snippet using visual editor right before the "header" control on your page.
In that snippet place the following code (this refers to relative location of newly created codrops folder, so adjust accordingly for your needs):
echo "<LINK rel=stylesheet type=text/css href=\"codrops/css/jquerytour.css\">";
echo "<script type=text/javascript src=\"codrops/js/cufon-yui.js\"></SCRIPT>";
echo "<script type=text/javascript src=\"codrops/js/ChunkFive_400.font.js\"></SCRIPT>";
echo "<script type=text/javascript src=\"codrops/js/jquery.easing.1.3.js\"></SCRIPT>";
Step 4:
Create a new text file and name it according to the page name you are implementing the tour. I prefaced the file with the word "codrops_" followed by page name. Ex: if page is called "instructions_list", then I named the JS file "codrops_instructionslist.js".
Place that file inside the "codrops" folder you created (which contains the files you downloaded)... inside the "js" folder.
Step 5:_
Insert a new PHP snippet in the page you want the tour; this time after the "footer" control of page in visual editor.
In that snippet place the following code:
echo "<script type=text/javascript src=\"codrops/js/codrops_instructions_list.js\"></SCRIPT>";
Step 6:
We now need to add some javascript & jquery code to our newly created JS file.
$(function() {
/*
the json config obj.
name: the class given to the element where you want the tooltip to appear
bgcolor: the background color of the tooltip
color: the color of the tooltip text
text: the text inside the tooltip
time: if automatic tour, then this is the time in ms for this step
position: the position of the tip. Possible values are
TL top left
TR top right
BL bottom left
BR bottom right
LT left top
LB left bottom
RT right top
RB right bottom
T top
R right
B bottom
L left
*/
var config = [
{
"name" : "menuitem_active",
"bgcolor" : "black",
"color" : "white",
"position" : "TL",
"text" : "Each of the tabs above represent sections for you to verify your information",
"time" : 5000
},
{
"name" : "tour_2",
"bgcolor" : "black",
"color" : "white",
"text" : "blah, blah, blah",
"position" : "TL",
"time" : 5000
},
{
"name" : "tour_3",
"bgcolor" : "black",
"color" : "white",
"text" : "Customize the navigation buttons",
"position" : "BL",
"time" : 5000
},
{
"name" : "tour_4",
"bgcolor" : "black",
"color" : "white",
"text" : "You can also use the autoplay function where the user can just sit back and watch the whole tour",
"position" : "TL",
"time" : 5000
},
{
"name" : "tour_5",
"bgcolor" : "black",
"color" : "white",
"text" : "You can indicate the direction of the tooltip arrow for each tour point",
"position" : "TL",
"time" : 5000
},
{
"name" : "tour_6",
"bgcolor" : "#111199",
"color" : "white",
"text" : "Mark important tour points in a different color",
"position" : "BL",
"time" : 5000
},
{
"name" : "tour_7",
"bgcolor" : "black",
"color" : "white",
"text" : "Automatically scrolls to the right place of the website",
"position" : "TL",
"time" : 5000
}
],
//define if steps should change automatically
autoplay = false,
//timeout for the step
showtime,
//current step of the tour
step = 0,
//total number of steps
total_steps = config.length;
//show the tour controls
showControls();
/*
we can restart or stop the tour,
and also navigate through the steps
*/
//MBR Change from .live to .bind
$('#activatetour').bind('click',startTour);
$('#canceltour').bind('click',endTour);
$('#endtour').bind('click',endTour);
$('#restarttour').bind('click',restartTour);
$('#nextstep').bind('click',nextStep);
$('#prevstep').bind('click',prevStep);
function startTour(){
$('#activatetour').remove();
$('#endtour,#restarttour').show();
if(!autoplay && total_steps > 1)
$('#nextstep').show();
showOverlay();
nextStep();
}
function nextStep(){
if(!autoplay){
if(step > 0)
$('#prevstep').show();
else
$('#prevstep').hide();
if(step == total_steps-1)
$('#nextstep').hide();
else
$('#nextstep').show();
}
if(step >= total_steps){
//if last step then end tour
endTour();
return false;
}
++step;
showTooltip();
}
function prevStep(){
if(!autoplay){
if(step > 2)
$('#prevstep').show();
else
$('#prevstep').hide();
if(step == total_steps)
$('#nextstep').show();
}
if(step <= 1)
return false;
--step;
showTooltip();
}
function endTour(){
step = 0;
if(autoplay) clearTimeout(showtime);
removeTooltip();
hideControls();
hideOverlay();
}
function restartTour(){
step = 0;
if(autoplay) clearTimeout(showtime);
nextStep();
}
function showTooltip(){
//remove current tooltip
removeTooltip();
//alert('ASS MONKEY');
//console.log(1);
var step_config = config[step-1];
var $elem = $('.' + step_config.name);
if(autoplay)
showtime = setTimeout(nextStep,step_config.time);
var bgcolor = step_config.bgcolor;
var color = step_config.color;
/*MBR
//Comment out and use subsequent line of code instead when using Jquery 1.3.2
//Otherwise can't recognize $tooltip
var $tooltip = $('<div>',{
id : 'tour_tooltip',
className : 'tooltip',
html : '<p>'+step_config.text+'</p><span class="tooltip_arrow"></span>'
}).css({
'display' : 'none',
'background-color' : bgcolor,
'color' : color
});
*/
//MBR added this to replace code above
var $tooltip = '<div id="tour_tooltip" class="tooltip"><p>'+step_config.text+'</p><span class="tooltip_arrow"></span>';
//position the tooltip correctly:
//the css properties the tooltip should have
var properties = {};
var tip_position = step_config.position;
//append the tooltip but hide it
$('.tour_1').prepend($tooltip);
//get some info of the element
var e_w = $elem.outerWidth();
var e_h = $elem.outerHeight();
var e_l = $elem.offset().left;
var e_t = $elem.offset().top;
//MBR replaced all mentions of $tooltip to $('#tour_tooltip') instead (neede to work in JQ 1.3.2
switch(tip_position){
case 'TL' :
properties = {
'left' : e_l,
'top' : e_t + e_h + 'px'
};
$('#tour_tooltip').find('span.tooltip_arrow').addClass('tooltip_arrow_TL');
break;
case 'TR' :
properties = {
'left' : e_l + e_w - $('#tour_tooltip').width() + 'px',
'top' : e_t + e_h + 'px'
};
$('#tour_tooltip').find('span.tooltip_arrow').addClass('tooltip_arrow_TR');
break;
case 'BL' :
properties = {
'left' : e_l + 'px',
'top' : e_t - $('#tour_tooltip').height() + 'px'
};
$('#tour_tooltip').find('span.tooltip_arrow').addClass('tooltip_arrow_BL');
break;
case 'BR' :
properties = {
'left' : e_l + e_w - $('#tour_tooltip').width() + 'px',
'top' : e_t - $('#tour_tooltip').height() + 'px'
};
$('#tour_tooltip').find('span.tooltip_arrow').addClass('tooltip_arrow_BR');
break;
case 'LT' :
properties = {
'left' : e_l + e_w + 'px',
'top' : e_t + 'px'
};
$('#tour_tooltip').find('span.tooltip_arrow').addClass('tooltip_arrow_LT');
break;
case 'LB' :
properties = {
'left' : e_l + e_w + 'px',
'top' : e_t + e_h - $('#tour_tooltip').height() + 'px'
};
$('#tour_tooltip').find('span.tooltip_arrow').addClass('tooltip_arrow_LB');
break;
case 'RT' :
properties = {
'left' : e_l - $('#tour_tooltip').width() + 'px',
'top' : e_t + 'px'
};
$('#tour_tooltip').find('span.tooltip_arrow').addClass('tooltip_arrow_RT');
break;
case 'RB' :
properties = {
'left' : e_l - $('#tour_tooltip').width() + 'px',
'top' : e_t + e_h - $('#tour_tooltip').height() + 'px'
};
$('#tour_tooltip').find('span.tooltip_arrow').addClass('tooltip_arrow_RB');
break;
case 'T' :
properties = {
'left' : e_l + e_w/2 - $('#tour_tooltip').width()/2 + 'px',
'top' : e_t + e_h + 'px'
};
$('#tour_tooltip').find('span.tooltip_arrow').addClass('tooltip_arrow_T');
break;
case 'R' :
properties = {
'left' : e_l - $('#tour_tooltip').width() + 'px',
'top' : e_t + e_h/2 - $('#tour_tooltip').height()/2 + 'px'
};
$('#tour_tooltip').find('span.tooltip_arrow').addClass('tooltip_arrow_R');
break;
case 'B' :
properties = {
'left' : e_l + e_w/2 - $('#tour_tooltip').width()/2 + 'px',
'top' : e_t - $('#tour_tooltip').height() + 'px'
};
$('#tour_tooltip').find('span.tooltip_arrow').addClass('tooltip_arrow_B');
break;
case 'L' :
properties = {
'left' : e_l + e_w + 'px',
'top' : e_t + e_h/2 - $('#tour_tooltip').height()/2 + 'px'
};
$('#tour_tooltip').find('span.tooltip_arrow').addClass('tooltip_arrow_L');
break;
}
/*
if the element is not in the viewport
we scroll to it before displaying the tooltip
*/
var w_t = $(window).scrollTop();
var w_b = $(window).scrollTop() + $(window).height();
//get the boundaries of the element + tooltip
var b_t = parseFloat(properties.top,10);
if(e_t < b_t)
b_t = e_t;
var b_b = parseFloat(properties.top,10) + $('#tour_tooltip').height();
if((e_t + e_h) > b_<img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=question&id=18483&image=1&table=forumtopics' class='bbc_emoticon' alt='B)' />
b_b = e_t + e_h;
if((b_t < w_t || b_t > w_<img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=question&id=18483&image=2&table=forumtopics' class='bbc_emoticon' alt='B)' /> || (b_b < w_t || b_b > w_<img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=question&id=18483&image=3&table=forumtopics' class='bbc_emoticon' alt='B)' />){
$('html, body').stop()
.animate({scrollTop: b_t}, 500, 'easeInOutExpo', function(){
//need to reset the timeout because of the animation delay
if(autoplay){
clearTimeout(showtime);
showtime = setTimeout(nextStep,step_config.time);
}
//show the new tooltip
$('#tour_tooltip').css(properties).show();
});
}
else
//show the new tooltip
$('#tour_tooltip').css(properties).show();
}
function removeTooltip(){
$('#tour_tooltip').remove();
}
function showControls(){
/*
we can restart or stop the tour,
and also navigate through the steps
*/
var $tourcontrols = '<div id="tourcontrols" class="tourcontrols">';
$tourcontrols += '<p>First time here?</p>';
$tourcontrols += '<span class="button" id="activatetour">Start the tour</span>';
if(!autoplay){
$tourcontrols += '<div class="nav"><span class="button" id="prevstep" style="display:none;">< Previous</span>';
$tourcontrols += '<span class="button" id="nextstep" style="display:none;">Next ></span></div>';
}
$tourcontrols += '<a id="restarttour" style="display:none;">Restart the tour</span>';
$tourcontrols += '<a id="endtour" style="display:none;">End the tour</a>';
$tourcontrols += '<span class="close" id="canceltour"></span>';
$tourcontrols += '</div>';
$('BODY').prepend($tourcontrols);
$('#tourcontrols').animate({'right':'30px'},500);
}
function hideControls(){
$('#tourcontrols').remove();
}
function showOverlay(){
var $overlay = '<div id="tour_overlay" class="overlay"></div>';
$('BODY').prepend($overlay);
}
function hideOverlay(){
$('#tour_overlay').remove();
}
});
Note that this code is 99% identical to the javascript that is included in the "index.html" file which you downloaded from the example (look starting around line 76 of that html document).
I only altered a few lines to make it work with older jquery version. I take no credit for coming-up with the code itself, only for modifying it enough to work with PHPR 5.3.
Step 7:
Add class tag attributes to the html elements on your page like the example given on the tympanus.net site (per example link given in bullet list above). You typically add classes like "tour_1" or "tour_2" etc. However, you can also simply alter the JS file you created (ex: "codrops_instructions_list.js") to use existing classes already on your page (as I did in the first tour element I show in the code above such as "menuitemactive".
Step 8:_
To place the popup boxes with greater accuracy you can simply add <SPAN> tags inside your page elements to match with the corresponding tour stop you want to display on page. Ex: <SPAN class="tour3"> etc. Make sure you close the </SPAN> as well.
Step 9:_
Celebrate! :-)
Note: You may have to tweak the jsuqerytour.css file included in the codrops/css folder (css coming from the extracted file download from tympanus.net) to properly display things. For example, in the .tooltip class I added "color: white" to it. You'll just have to play around to get coloring to suit your needs.
Hope this helps. Please feel free to post other examples if you have them here!
Cheers,
Marcelo Ramagem
|
|