Cold Fusion CFToolTips – Pushing the Limits

cold fusion logo

In this tutorial, Cold Fusion CFToolTips – Pushing the Limits, I will be demonstrating the cftooltip tag and what you can do with it. I will show you how you can do more advanced things with the cftooltips and I will be pushing the tag to its limits. I got the idea from one of my favorites CF Gurus, Raymond Camden. But my tooltip is a little bit more advanced as I am pulling all of my data from an xml file. Here is a link to the original article by Raymond that I used to create this tooltip in our companies intranet site. The files I created for this article is a scaled down version of what I implemented in our intranet site. I will also included the demo files used so you can download the files and place them on your Cold Fusion server to see them in action.

[button color=” blue” size=”small” link=”https://s3.amazonaws.com/hyperdrive.designs.tutorialfiles/cftooltip.zip” target=””]Zipped Demo Source Files[/button]

 

Of course, if you have been reading my previous post, I have to support older versions of IE. So I found this EXCELLENT open source library to support CSS3 in IE called CSS3 Pie. Pie makes Internet Explorer 6 – 9 capable of rendering several of the most useful CSS3 decoration features. This allows my styling of the tooltips, rounded corners, to look good in the older IE browsers. The first section of code is the css styles for the tooltips. These styles are what actual style the tooltip sections. Also I have my IE fix using the CSS3 pie library.

<style type="text/css"><!--
.yui-tt {
    color:#000;
    font-size:12pt;
    background-color:#c6c6c6;
    padding: 20px;
    padding-bottom: 30px;
    width:500px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	behavior: url(pie/PIE.htc);
  }
  .logos ul {
	  list-style: none;
  }
  .logos li {
	  display: inline;	  
  }
--></style>

Now this section of code is the engine that drives the tooltips to push them to their limit.
First, I find my xml file on my server (your url path will be different) and then parse the file and save it as mydoc variable. Then I create an array to place all my data from my xml file. My data is just a simple xml file with 3 different major league baseball teams with 4 pieces of information(id, team, league, website). I then loop through all the data and set all of the information to their corresponding values within the array. I then use this array to provide my information to the tooltips. ** Please not that I have tried many different syntax plugins and all of them do not seem able to correctly handle the cold fusion language and it injects code. For example, as the end of the code in the syntax box, there are multiple cf closing tags that do not belong there but the plugin injects them in there. be sure to download the tutorial source files for the accurate code.

<!--- This line makes a call to my xml that holds all my data --->
<cffile action="read" file="http://127.0.0.1:8500/cfxml/cftooltip/imageData.xml" variable="myxml">
<!-- Parse and set my data in a variable --->
<cfset mydoc = XmlParse(myxml)>
<!--- run through all my data and set up the array --->
</cfset><cfset numItems = ArrayLen(mydoc.imagesSections.images.XmlChildren)>
    </cfset><cfset orderquery = QueryNew("id, name, league, website") >
    </cfset><cfset temp = QueryAddRow(orderquery, #numItems#)>
    <cfloop index="i" from = "1" to = #numItems#>
        <cfset temp = QuerySetCell(orderquery, "id",
            #mydoc.imagesSections.images.imagesDetails[i].XmlAttributes.id#,#i#)>
        </cfset><cfset temp = QuerySetCell(orderquery, "name",
            #mydoc.imagesSections.images.imagesDetails[i].XmlAttributes.name#, #i#)>
        </cfset><cfset temp = QuerySetCell(orderquery, "league",
            #mydoc.imagesSections.images.imagesDetails[i].XmlAttributes.league#, #i#)>
       </cfset><cfset temp = QuerySetCell(orderquery, "website",
            #mydoc.imagesSections.images.imagesDetails[i].XmlAttributes.website#, #i#)>            
    </cfset></cfloop>
 
<div id="wrapper">     
            <div class="logos">
                <ul>
                  <!-- info for logo 1 ---> 
                	<cfset image_path = "images/bRedsoxLogoLarge.png" >            
					<cfimage name="large_preview" source="#image_path#">
					<cfset imageScaleToFit(large_preview,400,400,'bicubic')>
					<cfsavecontent variable="tooltip_image1">
    					<cfimage source="#large_preview#" action="writeToBrowser" text="text image">
                		<br />
                		Name: <cfoutput>#orderquery.name[1]#</cfoutput><br />
                		League: <cfoutput>#orderquery.league[1]#</cfoutput><br />
                		View: <cfoutput><a href="#orderquery.website[1]#">Website:</a></cfoutput><br />       
					</cfimage></cfsavecontent>
 
            	<li>
                	<cftooltip tooltip="#tooltip_image1#" hidedelay="5000">
                		<img src="images/bRedsoxLogoSmall.png" alt="Boston Red Sox"  />
                	</cftooltip>
                </li>
     			<!--- info for logo 2 --->
					</cfset><cfset image_path = "images/hAstrosLogoLarge.png" >            
					<cfimage name="large_preview" source="#image_path#">
					<cfset imageScaleToFit(large_preview,350,350,'bicubic')>
					<cfsavecontent variable="tooltip_image2">
    					<cfimage source="#large_preview#" action="writeToBrowser" text="text image">
                		<br />
                		Name: <cfoutput>#orderquery.name[2]#</cfoutput><br />
                		League: <cfoutput>#orderquery.league[2]#</cfoutput><br />
                		View: <cfoutput><a href="#orderquery.website[2]#">Website:</a></cfoutput><br />        
					</cfimage></cfsavecontent>
                <li>
                	<cftooltip tooltip="#tooltip_image2#" hidedelay="5000">
                    	<img src="images/hAstrosLogoSmall.png" alt="Houston Astros" />
                    </cftooltip>
                </li>
 
                <!--- info for logo 3 --->
 
					</cfset><cfset image_path = "images/sfGiantsLogoLarge.png" >            
					<cfimage name="large_preview" source="#image_path#">
					<cfset imageScaleToFit(large_preview,350,350,'bicubic')>
					<cfsavecontent variable="tooltip_image3">
    					<cfimage source="#large_preview#" action="writeToBrowser" text="text image">
                		<br />
                		Name: <cfoutput>#orderquery.name[3]#</cfoutput><br />
                		League: <cfoutput>#orderquery.league[3]#</cfoutput><br />
                		View: <cfoutput><a href="#orderquery.website[3]#">Website:</a></cfoutput><br />        
					</cfimage></cfsavecontent>
                <li>
                	<cftooltip tooltip="#tooltip_image3#" hidedelay="5000">
                    	<img src="images/sfGiantsLogoSmall.png" alt="San Francisco Giants" />
                    </cftooltip>
                </li>    
 
              </cfset></cfimage></cfset></cfimage></cfset></cfimage></cfset></ul>
            </div>
 
        </div>
 
</cfset></cffile>

Here is what the layout looks like.

Now you will just hover over one of the logos and the tooltip will appear as such:

Cold Fusion CF Forms injecting javascript into head of webpage….

cold fusion logo

So, for those new to Cold Fusion or maybe someone that have not ran across this issue before, here it is. Cold Fusion cfforms tag automatically injects javascript code into the head of your webpage. Most of the time this might not be a real issue. But if you are like some us out there that still have to deal with supporting older versions of IE, then this can be a real headache. OK, here is the problem that I ran into and would like to share this to hopefully save someone else some precious time that I spent debugging.

We are redesigning our Cold Fusion website and decided to use more modern design elements such as HTML 5 along with a responsive design for our users with more up to date browsers. Now the problem is IE 7 & 8 has this dumb thing called compatibility mode. As IE looks at the webpage and it does not recognize doctypes and other things that are not compatible then it gets pushed down and the webpage is then displayed in the lower IE versions. Of course, older versions of IE does not understand HTML5 so if a user has compatibly mode enabled, it will break our new beautiful responsive website. Another thing in IE, is that if the website is considered an intranet site, it will automatically enable compatibly view. Working in an academic setting, our website is viewed on campus gets pushed to an intranet site. Off campus, it is not an intranet site. So as you can see our dilemma. But wait, there is a fix. There is a line of code that must be placed in the head of your webpage that will disable compatibly view and force IE to render the webpage in whatever IE version you are using. EXCELLENT! Here is that magic line of code:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

There are many articles out there explaining this line of code so I will not go into details. So our problems are solved, now whenever someone views our website using IE 7 or 8, IE will stay in IE 7 or 8.

“STOP THE CLOCK”. After placing this code in the webpage’s header, it is still not working. What the heck. After doing many hours of research, I found an article that stated that this line must be placed right after your head tag. OK, no problem. I then placed our magic code right after my head tag. OK. this has to be it. But unfortunately, no luck. Still does not fix our issue. What is going on, I then looked back at the page source view and I see that javascript code from the cfform tag being placed right above my IE magic line of code. I start to scratch my head and said maybe this is causing this issue. So I disabled my cfform tag and guess what. BOOM, THERE GOES THE DYNAMITE! It worked! So now I have figured out the cause and now I need to find a fix.

There are a couple of different ways to fix this. One, DON”T USE the cfform tag. Use, regular html form tags. So for our main searchbox on our home page, I had to convert our cfform to normal html form tag. But that only solved our header section. Since this form sits in our header file and all of the rest of our hundred of pages call that same header file, then most pages are fixed. NOT SO FAST! This solved most of our pages except our Forms section.

We have a Forms section on the website that has about 20+ online forms. Do we really want to change all of this forms from cfforms to normal html forms(We have some very detailed forms using some special cfform tag options, cfform binding and heavy javascript) . But doesn’t that kill our point of using Cold Fusion. We choose to use Cold Fusion for all of its greatness and its many tags, that save us many hours of coding time. So how could we fix our code on all of our online forms, to take advantage of the greatness of Cold Fusion and its cfform tag but fix our IE issue. What we did was just re-code our forms and actually did a bit of hacking.

We hard-coded these two lines on each form page

< !doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

before we call our main header file. Of course this is not very good coding in terms of semantics and validation, but we need the forms to work in all browsers and having to support older versions of IE, sometimes there is not much you can do. So now all of our Form pages use the cfform tag and all display perfectly in IE 7 &8.

To wrap this up, I am writing this post to hopefully have this land into the hands of some CF Developer and will hopefully save them many hours of debugging research. This might not be the only way to fix this issue but this is what we did to solve our issues.