Skip to content
Related Articles

Related Articles

Reader’s View of a GeeksforGeeks webpage

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 10 Aug, 2021
Improve Article
Save Article

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.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!