Category Archive: HTML

Subcategories: No categories

5 jQuery Resources for Select Tags in HTML

The select tag in HTML has been getting a lot of over-due code love.    Perhaps all of this attention comes from being a vital tag used in so many forms but natively lacks flexibility and consistency across browsers.   Whatever the reason – there are now a myriad of tools available to help make select boxes work and look the way you want them to.  Here are a few resources that stand out from the crowd when it comes to working with those select tags.

jQuery UI Selectmenu

jQuery UI Selectmenu

http://jquerystyle.com/2009/08/24/jquery-ui-selectmenu

Built on jQuery UI this plugin converts your select elements into pure eye candy.  jQuery U Selectmenu DemoThe select tags are replaced in the DOM with more cross browser friendly tags and the result is theme based elements for your forms which provide the basic operations of a select tag as well as icon inclusion, multi-line support, max-height (with scrollbar thereafter), and the option to drop down or pop up as well as optgroups.

Key presses are partially supported.  Tab and escape Key work.  Up and down arrow keys do not.  You can download selectmenu from github.

jQuery SelectBox Plugin

jQuery Select Box

http://abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/

The jQuery SelectBox Plugin offers a solid base with lots of native support.    As the name suggests this plugin is specific to the select boxes.   jQuery Select Box DemoThis plugin also replicates the select object in the DOM with alternative tags which open the doors to greater styling and consistency across browsers.  A few of the key strengths about this plugin are the key press supports including esc, tab and arrow keys.

The plugin comes with one default look and feel.  There is no theme selection.  Customization would require the modification of the included CSS file.

 JavaScript Image Combobox

jQuery Image Dropdown

http://www.marghoobsuleman.com/jquery-image-dropdown

The JavaScript Image Combobox is a slick plugin that easily adds icon support to dropdowns menus while maintaining a lot of the native functionality that select tags bring to the browser window.   jquery-image-dropdown-demoThis jQuery plugin works by parsing the select box tag and, once again, replacing the objects in the DOM with tags that more more flexible and consistent.

There are no themes provided other than the default, but the CSS is readily available for custom styling.   You can download this plugin from gtihub.

 Dropkick.js

dropkick.js

http://jamielottering.github.com/DropKick/

We featured dropkick.js on July 6 in our post Kick Your Dropdowns Up a Notch with ‘DropKick’.  As we are reviewing the best options out there for managing select tags we would be remiss if we failed to include dropkick.js. As with the other plugins dropkick replaces the select tag with more flexible code and provides a themed approach for excellent out of the box support.

 Chosen

Chosen

http://harvesthq.github.com/chosen/

Chosen is another plugin we featured recently and feel it should be listed here as we cover the general scope of tools available to work with select tags.   The feature that stands out about Chosen is the way it handles the multi-select drop downs.  The result is a smooth system that feels more like an ajax controlled tagging system.  It really brings the intuitiveness that a default multi-select box lacks.

Avert Image Blockers – Convert your Images into HTML

http://www.imgtocss.com/

Email clients, like Outlook, unapologetically treat all images the same. After years of scams, viruses and malware injections email clients have largely put image display second to security by default. Wouldn’t it be great if you could easily embed an image of high importance right in the code – and display an image without an image file? With Img to CSS you can convert your images into straight HTML and place the code in the email.
Img to CSS is a basic site with a single purpose – to easily convert images into HTML.

How does it work?

In Dream Weaver

The HTML in Dreamweaver's Design view

The HTML code that is generated consists of a single table tag with several tiny cells.  Each cell has a background color and act as pixels in displaying the image.   For very complex images you can almost expect one cell for every single pixel in the image.

The obvious down side to converting your image into a huge table is the amount of HTML code needed.   In the example above the .jpg file on the left is only 5kb while the HTML code required to create the same image amounts to 125kb!   The converter does try to manage ballooning code by merging neighboring like colored cells – thereby reducing the code somewhat.   But the ballooning code is the bottleneck here.

And, as with all code, the environment into which it is placed can greatly effect the code display.   It is possible that pre-existing CSS could destroy the image.  Case-in-point: I had to override some theme CSS in this very post to get the above image to display correctly.

The Value is in the Emails

The strength of Img to CSS is the ability to convert your image into something that is not an image for email delivery.   With a tool like this you could easily convert a company logo or icons into HTML and email along with full confidence that they will arrive intact.  Obviously you are going to want to stick with small images and icons as the code size will balloon exponentially relative to the dimensions of the image.

Img to CSS offers 3 free conversions to try out their package.   Conversions are $.50 each thereafter.  They also offer a monthly subscription ($30) for unlimited conversions.  In addition they offer an API for developers to plugin to their service.

 

Transition from HTML 4 to HTML 5 Cheat Sheet

If you are converting HTML 4 to HTML 5 or simply looking for a good starting point to learn the differences between the two this guide is for you. Encapsulating HTML 5 from the perspective of “What’s different from previous versions” sets this little gem apart.

HTML 5 Cheat Sheet

http://www.html-5.com/cheat-sheet/

Visually the site is non-apologetic as it sports some sort of an “abandoned swimming pool” theme.  Obviously function over form is the mantra here.

However – what this site lacks in looks it more than makes up for in great content.  This site has a more information than one would expect a basic cheat sheet to contain (The printable PDF is 6 pages long) but the reference value this site can bring to your HTML arsenal earns its spot in your bookmarks.

http://www.html-5.com/cheat-sheet/