Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

In this post, we are going to see how we can change the layout of a page dynamically, without writing any CSS styles for the page. Sounds cool, right? Are you afraid of writing the CSS styles which will suit for all screens like mobile, tablets, monitors, high resolution? As I am not a good designer, I', worried all the time about resolution issues whenever I use any custom styles. Here we will be using a jQuery plugin called jQuery Layout and we have options to set our Footer, Side bar, Header, and many more. Personally, I liked this plugin, which is why I am sharing some information about it.

Download Source Code

Background

I came to know about this plugin when I was searching for some page layout for my application. Then I just installed it and started using. It is pretty simple to use. You can always download the files from the plugin page here.

Using the Code

To start with this plugin, the first thing you are required to do is add the necessary references. We are going to use three references, jQuery, jquery.layout-latest.js, layout-default-latest.css.

Here, we uses applyDefaultStyles:true, this is for ensuring all the required default conditions/options are being applied automatically. Now if you run your page, you will see a layout like the following.

Change Page Layout Dynamically

And, this is how your page will look like when you toggle panes.

Change Page Layout Dynamically When Toggling

The following are the key features offered by the development team as they have mentioned in their plugin home page here.

Conclusion

Did I miss anything that you may think which is needed? Have you ever wanted to do this requirement? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.