input and textarea html5 ‘placeholder’ attribute support in IE (or other non compliant browsers)–jQuery plugin

Which results in

clip_image002

Where the text ‘Search Products’ disappears on focus and reappears on blur if the field is still empty. This text is not the ‘value’ of the field.

In addition:

  • If the value of the field is set to empty programmatically (using JS) the placeholder will appear (and vice versa when text is programmatically applied).
  • When the form is submitted with a placeholder visible, the value of the placeholder is not submitted.

Continue reading “input and textarea html5 ‘placeholder’ attribute support in IE (or other non compliant browsers)–jQuery plugin”

Force IE out of compatibility mode

Add this to within the <head>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

This forces IE out of compatibility mode. IE will ignore compatibility mode settings from the ‘(F12) Developer Tools’ facility.

Here’s some code that will allow testing.

Done using ‘IE Tester’ http://www.my-debugbar.com/wiki/IETester/HomePage

IE7 and IE8 will render this differently. IE8 in compatibility view mode will render it as IE7 does.

 

Comments welcome…..

 

 

 

CSS – Removing the (new-line) spaces between inline elements

image

Observe the gap between the checkbox and the label on the second instance!

This is a “feature” with inline (or inline-block) elements on a page. A new-line /carriage-return in the code is treated as white space between inline elements.

While good advice would be to work with this rather than against it as someone mentioned on stackoverflow; there are still times when you need to get rid of the spaces.

Continue reading “CSS – Removing the (new-line) spaces between inline elements”

Flexible Size, Flexible Color Icons for jQuery-UI

Different Icon Size, Different Icon Colors for jQuery-UI
Different Icon Size, Different Icon Colors for jQuery-UI

Achieving different size, different color icons in jQuery-ui and non-jQuery-ui web apps.

This tutorial reveals how FontAwesome icons can be used rather than trying to resize existing jQuery-ui icons.

I initially wanted jQuery-UI icons to be available in different sizes, for example:

<span class=”ui-icon ui-icon-pencil”></span> A Pencil Icon (existing)

<span class=”ui-icon ui-icon-pencil large red”></span> A large, red Pencil Icon (ideal, read on…)

The solution I found does not require jQuery or jQuery-UI but works perfectly seamlessly with it regardless.

Continue reading “Flexible Size, Flexible Color Icons for jQuery-UI”

jQuery-UI : change the color of a button using CSS classes

In many web applications it’s necessary to have more than one color button, primary and secondary for example.

Changing the color of jQuery-UI buttons using CSS
Changing the color of jQuery-UI buttons using CSS

This tutorial demonstrates how to achieve this using only CSS.

Continue reading “jQuery-UI : change the color of a button using CSS classes”

jQuery-UI : Specifying different Button Icon colors using only CSS classes

Doing this:

Results in

Specifying Button Icon colors using CSS only rather than using custom JavaScript
Specifying Button Icon colors using CSS only rather than using custom JavaScript

This tutorial demonstrates how changing the icon color can  be achieved.

Continue reading “jQuery-UI : Specifying different Button Icon colors using only CSS classes”

jQuery-UI : Applying an Icon to a button using CSS classes

This tutorial simply demonstrates a generic reusable JavaScript snipped which will allow you to specify Button Icon’s using only CSS classes. I.e. no need to apply Icons using JS anymore.

Adding icons to buttons using CSS only
Adding icons to buttons using CSS classes in the same way as using icons in general

Continue reading “jQuery-UI : Applying an Icon to a button using CSS classes”

jQuery-UI : Changing the color of an icon

This quick tutorial demonstrates how to change the color of jQuery UI icons.

e.g.

changing the color of jQuery-UI icons
different colored jQuery-UI icons

will result in red and blue icons respectively

Continue reading “jQuery-UI : Changing the color of an icon”