Chapter 3. Creating a Website Tour

By now, we have become familiar with the extremely useful draggable and droppable components of jQuery UI, both of which were used in the previous chapter. We will now explore some other components in this chapter that will prove to be a valuable asset in your web development toolbox. We will learn practical usage of the dialog, tooltip, and accordion components together.

If you change the layout of your website, it becomes difficult for regular users to navigate the new website initially. This might also mean a loss of visitors, if users find difficulty in searching for specific links or sections of the website they were familiar with earlier.

We will address this problem in this chapter and solve it by creating a website tour for a page. We will first design a simple home page for an imaginary company, and then create the tour to navigate different sections in the page. We will place a Take a Tour button on the page. Clicking on this button will start the tour. Each step of the tour will be a jQuery UI dialog box that will be positioned near the link or section we want to explain. The dialog box will have a title specific to the section and some text/HTML that will explain the functionality of the link or section. We will also place three buttons called Previous, Next, and End Tour to navigate the tour. While navigating with the Previous and Next buttons, it is possible that a section where the tour box has to be displayed is not in the current viewport. In such a case, we will scroll the page using jQuery. This will make sure that the tour box is visible in viewport.

Apart from this, there will also be helpful tooltips in different parts of the page. We will use the following jQuery UI components to build the complete page with the tour feature: