Blog Home Cartweaver ColdFusion Demos Javascript Music Photos WebDev Whatever

jQuery IE version detection : jquery thickbox ie fix

There are threads galore in various jquery discussion groups and blogs about the problems with IE7's user agent info, which, on some installations, returns version '6'.

In my case, I have the exact same numeric version of IE7 on two different vista computers, and one shows up as IE6 while the other shows itself to jquery as version 7.
(No idea why, and unless somebody can explain it i am done pondering the mystery - it hurts my head!)

This recently surfaced as a serious problem with my use of the incredible, wonderful "thickbox" plugin - a jquery lightbox plugin with tons of feature (more about that here )

Anyway, after much digging and scratching (ok, googling and clicking for you realistic non-metaphorical types), I found a few browser detection scripts with a different spin for IE7.

The first one, which obviously has worked for many users, did not work for me. Bummer.
Jamie obviously put a lot of effort into bringing this simple ie thickbox patch to the masses. But for whatever reason (did I mention I am done thinking about the reason?!?) my stubborn-as-I-am IE7 still wanted to look like a 6 to jQuery.
Then, I found this thread on Nabble, and worked it into a test page. Lo and behold, the fix appeared before my eyes.

/// here is the fix ///

$(document).ready(function(){
if ( document.all && !window.opera && !window.XMLHttpRequest && $.browser.msie )
{var isIE6 = true;}
else
{ var isIE6 = false;} ;
$.browser.msie6 = isIE6;

///

You can then use the  value of " $.browser.msie6 " , which will either be 'true' or 'false', to work your various IE-specific magicnesses.
In my case, thickbox now centers just as it should in both of my IE7's !

Here is my test page with the full browser user-agent info.
Point your IE7 here and see what you see.
It will show either 6 or 7 as the version info, but either way the last line, 'msie6', should read false.

Firefox 3 choking on cookies (solution)

I upgraded both my laptop and then, cautiously, my main pc to Firefox 3.
Aside from a few extensions where keyboard shortcuts conflict in the new versions, and needing to reinstall a few fav extensions, the upgrade was more or less trouble free. Happy me, happy browser, the 'awesome bar' in FF3 is pretty neat (not sure it deserves 100% awesome status but it is really dang useful once you get past it being in-your-face annoying).  Happy everythingFox... and then... I realized I was being forgotten.

No longer would my iGoogle page greet me full of distraction and headlines when i launched a new FF session. No more full thread view on the first click when going to Experts Exchange. No more 'remember me' function. ... but so strange, the laptop still remembered everything. Same FF, mostly same extensions, and no "TorButton" (google it to see the known cookies issues) to cause the problem. The more it went on the more annoyed I got.

Picking at a solution in between long sessions of work and annoyance, I found lots of people having the same problem and very few ideas how to fix it.  The prevailing suggestion seemed to be "create a new FF profile" , but with my confidence in the upgrade flagging a little, i didnt want to mess with anything that is actually working (which is pretty much everything else in FF3).

And then... tonight... on page 4 of 6 in a long Mozilla forums thread, I found the golden nugget. You need to delete a file called "cookies.sqlite" that is in your firefox profiles folder (hence why making a new profile also fixes the problem)

Here is the solution :

Go to 
C:\Users\<your username>\AppData\Roaming\Mozilla\Firefox\Profiles

On my setup there was just one profile, and inside that, I deleted a file called "cookies.sqlite".

Apparently the file had gotten corrupted somehow, and session information was not being saved correctly.
Deleting the file (with Firefox closed) caused a reset, and instantly  I can tell things are a-ok.

The thread where i found the fix
( http://forums.mozillazine.org/viewtopic.php?f=38&t=675175&st=0&sk=t&sd=a&start=45 )

said to also delete cookies.txt

quote: "Note that cookies.txt is not used in FF3, but if you have one leftover from the upgrade, delete it too"

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
});
</script>

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);
$('#rightCol').height(lh);
} else {
//alert('right : ' + rh);
$('#mainCol').height(rh);
}
});
</script>

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
$(window).load(function()....
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.

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

jQuery Selector Reference Card

From the very same very fine folks that created the previously-mentioned (and well-used) book jQuery in Action, DZone now offers a free 6-page CSS Selectors Reference Card.

More about it at Yehuda's Blog, here
http://yehudakatz.com/2008/06/09/jquery-selector-refcardz/

I'm printing my copy now - it'll be coffee stained, highlighted, wrinkled and well-worn within no time !

IETester : Free IE Version Renderer!

This is just too cool.

A frequent visitor on my web dev newsgroup kindly posted a link to this slick little app, fresh off the bench and ready for Vista.

** Get it here: http://www.my-debugbar.com/wiki/IETester/HomePage

Finally! A way to check all versions of IE in one fell swoop - including Javascript rendering!

From the website...

IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8 beta 1, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.
New in v0.2.2 : Search box and customizable Homepage !

This is an alpha release, so feel free to post comments/bugs on the IETester forum or contact me directly.
Minimum requirement : Windows Vista or Windows XP with IE7 (Windows XP with IE6 has some minor problems and IE7/IE8 instances do not work under this config)

Download IETester v0.2.2 (23.8MB)

Safari and FCK - learning to get along?

Just noticed a short announcement on the FCKeditor 'safari browser' page.

" Safari compatibility has been officially declared as of FCKeditor 2.5 Beta! We would like to thank WebKit and our Community for being with us, working to make this compatibility effort a reality. "


This is great news.
Safari compatibility was never an issue for me personally, but some clients had troubles and it just isn't any fun to say 'use a different browser' - they still see it as broken.

I moved over to using wymeditor for my recent CMS work, but will be enticed to take another look at FCK for sure.

CF_GoogleMap by John Blayter - version 1.4 released

John Blayter has released a new version of his very versatile and ever-so-useful CF_GoogleMap.

Apparently another revision is already in the works with yet more features, but it sounds like some good stuff has been added in already.

http://www.blayter.com/john/index.cfm/2008/6/10/CFGoogleMap-14-Released

(1) Added the showTraffic attribute to the cf_googleMap tag.
(2) Added the showLocalSearch attribute to the cf_googleMap tag.
(3) Added a language attribute to the cf_googleMap tag.
(4) Added the enableZoomScroll to the cf_googleMap tag and defaulted it to true so a use can use their scroll wheel to zoom in and out
(5) Added the enableGE to the cf_googleMap tag and defaulted it to false to enable the Google Earth view of the map.

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:

<cfscript>
/**
 * 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
 
 Usage:
 <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>';
   }
   else
   {
   texttouse = rawtext;
   }
   textoutput = '<p>' & texttouse & '</p>';
   return textoutput;
   }
</cfscript>


Feedback and/or testing appreciated.
thanks

New jQuery Book: "jQuery in Action"

jquery in action I just ordered an advance print copy of the brand-spankin-new jQuery book, "jQuery in Action"

http://www.manning.com/bibeault/

$45 gets you the pdf right away (just downloaded mine - resisting temptation to blow of the rest of the morning and crack it open right now!) and the print book as soon as it is released - soon!

If it is anything like the other top-notch jquery tuts and instructions I've worked with, the book should be worth the price on the very first project.

Catching bounced email with CFPOP

A client sent me a gigantic excel file of email addresses with which to start an email campaign using a simple but effective ColdFusion mailing list program.
Long story short, the list is old and badly maintained, and we are getting almost 1000 bounce messages each time a message is sent. Not good!
We needed an automatic way to parse the bounce messages, getting the addresses contained within, and deleting any email in that list from the mailing list members database. Not finding an easy solution, I created one... kinda crude but it seems to be working great.

The first thing was to create a function that will look at any block of text and find the strings that appear to be email addresses. Then, rather than just go blindly into the account with one big ol' "getall" retrieval, I am getting just the headers and checking how many messages there are.

 Then I break the messages into groups of 500 and loop through those groups - checking for messages with 'Failure' in the subject, and then parsing out the 'body' text value, leaving only an email address, which is simply spit out on the page as a comma delimited list.

( the next step will be a loop through that list, with a DELETE from statement , 'where Email like '%#listIndex#%')

Took me a few times fixing issues, waiting, tweaking details, waiting again... but now it seems to work just fine. I have a list of 1200 bunk addresses to remove from this database!


/// Here is my code ///


<cfsetting requesttimeout="5000">

<!--- Function to strip out email addresses from text --->
<cffunction name="getEmails" 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="theAddress">
#mid(text,subex.pos[1],subex.len[1])#
</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 theAddress>
</cffunction>

<!--- figure out how many messages there are --->
<cfpop
server = "mail.ZZZZZZZZZ.com"
username = "mailinglist@ZZZZZZZZZ.com"
password = "ZZZZ
action="getheaderonly"
name="countMail"
>

<cfset mailCount = #countMail.recordCount#>
<cfset loopCount = listFirst(mailcount/500, '.')>
<cfset loopCount = loopCount + 1>
<cfset currentLoop = 0>

Total Messages: <cfdump var="#mailcount#">
<br />
Groups of 500: <cfdump var="#loopcount#">
<br /><br />

<cfloop from="1" to="#loopCount#" index="t">
<cfset startRow = currentLoop*500>
<cfset startRow = startRow + 1>


<!--- check email --->
<cfpop
server = "mail.ZZZZZZZZZ.com"
username = "mailinglist@ZZZZZZZZZ.com"
password = "ZZZZ
action="getall"
name = "getmail"
maxrows="500"
startrow="#startRow#"
TIMEOUT="3000"
>

<!--- query the query, only get errors --->
<cfquery dbtype="query" name="getFailed">
SELECT body FROM getMail
WHERE subject like '%failure%' or subject like '%Failure%'
</cfquery>

<!--- loop query, grab all email addresses --->
<cfloop query="getFailed">
<cfoutput>#getEmails(getFailed.body)#</cfoutput>, <br />
</cfloop>

<cfset currentLoop = currentLoop + 1>
</cfloop>

FileBox Extender - super useful and unobtrusive

I'm usually pretty wary of even the slickest freeware apps - seems like they all come back to bite me, or simply end up unused after the exploratory phase wears off.  Not this one!

http://www.hyperionics.com/files/index.asp
I've been using this neat little widget for a week or so now, and already wondering why windows doesn't have these features by default.

At first I was drawn in by the favorites feature - like setting custom 'places' in your windows registry... but much easier, and many more can fit ... with style! Now that I've been using it, I am realizing just how very functional the 'pin'  and 'roll up' buttons are too. And, as an added bonus, you get a 'recent places' menu that actually works, complete with file paths. Check it out!

From the hyperionics website:

v      Navigate easily through the Windows folder maze with its “favorites” and “recently accessed” buttons added to standard Windows File Open, File Save dialog boxes and Explorer folders. With these buttons you can access your favorite and recently visited folders and documents with one mouse click.

v      Add a "push-pin" button to your "top level" windows. This function prevents any window you "pin" to the desktop from being covered by any other windows. This is great when you want to keep an eye on one program, but use another.

v      Add a "roll-up" button added to top level windows. When you click it, the window is "rolled up" leaving only its title bar visible, and uncovering what was underneath it. Click that button again, and the window rolls back down. The Always on Top and Rollup commands can be also displayed on the system menu of any window.

XML Sitemap and Verity Search creation wizard

This has been fun.
I started out looking for a customizable CF site spidering mechanism, and ended up creating it myself from various bits and parts recently available from a small array of reliable CF sources

Demo and download files are here:
http://www.mredesign.com/demos/verity-sitemap/

While the Verity Spider is powerful and obviously more specific for this purpose, it requires direct access to the CF server (localhost). Also, I like the being able to see all the code, edit the xml, clean up the formatting... and, since this Verity creation code parses out all of the meta tags in your page, so you could potentially add any kind of tags/keywords/summaries you want just for your site search system.

Using it is too easy...
( see the download link near the top of the demo)
just drop the files into the root of your site, and browse to
yoursite.com/verity-sitemap.cfm

The demo limitations are server specific and will not effect your usage.
Also, the initial form values are dynamically prefilled, just make sure the info is right for each step.

While admittedly crude in format, the function is solid... and modifications are easy. You can copy the cfsearch portion of the code into your site's actual search page, and then customize to suit. ( Check Scott Bennett's link below for a neat idea on serving refined content to the Verity query for super clean search results without a lot of hoop jumping. )

Please download and test this ... it's super quick... and send or post any corrections, additions, suggestions.
For more info visit the guys who actually wrote the code (below).

NOTE: A few lines in the _verity.cfm file are CF8 only. It can be easily modified to work on CF7, but out of the box it wants 8.

Thanks to Mike Henke for the versatile Google Sitemap XML Creator
http://googlesitemapxmlgenerator.riaforge.org/
and to Scott Bennett
http://www.coldfusionguy.com/ColdFusion/blog/index.cfm/2007/11/30/Populating-a-Verity-Index-From-Your-Site-Map
and Ray Camden
http://www.coldfusionjedi.com/index.cfm/2007/9/17/Using-Sitemaps-with-Verity
for the Verity creation and search code.

I am hoping others find this useful - I am sure I (and my clients) will!

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, ".")#"/>
    </cfoutput>
    <br /><br />
    Hit refresh or reload to get a different image.
    </div>
</cfif>

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

http://www.mredesign.com/demos/googlemap-connector/

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.

Capture any folder's file list in Excel

This is kind of abstract, but pretty neat if you need it.

http://home.comcast.net/~yandlfiles/desc13.htm

Can't say much about the site design, but the file linked from that page does a cool thing... you have to 'enable macros' to use it... understood if you are paranoid about that but I've used it a few times now with no problems.... anyway...

The excel file asks you to browse to a directory on your computer, and it imports the file info - name / date created / date last modified / date last accessed.

I needed a spreadsheet containing a whole list of print ads I am working on and this was a really quick way to get them set up!
I am assuming you could use it in a folder of web files, too - it asks if you want to 'include subfolders?' and if yes, it lists out the files really nicely by directory. Cool stuff! (if you like that sort of thing)

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

InkedPress.com - customized CartWeaver coldfusion ecommerce site with jQuery photo selector

Inkedpress.com - new custom eCommerce website launched today!

Built with a highly customized CartWeaver ColdFusion back end and a slick jQuery / javascript image selector routine, the Inked Press site allows the user to enter any word or phrase, and select from a gallery of images to represent each letter, building a custom "Picture Font" personalized photo frame.

This was a fun project from start to finish, and everybody involved is pleased with the outcome. The custom image selection routine for building the Picture Fonts was my first 'heavy' usage of jQuery... and it made the entire process such a pleasant experience, I am already hungry for another custom js site!

Web-based font browsers for your locally installed fonts!

I used to use a program called "the Font Thing", a little freeware app for win xp that let me type any text and see it rendered in a list of all fonts on my machine, installed or not... very cool.

While I miss that functionality in Vista, a few recent newsgroup posts over at forums.cubiclemind.com 's webbiz group have shared two very useful web-based versions of the same type of thing

http://www.stcassociates.com/lab/fontbrowser.html
http://www.fileformat.info/info/unicode/font/fontlist.htm

Apparently these tools both use Flash to read and render the fonts on your local machine. While it won't cover un-installed fonts like The Font Thing does, this is still pretty darn useful!

*From what I gather - the second one only shows fonts with Unicode support, but allows a very nice scrolling list view. The first one linked above includes non-unicode fonts, but as far as I can tell only shows one font at a time.

IE quirks mode alert bookmarklet

In IE, right click this link and save it to your favorites.
Then, while on any page of any site, just click the bookmark in your IE favorites.

You should see an alert telling you whether IE is in Quirks mode or Standards mode for the page you are on (click the link above to see the same alert for the current page)

Thanks to satzansatz.de for the tip!

formm@iler php form-to-email script - new version with anti-spam!

My friend Dan Ball of dbmasters.net has updated his powerful, easy-to-use formm@iler form processing script. This php form-to-email processor includes several new features, including a variety of anti-spam measures. I have tested the new version on 2 client sites so far, and spam from those forms has been stopped dead in its tracks.

The script is free to use with a small link back to dbmasters.net. Or, for $20, you can use it without the link. And.. for another $5, you can get the all-new formm@iler manual - a 19-page pdf that explains everything from how to best use the anti-spam features to several previously undocumented tricks for extended functionality.

Formm@iler works with any form on any page (not just php pages).
If you need a simple, potent way to send email from a web form, check it out... http://www.dbmasters.net/index.php?id=4

More Entries

Powered by BlogCFC version 5.5.005 by Raymond Camden.   Reinit  Admin