Reader’s View: Reader’s View is a feature that removes all the unnecessary things from the webpage like buttons, ads etc and changes the layout of the page i.e. text-size, contrasts etc. for better readability.
Examples of a webpage in Reader’s view.
How to get the Reader’s view for any webpage?
Below is the script that change the view of a webpage to Reader’s view.
// Dynamically loading the Jquery Library javascript: var fileref = document.createElement( 'script' ); fileref.setAttribute( "type" , "text/javascript" ); fileref.setAttribute( "src" , document.body.appendChild(fileref); // Dynamically changing the CSS using Jquery // by removing the Left column, right column // and widening the width of the center column // and also increasing the font size of the div content setTimeout( function () { jQuery( "div.wrapper div.leftSideBarParent" ).hide(); jQuery( "div.wrapper div.widget-area" ).hide(); jQuery( "div.wrapper div.site-content" ).css({ 'width' : '1150px' , 'margin-left' : '105px' , 'margin-right' : '45px' }); jQuery( "div.menu-iconic-container" ).hide(); $( "div" ).css( 'fontSize' , '20px' ); $( "pre" ).css( 'fontSize' , '20px' ); }, 2000); setTimeout( function () { document.body.appendChild(fileref); $( "#div-gpt-ad-1525180449717-0" ).hide(); $( ".col-sm-3" ).hide(); $( ".col-sm-9.normalScreen" ).css( 'width' , '100%' ); }, 500); // Changing width to wide screen in case of // any problem encountered due to scrolling // of the page var body = document.body, html = document.documentElement; setInterval( function () { if (body.scrollHeight >= 5000) { setTimeout( function () { $( "div.wrapper div.site-content" ).css({ 'width' : '1150px' , 'margin-left' : '105px' , 'margin-right' : '45px' }); }, 500); } }, 2000); |
How to execute/run this script?
Open any neveropen Editorial page and paste the script in the console window of Developer Tools(Press F12) and press Enter.
You will get a full wide Reader’s view for the Editorial page.