Comments on: Improving interactivity with Javascript http://friendlybit.com/js/improving-interactivity-with-javascript/ You have found Friendly Bit, a web development blog. I focus on client side technologies like CSS, HTML and Javascript. You find my articles below and categories to the right. Thu, 11 Mar 2010 16:54:48 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: Burad’s Blog » Blog Archive » Improving interactivity with Javascripthttp://friendlybit.com/js/improving-interactivity-with-javascript/#comment-30331 Burad’s Blog » Blog Archive » Improving interactivity with Javascript Sun, 24 Feb 2008 07:22:32 +0000 http://friendlybit.com/js/improving-interactivity-with-javascript/#comment-30331 [...] more friendly bit >> Improving interactivity with Javascript In addition, I find image maps also very handy when it comes to intereactivity when used properly [...] [...] more friendly bit >> Improving interactivity with Javascript In addition, I find image maps also very handy when it comes to intereactivity when used properly [...]

]]> By: Skihttp://friendlybit.com/js/improving-interactivity-with-javascript/#comment-24866 Ski Fri, 01 Jun 2007 14:38:57 +0000 http://friendlybit.com/js/improving-interactivity-with-javascript/#comment-24866 Very cool!Also I've done some resizable tables with dragable columns and reordering etc. Was for a prototype and a one-off, but it was done and it worked quite nice!Regards Very cool!

Also I’ve done some resizable tables with dragable columns and reordering etc. Was for a prototype and a one-off, but it was done and it worked quite nice!

Regards

]]> By: Emil Stenströmhttp://friendlybit.com/js/improving-interactivity-with-javascript/#comment-21982 Emil Stenström Thu, 01 Mar 2007 00:01:42 +0000 http://friendlybit.com/js/improving-interactivity-with-javascript/#comment-21982 Good addition Jesper! Good addition Jesper!

]]> By: Jesper Rønn-Jensenhttp://friendlybit.com/js/improving-interactivity-with-javascript/#comment-21970 Jesper Rønn-Jensen Wed, 28 Feb 2007 09:09:40 +0000 http://friendlybit.com/js/improving-interactivity-with-javascript/#comment-21970 Great list Emil. One item I miss on the list is dropdown-replacements. Yahoo! calls them "split buttons". See example <a href="http://developer.yahoo.com/yui/examples/button/example08.html " rel="nofollow">"split button" on YUI</a>. Also used on chat list in GMail.I think they come in handy, when you need something in between an autocomplete field and a traditional dropdown field. Great list Emil. One item I miss on the list is dropdown-replacements. Yahoo! calls them “split buttons”. See example “split button” on YUI. Also used on chat list in GMail.

I think they come in handy, when you need something in between an autocomplete field and a traditional dropdown field.

]]> By: Emil Stenströmhttp://friendlybit.com/js/improving-interactivity-with-javascript/#comment-21917 Emil Stenström Sun, 25 Feb 2007 20:30:33 +0000 http://friendlybit.com/js/improving-interactivity-with-javascript/#comment-21917 @Lars Gunther: As zcorpan wrote above, it's not. Another fact is that these things works today, not in five years from now :) @Lars Gunther: As zcorpan wrote above, it’s not. Another fact is that these things works today, not in five years from now :)

]]> By: Lars Guntherhttp://friendlybit.com/js/improving-interactivity-with-javascript/#comment-21915 Lars Gunther Sun, 25 Feb 2007 19:49:31 +0000 http://friendlybit.com/js/improving-interactivity-with-javascript/#comment-21915 This looks like like a subset of the Web Forms 2.0 proposal: http://www.whatwg.org/specs/web-forms/current-work/Lars Gunther This looks like like a subset of the Web Forms 2.0 proposal:
http://www.whatwg.org/specs/web-forms/current-work/

Lars Gunther

]]> By: Jesse Skinnerhttp://friendlybit.com/js/improving-interactivity-with-javascript/#comment-21855 Jesse Skinner Fri, 23 Feb 2007 03:22:02 +0000 http://friendlybit.com/js/improving-interactivity-with-javascript/#comment-21855 I think when the browsers start implementing these other widgets we will hear a lot of complaints about how these things look, so I think the JavaScript equivalents will always have relevance. At least Web Forms will let the fallback solution be a bit more useful than a text box. I think when the browsers start implementing these other widgets we will hear a lot of complaints about how these things look, so I think the JavaScript equivalents will always have relevance. At least Web Forms will let the fallback solution be a bit more useful than a text box.

]]> By: zcorpanhttp://friendlybit.com/js/improving-interactivity-with-javascript/#comment-21854 zcorpan Fri, 23 Feb 2007 02:51:47 +0000 http://friendlybit.com/js/improving-interactivity-with-javascript/#comment-21854 Well let's see...<strong>Slider:</strong> <input type=range>.<strong>Date picker:</strong> <input type=date>.<strong>Smart text boxes:</strong> Depending on what you want to allow in the text field you could use different type="", and/or you could use pattern="". Whether it will be possible to enter other things is up to the UA really -- the spec only says what can be sent to the server.<strong>Mixing text inputs with select boxes:</strong> <datalist>. (This is designed in a way that you can make it degrade nicely in legacy UAs -- basically you can take the scripted version you have now and slap a <datagrid> around it and Opera users will get a native UI.)<strong>Drag and Drop:</strong> This has been used since MS invented it, but it has never actually been specced until now in HTML5.<strong>Collapse and expand control:</strong> <details> in HTML5.<strong>Advanced tooltips:</strong> Hmm... Perhaps you could use XBL2 for this.<strong>Autosaving form fields:</strong> This should IMHO be a browser feature (and indeed I think at least Opera and/or Firefox has it).<strong>Auto validation:</strong> With the :valid and :invalid CSS pseudo-classes you can indicate which fields are valid and which are not.<strong>Controls affecting each other:</strong> I think this was considered but rejected for WF2; it still has to be scripted.<strong>Image handling:</strong> I guess you could do even more with <canvas> from HTML5. :-)<strong>Search-based or structured navigation:</strong> This seems like it would be implemented on the server (or with Ajax).<strong>Better looking form fields:</strong> Well, this is the domain of CSS, really. But perhaps XBL2 will be supported before browsers allow more styling of form controls.<strong>Sortable items:</strong> Drag and drop again.Ok, you're right, some things aren't in WF2, but with backup from Web Applications 1.0 and XBL2 most things are covered. And yes, you're right, those specs are still very new and not implemented in many browsers yet.Sorry if I took this slightly off-topic; I couldn't help it. ;-) Well let’s see…

Slider: <input type=range>.

Date picker: <input type=date>.

Smart text boxes: Depending on what you want to allow in the text field you could use different type=”", and/or you could use pattern=”". Whether it will be possible to enter other things is up to the UA really — the spec only says what can be sent to the server.

Mixing text inputs with select boxes: <datalist>. (This is designed in a way that you can make it degrade nicely in legacy UAs — basically you can take the scripted version you have now and slap a <datagrid> around it and Opera users will get a native UI.)

Drag and Drop: This has been used since MS invented it, but it has never actually been specced until now in HTML5.

Collapse and expand control: <details> in HTML5.

Advanced tooltips: Hmm… Perhaps you could use XBL2 for this.

Autosaving form fields: This should IMHO be a browser feature (and indeed I think at least Opera and/or Firefox has it).

Auto validation: With the :valid and :invalid CSS pseudo-classes you can indicate which fields are valid and which are not.

Controls affecting each other: I think this was considered but rejected for WF2; it still has to be scripted.

Image handling: I guess you could do even more with <canvas> from HTML5. :-)

Search-based or structured navigation: This seems like it would be implemented on the server (or with Ajax).

Better looking form fields: Well, this is the domain of CSS, really. But perhaps XBL2 will be supported before browsers allow more styling of form controls.

Sortable items: Drag and drop again.

Ok, you’re right, some things aren’t in WF2, but with backup from Web Applications 1.0 and XBL2 most things are covered. And yes, you’re right, those specs are still very new and not implemented in many browsers yet.

Sorry if I took this slightly off-topic; I couldn’t help it. ;-)

]]> By: Emil Stenströmhttp://friendlybit.com/js/improving-interactivity-with-javascript/#comment-21847 Emil Stenström Thu, 22 Feb 2007 20:53:27 +0000 http://friendlybit.com/js/improving-interactivity-with-javascript/#comment-21847 @zcorpan: Well, except for the fact that this works and Web Forms 2.0 is way off into the future :) I see a lot not in that list either... Interesting spec though. @zcorpan: Well, except for the fact that this works and Web Forms 2.0 is way off into the future :) I see a lot not in that list either… Interesting spec though.

]]> By: zcorpanhttp://friendlybit.com/js/improving-interactivity-with-javascript/#comment-21845 zcorpan Thu, 22 Feb 2007 18:54:42 +0000 http://friendlybit.com/js/improving-interactivity-with-javascript/#comment-21845 This is almost a feature list of what you can do <a href="http://www.w3.org/TR/web-forms-2/#introduction0">declaratively with Web Forms 2.0</a>. :-) This is almost a feature list of what you can do declaratively with Web Forms 2.0. :-)

]]> By: Ajit Buradhttp://friendlybit.com/js/improving-interactivity-with-javascript/#comment-21832 Ajit Burad Thu, 22 Feb 2007 04:56:38 +0000 http://friendlybit.com/js/improving-interactivity-with-javascript/#comment-21832 nice listing... in some case image maps can also be useful.. like in case of color picker etc... like here: <a href="http://www.cse.iitb.ac.in/~ajitb/canvas/paint_chat.php" rel="nofollow">Paint Chat</a> nice listing…
in some case image maps can also be useful.. like in case of color picker etc… like here: Paint Chat

]]> By: Michaelhttp://friendlybit.com/js/improving-interactivity-with-javascript/#comment-21823 Michael Wed, 21 Feb 2007 22:42:00 +0000 http://friendlybit.com/js/improving-interactivity-with-javascript/#comment-21823 Great post! Easily worth an extra bookmark for future use! :) Great post! Easily worth an extra bookmark for future use! :)

]]>