Blogger Ever

How to make a sliding panel in responsive design using Jquery mobile and Jquery plugin?

Using jQuery plugin or jQuery Mobile your can make a very attractive sliding panel specially for responsive design.
The example of Facebook mobile website

In a post before I highlighted an issue related to responsive design,according to which if in the small screen sizes the sidebar goes down.It will decrease the user interface,hence the solution is to use sliding panel for sidebar.Therefore this post will solve your sliding panel problem using Jquery panel plugin or Jquery mobile.

jQuery Plugin jPanel

Lets start with our first option of Jquery panel plugin.So the plugin I would like to suggest is to use jPanel which is easy to use plugin.So lets begin with it.
First add Jquery in your template just after <head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
Now add jPanel script in your template.Add the following line before </head>
<script src='http://jpanelmenu.com/jquery.jpanelmenu.js'></script>
Then trigger the plugin using Jquery in a DOM ready function.Like below one
$(function(){
var jPM = $.jPanelMenu({
menu: '#custom-menu-selector',
trigger: '.custom-menu-trigger-selector'
});
jPM.on();
}); 
Just change the menu id or class and trigger id or class.To add more options like animation and more you can refer the jPanel options.The demo is below
See the Pen Demo for jPanel plugin by Mohammad Hamza Dhamiya (@mohammadhamza) on CodePen

Using jQuery Mobile

How to make a sliding panel in responsive design using Jquery mobile and Jquery plugin?

Okay,now its time for second and most considered topic of this post.The Jquery Mobile is developed by Jquery foundation and required Jquery to work with it.It assist to work with responsive website to create a mobile website experience more refined.It has provided many widgets to work with but I would like to discus the Panel.

So the first step is to add Jquery,Jquery Mobile JS and Jquery Mobile CSS which you will find from Jquery Mobile website.
To work with Jquery Mobile Panel widget you must have to create a format.The outer most wrapper should have data-role="page".Then header,main content and footer should be the sibling of panel.Like I've done below.
<div id='outer' data-role='page'>
    <div class='header' data-role='header'></div>
    <div class='content-wrapper' data-role='content'></div>
    <div id='sidebar' data-role='panel' data-position='right' data-display='push'></div>
</div>
Now just for clarification,with data-role I've added data-position and data-display.Actually the reason is data-position will declare the position of sliding panel that is either right or left.The data-display will show the way that panel will be displayed,the values of data-display are push,reveal and overlay.

The above format will work fine.Now its time to add trigger button.Its simple to add button,just make sure that the button will go under <a> tag and the value of href will be the class or id of the panel (which is sidebar in the above format).If the panel have id then id goes with hash(#) and if it is class then a dot(.).Accordingly,the button will be something like below one.
<a href="#sidebar" data-role="button" data-inline="true" data-icon="bars">Button</a>
The others are to just add styling options into button.If a user clicks on this button then the panel will not cover the whole page but will leave some space,if a user again click on the open button or on the page the panel will be closed,but in any case if you want to create a close button then just add data-rel='close' and the href will point to the class or id of the page.
<a href="#outer" data-rel="close" data-role="button" data-theme="c" data-icon="delete" data-inline="true">Close panel</a>
Now its time to have a demo.Look at the pen for demo.
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.