Solved

Coldfusion 8 cfchart bleeds through modal cfwindow when opened in IE 8

Posted on 2011-03-03
13
1,062 Views
Last Modified: 2012-05-11
Hi,
We're just about to upgrade to IE 8 here and I've been testing all the Coldfusion web apps to make sure no issues arise. So far only one has cropped up. In a nutshell I display an employee's current project load along with a pie chart that shows projects that will come due within the next 30 days broken down into 1 week sectors. They can review a specific project by clicking the project name and it will open up in a modal cfwindow.

The IE 8 Specific issue is that the pie chart stays on top so that it blocks that portion of the cfwindow screen and its contents. Below is a simplified version of how it is laid out in code. This has not been an issue in IE 6, which we are still on. We are using Coldfusion 8 on Windows 2003 web servers.

Things I have already tried are setting the Z-Index and repositioning the pie charts.

Any thoughts?

Cheers,
Ty

<cfpod title="My Work Load" height="700" width="900">
    <cfdiv id="MyWorkLoad">
        Projects are displayed with clickable links that open up in a cfwindow to review project
    </cfdiv>
     <cfchart pieslicestyle="solid" format="flash" showborder="no">
</cfpod>

<cfwindow name="ProjectReviewWindow" center="True" modal="true" draggable="true" closable="true" resizable="true" initShow="false"></cfwindow>
0
Comment
Question by:MedtronicVascSR
  • 7
  • 5
13 Comments
 
LVL 11

Accepted Solution

by:
Brijesh Chauhan earned 250 total points
ID: 35033807
Seems to be a issue while using FLASH Format, if you use format as JPG, it works correctly ...

Just did a simple test ..

<cfajaximport tags="cfform">

<cfpod title="My Work Load" height="700" width="900">
    <cfdiv id="MyWorkLoad">

		<cfform name="myform">
			<cfinput type="button" name="mybutton3" value="Add Experience" onclick="javascript:ColdFusion.Window.show('ProjectReviewWindow')">
   	 	</cfform>
    
    </cfdiv>
     <cfchart pieslicestyle="solid" format="jpg" showborder="no">
     </cfchart>
</cfpod>

<cfwindow name="ProjectReviewWindow" center="True" modal="true" draggable="true" closable="true" resizable="true" initShow="false">
	
    Project Details

</cfwindow> 

Open in new window

0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35033832
Here is how you can use the flash, you need to do some pre-processing.

1. Save the chart as Binary, then write it to a file .swf

2. Then Embed it, using wmode as TRANSPARENT

check out the below code.. it resolves the issue that you are having ...

<!--- Do some preprocessing --->
     <cfchart pieslicestyle="solid" format="flash" showborder="no" name="data">
     </cfchart>
     <cffile action="write" file="#expandPath('./cfchart.swf')#" output="#data#">
<!--- End of saving chart as Binary --->

<!--- EMBED It as OBJECT and use wmode as transparent --->
<cfajaximport tags="cfform">

<cfpod title="My Work Load" height="700" width="900">
    <cfdiv id="MyWorkLoad">

		<cfform name="myform">
			<cfinput type="button" name="mybutton3" value="Add Experience" onclick="javascript:ColdFusion.Window.show('ProjectReviewWindow')">
   	 	</cfform>
        
        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="300" height="300" id="mymoviename"> 
		<param name="movie" value="cfchart.swf" />  
		<param name="quality" value="high" /> 
		<param name="bgcolor" value="#ffffff" /> 
        <param name="wmode" value="transparent" /> 
		<embed src="cfchart.swf" quality="high" bgcolor="#ffffff" width="300" height="300" name="mymoviename" wmode="transparent" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> 
		</embed> 
		</object>

    
    </cfdiv>
</cfpod>

<cfwindow name="ProjectReviewWindow" center="True" modal="true" draggable="true" closable="true" resizable="true" initShow="false">
	
    Project Details

</cfwindow> 

Open in new window

0
 
LVL 52

Expert Comment

by:_agx_
ID: 35033913
Save the chart as Binary, then write it to a file .swf

cfchart already generates a file on the server. Instead of generating another file it's more efficient to capture the output w/cfsavecontent. And insert the parameter with string functions.

<!--- capture generated html --->
<cfsavecontent variable="chartString">
    <cfchart pieslicestyle="solid" format="flash" showborder="no">
         <!--- more chart code --->
    </cfchart>
</cfsavecontent>

<!--- use string functions to add WMODE param --->
<cfset transParam = '<PARAM NAME="wmode" VALUE="transparent" />'>
<cfset chartString = reReplaceNoCase(chartString, "(<object [^>]+>)", "\1"& transParam, "all")>
<cfset chartString = reReplaceNoCase(chartString, "(<embed [^>]+)", "\1 wmode=""transparent"" ", "all")>

<!--- display the chart --->
<cfoutput>#chartString#</cfoutput>

Open in new window

0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35033939
Instead of generating another file it's more efficient to capture the output w/cfsavecontent.

That is in case if you are NOT using NAME attribute in CFCHART, here i am using name attribute so binary is generated and NO OTHER FILE is created...
0
 
LVL 52

Expert Comment

by:_agx_
ID: 35033950
<cffile action="write" file="#expandPath('./cfchart.swf')#" output="#data#">


When using cffile write another file IS created!
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35033982
I am using NAME attribute in CFCHART

     <cfchart pieslicestyle="solid" format="flash" showborder="no" name="data">
     </cfchart>


This creates the BINARY of the chart,

then I use cffile to write this binary and save it as cfchart.swf.. so this is the only file created.....

I am not getting your point about 2 files...
0
 
LVL 52

Expert Comment

by:_agx_
ID: 35033984
That is in case if you are NOT using NAME attribute in CFCHART

Not true.  CF creates a file in cache whether the "name" attribute is used or not.  
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35033997
This is what the doc says, I wonder why they write about using cffile if cfcavecontent is efficient than it..


name
      
Optional
      
Page variable name; string. Generates the graph as binary data and assigns it to the specified variable. Suppresses chart display. You can use the name value in the cffile tag to write the chart to a file.

0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35034004
Generates the graph as binary data and assigns it to the specified variable.

So I am not sure how you are saying it creates a file in cache... what I understand it is a binary data and assigned to a variable..
0
 
LVL 52

Expert Comment

by:_agx_
ID: 35034018
That's if you want to create a permanent file. The file CF creates is in the chart cache, which means it's temporary. All charting files are deleted automatically after a certain period of time.  
0
 
LVL 52

Expert Comment

by:_agx_
ID: 35034021
what I understand it is a binary data and assigned to a variable..

Yes, but the binary data for that chart is read from a physical file in cache.
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35034029
okay, I now understand your point...
0
 

Author Closing Comment

by:MedtronicVascSR
ID: 35037698
Thanks for the 2 suggestions, non-flash and flash. I choose the non-flash (sub in .jpg) solution not simply because it was quick and easy, but since the entire web app itself is not fully flash it didn't make sense to get into the .swf business as you would when the enire app is built using Flex, etc.

If you have an idea as to the basic underlying reason IE 8 handles this situation differently then in previous versions that might be nice to conclude your thread.

Thanks again!

Cheers,
Ty
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
recordcount is coming as undefined in query 4 62
Firefox 38.2.0 is caching when it should not 3 56
ms/access hyperlink/ftp 7 43
Internet Explorer question 6 12
Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question