Use built in jQuery UI icon with datepicker

Needed the date picker in a project today and noticed it doesn’t integrate well with jQuery UI’s icons, if trying to use an icon to open the calendar rather than an input. Found a response on Stackoverflow that talked about having to do it manually. This is the solution I ended up using.

$("#DateFrom").datepicker({ showOn: 'button'}).next('button').text('').button({icons:{primary : 'ui-icon-calendar'}});

By default the datepicker button call automatically inserts three ellipses to the button, so the text(”) is needed to remove the text from the default button. So there you go a fully theme away calendar button. Now if only they would make this easier by having the datepicker do it all for you.

Posted in Javascript, jQuery, Web Development | Tagged , , , , | Leave a comment

Got a kindle

Well I got a Kindle 3 for my birthday today, I had one last year for a little bit but had to give it back to work, since then I’ve found myself wanting another. First thing I tried (besides a web IRC) were some of my canvas demos on the experimental browser that ships with the Kindle. They all seemed to work, just VERY slowly, for isntance my JS1k grapple submission was in slow motion, but still playable for the most part. This got me thinking that this device could easily do some turn based games! Of course.. I get an ebook reader and my first thought turns to games. Turns out there are a few games for it out already, but every device could use more. Maybe that will be my next project.

Posted in Hand Held | Tagged , , | Leave a comment

A New look

Was a bit sick of the older design, it had some weird issues plus honestly I really began to hate it. I am liking this one a lot more, kept the whole light bulb concept from the old design, but other than that pretty much everything else is different. Wanted to incorporate text shadows too, I think they look slick in modern browsers. It also gave me a chance to check out how themes are done in WordPress 3.0, they seem easier, and the CSS is definitely much cleaner. All I needed to do was modify the default 2010 design slightly, and I needed to make maybe 5 markup changes overall.

Posted in Design, Web Development | Tagged , , | Leave a comment

jCrumb Instant Breadcrumb plugin

Just finished up a new plugin for jQuery. I wanted some breadcrumbs for some pages but wanted to do it all client side, so I came up with jCrumb. jCrumb saves the link and title of the most recent page and adds it to a session cookie, creating a dynamic bread crumb navigation bar on the page. It uses jQuery, and can also use jQuery UI for styling, or custom styles created by the user.

Live Demo

Jquery plugin page

Google Code Page

Posted in Javascript, Web Development | Tagged , , , , | 2 Comments

JavaScript time between dates

A person asked a question in my post about sorting dates in Javascript, basically on how to return a measurement of time between dates, such as days, hours, minutes, seconds. I haven’t really ever had to do something like this so I figured I would see if it was as easy as I assumed it would be in JS. This is what I came up with.

var dob = new Date("9/28/1982"),
    today = new Date("9/21/2010");

// Days between dates
alert((today-dob)/86400000);

// Years between dates
alert(((today-dob)/86400000)/365);

Returns pretty accurate results, Im not accounting for leap years so it thinks I’m already 28 even though I still have a few days to go.

Posted in Javascript, Programming, Tutorials, Web Development | Tagged , , | Leave a comment

New js1k Submission JSGrapple

Update Submission for the js1k competition. My 3rd, and final one only the last one you enter is judged and I think this is going to be as good as it gets from me that is. I ended up settling on a clone of a cool game I used to play when I was a network admin in the Air Force called Wire Hang Redux.

This entry was more of a challenge than my previous one, I had to not only make it look presentable but also had to worry about game play, simple physics, and of course lack of bugs. I think it turned out pretty well, and I owe a big thanks to the Google Closure Compiler, it definitely made things easier. The biggest challenge was trying to decide on what features to add. I had a choice between keeping the high score and allowing users to try again (without refresh) , or the option of making it harder the higher they go. I chose the latter which I think was a good decision.

Some things I learned from the contest,

  • pre calculated values use much less space, (.017 uses much less space than pi/180)
  • There are shorter ways to get an element through the dom than getElementById
  • You can make something cool and fun in 1k using Javascript

I think the next thing I will do is make a bigger/better/cooler version.

Now just imagine if I had 640k to work with!

Posted in Canvas, Game Development, Programming, Web Development | Tagged , , , | 2 Comments

JS1k Submission

Theres a javascript 1k competition going on here the rules are simple make something using only javascript in under 1k. It can be minified, whatever just as long as its 1024 bytes or smaller. This is what I submitted (Caution could cause seizures, and vomiting!). You can only submit one thing which kind of sucks, and after looking at the other demos submitted it makes me want to submit something a bit cooler.  Definitely a lot of talent in the competition, cannot wait to see what the results are. Also many of the authors posted the original source which is very handy for poking around and learning some cool new things.

Posted in Canvas, Programming, Web Development | Leave a comment

JSLander completed

Finally sat down this weekend and completed my Javascript Lunar Lander clone, JSLander. Decided to make it after messing around with midpoint displacement towards the end of last year. The development of JSLander overall wasn’t too bad, the trickiest thing was making everything work exactly the same when you were zoomed in,  I happen to be horrible at math…

Check out the finished product here.

Download Source

Posted in Canvas, Game Development, Programming, Web Development | Tagged , , | 6 Comments

Cellular Texture Generation with JavaScript and Canvas

Been messing with canvas again, and put together a little demo that creates procedural cell looking textures, based off of the Worley algorithm. You can achieve some pretty amazing results, also added the option to animate, but since the algorithm has not been optimized yet you have to keep the dimensions and number of points low. Also need to implement tiling. Heres a few examples of what you can produce with some minor changes in distance calculation for points. You can check out the generator here.

Posted in Canvas, Design, Game Development, Programming, Web Development | Tagged , , , , , | Leave a comment

Michiganwakeup.com Site Design

Just finsihed up another site for a client, http://www.michiganwakeup.com . They were very pleased with it. They asked for a site that was very simple and to the point. I still feel as if there is something missing.. but I ha a 48 hour turn around time for this so the I had to get developing pretty fast on the design. I guess there is always Wake Up Michigan 2011.

Posted in Design, Programming, Web Development | Tagged , | Leave a comment