Build a nice sliding help section using jQuery

For any moderately complex web application a help section is mandatory. Most of us rely on displaying the help in a popup or a different window. One other interesting way is to display the help section beneath the main window, which then slides to display the help section below.

PageSlide is a jQuery plugin which slides a webpage over to reveal an additional interaction pane; this provides an additional browser real-estate within which you can display extra content – a contextual help page for example.

The HTML

We start with a simple HTML5 document that will be the backbone of this example.

index.html
<!doctype html>
<html lang="en">
<head>
<title>jQuery PageSlide Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery.pageslide.css" />
<style>
    body { 
        background: #f4f4f4;
        font: 14px/18px Helvetica, Arial, sans-serif;
        color: #666; 
    }
 
    #content {
        width: 940px;
        padding: 10px;
        margin: 0 auto;
    }
    #content h1 { color: #333; line-height: 1em; }
    #content ul { padding-left: 0; list-style: none; }
    #content ul li { margin-bottom: 20px; }
</style>
</head>
<body>
<div id="content">
    <h1>PageSlide Basic Demo</h1>
    <p>Below are a couple examples of how the plugin works:</p>
    <ul>
        <li>
            <a href="help.html" class="help">Slide to the right, 
                              nd load content from a secondary page.</a>
            <p>
            </p>
        </li>
    </ul>
</div>
<!-- Javascript includes -->
<script src="../lib/jquery-1.7.1.min.js"></script>
<script src="../jquery.pageslide.min.js"></script>
</body>
</html>

Nothing out of the ordinary here. We create some default style, load the stylesheet for the Page Slider, and JavaScript at the end. The .help class along with the href tag will link to the PageSlider. Once the main page slides, we load additional content from a secondary page into the new section. The sample secondary page is given below.

Secondary page

The secondary page is shown below.

help.html
<!doctype html>
<html lang="en">
<head>
<style>
    body {
        font: 14px/18px Helvetica, Arial, sans-serif;
        color: #EFEFEF;
        background: transparent;
        padding: 20px 0;
    }
 
    h2 { color: #FFF; }
</style>
</head>
<body>
<div id="secondary">
    <h2>Application Help</h2>
    <p>This is an example of a PageSlide loading content into an iframe. 
       Click on the main page to close the slide.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
       nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
       reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
       pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
       culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>

PageSlide jQuery kickin

Finally we add the following line to the end of the index.html document. This triggers the page slide into action, revealing the “supposedly” hidden content frame.

<script>
    /* Default pageslide, moves to the right */
    $(".help").pageslide();
</script>

By default the page slides to the ‘right’, but you can slide it to the ‘left’ with additional parameters.

<script>
    /* Default pageslide, moves to the left*/
    $(".help").pageslide({ direction: "left"});
</script>

Done

You can use PageSlide to display additional help, to show application options or settings, or any other content that you wish to display in the same browser window.

Download Demo files
Downloads : 1402 / File size : 38.2 kB


2 thoughts on “Build a nice sliding help section using jQuery

Comments are closed.