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); |
chevron_right
filter_none
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 in HTML?
- How to redirect to another webpage using JavaScript?
- How to Add Google Charts on a Webpage?
- How To Add Google Translate Button On Your 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
- HTML | view Event Property
- Model-View-Controller(MVC) architecture for Node applications
- Setup API for GeeksforGeeks user data using WebScraping and Flask
- How to get current formatted date dd/mm/yyyy in JavaScript ?
- JavaScript vs Python : Can Python Overtop JavaScript by 2020?
- How to get hex color value of RGB value ?
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.
