Reader’s View of a GeeksforGeeks webpage

0 0 1 minute read

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",  
"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 zambiatek 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.

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!