Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:6Length:49 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Writing the Markup

Let’s start our little project by writing the necessary markup. The tour should be as generic as possible and should work on any webpage. We’re going to create it in such a way that it can be used as a plugin which we can load into our page, whatever that page might be. Let’s see how we can do that.

2.1 Writing the Markup

Let's start our little project by writing the necessarily markup, and this will be surprisingly simple because we want to make this tour a standalone component basically. A standalone JavaScript component so that we can take it and use it anywhere we want in any kind of webpage. So on the markup aspect, the only thing that we're gonna do is make slight changes to an existing page, right. And this existing page that I have right here is one that I grabbed from the Foundation for Sites demos, and it's perfect for the purposes of this course. So the way this tour will work is we're gonna designate a couple of elements that will be highlighted. And each element will have a title and a description attached to it. And then, we're gonna have a tour window that's gonna display this information, along with three buttons. We're gonna have a previous, a next, and a close button, right. Using the previous and next button will just move the tour window from element to element, right, and so we can see all of them, this is basically it. The close button will of course close the tour window. So, having a look at the markup here, we just have some basic markup styled with foundation. I am loading a foundation.css. Here I have an app.css that's currently blank. This is what we'll use to create the styles for the tour. And we have an app.js, which is also currently blank. All right, so on the markup, what I'm gonna do is start adding a data attribute to the elements that I want to be featured in the tour. I'm gonna be using data attributes because I think it's the easiest way. And the value of that data attribute will actually be a valid JSON format that we can then take and we can parse in JavaScript and get an object. Well, you'll see how in just a little bit. But for now, let's go to the very first item, which is this menu. And I'm actually going to add my data attribute right here. I'm gonna say data-aptour. Of course this can be any name you want, I'm gonna be using aptour. And for the contents, I'm gonna open some curly brackets like this and I'll be using, as I said, valid JSON format. So for this I'm gonna be giving it a title, let's say Responsive menu, so that's the first entry. Then I'm gonna add a field for description and finally I'm going to add a position. And this will indicate where we want to display the tour window relative to its parent element. So for this, because it's here at the top, I'm gonna want to display it at the bottom. So, I'm gonna say bottom. Now I'm simply going to copy this attribute and I'm gonna find a couple more items that I want to feature in my tour. And the second one will be this, so I'm just gonna paste it in and just adjust the title and the description. And as for the position, well I'm gonna put it, because the element is this one, I'm gonna put it on the left side, so I'm gonna say left, all right? Next, let's add a tour stop maybe on this element. So that is, it is this one, right here. Again, adjust the information, and for position let's put it on the right side. Next, maybe add another one right here on this element. And that's gonna be the last one in this series, so callout, simply add it here, and position. You know what, actually, I'm just going to copy in this exact code. I'm simply going to change the position to left. And finally, let's put one in the footer. Let's say on this Copyright menu text here or the menu column. You can do it either way, let's put it on the column here, all right? I've added just a random description there. And position, let's set it to top. So, right now the page looks exactly the same, nothing is changed basically. All I did was add a data attribute and that data attribute by itself, it doesn't do anything. It doesn't affect the rendering of the page, but we can use that later on, we can read it from JavaScript and we can get all the information that we need. Now we have a page to work on, so it's time to start working on the actual tour scripts. We'll do that in the next lesson, see you there.