JQuery UI Missing animated gif

Wanted to spiff up my jquery autocomplete widget with styling like:

<style>
        .ui-autocomplete-loading { background: white
url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>

 

Missing animated gif for autocomplete loading situations
Missing animated gif for autocomplete loading situations

but this requires an animated image like this: which is not typically available in the set of jquery theme icons. So you can save this one here into your website’s images folder as ui-anim_basic_16x16.gif or you can use either of these base64 encoded versions, one for CSS and one as  an html img src entry:

image tag encoded as base64 for use in img src:
<img alt=”” src=”data:image/gif;base64,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” />

AND CSS BACKGROUND VERSION:
background-image: url(data:image/gif;base64,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);

Web Designer Tools

My Short List

Here is a short list of the tools i find most useful when constructing or changing websites. This is not a definitive list, it’s jst the tools that seem to work for me. You can always look at some of these :

Designer References

The Web Designer’s Wall – a constant reference on the design-side of life for tools, tips and tricks.


Another designer’s reference i like a lot is the CSS Tricks website. Tutorials and lessons plus news and views – spiffing !

Layouts

Grids and Layouts, I hear you ask ? Yes, please ! A simple grid approach need not be tough, see here. And my perennial favorite, dontcha know, 960.GS – super ! Layouts for bigger displays can be a pain. Step forward 978.GS.

Forms

To teach my entry forms some manners, I pick Formalize.me from Nathan Smith, a constant reference any any business site builder nerd.

The Tutorialzone.com crowd have some interesting tutorials i always find useful. Here is one on making Form checkboxes look better with some CSS and a bit of JQuery.

Menus

Have you ever seen a web site without a menu ? No, neither have I, so this quickie tool generates a lovely CSS3-based menuing system, courtesy of  CSSMenu Maker. Here’s one i made n about 10 minutes ->

CSS3 Menu Maker
CSS3 Menu Maker

Colors and Themes

For themes and color references, choose Color Scheme Designer – great for tetrad or analogic color combinations !

I may have blogged about Colors On The Web before, but i’ll repeat myself so you can see the neat tool they have to work out color themes. Look at their Color Wizzard to do the biz.

Visibone
Visibone

 Visibone is an old favorite of mine. It’s helps me build compatible color themes and offers more tools than just color manipulation. Worth a look.

Images

Ok, not really a designer’s tool, as such, but useful, never-the-less is this image-to-CSS converter. it’s makes any image into a base64 encoded text string for convenient insertion into CSS or HTML documents from Web Coder Tools.

Sometimes, i don’t always want to use text as a design component, so a tool to convert text into an image can be quite useful. Look here.

Gradients

CSS3 Gradients
CSS3 Gradients

The Ultimate CSS Gradient Generator gives us a quick route to several types of gradients. The CSS preview bar plus a convenient CSS-to-clipboard feature is vital in the day of high expectations from our user community.

Fonts

Now that text shadowing becomes possible, our font faces and text can take on a nicer look, it’s a bit like drop-shadows on boxes. CSS3Gen now makes this possible. Thanx, guys !

No list would be complete without a nod to the website font industry. My favorites come free courtesy of the mighty Google men (and great gals, too!). Start here and look here for their web font loader tool and the developer webfont showcase offers graphic examples of the many possibilities we have for free, courtesy of Google.

Just a last item from the Opera browser community is this nice image gallery display. It doesn’t use lightbox but is a cool tool just the same. Hope to blog on this one in more detail, soon.

Apologies

Ok, i confess, this post was really because i get so tired of looking up my links to favorite tools on my system as it’s always chocked to the gunnels with development software, i just can’t seem to find things. So for me, this is a tidy-up and i can always reference  my own post to retrieve them. Perhaps they’ll help you too. Cool tooling, guys !!

Buttons

Sometimes i like to have nice shiny buttons to jazz up the user experience. Gradient buttons are even more extreme but worth a look if you have a moment. Look here. For a full set of possible choices, look here. Screen shot 2013-10-03 at 12.32.07 AM


UPDATE

Can’t even really explain this one – just stumbled on it, so perhaps you’ll understand this a little better than me. Start here or look here to see the background of this web page move several objects around as the user moves the mouse over the panel – Wierd !
—> —> The big picture from http://web-features.net/ Sample of Beautiful Parallax Background

CSS3 Menus

You may remember my previous post on HTML5 and CSS3 features. In that post, we spoke of using several features to create a multiple composite background for our websites. Pls see: https://jnorthr.wordpress.com/2011/04/08/html5-multiple-background-images/ for further details.

Going one step farther, i’ve been researching how to build nice menu systems for both horizontal and vertical menus and their items. I have not been too impressed with many offerings until i found this one : http://css3menu.com/ which is a dandy little tool to do just that. The learning curve is not steep and i had built a nice menu in about 10 minutes.

Their download offers both windows and Mac versions, though i did not see any choice for ubuntu / linux people. Once unzipped and installed,  we see a panel we can use to construct a menu to our hearts content. Oh, did i tell you that it’s free ? Well, yes, it is and as is typical these days, an upgrade pack allows even more beautiful menus to be built.

Now i am a big fan of rounded corners and animated drop-down menu item lists. This tool does that as well. Here is a pix of their construction panel :

Nifty Tool to build website menus without the need for javascript. It can be used on most modern browsers too.

It’s a nifty tool to build website menus without the need for javascript. It can be used on most modern browsers too, at least those browsers that support the later CSS 3 specifications. You can choose from a choice of icons if you like to add icons to your menu items. Color schemes, font faces and point sizes, plus the usual bold, italic choices allow an infinite variety of customization choices.

Icon Theme Packs

Each main menu and sub-menu item can be given a URL that would allow your users to navigate around your website. Tooltips can also be included as helpful hints for your users. A set of pre-built templates are on offer if you choose not to roll your own. Main menu headings can each have sub menu-items, and each of those can have their own sub menu items. This allows us to construct really sophisticated systems to meet complex requirements.

And when your master-piece is complete, you can publish it as an html test page, or insert the CSS3 results into an existing file or save the entire project as a project file for later re-use.

All-in-all, a satisfying tool for the job to hand. Now where did i put that chequebook ?

10 Minutes from install to working menu system !

See menu template pull-out below. Template themes in gray are only for paid users.

A set or pre-built menu templates
A set of pre-built menu templates, names in gray are only for paidup users.

Themes for JQuery User Interface

Intro

For my own reference, when i style web pages using ui widgets from JQuery, it is often possible to include a nice link to a content data network – that’s Google, to you and me – and avoid downloading each and every version of jquery as it gets updated, changing the html code and a bunch of other stuff. And because of browser caching, once the theme is in the browser’s cache, it rarely needs to be read again.

So we can point our web page to an online resource for the latest versions of tools we commonly use to construct websites.

We can do the same with the different look-and-feel themes of our jquery user interface elements.

Themes

They are listed on the jQueryUI blog and updated with every release. Both Google and Microsoft provide CDN hosting for the library and themes.

In general, the URL of each theme CSS file is:

 // Google http://ajax.googleapis.com/ajax/libs/jqueryui/[UI.VERSION]/themes/[THEME-NAME]/jquery-ui.css // Microsoft http://ajax.aspnetcdn.com/ajax/jquery.ui/[UI.VERSION]/themes/[THEME-NAME]/jquery-ui.css 

Current Themes

I have listed the current (UI version 1.8.21) themes below:

Apple Overload
Apple Overload

Theme Switching, JQuery Style

As a temporary measure, uploaded this theme switching sample to http://gaelykproject.appspot.com/auto2.html which is some testing i’m doing on the jquery autocomplete feature. Click the theme switcher dropdown to choose from several themes offered by the JQuery team.

There is also a really cool tool from the JQuery UI stable that allows us to offer improved user experiences. How so ? A theme switcher tool is available here http://docs.jquery.com/UI/Theming/ThemeSwitcher and the same works out quite nicely. Set up your favorite JQ widget like autocomplete box of accordions, then include the CSS and javascript logic from this JQ site.

JQuery Theme Switching Tool In Action
JQuery Theme Switching Tool In Action

Since i’m bloggin on wordpress.com and it does not allow me to include actual examples, here are some screen pix i made earlier 🙂

Screen Showing JQuery Theme Switcher Tool
Screen Showing JQuery Theme Switcher Tool

When the user of your web page clicks this button, a dropdown panel opens. It shows all the themes currently available. Scroll up and down until you find a theme that is nice, then click on that theme and all jquery ui widgets on the page will magically assume the chosen theme.

If i click on the DARKNESS theme, then Voilà we have a different look-and-feel, Neo !

DARKNESS Theme Chosen For JQuery UI Widgets
DARKNESS Theme Chosen For JQuery UI Widgets

HTML Color Codes, Names and Hex Values

Put this here just for future reference. It is a list of the lesser known colour names we can use in our CSS styles by name rather than by the hex code. It does not show well here with the actual color. Suspect this is due to the style of this wordpress theme. Needs more research.

Aliceblue
F0F8FF
Antiquewhite
FAEBD7
Aqua
00FFFF
Aquamarine
7FFFD4
Azure
F0FFFF
Beige
F5F5DC
Bisque
FFE4C4
Black
000000
Blanchedalmond
FFEBCD
Blue
0000FF
Blueviolet
8A2BE2
Brown
A52A2A
Burlywood
DEB887
Cadetblue
5F9EA0
Chartreuse
7FFF00
Chocolate
D2691E
Coral
FF7F50
Cornflowerblue
6495ED
Cornsilk
FFF8DC
Crimson
DC143C
Cyan
00FFFF
Darkblue
00008B
Darkcyan
008B8B
Darkgoldenrod
B8860B
Darkgray
A9A9A9
Darkgreen
006400
Darkkhaki
BDB76B
Darkmagenta
8B008B
Darkolivegreen
556B2F
Darkorange
FF8C00
Darkorchid
9932CC
Darkred
8B0000
Darksalmon
E9967A
Darkseagreen
8FBC8F
Darkslateblue
483D8B
Darkslategray
2F4F4F
Darkturquoise
00CED1
Darkviolet
9400D3
deeppink
FF1493
Deepskyblue
00BFFF
Dimgray
696969
Dodgerblue
1E90FF
Firebrick
B22222
Floralwhite
FFFAF0
Forestgreen
228B22
Fuchsia
FF00FF
Gainsboro
DCDCDC
Ghostwhite
F8F8FF
Gold
FFD700
Goldenrod
DAA520
Gray
808080
Green
008000
Greenyellow
ADFF2F
Honeydew
F0FFF0
Hotpink
FF69B4
Indianred
CD5C5C
Indigo
4B0082
Ivory
FFFFF0
Khaki
F0E68C
Lavender
E6E6FA
Lavenderblush
FFF0F5
Lawngreen
7CFC00
Lemonchiffon
FFFACD
Lightblue
ADD8E6
Lightcoral
F08080
Lightcyan
E0FFFF
Lightgoldenrodyellow
FAFAD2
Lightgreen
90EE90
Lightgrey
D3D3D3
Lightpink
FFB6C1
Lightsalmon
FFA07A
Lightseagreen
20B2AA
Lightskyblue
87CEFA
Lightslategray
778899
Lightsteelblue
B0C4DE
Lightyellow
FFFFE0
Lime
00FF00
Limegreen
32CD32
Linen
FAF0E6
Magenta
FF00FF
Maroon
800000
Mediumauqamarine
66CDAA
Mediumblue
0000CD
Mediumorchid
BA55D3
Mediumpurple
9370D8
Mediumseagreen
3CB371
Mediumslateblue
7B68EE
Mediumspringgreen
00FA9A
Mediumturquoise
48D1CC
Mediumvioletred
C71585
Midnightblue
191970
Mintcream
F5FFFA
Mistyrose
FFE4E1
Moccasin
FFE4B5
Navajowhite
FFDEAD
Navy
000080
Oldlace
FDF5E6
Olive
808000
Olivedrab
688E23
Orange
FFA500
Orangered
FF4500
Orchid
DA70D6
Palegoldenrod
EEE8AA
Palegreen
98FB98
Paleturquoise
AFEEEE
Palevioletred
D87093
Papayawhip
FFEFD5
Peachpuff
FFDAB9
Peru
CD85
Pink
FFC0CB
Plum
DDA0DD
Powderblue
B0E0E6
Purple
800080
Red
FF0000
Rosybrown
BC8F8F
Royalblue
4169E1
Saddlebrown
8B4513
Salmon
FA8072
Sandybrown
F4A460
Seagreen
2E8B57
Seashell
FFF5EE
Sienna
A0522D
Silver
C0C0C0
Skyblue
87CEEB
Slateblue
6A5ACD
Slategray
708090
Snow
FFFAFA
Springgreen
00FF7F
Steelblue
4682B4
Tan
D2B48C
Teal
008080
Thistle
D8BFD8
Tomato
FF6347
Turquoise
40E0D0
Violet
EE82EE
Wheat
F5DEB3
White
FFFFFF
Whitesmoke
F5F5F5
Yellow
FFFF00
YellowGreen
9ACD32

<table>
<tr>
<td align="center" bgcolor="aliceblue" width="40px">Aliceblue<br />F0F8FF</td>
<td align="center" bgcolor="antiquewhite" width="40px">Antiquewhite<br />FAEBD7</td>
<td align="center" bgcolor="aqua" width="40px">Aqua<br />00FFFF</td>
</tr>

<tr>
<td align="center" bgcolor="aquamarine" width="40px">Aquamarine<br />7FFFD4</td>
<td align="center" bgcolor="azure" width="40px">Azure<br />F0FFFF</td>
<td align="center" bgcolor="beige" width="40px">Beige<br />F5F5DC</td>
</tr>

<tr>
<td align="center" bgcolor="bisque" width="40px">Bisque<br />FFE4C4</td>
<td align="center" bgcolor="black" width="40px"><font color="FFFFFF">Black<br />000000</font></td>
<td align="center" bgcolor="blanchedalmond" width="40px">Blanchedalmond<br />FFEBCD</td>
</tr>

<tr>
<td align="center" bgcolor="blue" width="40px">Blue<br />0000FF</td>
<td align="center" bgcolor="bluevoilet" width="40px">Blueviolet<br />8A2BE2</td>
<td align="center" bgcolor="brown" width="40px">Brown<br />A52A2A</td>
</tr>

<tr>
<td align="center" bgcolor="burlywood" width="40px">Burlywood<br />DEB887</td>
<td align="center" bgcolor="cadetblue" width="40px">Cadetblue<br />5F9EA0</td>
<td align="center" bgcolor="chartreuse" width="40px">Chartreuse<br />7FFF00</td>
</tr>

<tr>
<td align="center" bgcolor="chocolate" width="40px">Chocolate<br />D2691E</td>
<td align="center" bgcolor="coral" width="40px">Coral<br />FF7F50</td>
<td align="center" bgcolor="cornflowerblue" width="40px">Cornflowerblue<br />6495ED</td>
</tr>

<tr>
<td align="center" bgcolor="cornsilk" width="40px">Cornsilk<br />FFF8DC</td>
<td align="center" bgcolor="crimson" width="40px">Crimson<br />DC143C</td>
<td align="center" bgcolor="cyan" width="40px">Cyan<br />00FFFF</td>
</tr>

<tr>
<td align="center" bgcolor="darkblue" width="40px">Darkblue<br />00008B</td>
<td align="center" bgcolor="darkcyan" width="40px">Darkcyan<br />008B8B</td>
<td align="center" bgcolor="darkgoldenrod" width="40px">Darkgoldenrod<br />B8860B</td>
</tr>

<tr>
<td align="center" bgcolor="darkgray" width="40px">Darkgray<br />A9A9A9</td>
<td align="center" bgcolor="darkgreen" width="40px">Darkgreen<br />006400</td>
<td align="center" bgcolor="darkkhaki" width="40px">Darkkhaki<br />BDB76B</td>
</tr>

<tr>
<td align="center" bgcolor="darkmagenta" width="40px">Darkmagenta<br />8B008B</td>
<td align="center" bgcolor="darkolivegreen" width="40px">Darkolivegreen<br />556B2F</td>
<td align="center" bgcolor="darkorange" width="40px">Darkorange<br />FF8C00</td>
</tr>

<tr>
<td align="center" bgcolor="darkorchid" width="40px">Darkorchid<br />9932CC</td>
<td align="center" bgcolor="darkred" width="40px">Darkred<br />8B0000</td>
<td align="center" bgcolor="darksalmon" width="40px">Darksalmon<br />E9967A</td>
</tr>

<tr>
<td align="center" bgcolor="darkseagreen" width="40px">Darkseagreen<br />8FBC8F</td>
<td align="center" bgcolor="darkslateblue" width="40px">Darkslateblue<br />483D8B</td>
<td align="center" bgcolor="darkslategray" width="40px">Darkslategray<br />2F4F4F</td>
</tr>

<tr>
<td align="center" bgcolor="darkturquoise" width="40px">Darkturquoise<br />00CED1</td>
<td align="center" bgcolor="darkviolet" width="40px">Darkviolet<br />9400D3</td>
<td align="center" bgcolor="deeppink" width="40px">deeppink<br />FF1493</td>
</tr>

<tr>
<td align="center" bgcolor="deepskyblue" width="40px">Deepskyblue<br />00BFFF</td>
<td align="center" bgcolor="dimgray" width="40px">Dimgray<br />696969</td>
<td align="center" bgcolor="dodgerblue" width="40px">Dodgerblue<br />1E90FF</td>
</tr>

<tr>
<td align="center" bgcolor="firebrick" width="40px">Firebrick<br />B22222</td>
<td align="center" bgcolor="floralwhite" width="40px">Floralwhite<br />FFFAF0</td>
<td align="center" bgcolor="forestgreen" width="40px">Forestgreen<br />228B22</td>
</tr>

<tr>
<td align="center" bgcolor="fuchsia" width="40px">Fuchsia<br />FF00FF</td>
<td align="center" bgcolor="gainsboro" width="40px">Gainsboro<br />DCDCDC</td>
<td align="center" bgcolor="ghostwhite" width="40px">Ghostwhite<br />F8F8FF</td>
</tr>

<tr>
<td align="center" bgcolor="gold" width="40px">Gold<br />FFD700</td>
<td align="center" bgcolor="goldenrod" width="40px">Goldenrod<br />DAA520</td>
<td align="center" bgcolor="gray" width="40px">Gray<br />808080</td>
</tr>

<tr>
<td align="center" bgcolor="green" width="40px">Green<br />008000</td>
<td align="center" bgcolor="greenyellow" width="40px">Greenyellow<br />ADFF2F</td>
<td align="center" bgcolor="honeydew" width="40px">Honeydew<br />F0FFF0</td>
</tr>

<tr>
<td align="center" bgcolor="hotpink" width="40px">Hotpink<br />FF69B4</td>
<td align="center" bgcolor="indianred" width="40px">Indianred<br />CD5C5C</td>
<td align="center" bgcolor="indigo" width="40px">Indigo<br />4B0082</td>
</tr>

<tr>
<td align="center" bgcolor="ivory" width="40px">Ivory<br />FFFFF0</td>
<td align="center" bgcolor="khaki" width="40px">Khaki<br />F0E68C</td>
<td align="center" bgcolor="lavender" width="40px">Lavender<br />E6E6FA</td>
</tr>

<tr>
<td align="center" bgcolor="lavenderblush" width="40px">Lavenderblush<br />FFF0F5</td>
<td align="center" bgcolor="lawngreen" width="40px">Lawngreen<br />7CFC00</td>
<td align="center" bgcolor="lemonchiffon" width="40px">Lemonchiffon<br />FFFACD</td>
</tr>

<tr>
<td align="center" bgcolor="lightblue" width="40px">Lightblue<br />ADD8E6</td>
<td align="center" bgcolor="lightcoral" width="40px">Lightcoral<br />F08080</td>
<td align="center" bgcolor="lightcyan" width="40px">Lightcyan<br />E0FFFF</td>
</tr>

<tr>
<td align="center" bgcolor="lightgoldenrodyellow" width="40px">Lightgoldenrodyellow<br />FAFAD2</td>
<td align="center" bgcolor="lightgreen" width="40px">Lightgreen<br />90EE90</td>
<td align="center" bgcolor="lightgrey" width="40px">Lightgrey<br />D3D3D3</td>
</tr>

<tr>
<td align="center" bgcolor="lightpink" width="40px">Lightpink<br />FFB6C1</td>
<td align="center" bgcolor="lightsalmon" width="40px">Lightsalmon<br />FFA07A</td>
<td align="center" bgcolor="lightseagreen" width="40px">Lightseagreen<br />20B2AA</td>
</tr>

<tr>
<td align="center" bgcolor="lightskyblue" width="40px">Lightskyblue<br />87CEFA</td>
<td align="center" bgcolor="lightslategray" width="40px">Lightslategray<br />778899</td>
<td align="center" bgcolor="lightsteelblue" width="40px">Lightsteelblue<br />B0C4DE</td>
</tr>

<tr>
<td align="center" bgcolor="lightyellow" width="40px">Lightyellow<br />FFFFE0</td>
<td align="center" bgcolor="lime" width="40px">Lime<br />00FF00</td>
<td align="center" bgcolor="limegreen" width="40px">Limegreen<br />32CD32</td>
</tr>

<tr>
<td align="center" bgcolor="linen" width="40px">Linen<br />FAF0E6</td>
<td align="center" bgcolor="magenta" width="40px">Magenta<br />FF00FF</td>
<td align="center" bgcolor="maroon" width="40px">Maroon<br />800000</td>
</tr>

<tr>
<td align="center" bgcolor="mediumaquamarine" width="40px">Mediumauqamarine<br />66CDAA</td>
<td align="center" bgcolor="mediumblue" width="40px">Mediumblue<br />0000CD</td>
<td align="center" bgcolor="mediumorchid" width="40px">Mediumorchid<br />BA55D3</td>
</tr>

<tr>
<td align="center" bgcolor="mediumpurple" width="40px">Mediumpurple<br />9370D8</td>
<td align="center" bgcolor="mediumseagreen" width="40px">Mediumseagreen<br />3CB371</td>
<td align="center" bgcolor="mediumslateblue" width="40px">Mediumslateblue<br />7B68EE</td>
</tr>

<tr>
<td align="center" bgcolor="mediumspringgreen" width="40px">Mediumspringgreen<br />00FA9A</td>
<td align="center" bgcolor="mediumturquoise" width="40px">Mediumturquoise<br />48D1CC</td>
<td align="center" bgcolor="mediumvioletred" width="40px">Mediumvioletred<br />C71585</td>
</tr>

<tr>
<td align="center" bgcolor="midnightblue" width="40px">Midnightblue<br />191970</td>
<td align="center" bgcolor="mintcream" width="40px">Mintcream<br />F5FFFA</td>
<td align="center" bgcolor="mistyrose" width="40px">Mistyrose<br />FFE4E1</td>
</tr>

<tr>
<td align="center" bgcolor="moccasin" width="40px">Moccasin<br />FFE4B5</td>
<td align="center" bgcolor="navajowhite" width="40px">Navajowhite<br />FFDEAD</td>
<td align="center" bgcolor="navy" width="40px">Navy<br />000080</td>
</tr>

<tr>
<td align="center" bgcolor="oldlace" width="40px">Oldlace<br />FDF5E6</td>
<td align="center" bgcolor="olive" width="40px">Olive<br />808000</td>
<td align="center" bgcolor="olivedrab" width="40px">Olivedrab<br />688E23</td>
</tr>

<tr>
<td align="center" bgcolor="orange" width="40px">Orange<br />FFA500</td>
<td align="center" bgcolor="orangered" width="40px">Orangered<br />FF4500</td>
<td align="center" bgcolor="orchid" width="40px">Orchid<br />DA70D6</td>
</tr>

<tr>
<td align="center" bgcolor="palegoldenrod" width="40px">Palegoldenrod<br />EEE8AA</td>
<td align="center" bgcolor="palegreen" width="40px">Palegreen<br />98FB98</td>
<td align="center" bgcolor="paleturquoise" width="40px">Paleturquoise<br />AFEEEE</td>
</tr>

<tr>
<td align="center" bgcolor="palevioletred" width="40px">Palevioletred<br />D87093</td>
<td align="center" bgcolor="papayawhip" width="40px">Papayawhip<br />FFEFD5</td>
<td align="center" bgcolor="peachpuff" width="40px">Peachpuff<br />FFDAB9</td>
</tr>

<tr>
<td align="center" bgcolor="peru" width="40px">Peru<br />CD85</td>
<td align="center" bgcolor="pink" width="40px">Pink<br />FFC0CB</td>
<td align="center" bgcolor="plum" width="40px">Plum<br />DDA0DD</td>
</tr>

<tr>
<td align="center" bgcolor="powderblue" width="40px">Powderblue<br />B0E0E6</td>
<td align="center" bgcolor="purple" width="40px">Purple<br />800080</td>
<td align="center" bgcolor="red" width="40px">Red<br />FF0000</td>
</tr>

<tr>
<td align="center" bgcolor="rosybrown" width="40px">Rosybrown<br />BC8F8F</td>
<td align="center" bgcolor="royalblue" width="40px">Royalblue<br />4169E1</td>
<td align="center" bgcolor="saddlebrown" width="40px">Saddlebrown<br />8B4513</td>
</tr>

<tr>
<td align="center" bgcolor="salmon" width="40px">Salmon<br />FA8072</td>
<td align="center" bgcolor="sandybrown" width="40px">Sandybrown<br />F4A460</td>
<td align="center" bgcolor="seagreen" width="40px">Seagreen<br />2E8B57</td>
</tr>

<tr>
<td align="center" bgcolor="seashell" width="40px">Seashell<br />FFF5EE</td>
<td align="center" bgcolor="sienna" width="40px">Sienna<br />A0522D</td>
<td align="center" bgcolor="silver" width="40px">Silver<br />C0C0C0</td>
</tr>

<tr>
<td align="center" bgcolor="skyblue" width="40px">Skyblue<br />87CEEB</td>
<td align="center" bgcolor="slateblue" width="40px">Slateblue<br />6A5ACD</td>
<td align="center" bgcolor="slategray" width="40px">Slategray<br />708090</td>
</tr>

<tr>
<td align="center" bgcolor="snow" width="40px">Snow<br />FFFAFA</td>
<td align="center" bgcolor="springgreen" width="40px">Springgreen<br />00FF7F</td>
<td align="center" bgcolor="steelblue" width="40px">Steelblue<br />4682B4</td>
</tr>

<tr>
<td align="center" bgcolor="tan" width="40px">Tan<br />D2B48C</td>
<td align="center" bgcolor="teal" width="40px">Teal<br />008080</td>
<td align="center" bgcolor="thistle" width="40px">Thistle<br />D8BFD8</td>
</tr>

<tr>
<td align="center" bgcolor="tomato" width="40px">Tomato<br />FF6347</td>
<td align="center" bgcolor="turquoise" width="40px">Turquoise<br />40E0D0</td>
<td align="center" bgcolor="violet" width="40px">Violet<br />EE82EE</td>
</tr>

<tr>
<td align="center" bgcolor="wheat" width="40px">Wheat<br />F5DEB3</td>
<td align="center" bgcolor="white" width="40px">White<br />FFFFFF</td>
<td align="center" bgcolor="whitesmoke" width="40px">Whitesmoke<br />F5F5F5</td>
</tr>
<tr>
<td align="center" bgcolor="yellow" width="40px">Yellow<br />FFFF00</td>
<td align="center" bgcolor="yellowgreen" width="40px">YellowGreen<br />9ACD32</td>
</tr>
</table>

Code Fragment Syntax Highlighter – Part Two

Read part one here : Syntax Highlighter Part One

Ok, here is a screen snippet of what our test2.html page looks like when rendered by a browser. Notice each color fragment has it’s code keywords colored according to the language of the fragment. Also note that the ‘Midnight’ theme is used for all code fragment displays. Click to grow.

Code Fragment Test Page
Code Fragment Test Page

Image of Example Folder Layout
Image of Example Folder Layout

Here is my test folder with a ‘styles’ sub-folder for the test2.html file. The HTML for our example test page follows. As Alex explains in his installation page, there are two approaches to markup of code fragments :

  1. Use the html <pre> tag
  2. Use the html <script> tag witha CDATA extension

Again, there are several javascript files we need to declare in our test2.html page. A core j/s file with overall logic plus three j/s brushes for the three code fragments, each in a different programming language.

For overall color control, five CSS files declare 1) the core colors 2) a theme default if no override theme has been chosen and 3) in this case we do use an overriding theme called ‘Midnight’. There are several other themes you can try.

Points to note in the following html document – both styles of highlighting are used. The <pre> element needs a class declaration for the brush (programming language) contained within the fragment. You can see class=’brush: groovy’ in the first fragment to color groovy keywords. The <script type=”syntaxhighlighter” class=”brush: js”><![CDATA[ declaration is the alternative approach to present code fragments. We can place any < or > characters within the CDATA of a script declaration otherwise if we use the pre approach, we need to manually change each < and > for their &lt; and &gt; equivalents.

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="./styles/shCore.css" type="text/css" />
<link rel="stylesheet" href="./styles/shCoreDefault.css" type="text/css" />
<link rel="stylesheet" href="./styles/shCoreMidnight.css" type="text/css" />
<link rel="stylesheet" href="./styles/shThemeDefault.css" type="text/css" />
<link rel="stylesheet" href="./styles/shThemeMidnight.css" type="text/css" />

<title>Technology Page To Check Muliple Column text Features</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="./scripts/shCore.js"></script>
<script type="text/javascript" src="./scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="./scripts/shBrushJava.js"></script>
<script type="text/javascript" src="./scripts/shBrushGroovy.js"></script>
</head>
<body >
<h2>Code Examples Using Midnight Theme</h2>
<div><h3>Groovy Code Fragment</h3>
<p>
<pre class='brush: groovy'>
println 'Hi kids'
def cats=[]
cats.each{cat -> println cat}
</pre>
</p></div>
<h3>Javascript Code Fragment</h3>
<p>
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
var setArray = function(elems) {
this.length = 0;
push.apply(this, elems);
return this;
}
]]></script>
</p>

