Highlighting Forms Using JQuery
Posted on April 26, 2007
Filed Under JQuery, Web development
One of the things that I like best about working in the web industry is the speed at which it changes. Granted, sometimes it seems new technologies are coming out so fast that it’s hard to keep up, but that challenge is a fun one.
AJAX (Asynchronous JavaScript and XML) is one of the hot buzz words in the web industry now, and it’s been one of our major distractions lately. In a nut-shell AJAX lets a web page do “stuff” without reloading.
There are several libraries that facilitate authoring AJAX and the one we really like is JQuery. In this post we will look at how to change the border colors on an input field when a they gain focus (when they are being typed in). Here’s a visual example.
The code that makes up our form is pretty simple:
To change this form, you’ll first need to do download the current JQuery library and upload it to your server. Personally I like to put all of my external .js files in their own folder (js) in addition to some good practical reasons for doing this (caching, download time, etc.), it helps keep things nice and organized. So save the JQuery library into your js folder as jquery.js.
In order to use the functions contained in the JQuery library, you’ll need to call the file. In the head of your document, place the following code:
The JQuery library is now ready for use. Now we will write a few lines of javascript that will tell the library what we want to do. First we need to tell the browser that we’re using javascript, this is done by including these lines:
Next we have to initialize the JQuery library by adding these lines to our javascript code:
This basically says “when the DOM (Document Object Model) is ready - do stuff. What stuff…this stuff
These three sections basically do the following:
- Set the borders on all input, textareas, and selects to #999 (light gray)
- When we put our cursor into a field (focus) change it to #EE9B00 (the orange from our logo)
- When we leave an input field (blur) set the border back to #999
That’s it - complex DOM scripting is so easy with JQuery.
More detail of what these JQuery lines can be found here.
10 Mandatory Wordpress Plugins
Posted on April 16, 2007
Filed Under Web development, Wordpress
- Akismet - This one pretty much goes without saying, Wordpress comes bundled with this plugin allowing anyone to use it with no more effort than pressing the activate button within the plugin tab - provided you have a Wordpress account (which is free - here). Akismet will drastically cut down on the volume of spam that inevitably bogs down comments to posts. Get this plugin! http://codex.wordpress.org/Akismet
- FAlbum - Share your Flickr photos right on your site - this plugin installs easily and has some great gallery functionality. You will need a Flickr account to use this plugin. http://www.randombyte.net/blog/projects/falbum/
- Improved Include Page - This plugin allows you to include the content of a page into any template you make. This plugin allows you to include information in sidebars, etc. and gives you the ability to edit them right from the admin. hhttp://www.vtardia.com/improved-include-page/
- Search Pages Plugin - The search pages plugin extends Wordpress’ default search functionality to pages as well as posts. If your site uses pages and posts, this plugin raises the level of professionalism on your site and gives users the functionality they expect - after all who whants search results from only a portion of your content http://randomfrequency.net/wordpress/search-pages/
- Google Sitemaps - This plugin generates an XML sitemap of your Wordpress blog. Search Engines use sitemaps like these to index your site. Although this plugin is called “Google Sitemaps” other search engines (such as Yahoo! and MSN) utilize the same technology. http://www.arnebrachhold.de/2005/06/05/google-sitemaps-generator-v2-final
- PodPress - Whether you’re an avid podcaster or you’re just looking for an easy way to post audio and video on your blog, PodPress is worth checking out. http://www.mightyseek.com/podpress/
- Gravitars - Gravitars (Globally Recognized Avitars) can be added to comments by installing this simple plugin. This plugin while not necessary from a functionality standpoint, does make reading comments a little more interesting, and puts a face to a name (in a manner of speaking) for your blog community. http://codex.wordpress.org/Using_Gravatars
- WP-Cal - For events, dates, or any future posting - this calendar is a must. Although not every site needs this functionality, if yours does, this is a wonderful plugin. http://www.fahlstad.se/wp-plugins/wp-cal/
- All in One SEO Pack - For any blogger who is serious about SEO (and you all should be) this plugin is a must. It will re-write headers, create unique descriptions for each page, and allow you to customize each page’s meta tags - every bit of which will make search engines smile down upon you. http://wp.uberdose.com/2007/03/24/all-in-one-seo-pack/
- Wordpress Widgets - Although rumor has it this this plugin will soon be part of the Wordpress core functionality, you’ll need to install it before that is the case. This handy plugin lets you do all kinds of modification to your sidebar without ever touching a line of code. It does require a “Widgets Friendly” theme - or your can make your theme Widget Friendly. http://automattic.com/code/widgets/
It’s Alive!
Posted on April 13, 2007
Filed Under Projects, Web development, Wordpress
Well we’re by no means finished with the site, it still has a long way to go, but we feel like we have finally gotten it to the point that it’s presentable. So without further ado, welcome to the new (and hopefully improved) Invisible Window web site!
Invisible Window Launches i-am TV site
Posted on April 12, 2007
Filed Under Projects, Web development
Hello folks, we’ve been a bit slow posting lately, and for good reason, we’ve been busy! In another joint effort with the fine folks over at JoMotion, we’re pleased to announce the launch of www.iam-tv.tv/. Although this is just a beta site and there is much more to do with it, we had a blast making it. This site allowed us to stretch our creative freedom and to utilize a custom Google Maps interface for the bar locator and we used some pretty cool flash video as well. If you have a minute, check out the site.
We’re naked
Posted on April 4, 2007
Filed Under Uncategorized
notice anything different? That’s right, no style sheet - we’re celebrating css naked day Thursday April, 5th.
Naked?
Posted on April 2, 2007
Filed Under Uncategorized
On Thursday April 5th, Invisible Window will be participating in the second annual CSS Naked Day. The following is how CSS Naked Day is described on the official web site.
The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your .
What does this mean in English? Web developers who believe in compliance with web standards (something Invisible Window is a big proponent of) strive to separate the content (XHTML) on a web page from the structure (CSS). There are many reasons for this, not the least of which is accessibility across many formats and platforms - a properly marked up XHTML page should be readable on everything from modern browsers, like Fire Fox to mobile devices like a Treo or Razr. On CSS Naked day, site owners agree to rid their site of CSS (formatting) and just show their naked markup (XHTML). Why? To illustrate that content still is king (and that we’re geeks).
