Words about stuff, and things related to stuff

jQuery - switch styles / container class using simple links

jQuery makes this stuff far too easy.
I just threw together a quick demo of the jQuery '.addClass' function, using regular ol' page links to change the class of a div on the page.

Rather than separate stylesheets, I simply have one set of styles in the page head with 3 versions of each rule. So when the class of the container changes, the browser knows to use the style that fits.

There are more complex tutorials for 'stylesheet switchers' out there ( like this one ) , but I wanted to show how easy it is to change a class on any element with basic links using jQuery. Example code is on the demo page.

Super simple random text display

Playing around with my brand-new demos site (rather than actually adding another demo like I sat down to do), I decided I wanted a random subheader on the main page, like the coldfusionbloggers.org site

And whaddya know - while uber-supremely simple cf-wise, it makes for a cutesy little demo in and of itself.

Here's the rub...

First, I put a bunch of stuff into a list variable
using a pipe '|' for a delimiter (so I can use commas in my slogans)

<!--- goofy slogans --->
<cfset sloganList="
Slogan1|
Slogan2|
Witty saying|
Stupid quote|
Senseless garbage|
Funny, at least at the moment|
Something else|
Got the idea yet?
">

Then, get one of the items in the list, at random,
using listLen to get the length of the list and declaring
my pipe character as the delimiter

<cfset goofySubHead=listGetAt(sloganList, randRange(1, listLen(sloganList, '|')),'|')>

and then, in my page's header,
<h2>#goofySubHead#</h2>

That's it!

