Speed Reader

Developer
Daniel Murphy
Size
3,032 Kb
Views
16,192
  1. Speed Reader Previews
  2. Speed Reader HTML Codes
  3. Speed Reader CSS Codes
  4. Speed Reader JS Codes

How do I make an speed reader?

What is a speed reader? How do you make a speed reader? This script and codes were developed by Daniel Murphy on 16 September 2022, Friday.

Speed Reader Previews
IQ Test

Speed Reader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Speed Reader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="speedr-wrapper"> <input class="speedr-button" type="button" value="click me" onclick="speedr_init(200)" /> <div class="speedr"></div>
</div>
<h1>Speed Reader Script</h1>
<div class="readable"> <p>Enjoy a post from USA Today:</p> <p>Prosecutors denied that claim and argued that Graham was trying to delay sentencing.</p> <p>U.S. District Judge Donald Molloy denied Graham's motion to withdraw her guilty plea at Thursday's hearing, accepting the plea deal and sentencing her to 365 months in prison.</p> <p>The judge's ruling came after several members of Johnson's family asked the judge to sentence Graham to life in prison, <a target="_blank" href="http://www.kpax.com/news/jordan-graham-sentenced-for-death-of-husband/">CNN affiliate KPAX reported</a>.</p> <p>The sentencing comes months after Graham's surprise guilty plea in the middle of the high-profile murder trial.</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Speed Reader - Script Codes CSS Codes

html { background: #777; font-family: arial;
}
.speedr-wrapper { width: 290px; border: 1px solid #333; background-color: #ff8300; overflow: hidden; margin: 0 auto; padding: 4px;
}
.speedr-wrapper .speedr-button { float: left; border: 3px solid #333; border-radius: 5px; padding: 5px; color: #fff; background-color: green;
}
.speedr-wrapper .speedr-button[value="start me"] { background-color: green;
}
.speedr-wrapper .speedr-button[value="stop me"] { background-color: red;
}
.speedr-wrapper .speedr { border: 3px solid #333; border-radius: 5px; padding: 3px; width: 200px; height: 23px; float: right; background: #eee;
}
.speedr-wrapper .speedr h4 { margin: 0; text-align: center;
}

Speed Reader - Script Codes JS Codes

var timeouts = [];
var isRunning = false;
function speedr_init(speed) { if (isRunning) { speedr_stop(); return; } isRunning = true; //toggle the button - currently can't get it to stop :( $('.speedr-button').attr('value', "stop me"); var arr = $('.readable').text().trim().split(/[ ]+/); var writeLoop = function(i) { if (arr[i]) { timeouts.push(setTimeout(function() { $('.speedr').append("<h4>" + arr[i] + "</h4>"); writeLoop(i + 1); }, speed)); timeouts.push(setTimeout(function() { $('h4').remove(); }, speed - 1)); //speed for the timout to clear must be 1 less than the original speed } }; writeLoop(0);
}
function speedr_stop() { timeouts.splice(0, timeouts.length).forEach(clearTimeout); isRunning = false; $('.speedr-button').attr('value', "start me");
}
Speed Reader - Script Codes
Speed Reader - Script Codes
Home Page Home
Developer Daniel Murphy
Username dsm
Uploaded September 16, 2022
Rating 3
Size 3,032 Kb
Views 16,192
Do you need developer help for Speed Reader?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Daniel Murphy (dsm) Script Codes
Name
Thermometer
Video Hover CSS Only
Menu Item Limit
GSAP Simple Slide with Toggle - Testing
Super simple snow
US MAP SVG With Hover
College Counselor Finder with SVG Maps
A Pen by Daniel Murphy
Testing Buttons
For Freddy
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!