Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Joyride: Foundation 4 Framework

In this article we will discuss about another feature of Foundation, a very useful and unique feature called Joyride.

Introduction

In the previous article we discussed about Foundation 4 framework and also we saw demonstration of a feature called orbit.

What is Joyride?

At times you would want to take the user or visitor of your site through a tour of your web page. Say for example Google does this when launching new features in many of their applications. By doing so you would make your user understand which part does what on your application. This is what can be achieved using the joyride feature of Foundation 4.

Joyride uses a list which couples each list item, holding your tour stop, with an element on the page. This list can be either an ordered list, or unordered list, but must have both the “joyride-list” class and the “data-joyride” attribute.

Joyride demo

Let us see how to implement joyride feature in your web page. Let us see a basic HTML as in Listing 1:

Listing 1: Basic HTML page

<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Foundation 4</title>

<!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
<link rel="stylesheet" href="foundation/css/normalize.css" />
<link rel="stylesheet" href="foundation/css/foundation.css" />
<scriptsrc="foundation/js/vendor/custom.modernizr.js"></script>

</head>
<body class="twelve columns">
<!--Here is the markup our JS creates for you -->

<div class="twelve columns">
<h4 id="firstStop" class="so-awesome">Build Joyride with HTML- Stop 1</h4>

<h4 id="thirdStop" class="so-awesome">Build Joyride with HTML- Stop 2</h4>

<h4 id="secondStop" class="so-awesome">Build Joyride with HTML- Stop 3</h4>

</div>


</body>
</html>

Details of the above page are:

  • We have included the Foundation related flysheets: normalize.css, foundation.css. Also included custom.modernizr.js.
  • Next we have three headers which will be out stops during our tour of this page. Each of these are given respective id's.

To incorporate the joyride feature:

  • At the bottom of your page but inside of the body, place either an ol or ul with the data-joyride attribute.
  • This list shall contain all the stops on your tour.
  • To associate the tour stops with an item on your page, make sure the ID and data-id match between the two.
  • If you do not associate an id, the tour stop will take on a modal style, positioning itself in the middle of the screen.

Now let us modify our code in Listing 1 to incorporate this feature.

Listing 2: Revised HTML code

<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Foundation 4</title>

<!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
<link rel="stylesheet" href="foundation/css/normalize.css" />
<link rel="stylesheet" href="foundation/css/foundation.css" />
<scriptsrc="foundation/js/vendor/custom.modernizr.js"></script>

</head>
<body class="twelve columns">
<!-- Here is the markup our JS creates for you -->

<div class="twelve columns">
<h4 id="firstStop" class="so-awesome">Build Joyride with HTML- Stop 1</h4>

<h4 id="thirdStop" class="so-awesome">Build Joyride with HTML- Stop 2</h4>

<h4 id="secondStop" class="so-awesome">Build Joyride with HTML- Stop 3</h4>

</div>
<ol class="joyride-list" data-joyride>
<li data-id="firstStop" data-text="Next">
<h4>Stop #1</h4>
<p>Hello and welcome to the Joyride documentation page.</p>
</li>
<li data-id="secondStop" data-class="custom so-awesome" data-text="Next">
<h4>Stop #2</h4>
<p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
</li>
<li data-id="thirdStop" data-button="Next" data-options="tipLocation:top;tipAnimation:fade">
<h4>Stop #3</h4>
<p>Get the details right by styling Joyride with a custom stylesheet!</p>
</li>
<li data-button="End">
<h4>End</h4>
<p>It works as a modal too!</p>
</li>
</ol>

</body>
</html>

Add JavaScript files

Now that our code is ready, to start using this feature, we need to include the JS files foundation.joyride.js and foundation.cookie.js AFTER the foundation.js file as shown in Listing 3:

Listing 3: JS files included

<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Foundation 4</title>

