Switch Web Page into Document Mode on Click Using jQuery

Have you noticed that some websites have a button to switch their web page into document mode to make the article easy reading for users eyes. We are going to implement that functionality using jQuery and CSS.

Preparation

Lets say we have a web page that contains an article, header, footer and sidebar etc. like below.

First we need to check whether the button has the class name “toggled“. If yes we need to refresh the page otherwise we need to add the same class name to the button and detach the button and .primary-content div. Then using .html() function we can attach these elements to body so that the other elements will be overwritten.

When a user click the #docEnable button while they are in document mode the page will be refreshed so that everything will be back to its position.

For this tutorial, I have changed the main article div and its children’s border, background to make it easily readable and position it in the middle to give it a document mode style. You can style it as per your own taste.