layervault / jquery.typer.js Goto Github PK
View Code? Open in Web Editor NEWA simple jQuery plugin for a slick typing effect.
A simple jQuery plugin for a slick typing effect.
If we have "Something.psd" and are changing it to "Someone.psd", only highlight and replace "thing".
As requested by @allang
When spanWithColor
is called on https://github.com/layervault/jquery.typer.js/blob/master/src/jquery.typer.js#L132, the parameters are backwards.
Hey all,
pending pull requests are unmerged, there is a couple of different forks that implement some of the open issues, and there hasn't been an update to this original source for two years. However, this plugin is good at what it does, so people keep coming back and using it.
@kellysutton / layervault: Is there any way you can get this repository up to date, either yourself, or by giving someone rights to do so? Or if you choose to officially discontinue supporting this codebase, endorse a maintained version so efforts of implementing new features and fixing bugs can continue combined?
I'll gladly offer my help with maintaining this repo, as I've found it useful on a number of occasions in the past and would like to see it continued.
How does it determine the highlight colour initially and is it possible to delay before initially running?
GitHub recently changed the way that assets are served from raw.github.com
, breaking the demo on http://cosmos.layervault.com/typer-js.html
.
Ref: https://plus.google.com/104437754419996754779/posts/28f8HS2M7cb
A couple of options:
I'm happy to make the change, your call on what to do. Awesome plugin!
Typer should only highlight as far back as necessary. If the string is being replaced by a slightly modified version, go back only as far as needed to. Example:
If the string is going from "Lorem-Ipsum.psd" to "Lorem-Dolor.psd", typer should only highlight "Ipsum.psd" and replace it with "Dolor.psd"
After uploading the master folder to the server, the plugin does not work.
Remove the first backslash in the script src, and it works.
Change
<script src="/src/jquery.typer.js"></script>
to
<script src="src/jquery.typer.js"></script>
I think it would be great if we were able to set a number of times to run the animation (after which it stops)?
Maybe set version 0.0.1
into bower.json and create a git tag with the same name
so https://rails-assets.org/components can fetch the version and create the relative gem for ease of inclusion in ruby projects
The color of the background & text are the same in Firefox. I tested on Firefox 18.0 on Mac.
Hi,
I'm using Typer for the first time in a project and have set it to type out an array of 4 different strings. Currently it prints them out in order, keeping each one there for a little while it is being highlighted. Then the current string disappears and the next one in the array is printed and highlighted.
The issue I'm having (and this may have something to do with being new to Typer) is that when each string is highlighted sometimes only a certain part (or the start or end) of the string is highlighted before the string disappears and the next one in the array is typed out.
Here's the code from the HTML with the array of strings that are typed out:
<div class="small-text" data-typer-targets='{ "targets" : ["specialized in brand experience.","BORN INTO CREATIVITY.","FOCUSED ON STRATEGY.","INSPIRED BY TECHNOLOGY."]}' >specialized in brand experience.</div>
Here are my current options from jquery.typer.js:
options = {
highlightSpeed : 20,
typeSpeed : 100,
clearDelay : 500,
typeDelay : 200,
clearOnHighlight : true,
typerDataAttr : 'data-typer-targets',
typerInterval : 2000
},
Thanks in advance for any information or guidance. It is much appreciated.
would be nice to have some way to call a function after typing is done. I edited 3 places, now I can set $.typer.options.OnDoneTyping before the typing begins
Line 14:
var
options = {
highlightSpeed : 20,
typeSpeed : 100,
clearDelay : 500,
typeDelay : 200,
clearOnHighlight : true,
typerDataAttr : 'data-typer-targets',
typerInterval : 2000,
OnDoneTyping : null
},
Line 77:
if (!text || text.length === 0) {
clearData($e);
onDoneTyping();
return;
}
Line 258:
onDoneTyping = function () {
if(typeof $.typer.options.OnDoneTyping == 'function') {
$.typer.options.OnDoneTyping();
}
};
Doing this kind of a call results in errors, when by definition of jQuery plugin guidelines, it shouldn't:
$('#foobar').taper().css('border', '1px solid red');
Setting options like
$.typer.options.highlightSpeed = 500;
currently affects all instances of typer present on a page. Is there a way to set different options for each instance of typer separately?
Suppose I have typer targets like , car, camel, career. When highlighting the text, the repeating letters "ca" is avoided. Any chance to highlight all words even its repeating?
I've been trying to put "&!" in typer. Whenever typer comes across this, it ceases to type. I took away the exclamation point, and it still doesn't work, but if I just use the exclamation point it still works. So, it has to be the ampersand. I'm sure this must need an escape somewhere, either in the typer code or my code, but it's a problem. I'd really like to use typer with these characters. I'm using it for a school project that's due in April.
Thanks,
&! (bitandbang)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.