If you want to see it at work, just click here
and then refresh the page to see the slogan change
( or don't... see if I care... fine, be that way!)

More jQuery demos

Following a link from one of the jQuery google groups, I found a big list of jQuery demos by Glen at commadot.com... and for the record I am jealous of the obvious time he's had just to play and explore. So much you can do with jQuery, I have been endlessly amazed for weeks now, and still feel I'm only scratching the surface.

Anyway, check out the demos - they're good examples of the fun funky things jQuery makes so easy.

jQuery - super simple link effect examples

ok , last one for now
this simple example page shows how easy it is to make links that 'do stuff' using jQuery.

Things I've learned, and was actually able to use (only had to check my syntax 7 times in 7 lines... )

The built in behavior called 'click' lets you assign any function when the named element is clicked
The behaviors of fadeIn and fadeOut do just that, with speeds of slow, normal or fast
The behavior called 'toggle' lets you assign two functions, and toggle between them by clicking the same element twice

Here is the extent of the code for the sample page (with comments) ...

<script>
$(document).ready(function(){
// link with id of 'showit' shows the div with id of 'somestuff'
$("a#showit").click( function() {
$("div#somestuff").fadeIn("slow")
} );
// link with id of 'hideit' hides the div with id of 'somestuff'
$("a#hideit").click( function() {
$("div#somestuff").fadeOut("slow")
} );
// link with id of 'toggleit' toggles the two functions
$("a#toggleit").toggle(
  function () {
    $("div#somestuff").fadeIn("slow");
  },
  function () {
    $("div#somestuff").fadeOut("slow");
  }
);
});
</script>

I don't know how many lines of straight javascript this would have been, but it ain't much at all using jQuery (of course, there's something like 3000 lines in the jquery file itself... but that's all done ahead of time!).

I also have a bit of css in the file, to give the stuffbox div a height, and an inline style so the stuff itself loads as hidden.

On the scale of jquery examples, this has got to be about 3 degrees below 'super-beginner-nooby', but for me, I suddenly feel like I can actually write - and understand - my own simple js functions... and that's the whole point of a library like jQuery.

CF Instant Gallery demo :: upload a zip file, get a gallery!

This is just a simple demo, no database or xml (yet) so no captions or other data, but the function is fun, and easy...
http://www.mredesign.com/demos/zipGallery/index.cfm

Upload a zip file containing some jpg images, give your gallery a unique name (folder with same name will be created on server) and then wait... while the server uploads and unzips the file (with zip.cfc), resizes all of the photos (using Massimo's tmt_img.cfc) and then displays a gallery ready-to-go.

Current skins include Project Seven's Slide Show Magic and Image Gallery Magic, plus the interesting (and easy) FrogJS Gallery and a quick HoverBox CSS Gallery

Go ahead... try it!
If you have any problems / errors, please let me know by leaving a comment on this post.
(or if you don't want to wait, there are some sample galleries on the right side of the upload form)

This was just a quick workbench experiment, to show the upload/unzip/resize routine in action.
Future plans for the 'real' gallery include either an xml or mySQL back end, with captions, titles, categories, etc for a full-blown instant gallery maker.

All comments appreciated.



Updated: CF Image Uploader / Resizer with tmt_img.cfc

Decided to get serious (ok... serious'er') about the look and feel of these demo-things I keep playing with. I grabbed a quick css template courtesy of styleshout.com and set up some workspace.

First up - the same ColdFusion Image Resizer demo I posted back in December, with a new skin...
http://www.mredesign.com/demos/tmtImg-Uploader/

Automagic links for http: and mailto: from plain text content

A while back, I built a simple cms system for an article-based site where some of the articles have links and email addresses built in. My client wanted to be able to simply copy and paste the articles into the textarea, and not have to fuss with making each of the links. (that, and I really didn't want to turn her loose with fckeditor in this case... 'just the facts, ma'am")

So, I jumped over to experts-exchange, and within minutes of posting my question, one of the legions of experts in the ColdFusion arena gave me this nice bit of regular expressionism, wrapped up in a nice little function (ok, two functions)

It will find anything starting with http://, www., or http://www, and turn it into a link.   Anything in email format ( something@something.something) gets made into a mailto: link.


========================

<!--- This function creates hyper links from url strings,
and email mailTo links from email addresses --->

<cffunction name="LinkURLs" output="true" returntype="string">

<cfargument name="text" type="string" required="yes">
<!--- Define local variables --->
<cfset var pos=1>
<cfset var subex="">
<cfset var done=false>
<cfset results = arguments.text>

<cfloop condition="not done">

<!--- Perform search --->
<cfset subex=reFind("(http://|http://www|www)(.*?)([[:space:]]|$)", arguments.text, pos, true)>
<!--- Anything matched? --->
<cfif subex.len[1] is 0>
<cfset done=true>
<cfelse>
<cfsavecontent variable="theLink"><a href="http://#replace(mid(text,subex.pos[1],subex.len[1]),'http://','')#">#mid(text,subex.pos[1],subex.len[1])#</a></cfsavecontent>
<cfset results = replace(results,mid(text,subex.pos[1],subex.len[1]),theLink)>
<!--- Reposition start point --->
<cfset pos=subex.pos[1]+subex.len[1]>
</cfif>
</cfloop>

<!--- and return results --->
<cfreturn results>
</cffunction>

<cffunction name="LinkEmails" output="true" returntype="string">

<cfargument name="text" type="string" required="yes">
<!--- Define local variables --->
<cfset var pos=1>
<cfset var subex="">
<cfset var done=false>
<cfset results = arguments.text>

<cfloop condition="not done">

<!--- Perform search --->
<cfset subex=reFind("([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})", arguments.text, pos, true)>
<!--- Anything matched? --->
<cfif subex.len[1] is 0>
<cfset done=true>
<cfelse>
<cfsavecontent variable="theLink"><a href="mailto:#mid(text,subex.pos[1],subex.len[1])#">#mid(text,subex.pos[1],subex.len[1])#</a></cfsavecontent>
<cfset results = replace(results,mid(text,subex.pos[1],subex.len[1]),theLink)>
<!--- Reposition start point --->
<cfset pos=subex.pos[1]+subex.len[1]>
</cfif>
</cfloop>

<!--- and return results --->
<cfreturn results>
</cffunction>

===================

To call the function, I simply used
#linkEmails(linkUrls(recordDescrip))#
where #recordDescrip# is my article text

easy, eh?

Cartweaver Mod: multiple product images, auto photo resizing, mouseover js display

A very nice CartWeaver user contacted me for some help with her product images - basically, she wanted to add more images per product (easier than ever in CW3) and, most importantly, she wanted a way to let her clients upload a single image, and have the thumbnails and other sizes made automatically.

I set up a demo version of the add-on, saving a copy of the modified CW code so I can use it again for my own clients. ( That link shows a default product page with a very basic multiple image javascript display... in theory, the finished product would be much nicer. A demo of the admin is here ( use admin/admin to log in)

I added an automatic uploader / image resizer, and set up her images table in the CartWeaver database to handle 5 images for each product, with 4 sizes for tiny preview, details thumbnail, large image, and zoom.

In the CartWeaver admin, she simply uploads a single image file for each photo slot, and the thumbnails are made on the server (instead of a separate upload slot for each image size). Otherwise, it works and looks exactly like the regular CartWeaver admin.

On the display side, the single results page composes the mouseover image swap display for 1 to 5 mages, whatever is available.

The way this code works, any number of images and any number of sizes for each can be used - and any type of gallery, lightbox, list or display of the images can be populated from the image query.

Updated spring 2008: Now using CFimage for super fast, high quality resizing on the fly with more accurate height/width scaling.

The resizer works with both tall and wide images, with a maximum width and height set in the database for each size of image.

Each image upload slot can have its own set of sizes and max w/h dimensions, so the possibilities are almost endless.

The CW site I was working on was on a CF7 server, so instead of using the onboard CFimage functions in CF8, I went with Massimo Foti's tmt_img.cfc  - so in theory it should work on any server, running any recent version of ColdFusion.

Contact me directly to log in and test the admin on that demo site, or if you are interested in using this code on your own CartWeaver (or other) sites.

Coldfusion Image Resizer w/ tmt_img.cfc

More late night code obsession....

I have had Massimo's tmt_img.cfc at the root of my CF cms, dynamic cfGallery and other apps for quite a while.... but I hadn't ever set it up as a standalone process... until now.

http://mredesign.com/cfdev/UploaderMREdemo/index.cfm


This simple demo lets the user input the thumb and full size widths of their choice, and uploads the original file for safekeeping. Also, any spaces in the filename are replaced with hyphens to avoid troubles later on.

Another thing I have been wanting is dynamic paths... this whole thing runs on CGI variables that get and show the server path and the http url based on the location of the upload page (and a few set folder names, in relative locations). This means you can place it anywhere and it will 'know' where it is with no entry of server or http info.

tmt_img can also crop, get dimensions, and more... but this shows the basic function and it was fairly easy to set up, once I got the syntax right.

EDIT: Files are attached to this post. See the 'download' link below.
You will need a copy of tmt_img... get it here... then unzip my attachment and put the tmt_img file into the 'tags' directory, then upload the works to anwhere on your CF server. It *should* work.  (Then again, it is *almost* 5 am, so anything is possible... )

...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]