Skip to content
Related Articles

Related Articles

Reader’s View of a GeeksforGeeks webpage
  • Difficulty Level : Basic
  • Last Updated : 05 Feb, 2019

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.




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

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :