09
Jun
Sometimes you just want to display current weather on your website. We have actually had several clients recently request displaying local weather on their website. There are times when displaying weather is useful as in one of our clients who is a realtor and targets people moving into town. While they are browsing homes for sale they see the current weather at a glance. Nothing intrusive but simple and clean. Once again I set about finding a simple, lightweight, clean and easy to use jquery plugin to accomplish this. Although several exist none did what I wanted. Some don’t let you use a zipcode or location name and instead require a unique id from Yahoo. Others return non valid or bulky html which is just as bad. A few weeks ago I created simpleWeather a jQuery Plugin.
simpleWeather uses the Yahoo! Weather API to return plenty of weather data for a location. I recently updated the plugin (v1.4) which now gives you the ability to use a US Zipcode or specify your location. Example: 90210 or London, United Kingdom. Yahoo! does a pretty good job of returning the correct location, however in some cases a location may have multiple spots reporting data (such as the city itself and then the airport or military base). In this case, if the correct location is not being returned, you still have the ability to use the unique GEOID that is assigned to every location by Yahoo. More details on using and getting this id can be found in the plugin wiki. For now lets show some code to display a little weather data from Wichita Falls that we could stick in a sidebar. First the javascript to get the weather using simpleWeather.
(more…)
12
May
In the last post we completed a fully functional html5 web app using localStorage to store the data. So what else is there? First I think we should drop those ugly javascript alert()’s and use something that looks like it belongs in a web app, like the jQuery UI dialog()’s. Since we are allowing users to input a date, why not make it easier and add a datapicker so we don’t have to worry about what format they use. While we are at it lets style this app with some fancy new CSS3 that’s all the rave with the cool kids. Our aim for the style is an iPhone(ish) web app. First lets get into jQuery UI and adding our dialog’s and datepicker. You will need to include jqueryui as well as the theme (any theme will work, we will be using the smoothness theme that comes with the bundle).
Adding a dialog to the delete anchors on each item may seem pretty easy but I found that it took a little more work then I expected to make it work correctly. I ended up creating a deleteItem() function that looks like this.
(more…)
11
May
You should now have a good idea of how you can use localStorage yourself. However I promised we would create a simple html5 web app and thats what we are going to do. In this post we are going to get our app setup and ready for use. This means it will allow a user to create new entries in their database, display all the entries and allow them to delete a specific entry or remove all entries. In this post we won’t focus on the design of the app but rather making it functional. Part Four will cover the final steps including the design and adding some fancy css3. So, why am I still talking when you are here to see some code?
First we will take what we learned in the last post and write the function that will allow a user to create a new database entry. In this case, since we are creating a time tracking app, it means adding an item to the time log including project name, hours spent and the date. This means we are going to need a pretty simple form along with some code to run on submit that will store the item in the database. I will be using some jQuery for this code.
(more…)