<!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
<link rel="stylesheet" href="foundation/css/normalize.css" />
<link rel="stylesheet" href="foundation/css/foundation.css" />
<scriptsrc="foundation/js/vendor/custom.modernizr.js"></script>

</head>
<body class="twelve columns">
<!-- Here is the markup our JS creates for you -->

<div class="twelve columns">
<h4 id="firstStop" class="so-awesome">Build Joyride with HTML- Stop 1</h4>

<h4 id="thirdStop" class="so-awesome">Build Joyride with HTML- Stop 2</h4>

<h4 id="secondStop" class="so-awesome">Build Joyride with HTML- Stop 3</h4>

</div>
<ol class="joyride-list" data-joyride>
<li data-id="firstStop" data-text="Next">
<h4>Stop #1</h4>
<p>Hello and welcome to the Joyride documentation page.</p>
</li>
<li data-id="secondStop" data-class="custom so-awesome" data-text="Next">
<h4>Stop #2</h4>
<p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
</li>
<li data-id="thirdStop" data-button="Next" data-options="tipLocation:top;tipAnimation:fade">
<h4>Stop #3</h4>
<p>Get the details right by styling Joyride with a custom stylesheet!</p>
</li>
<li data-button="End">
<h4>End</h4>
<p>It works as a modal too!</p>
</li>
</ol>
<script>
document.write('<script src=foundation/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>
<scriptsrc="foundation/js/foundation/foundation.js"></script>
<scriptsrc="foundation/js/foundation/foundation.cookie.js"></script>
<scriptsrc="foundation/js/foundation/foundation.joyride.js"></script>
<!-- Other JS plugins can be included here -->

</body>
</html>

We need to initialize the Joyride feature unlike other plugins as in Listing 4:

<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Foundation 4</title>

<!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
<link rel="stylesheet" href="foundation/css/normalize.css" />
<link rel="stylesheet" href="foundation/css/foundation.css" />
<scriptsrc="foundation/js/vendor/custom.modernizr.js"></script>

</head>
<body class="twelve columns">
<!-- Here is the markup our JS creates for you -->

<div class="twelve columns">
<h4 id="firstStop" class="so-awesome">Build Joyride with HTML- Stop 1</h4>

<h4 id="thirdStop" class="so-awesome">Build Joyride with HTML- Stop 2</h4>

<h4 id="secondStop" class="so-awesome">Build Joyride with HTML- Stop 3</h4>

</div>
<ol class="joyride-list" data-joyride>
<li data-id="firstStop" data-text="Next">
<h4>Stop #1</h4>
<p>Hello and welcome to the Joyride documentation page.</p>
</li>
<li data-id="secondStop" data-class="custom so-awesome" data-text="Next">
<h4>Stop #2</h4>
<p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
</li>
<li data-id="thirdStop" data-button="Next" data-options="tipLocation:top;tipAnimation:fade">
<h4>Stop #3</h4>
<p>Get the details right by styling Joyride with a custom stylesheet!</p>
</li>
<li data-button="End">
<h4>End</h4>
<p>It works as a modal too!</p>
</li>
</ol>
<script>
document.write('<script src=foundation/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>
<script src="foundation/js/foundation/foundation.js"></script>
<script src="foundation/js/foundation/foundation.cookie.js"></script>
<script src="foundation/js/foundation/foundation.joyride.js"></script>
<!-- Other JS plugins can be included here -->
<script>
$(document).foundation('joyride', 'start');
</script>
</body>
</html>

Now our code is ready. Open your html page in the browser and an output similar to following images would appear (Click the next button to take a tour of the site):

Stop 1

Figure 1: Stop 1

Stop 2

Figure 2: Stop 2

Stop 3

Figure 3: Stop 3

Conclusion:

This article emphasized on one of the features of Foundation 4 framework, Joyride. This feature would be of great help if used properly in your web pages. Hope you like the article.



I''m a full stack developer with around 10+ yrs of experience. I enjoy writing technical articles on upcoming technical trends.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login