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.
Screenshot of Wide Editorial Reader's view after running the script

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

// 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


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.



My Personal Notes arrow_drop_up

Competitive Programmer, Full Stack Developer, Technical Content Writer, Machine Learner

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.




Article Tags :

2


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.