Reader’s View of a GeeksforGeeks webpage
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 GeeksforGeeks 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.
Recommended Posts:
- Introduction to Model View View Model (MVVM)
- How to redirect to another webpage using JavaScript?
- How to Add Google Charts on a Webpage?
- How to redirect to another webpage in HTML?
- Hide the cursor in a webpage using CSS and JavaScript
- How To Add Google Translate Button On Your Webpage?
- How to connect multiple MySQL databases on a single webpage ?
- Reading selected webpage content using Python Web Scraping
- How to check a webpage is loaded inside an iframe or into the browser window using JavaScript?
- Spring MVC with JSP View
- How to view array of a structure in JavaScript ?
- HTML | view Event Property
- Model-View-Controller(MVC) architecture for Node applications
- How to place the image above the slider in mobile view in bootstrap?
- View the list of all variables in Google Chrome Console using JavaScript
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.