I have the files needed and the following html page in my project. but when I run the page I don't get the floating clickable image they show in the example on the pageguide website.
What am I missing here? or doing wrong? The following iwas taken directly from the pageguide example page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- Step 1: Include stylesheet -->
<link href="pageguide.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Step 3: Include initialization code -->
<script type="text/javascript">
$(document).ready(function () {
tl.pg.init();
});
</script>
<div class="wrapper">
<section>
<div class="big_arrow_right">
<span>See pageguide.js in action!</span>
</div>
<p class="description">
pageguide.js is an interactive visual guide to elements on web pages.
<br/>
Instead of cluttering your interface with static help message, or explanatory text,
<br/>
add a pageguide and let your users learn about new features and functions.
</p>
<div class="first_ftw">
Need some more information about this box?<br/>Click the page guide button!
</div>
<div class="second_ftw">
This too! Click the page guide button!
</div>
<h2>
It's easy to implement and non-invasive:
</h2>
<ol class="steps">
<li>Add references to pageguide.js & pageguide.css</li>
<li>Add a simple <ul> to pages you want page guide to appear on</li>
<li>
Add the following block of code to your page
<pre><code><script type="text/javascript"><br/> $(document).ready(function() {<br/> tl.pg.init();<br/> })<br/></script></code></pre>
</li>
<li>Profit! (and measure it with built-in interaction tracking hooks).</li>
</ol>
<p>
If you like to learn by example, view the source of this page and check out how we did it!
</p>
<div class="more_here">
<span>
More down here? Let pageguide.js take care of the scrolling for you.
</span>
</div>
<div class="way_down_here">
Check it out on Github!
</div>
</section>
</div>
<!-- Step 2: the ul element where you specify tour targets and content -->
<ul id="tlyPageGuide" data-tourtitle="The best way to highlight functionality">
<li class="tlypageguide_left" data-tourtarget=".first_ftw">
<div>
pageguide.js attaches CSS pseudo elements to whatever features you define on your pages.
The numbered arrows can be placed on top, bottom, left or right of whatever you are trying to highlight.
</div>
</li>
<li class="tlypageguide_left" data-tourtarget=".second_ftw">
<div>
Change the style of the pageguide as much as you want. We include both CSS and LESS in the repo. We even attach a class
to the body of the page when the guide is open.
</div>
</li>
<li class="tlypageguide_left" data-tourtarget=".more_here">
<div>
The page guide also scrolls for you. Just use the forward and back arrows on the left to move been elements.
</div>
</li>
<li class="tlypageguide_top" data-tourtarget=".way_down_here">
<div>
We include custom tracking for all the actions of the pageguide. Simply toss in your tracking code from Mixpanel, KISSMetrics, HubSpot, etc.
and find out what people are interested in.
</div>
</li>
</ul>
<script src="jquery-1.8.2.js" type="text/javascript"></script>
<!-- Step 1: Include JavaScript -->
<script src="pageguide.js" type="text/javascript"></script>
</body>
</html>
Make sure script sequence is in correct order. put your custom script at the end. Try following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- Step 1: Include stylesheet -->
<link href="pageguide.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<section>
<div class="big_arrow_right">
<span>See pageguide.js in action!</span>
</div>
<p class="description">
pageguide.js is an interactive visual guide to elements on web pages.
<br/>
Instead of cluttering your interface with static help message, or explanatory text,
<br/>
add a pageguide and let your users learn about new features and functions.
</p>
<div class="first_ftw">
Need some more information about this box?<br/>Click the page guide button!
</div>
<div class="second_ftw">
This too! Click the page guide button!
</div>
<h2>
It's easy to implement and non-invasive:
</h2>
<ol class="steps">
<li>Add references to pageguide.js & pageguide.css</li>
<li>Add a simple <ul> to pages you want page guide to appear on</li>
<li>
Add the following block of code to your page
<pre><code><script type="text/javascript"><br/> $(document).ready(function() {<br/> tl.pg.init();<br/> })<br/></script></code></pre>
</li>
<li>Profit! (and measure it with built-in interaction tracking hooks).</li>
</ol>
<p>
If you like to learn by example, view the source of this page and check out how we did it!
</p>
<div class="more_here">
<span>
More down here? Let pageguide.js take care of the scrolling for you.
</span>
</div>
<div class="way_down_here">
Check it out on Github!
</div>
</section>
</div>
<!-- Step 2: the ul element where you specify tour targets and content -->
<ul id="tlyPageGuide" data-tourtitle="The best way to highlight functionality">
<li class="tlypageguide_left" data-tourtarget=".first_ftw">
<div>
pageguide.js attaches CSS pseudo elements to whatever features you define on your pages.
The numbered arrows can be placed on top, bottom, left or right of whatever you are trying to highlight.
</div>
</li>
<li class="tlypageguide_left" data-tourtarget=".second_ftw">
<div>
Change the style of the pageguide as much as you want. We include both CSS and LESS in the repo. We even attach a class
to the body of the page when the guide is open.
</div>
</li>
<li class="tlypageguide_left" data-tourtarget=".more_here">
<div>
The page guide also scrolls for you. Just use the forward and back arrows on the left to move been elements.
</div>
</li>
<li class="tlypageguide_top" data-tourtarget=".way_down_here">
<div>
We include custom tracking for all the actions of the pageguide. Simply toss in your tracking code from Mixpanel, KISSMetrics, HubSpot, etc.
and find out what people are interested in.
</div>
</li>
</ul>
<script src="jquery-1.8.2.js" type="text/javascript"></script>
<!-- Step 1: Include JavaScript -->
<script src="pageguide.js" type="text/javascript"></script>
<!-- Step 3: Include initialization code -->
<script type="text/javascript">
$(document).ready(function () {
tl.pg.init();
});
</script>
</body>
</html>
You can put the above code block anywhere in the content page or in the master page. But take the reference of the js and css files using resolveclienturl like below-
Jackxxx
Contributor
3060 Points
2807 Posts
How to use the PageGuide plug-in
Dec 27, 2012 04:38 PM|LINK
I have the files needed and the following html page in my project. but when I run the page I don't get the floating clickable image they show in the example on the pageguide website.
What am I missing here? or doing wrong? The following iwas taken directly from the pageguide example page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <!-- Step 1: Include stylesheet --> <link href="pageguide.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- Step 3: Include initialization code --> <script type="text/javascript"> $(document).ready(function () { tl.pg.init(); }); </script> <div class="wrapper"> <section> <div class="big_arrow_right"> <span>See pageguide.js in action!</span> </div> <p class="description"> pageguide.js is an interactive visual guide to elements on web pages. <br/> Instead of cluttering your interface with static help message, or explanatory text, <br/> add a pageguide and let your users learn about new features and functions. </p> <div class="first_ftw"> Need some more information about this box?<br/>Click the page guide button! </div> <div class="second_ftw"> This too! Click the page guide button! </div> <h2> It's easy to implement and non-invasive: </h2> <ol class="steps"> <li>Add references to pageguide.js & pageguide.css</li> <li>Add a simple <ul> to pages you want page guide to appear on</li> <li> Add the following block of code to your page <pre><code><script type="text/javascript"><br/> $(document).ready(function() {<br/> tl.pg.init();<br/> })<br/></script></code></pre> </li> <li>Profit! (and measure it with built-in interaction tracking hooks).</li> </ol> <p> If you like to learn by example, view the source of this page and check out how we did it! </p> <div class="more_here"> <span> More down here? Let pageguide.js take care of the scrolling for you. </span> </div> <div class="way_down_here"> Check it out on Github! </div> </section> </div> <!-- Step 2: the ul element where you specify tour targets and content --> <ul id="tlyPageGuide" data-tourtitle="The best way to highlight functionality"> <li class="tlypageguide_left" data-tourtarget=".first_ftw"> <div> pageguide.js attaches CSS pseudo elements to whatever features you define on your pages. The numbered arrows can be placed on top, bottom, left or right of whatever you are trying to highlight. </div> </li> <li class="tlypageguide_left" data-tourtarget=".second_ftw"> <div> Change the style of the pageguide as much as you want. We include both CSS and LESS in the repo. We even attach a class to the body of the page when the guide is open. </div> </li> <li class="tlypageguide_left" data-tourtarget=".more_here"> <div> The page guide also scrolls for you. Just use the forward and back arrows on the left to move been elements. </div> </li> <li class="tlypageguide_top" data-tourtarget=".way_down_here"> <div> We include custom tracking for all the actions of the pageguide. Simply toss in your tracking code from Mixpanel, KISSMetrics, HubSpot, etc. and find out what people are interested in. </div> </li> </ul> <script src="jquery-1.8.2.js" type="text/javascript"></script> <!-- Step 1: Include JavaScript --> <script src="pageguide.js" type="text/javascript"></script> </body> </html>Jackxxx
Jackxxx
Contributor
3060 Points
2807 Posts
Re: How to use the PageGuide plug-in
Dec 27, 2012 05:58 PM|LINK
I have gotten it to work with a single html page. What I really need to make it work with content pages that use master pages.
So far no luck.
Any suggestions are very welcomed!
Jackxxx
urenjoy
Star
13383 Points
2006 Posts
Re: How to use the PageGuide plug-in
Dec 28, 2012 05:29 AM|LINK
Make sure script sequence is in correct order. put your custom script at the end. Try following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <!-- Step 1: Include stylesheet --> <link href="pageguide.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="wrapper"> <section> <div class="big_arrow_right"> <span>See pageguide.js in action!</span> </div> <p class="description"> pageguide.js is an interactive visual guide to elements on web pages. <br/> Instead of cluttering your interface with static help message, or explanatory text, <br/> add a pageguide and let your users learn about new features and functions. </p> <div class="first_ftw"> Need some more information about this box?<br/>Click the page guide button! </div> <div class="second_ftw"> This too! Click the page guide button! </div> <h2> It's easy to implement and non-invasive: </h2> <ol class="steps"> <li>Add references to pageguide.js & pageguide.css</li> <li>Add a simple <ul> to pages you want page guide to appear on</li> <li> Add the following block of code to your page <pre><code><script type="text/javascript"><br/> $(document).ready(function() {<br/> tl.pg.init();<br/> })<br/></script></code></pre> </li> <li>Profit! (and measure it with built-in interaction tracking hooks).</li> </ol> <p> If you like to learn by example, view the source of this page and check out how we did it! </p> <div class="more_here"> <span> More down here? Let pageguide.js take care of the scrolling for you. </span> </div> <div class="way_down_here"> Check it out on Github! </div> </section> </div> <!-- Step 2: the ul element where you specify tour targets and content --> <ul id="tlyPageGuide" data-tourtitle="The best way to highlight functionality"> <li class="tlypageguide_left" data-tourtarget=".first_ftw"> <div> pageguide.js attaches CSS pseudo elements to whatever features you define on your pages. The numbered arrows can be placed on top, bottom, left or right of whatever you are trying to highlight. </div> </li> <li class="tlypageguide_left" data-tourtarget=".second_ftw"> <div> Change the style of the pageguide as much as you want. We include both CSS and LESS in the repo. We even attach a class to the body of the page when the guide is open. </div> </li> <li class="tlypageguide_left" data-tourtarget=".more_here"> <div> The page guide also scrolls for you. Just use the forward and back arrows on the left to move been elements. </div> </li> <li class="tlypageguide_top" data-tourtarget=".way_down_here"> <div> We include custom tracking for all the actions of the pageguide. Simply toss in your tracking code from Mixpanel, KISSMetrics, HubSpot, etc. and find out what people are interested in. </div> </li> </ul> <script src="jquery-1.8.2.js" type="text/javascript"></script> <!-- Step 1: Include JavaScript --> <script src="pageguide.js" type="text/javascript"></script> <!-- Step 3: Include initialization code --> <script type="text/javascript"> $(document).ready(function () { tl.pg.init(); }); </script> </body> </html>Jackxxx
Contributor
3060 Points
2807 Posts
Re: How to use the PageGuide plug-in
Dec 28, 2012 02:35 PM|LINK
Any ideas on how to port this over to MasterPage and/or Content Page?
Jackxxx
asteranup
All-Star
30184 Points
4906 Posts
Re: How to use the PageGuide plug-in
Dec 31, 2012 03:27 AM|LINK
Hi,
As soon as your js code is inside document.ready-
You can put the above code block anywhere in the content page or in the master page. But take the reference of the js and css files using resolveclienturl like below-
http://delicious.com/anupdg/filereference
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog