A Pen by Matt Shull

Developer
Matt Shull
Size
3,249 Kb
Views
18,216
  1. A Pen by Matt Shull Previews
  2. A Pen by Matt Shull HTML Codes
  3. A Pen by Matt Shull CSS Codes
  4. A Pen by Matt Shull JS Codes

How do I make an a pen by matt shull?

What is a a pen by matt shull? How do you make a a pen by matt shull? This script and codes were developed by Matt Shull on 28 September 2022, Wednesday.

A Pen by Matt Shull Previews
IQ Test

A Pen by Matt Shull - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Matt Shull</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="main"> <div id="content"> <h1 id="about">Web Speech Example</h1> <div id="example-type">textarea with JavaScript Web Speech API</div> <div id="speech-content-elements"> <textarea id="speech-page-content" name="pageContent"></textarea> <div class="speech-content-mic speech-mic"> </div> <div id="authority">by <a href="http://stiltsoft.com/" target="_blank">StiltSoft</a> </div> </div> </div>
</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>

A Pen by Matt Shull - Script Codes CSS Codes

body { text-align: center; font-family: 'Open Sans', arial, sans-serif; font-size: 13px;
}
#main { display: table; height: 100%; width: 100%;
}
#content { display: table-cell; vertical-align: middle; height: 100%; width: 100%;
}
#about { padding-bottom: 20px; font-weight: normal;
}
#example-type { color: gray; font-size: 14px;
}
#speech-content-elements { position: relative; margin: auto; width: 60%; height: 60%; max-height: 300px; max-width: 800px; border: solid 1px #ccc;
}
#speech-page-content { width: 100%; height: 100%; overflow: auto; border: none; resize: none; font-family: arial, sans-serif; font-size: 14px;
}
#speech-page-content:focus { outline: none;
}
.speech-content-mic { width: 25px; height: 25px; cursor:pointer; position: absolute; right: 0; top: 0;
}
.speech-mic { background: url("http://stiltsoft.com/blog/wp-content/demo/web-speech-api/textarea/mic.gif") no-repeat 50% 50%; background-size: contain;
}
.speech-mic-works { background: url("http://stiltsoft.com/blog/wp-content/demo/web-speech-api/textarea/mic-animate.gif") no-repeat 50% 50%; background-size: contain;
}
#authority { padding-top: 10px;
}
#speech-page-content::-webkit-scrollbar { width: 6px;
}
#speech-page-content::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;
}
#speech-page-content::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

A Pen by Matt Shull - Script Codes JS Codes

(function($) { insertAtCaret = function(areaId,text) { var txtarea = document.getElementById(areaId); var scrollPos = txtarea.scrollTop; var strPos = 0; var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? "ff" : (document.selection ? "ie" : false ) ); if (br == "ie") { txtarea.focus(); var range = document.selection.createRange(); range.moveStart ('character', -txtarea.value.length); strPos = range.text.length; } else if (br == "ff") strPos = txtarea.selectionStart; var front = (txtarea.value).substring(0,strPos); var back = (txtarea.value).substring(strPos,txtarea.value.length); txtarea.value=front+text+back; strPos = strPos + text.length; if (br == "ie") { txtarea.focus(); range = document.selection.createRange(); range.moveStart ('character', -txtarea.value.length); range.moveStart ('character', strPos); range.moveEnd ('character', 0); range.select(); } else if (br == "ff") { txtarea.selectionStart = strPos; txtarea.selectionEnd = strPos; txtarea.focus(); } txtarea.scrollTop = scrollPos; }; $.fn.getCursorPosition = function() { var el = $(this).get(0); var pos = 0; if('selectionStart' in el) { pos = el.selectionStart; } else if('selection' in document) { el.focus(); var Sel = document.selection.createRange(); var SelLength = document.selection.createRange().text.length; Sel.moveStart('character', -el.value.length); pos = Sel.text.length - SelLength; } return pos; }; $.fn.setCursorPosition = function(pos) { if ($(this).get(0).setSelectionRange) { $(this).get(0).setSelectionRange(pos, pos); } else if ($(this).get(0).createTextRange) { var range = $(this).get(0).createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } }
})(jQuery);
(function($) { $(document).ready(function() { var recognition = new webkitSpeechRecognition(); recognition.continuous = true; recognition.interimResults = false; var interimResult = ''; var textArea = $('#speech-page-content'); var textAreaID = 'speech-page-content'; $('.speech-mic').click(function(){ startRecognition(); }); $('.speech-mic-works').on("click", function(){ stopRecognition(); }); var startRecognition = function() { $('.speech-content-mic').removeClass('speech-mic').addClass('speech-mic-works'); textArea.focus(); recognition.start(); }; var stopRecognition = function() { $('.speech-content-mic').removeClass('speech-mic-works').addClass('speech-mic'); recognition.stop(); }; recognition.onresult = function (event) { var pos = textArea.getCursorPosition() - interimResult.length; textArea.val(textArea.val().replace(interimResult, '')); interimResult = ''; textArea.setCursorPosition(pos); for (var i = event.resultIndex; i < event.results.length; ++i) { if (event.results[i].isFinal) { insertAtCaret(textAreaID, event.results[i][0].transcript); } else { isFinished = false; insertAtCaret(textAreaID, event.results[i][0].transcript + '\u200B'); interimResult += event.results[i][0].transcript + '\u200B'; } } }; recognition.onend = function() { $('.speech-content-mic').removeClass('speech-mic-works').addClass('speech-mic'); }; });
})(jQuery);
A Pen by Matt Shull - Script Codes
A Pen by Matt Shull - Script Codes
Home Page Home
Developer Matt Shull
Username derekshull
Uploaded September 28, 2022
Rating 3
Size 3,249 Kb
Views 18,216
Do you need developer help for A Pen by Matt Shull?

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!

Matt Shull (derekshull) Script Codes
Name
AngularJS Dropdown Menu
About Me Page
Angular 2-way Data Binding Example
Template Style Prototype
CSS Animation Example
List Animation
Javascript Highest Number from List
San Jose Plan A Meeting Wireframe
Tri-Cities Wireframe
Tri-Cities Interior Wireframe
Create amazing sales emails 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!