Tag: CSS

jQuery-UI arrow boxes

jQuery-UI arrow boxes

This blog describes how to add arrows to the standard jQuery-UI error and highlight boxes. Arrows can be either from the left, right, top or bottom.

jQuery-UI Split Button

jQuery-UI Split Button

Here’s how to create a split button with jQuery-ui $( “#mySplitButton” ).splitButton();

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

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

Which results in 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 […]

jQuery-UI – Rich Autocomplete component

jQuery-UI – Rich Autocomplete component

A problem with the out-of-box jQuery-ui autocomplete component is that: Only text is shown in the dropdown That same text populates the field upon list selection. Thankfully, this does not have to be the case. Images and other markup can easily be rendered in the suggestion list. Consequently, the text […]

Force IE out of compatibility mode

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 […]

Creating a dark semi-transparent modal overlay covering the whole page

Creating a dark semi-transparent modal overlay covering the whole page

This tutorial demonstrates how to do this with CSS and jQuery: I.e. placing a dark, semi-transparent, user-blocking/modal overlay (with a title in this case) over the whole page.

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

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

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 […]

Flexible Size, Flexible Color Icons for jQuery-UI

Flexible Size, Flexible Color Icons 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: […]

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

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

Doing this:

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

jQuery-UI : Applying an Icon to a button using 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.

jQuery-UI : Changing the color of an icon

jQuery-UI : Changing the color of an icon

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

will result in red and blue icons respectively

Permit CSS, JS and other resources in a Spring application

Permit CSS, JS and other resources in a Spring application

In Spring 3 Web MVC applications every request is sent through an @Controller method. This is undesirable for CSS, JS and image files. Overcome the problem as so.