Words about stuff, and things related to stuff

jQuery 'equal columns' script that loads after images

The usual syntax for setting up your jquery script in any page looks like this, using the 'document.ready' statement to launch all your stuff as soon as the page loads:

<script type='text/javascript'>
$(document).ready(function() {
// all your jquery stuff goes here

This is great, better than window.onload or body.onload, since it runs before any images or other files have finished downloading to the browser. However...  there are times when this is not so great, i.e. my latest attempt at my own 'equal columns' script.

First, I had this:

<script type='text/javascript'>
$(document).ready(function() {
var lh = $('#mainCol').height();
var rh = $('#rightCol').height();
if (lh >= rh){
//alert('left : ' + lh);
} else {
//alert('right : ' + rh);

Using the dimensions plugin (which is now a part of the main jquery library as of the latest release), this script gets the height of the 'rightCol' and the 'mainCol', figures out which one is a greater number, and assigns that number as the height of the other column.

works great - unless you happen to have images loaded in either column that do not have a specified height attribute.

In my case, I was loading a full column of large thumbnails in the rightCol div, and since jquery was firing before the page was fully loaded, firefox was reporting the height of the images as 'null', which caused all kinds of problems - the most important of which was that the columns were equal to the *shorter* column length... oops.

(note the alerts in the script comments - remove the // to see which of your columns is showing as longer)
Along comes jQuery's simple load() method, to the rescue!

by simply wrapping all my jquery goodness in
and then calling that function as part of the usual 'document.ready',
everything seems just fine... the columns are equal, since the script to fix the height is loading *after* the images have loaded to the page.

This causes a slight bit of 'motion' as the page is loading, but on the longer pages it is below the first screen height, and is very quick anyway.

**NOTE: edited 10/7/08 - it works better with just the window.load statement, no document.ready handler wrapped around it

<script type='text/javascript'>
$(document).ready(function() {
var lh = $('#mainCol').height();
var rh = $('#rightCol').height();
if (lh >= rh){
//alert('left : ' + lh);
} else {
//alert('right : ' + rh);

Truncate text on full words only - a simple version of "full left"

Common scenario: you want to show the first part of a long chunk of text, and then have the full text available via a link like " (more...) " , which would either show the text with javascript (more on that later) or take you to another page to see the full article.

For a long time now I have used the "fullLeft()" udf, which works just fine and does exactly what it should.  But the other day, I got a wild hair and, rather than calling in the fullLeft function to my page, decided to script something right in place... just 'because'.

And whaddyaknow, it works... works great, really.
But it is so simple - what am I missing?

Like most things, my 'aha' is haunted by a 'what if', as in 'what if it breaks on certain characters or other stuff in the text'?  What if I don't really know what the heck I am doing? But ...hey... it works!

//// Here is the logic:

take a chunk of text and a number, passed in as variables.

replace all line breaks in the text with <br> tags (easy to remove if not needed)

if the length of the text is more than the given number, cut it off at that
number of characters

find the number of characters at the end of the remaining string that come after the last space ( ' '), and remove them

if the text was trimmed, output the text in a p tag with a (more...) link  - this can all be modified to give the link a url, or in my case to use javascript to show the full text in place of the truncated content.

/// Here is the code:

 * Another version of "full left"
 * @param trimlength      Length, in characters, to trim text to (Required)
 * @param rawtext           Text to trim (Required)
 * @return Returns a string with an ellipsis (...) 
 * @author Michael Evangelista (mredesign.com)
 * @created June 6, 2008
 <cfinclude template="func/trimtext.cfm">
 <cfoutput>#trimtext(recordbody, 160)#</cfoutput>
function trimtext(rawtext, trimlength)
// this line replaced line returns in the text block with html breaks
   rawtext = replace(rawtext, chr(13), '<br />', 'all');
      if (len(rawtext) gt trimlength)
   cuttext = left(rawtext, trimlength);
   trimlen = len(cuttext) - len(listLast(cutText, ' '));
   texttouse = left(rawtext, trimlen) & '... <em>(<a class="morelink" href="##">more</a>)</em>';
   texttouse = rawtext;
   textoutput = '<p>' & texttouse & '</p>';
   return textoutput;

Feedback and/or testing appreciated.

Demo: Dynamic CF Navigation Menu with 'current page' marker

ColdFusion Navigation Menu Demo

Sometimes you just need a simple menu.

If your list is very long, making a link with a class and an id, typing the href value for each, and inserting the link text all by hand can get old. And then - how do you show which link is the current page?

Here we set up a simple list of url/text pairs, and then loop through that list to create our links.

Then - much like the popular javascript-based 'current page' menus - we look at the value of the link url, and the current page url (cgi.SCRIPT_NAME) - if they are the same, we have a winner. One other thing I find myself commonly wanting is a bit of special css on the first or last item in a list, so the code also assigns IDs to those links.

See the demo   See the code

Show a random image with <cfdirectory>

This is a chunk of code I've had around for a while... fairly useful, felt like sharing.

Basically you're looking in a given folder with <cfdirectory> and pulling out a random image by counting between 1 and the number of images found. Just enter the relative location of your images folder and you're all set.

<!--- set the relative path to the folder with your images --->
<cfset imagesFolder = "./">

<!--- code to look in directory, choose one image at random --->
<cfdirectory directory="#expandPath(imagesFolder)#" filter="*.jpg" name="getPics" action="list"/>
<cfset maxrows = getPics.recordCount/>
<cfset startRow = randRange(1, maxrows)/>

<!--- if one or more photos was found --->
<cfif maxrows gt 0>
    <div class="showPic">
    <cfoutput query="getPics" startrow="#startRow#" maxrows="1">
        <img src="#imagesFolder#/#name#" alt="#listFirst(name, ".")#"/>
    <br /><br />
    Hit refresh or reload to get a different image.

NOTE: you might want to give the image a different alt tag, like the name of your site, or... whatever. (this code will use the filename of the image). This same code can be adapted for any files in any directory - change the 'filter' attribute to allow whatever file extension you like.

With CF8, you could get also the height and width of the image to create proper height/width attributes for the <img> tag.

[Update 1/22/08] This mini-tutorial is now featured on learncf.com

demo: GeoEncode any address with cf_googleMap.cfc


Enter any address and see it on a googlemap.

This demo was up in another form for quite some time... I was putting a googlemap in a current project and decided to give this a proper place in the demos list.

If you use maps on your pages, you should surely take a look at John Blayter's versatile and well-documented cf_googleMap.cfc

Sitemap XML Generator demo - make a sitemap on the fly with _sitemap.cfc

Make an xml sitemap of any site on the fly!

Being recently and completely impressed with Mike Henke's  Google Sitemap XML Creator , I wanted to see if I could make it work on any site, like a little remote-control spider-bot. Sure enough... this thing is so slick and easy to use, I was able to put the demo together over a coffee break.

The cfc contains another method for submitting the sitemap (removed from demo) and allows deeper spidering - limited here to 2 levels.

This little cfc is a true gem.

The form and resulting code runs out of a single include file, which I will continue to tweak ... if anybody wants a copy just drop me an email.

jQuery multipart accordion form with validation

Finally ... I managed to put together a multi part form that allows the user to go back and forward between the steps without passing a long list of variables around on the server.

Adding the custom validation on each step was a bit of a trick (thanks Joern and others for your help!), since the original validation is meant to run  when the form is submitted, not just when a 'next' link is clicked.

There are more notes at the top of the multi part form demo page

Playing with CFimage - a CF demo

Since I first heard about CF8 earlier this year, I have been eagerly waiting to get my hands on the new image functions.  Tonight, while watching the Red Sox walk all over the Indians on their way to the World Series, I spent some time with Ben Nadel's excellent cfimage tutorials (part I and II), and built this fun little demo  to show  off some of the functions.

Overall I am extremely impressed with both the speed and quality, especially for resizing. As I understand it, the java image resizing functions have been greatly improved upon, and the fact that quality is so easily controllable - by passing a value between 0.0 and 1.0 - is really nice.

There are a lot more things that CFimage can do... but this demo gives you some of the basics: www.mredesign.com/demos/cfimage-example/index.cfm

Super simple jQuery dynamic AJAX content demo

I just created my first 'ajax' page... and can hardly believe how simply jQuery handles this function.

I created a cfm page with 3 chunks of content wrapped in cfif, with each one shown based on a url variable. Then I set up a few lines of jQuery code to call that page and pass the variable in the url.

The sample page is just for example. In theory, you could run a full query to the database using the url variable to select any type of content you want, and then show it right in the page, without refreshing, or 'blinking' anything.

(Going one step further, jQuery can use (this).text() to pull the text that it inside each link, and pass the string as the url variable. So a linked word 'cicero' becomes a value of 'cicero' in the url.)

See the demo and the code - jquery makes this so simple, I can already think of a dozen ways I can use this action in my cf applications (especially back-end stuff where js-disabled browsers are not an issue).

A few more simple jQuery demos

Just playing around, showing what little I know of this stuff - added a few more demos based on tutorials I found online

Javascript text resizer with jQuery

Show/hide animations using jQuery's onboard effects

FAQ-style show/hide jQuery demo

jQuery makes this stuff so easy!

I just added a simple jQuery FAQ demo to my humble demos list

Had to build something similar for a client's site today - stripping out the relevant code and putting up an example was quick and painless... enjoy!


...Show Newer

Recent Comments

Importing Events Calendar Data into Mura CMS
Jon said: Hi Michael, Thanks for this post - similarly looking to import data from excel spreadsheet into mur... [More]

New TinyMCE lets you paste as plain text automatically
PRR said: I am using tinyMCE 4.2.3 and configured as suggested in this post but when i try pasting in editor i... [More]

Searching and collecting Mura CMS content by Extended Attribute Value with feed.addParam()
Armando Faes said: After a few hours of head banging - finally thanks to this - Once more THANK YOU! [More]

CF Gallery Creator & jQuery Slider Gallery !New and Improved!
Jan Willis said: Okay, I realized that you are calling my root as the Site - not the wwwroot. So, I moved the JS, CS... [More]

CF Gallery Creator & jQuery Slider Gallery !New and Improved!
Michael Evangelista said: @Jan, it has been a long time (6+ years) so my memory of the details is vague, but I think the image... [More]