I have found the very nice jQuery pageslide plugin. This plugin allows you to slide a webpage over to reveal an additional interaction pane.
I’ve modified the dynamic CSS example that I wrote in a previous article and used the pageslide plugin to display the CSS theme choices. In the markup I define some example content and a div for a preferences pane.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Pageslide.js and Dynamic CSS Tutorial</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <link rel="stylesheet" type="text/css" href="css/base.css"> <link rel="stylesheet" type="text/css" href="css/jquery.pageslide.css"> <link id="theme" rel="stylesheet" type="text/css" href="css/blue.css"> </head> <body> <div id="content"> <h1>Dynamic CSS</h1> <p> In this example, it is demonstrated how to use the JQuery pageslide.js plugin on a web page. This cool plugin is used to create a separate panel where the theme for the page can be set.</p> <ul id="nav"> <li><a href="#preferences" class="prefs-link">Choose Theme</a></li> </ul> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <p>Paragraph</p> <i>Italic</i> <u>Underlined</u> <a href="#">Anchor</a> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> </div> <div id="preferences" style="display:none"> <h2>Preferences</h2> <p>Theme</p> <ul id="theme-nav"> <li><a id="blue" class="blue theme selected" href="#blue"></a></li> <li><a id="gray" class="gray theme" href="#gray"></a></li> <li><a id="red" class="red theme" href="#red"></a></li> </ul> <a href="javascript:$.pageslide.close()">Close</a> </div> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="js/jquery.pageslide.min.js"></script> <script type="text/javascript" src="js/script.js"></script> </body> </html> |
For the CSS theming, I defined a base CSS file and a few theme files.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
/* Specify the width of your pageslide here */ #pageslide { width: 10%; padding: 20px; /* These styles are optional, and describe how the pageslide will look */ background-color: #000; color: #FFF; } ul#theme-nav { padding-left: 0; list-style: none; width: 100%; margin-bottom: 40px; } ul#theme-nav:after { content: "�020"; display: block; height: 0; clear: both; visibility: hidden; } ul#theme-nav li { float: left; width: 20%; text-align: center; margin: 5px; } ul#theme-nav a { display: block; padding: 10px; width: 10px; height: 10px; border-style: dotted; border-color: gray; border-width: 1px; } ul#theme-nav a:hover { border-style: solid; border-color: white; border-width: 1px; } ul#theme-nav .blue { background: blue; color: blue; } ul#theme-nav .gray { background: gray; color: gray; } ul#theme-nav .red { background: red; color: red; } ul#theme-nav li .selected { border-color: white; border-style: solid; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
body { background-color: gray; font: 14px/18px "Helvetica"; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: none; } a,a:visited { color: blue; text-decoration: none; } a:hover { color: aqua; } h1,h2,h3 { color: blue; } #content { width: 50%; padding: 10px; margin: 0 auto; } ul#nav { padding-left: 0; list-style: none; width: 100%; margin-bottom: 40px; } ul#nav:after { content: "�020"; display: block; height: 0; clear: both; visibility: hidden; } #content ul#nav li { float: left; width: 20%; text-align: center; } #content ul#nav a { display: block; background: #000; color: #FFF; font-weight: bold; padding: 10px; } #content ul#nav a:hover { background: blue; } |
The Javascript is straightforward.
I applies the pageslide plugin on the div created for the pane.
When clicking one of the colours on the side pane, it replaces the theme CSS file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(document).ready(function() { $('.theme').click(function() { var value = $(this).attr("id"); var file = "css/"+value+".css"; // clear the selected theme and mark one as selected $('.theme').each(function () { $(this).removeClass('selected'); }); $(this).addClass('selected'); // apply the theme $("#theme").attr("href", file); return false; }); $(".prefs-link").pageslide({ modal: true }); }); |
Have fun!
Demo Download Source
