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.

// Dynamically loading the Jquery Library 
javascript: var fileref = document.createElement('script'); 
fileref.setAttribute("type", "text/javascript"); 
fileref.setAttribute("src",  
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"); 
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

Reader’s View of a GeeksforGeeks webpage

Recommended Posts: