Trapped in Hoth

infocyde · at 3:53 PM

I like the new HTML 5 datalist element. But most of the time when I deal with autocomplete drop down type stuff it is usually in key value pairs read from a database. The datalist doesn't (too my knowledge) support this out of the box. But you can add an attribute of say id to each option in your datalist, and then use a little jQuery to grab that id value for pushing back up to the server onsubmit. Here is a basic example just to get you going.

 <!DOCTYPE html>  
 <html lang="en">  
   <head>  
     <meta charset="utf-8" />  
     <title></title>  
     <script src="http://code.jquery.com/jquery-latest.min.js"></script>  
   </head>  
   <body>  
     <form name="test" method="post" action="">  
     <input id="datalisttestinput" list="stuff" ></input>  
       <datalist id="stuff">  
         <option data-id="3" value="Collin" >  
         <option data-id="5" value="Carl">  
         <option data-id="1" value="Amy" >  
         <option data-id="2" value="Kristal">  
       </datalist>  
     <br /><br />  
       <a href="javascript:GetValue();">test</a>  
     </form>  
     <script>  
       function GetValue() {  
         var x = $('#datalisttestinput').val();  
         var z = $('#stuff');  
         var val = $(z).find('option[value="' + x + '"]');  
         var endval = val.attr('data-id');  
         alert(endval);  
       }  
     </script>  
   </body>  
 </html>

Update: You can also do <option value="3">Collin</option> like you would expect on some browsers, hopefully all soon.

infocyde · at 7:00 PM

I'm taking my much belated first stabs at using the HTML 5 canvas tag from scratch, and I found a great site I thought I would share to get you going on the basics.

http://www.html5canvastutorials.com/

The basic elements of Canvas seem easy enough, putting it all together to make something unique and useful might be a different story.

And there are lots of great Canvas libraries out there, but I figured I'd start low level and work my way upward.

infocyde · at 11:54 AM

Just found this, haven't played with it, but it is a start of Microsoft's efforts to provide tooling for HTML 5.

Meet Glimmer

infocyde · at 10:16 AM

Check this out! Google Chrome demo with GPU acceleration. Expect to see it in Chrome 6?

Also IE9 will have compiled JavaScript. The browser war is back on. Flash? Silverlight? You better do something fantastic else HTML 5 over time will eat your bloated asses for lunch.

infocyde · at 4:05 PM

You look at this and think, cool. But really think about it. This proof of concept opens up a lot of possibilities.

http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/

Trapped in Hoth

Wednesday, March 20, 2013

HTML 5 DataList Key Value Work Around

Thursday, July 21, 2011

The Canvas Tag

Monday, November 01, 2010

Microsoft HTML5 Tooling...Meet Glimmer

Wednesday, September 15, 2010

GPU Acceleration in HTML 5

Wednesday, April 21, 2010

Awesome Canvas 3D Demo