On 21/12/06, Alex Cook <[EMAIL PROTECTED]> wrote: > From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On > Behalf Of Sam Collett > Subject: Re: [jQuery] jdNewsScroll - Headline Scroller > > What I want to know is how to do a typewriter effect (i.e. type from > right to left single letters until the entire text is written). > > ----- > > I do like a challenge :) Though, I'm sure someone will be able to do > this better than I. Note, this is just tested on Win/FF2.0. You're on > your own as far as other browsers go. > > I had to do some CSS tricks to make it work, due to jQuery's animation > class adding 'display:block' to the elements it messes with. Take a > look at the code and I'll explain. > > CSS - http://pastie.caboo.se/29059 > > JS - http://pastie.caboo.se/29062 > > HTML - http://pastie.caboo.se/29064 > > In the CSS we set the containing element's height to 1.125em and > 'overflow:hidden'. That way, when jQuery forces 'display:block' on the > span element it is animating, it doesn't appear as if the line is > jumping all over the place. If you take off the 'overflow:hidden' > you'll see what I mean. > > HTML just shows the basic setup I used to test. > > Hope this steers you in the right direction. > > -ALEX
Seems to work OK, but does not handle elements that may be in the containing element (i.e. hyperlinks). Tweaked a bit to handle this with a few gotchas: - Does not handle nesting at all (i.e. <p><strong>Get <a href="http://jquery.com";>jQuery</a> now </strong> please</p>) - Contents of elements are displayed all in one go, rather than each letter in turn - only tested/works in Firefox (does not work at all in IE) jQuery.create = function() { var ret = [], a = arguments, i, e; a = a[0].constructor == Array ? a[0] : a; for(i=0; i<a.length; i++) { if(a[i+1] && a[i+1].constructor == Object) { // item is element if attributes follow e = document.createElement(a[i]); $(e).attr(a[++i]); // apply attributes if(a[i+1] && a[i+1].constructor == Array) $(e).append($.create(a[++i])); // optional children ret.push(e); } else { // item is just a text node ret.push(document.createTextNode(a[i])); } } return ret; }; jQuery.fn.typeWritr = function (settings) { settings = jQuery.extend({ speed: "fast" }, settings); $this = $(this); $this.each( function() { loopChildren = function(node, appendTo) { var length = node.childNodes.length; for(i = 0; i < length; i++) { if(node.childNodes[i].nodeType == 3) { string = node.childNodes[i].nodeValue; for (j=0;j<string.length;j++) { $(appendTo).append(jQuery.create( 'span', {}, [string.substring(j,j+1)] )); } } else if(node.childNodes[i].nodeType == 1) { attr = {}; if(node.childNodes[i].attributes[0]) { for(j=0; j<node.childNodes[i].attributes.length; j++) { attr[node.childNodes[i].attributes[j].localName] = node.childNodes[i].attributes[j].nodeValue; } } $(appendTo).append(jQuery.create( node.childNodes[i].nodeName, attr, '' )); loopChildren(node.childNodes[i], $(appendTo).find(":last")[0]); } } } var clone = this.cloneNode(false); loopChildren(this, clone); $this.empty().append($(clone).children()); }); fadeInNextObj = function (elm) { $nextElm = $(elm).next(); $nextElm.animate( { 'opacity':"show" }, settings["speed"], function () { fadeInNextObj($nextElm); } ); }; $this.children(":first-child").animate( { 'opacity':"show" }, settings["speed"], function () { fadeInNextObj(this); } ); return this; } _______________________________________________ jQuery mailing list [email protected] http://jquery.com/discuss/