<h3>Java Code Fragment</h3>

<script type="syntaxhighlighter" class="brush: java"><![CDATA[
// require(url:'https://scripting.dev.java.net', jar:'groovy-engine.jar')
// this runs in groovy 1.8 using java 1.6 to run the script engine

import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;

public class CalcMain {
public static void main(String[] args) throws Exception {
System.out.println("Starting …");

ScriptEngineManager factory = new ScriptEngineManager();
ScriptEngine engine = factory.getEngineByName("groovy");

// basic example
System.out.println(engine.eval("(1..10).sum()"));

// example showing scripting variables
engine.put("first", "HELLO");
engine.put("second", "world");
System.out.println(engine.eval("first.toLowerCase() + second.toUpperCase()"));
System.out.println("Ending ...");
}
}
]]></script>
</p>

<script type="text/javascript">
$(document).ready(function()
{
SyntaxHighlighter.highlight();
});
</script>
</body>
</html>

Finally, look at the bottom of the html to see how we invoke syntax highlighter. We can invoke it only after the page has loaded completely. Here is a nice use of JQuery as it has a convenient function of $(document).ready(); which is called upon page load completion. It’s a nice place to insert our call to fire up the highlighter engine. Copy the code above into a textfile named test2.html and then use your favorite browser to open this file. If you’ve done it all correctly, you’ll be rewarded with a display like the screen snippet shown at the top of this post.

It look quite a while to figure out all these bits and pieces. The website documentation is sparse hence a steep lerning curve. Hope this helps you a bit. 🙂