In a comment on a previous post I wrote about Enhancing CFWindow with JavaScript, Ebenezer asked the question:
"CFwindows is quite nice, but i need it to behave in a particular way. I want to remove the frame and the (x) close button. I want to use cfwindow to just "display the bigger size of an image on mouseover and close on mouse out. Anyone with an idea."
Below is an example of how to remove the toolbar and borders from the cfwindow and display the large image when you rollover the thumbnail.
Click here to see it in action.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CFWindow as Image onMouseOver Enlarger/Pop Up</title>
<script language="JavaScript">
//The init function removes the toolbox and makes sure the title is empty
init = function(){
myWindow = ColdFusion.Window.getWindowObject('ImageWindow');
myWindow.toolbox.remove();
myWindow.header.remove();
myWindow.setTitle('');
}
//the showImage function updates the body of the cfwindow with an img tag //and resizes the cfwindow to fit the image
showImage = function(imgPath,width,height){
myWindow = ColdFusion.Window.getWindowObject('ImageWindow');
myWindow.body.update("<img src='" + imgPath + "' alt='' border='0'>");
myWindow.setContentSize(width, height);
ColdFusion.Window.show('ImageWindow');
}
//the hideImage is called by the onmouseout event
hideImage = function(){
ColdFusion.Window.hide('ImageWindow');
}
</script>
<!--- Override Styles to remove border from cfwindow --->
<style>
.x-dlg div.x-resizable-handle-north {
background-image:none;
border:0px none;
}
.x-dlg div.x-resizable-handle-south {
background-image:none;
border:0px none;
height:0px;
}
.x-dlg div.x-resizable-handle-east {
background-image:none;
width:0px;
border:0px none;
margin-right:0pt;
}
.x-dlg div.x-resizable-handle-west {
background-image:none;
border:0px none;
width:0px;
}
.x-dlg div.x-resizable-handle-northeast, .ytheme-gray .x-dlg div.x-resizable-handle-northeast {
background-image:none;
border:0px none;
height:0px;
width:0px;
}
.x-dlg div.x-resizable-handle-northwest, .ytheme-gray .x-dlg div.x-resizable-handle-northwest {
background-image:none;
border:0px none;
height:0px;
width:0px;
}
.x-dlg div.x-resizable-handle-southeast {ext-all.css (line 2247)
background-image:none;
border:0px none;
height:0px;
width:0px;
}
.x-dlg div.x-resizable-handle-southwest {ext-all.css (line 2255)
background-image:none;
border:0px none;
height:0px;
width:0px;
margin-bottom:0px;
margin-left:0px;
}
.x-dlg .x-dlg-dlg-body {
border-color:none;
border-style:none;
border-width:0px 0px 0px;
}
</style>
</head>
<body>
<div align="center">
<img src="/Images/ScottGravator.jpg" alt="" border="0" onmouseover="showImage('/images/scottbennett.jpg',238,318);" onmouseout="hideImage();"><br>
(Mouseover to enlarge)
</div>
<!--- set up the image window. --->
<cfwindow
name="ImageWindow"
closable="true"
draggable="true"
height="300"
initShow="false"
minHeight="100"
minWidth="200"
modal="false"
refreshOnShow = "false"
resizable="true"
title=""
width="200">
</cfwindow>
<!--- call the init function when the cf ajax stuff is done loading --->
<cfset ajaxonload("init")>
</body>
</html>
<head>
<title>CFWindow as Image onMouseOver Enlarger/Pop Up</title>
<script language="JavaScript">
//The init function removes the toolbox and makes sure the title is empty
init = function(){
myWindow = ColdFusion.Window.getWindowObject('ImageWindow');
myWindow.toolbox.remove();
myWindow.header.remove();
myWindow.setTitle('');
}
//the showImage function updates the body of the cfwindow with an img tag //and resizes the cfwindow to fit the image
showImage = function(imgPath,width,height){
myWindow = ColdFusion.Window.getWindowObject('ImageWindow');
myWindow.body.update("<img src='" + imgPath + "' alt='' border='0'>");
myWindow.setContentSize(width, height);
ColdFusion.Window.show('ImageWindow');
}
//the hideImage is called by the onmouseout event
hideImage = function(){
ColdFusion.Window.hide('ImageWindow');
}
</script>
<!--- Override Styles to remove border from cfwindow --->
<style>
.x-dlg div.x-resizable-handle-north {
background-image:none;
border:0px none;
}
.x-dlg div.x-resizable-handle-south {
background-image:none;
border:0px none;
height:0px;
}
.x-dlg div.x-resizable-handle-east {
background-image:none;
width:0px;
border:0px none;
margin-right:0pt;
}
.x-dlg div.x-resizable-handle-west {
background-image:none;
border:0px none;
width:0px;
}
.x-dlg div.x-resizable-handle-northeast, .ytheme-gray .x-dlg div.x-resizable-handle-northeast {
background-image:none;
border:0px none;
height:0px;
width:0px;
}
.x-dlg div.x-resizable-handle-northwest, .ytheme-gray .x-dlg div.x-resizable-handle-northwest {
background-image:none;
border:0px none;
height:0px;
width:0px;
}
.x-dlg div.x-resizable-handle-southeast {ext-all.css (line 2247)
background-image:none;
border:0px none;
height:0px;
width:0px;
}
.x-dlg div.x-resizable-handle-southwest {ext-all.css (line 2255)
background-image:none;
border:0px none;
height:0px;
width:0px;
margin-bottom:0px;
margin-left:0px;
}
.x-dlg .x-dlg-dlg-body {
border-color:none;
border-style:none;
border-width:0px 0px 0px;
}
</style>
</head>
<body>
<div align="center">
<img src="/Images/ScottGravator.jpg" alt="" border="0" onmouseover="showImage('/images/scottbennett.jpg',238,318);" onmouseout="hideImage();"><br>
(Mouseover to enlarge)
</div>
<!--- set up the image window. --->
<cfwindow
name="ImageWindow"
closable="true"
draggable="true"
height="300"
initShow="false"
minHeight="100"
minWidth="200"
modal="false"
refreshOnShow = "false"
resizable="true"
title=""
width="200">
</cfwindow>
<!--- call the init function when the cf ajax stuff is done loading --->
<cfset ajaxonload("init")>
</body>
</html>
And I also did pretty much the same thing here, but on this on you have to click the thumbnail to open the cfwindow, then click the large image to close the cfwindow. Click here to try it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CFWindow as Image onClick Enlarger/Pop Up</title>
<script language="JavaScript">
//The init function removes the toolbox and makes sure the title is empty
init = function(){
myWindow = ColdFusion.Window.getWindowObject('ImageWindow');
myWindow.toolbox.remove();
myWindow.header.remove();
myWindow.setTitle('');
}
//the showImage function updates the body of the cfwindow with an img tag //and resizes the cfwindow to fit the image
showImage = function(imgPath,width,height){
myWindow = ColdFusion.Window.getWindowObject('ImageWindow');
myWindow.body.update("<img src='" + imgPath + "' alt='' border='0' onclick='hideImage();'>");
myWindow.setContentSize(width, height);
ColdFusion.Window.show('ImageWindow');
}
//the hideImage is called by the onclick event in the img tag that //is generated by the showImage function and just hides the cfwindow
hideImage = function(){
ColdFusion.Window.hide('ImageWindow');
}
</script>
<!--- Override Styles to remove border from cfwindow --->
<style>
.x-dlg div.x-resizable-handle-north {
background-image:none;
border:0px none;
}
.x-dlg div.x-resizable-handle-south {
background-image:none;
border:0px none;
height:0px;
}
.x-dlg div.x-resizable-handle-east {
background-image:none;
width:0px;
border:0px none;
margin-right:0pt;
}
.x-dlg div.x-resizable-handle-west {
background-image:none;
border:0px none;
width:0px;
}
.x-dlg div.x-resizable-handle-northeast, .ytheme-gray .x-dlg div.x-resizable-handle-northeast {
background-image:none;
border:0px none;
height:0px;
width:0px;
}
.x-dlg div.x-resizable-handle-northwest, .ytheme-gray .x-dlg div.x-resizable-handle-northwest {
background-image:none;
border:0px none;
height:0px;
width:0px;
}
.x-dlg div.x-resizable-handle-southeast {ext-all.css (line 2247)
background-image:none;
border:0px none;
height:0px;
width:0px;
}
.x-dlg div.x-resizable-handle-southwest {ext-all.css (line 2255)
background-image:none;
border:0px none;
height:0px;
width:0px;
margin-bottom:0px;
margin-left:0px;
}
.x-dlg .x-dlg-dlg-body {
border-color:none;
border-style:none;
border-width:0px 0px 0px;
}
</style>
</head>
<body>
<div align="center">
<img src="/Images/ScottGravator.jpg" alt="" border="0" onclick="showImage('/images/scottbennett.jpg',238,318);"><br>
(click to enlarge)
</div>
<!--- set up the image window. --->
<cfwindow
name="ImageWindow"
closable="true"
draggable="true"
height="300"
initShow="false"
minHeight="100"
minWidth="200"
modal="false"
refreshOnShow = "false"
resizable="true"
title=""
width="200">
</cfwindow>
<!--- call the init function when the cf ajax stuff is done loading --->
<cfset ajaxonload("init")>
</body>
</html>
<head>
<title>CFWindow as Image onClick Enlarger/Pop Up</title>
<script language="JavaScript">
//The init function removes the toolbox and makes sure the title is empty
init = function(){
myWindow = ColdFusion.Window.getWindowObject('ImageWindow');
myWindow.toolbox.remove();
myWindow.header.remove();
myWindow.setTitle('');
}
//the showImage function updates the body of the cfwindow with an img tag //and resizes the cfwindow to fit the image
showImage = function(imgPath,width,height){
myWindow = ColdFusion.Window.getWindowObject('ImageWindow');
myWindow.body.update("<img src='" + imgPath + "' alt='' border='0' onclick='hideImage();'>");
myWindow.setContentSize(width, height);
ColdFusion.Window.show('ImageWindow');
}
//the hideImage is called by the onclick event in the img tag that //is generated by the showImage function and just hides the cfwindow
hideImage = function(){
ColdFusion.Window.hide('ImageWindow');
}
</script>
<!--- Override Styles to remove border from cfwindow --->
<style>
.x-dlg div.x-resizable-handle-north {
background-image:none;
border:0px none;
}
.x-dlg div.x-resizable-handle-south {
background-image:none;
border:0px none;
height:0px;
}
.x-dlg div.x-resizable-handle-east {
background-image:none;
width:0px;
border:0px none;
margin-right:0pt;
}
.x-dlg div.x-resizable-handle-west {
background-image:none;
border:0px none;
width:0px;
}
.x-dlg div.x-resizable-handle-northeast, .ytheme-gray .x-dlg div.x-resizable-handle-northeast {
background-image:none;
border:0px none;
height:0px;
width:0px;
}
.x-dlg div.x-resizable-handle-northwest, .ytheme-gray .x-dlg div.x-resizable-handle-northwest {
background-image:none;
border:0px none;
height:0px;
width:0px;
}
.x-dlg div.x-resizable-handle-southeast {ext-all.css (line 2247)
background-image:none;
border:0px none;
height:0px;
width:0px;
}
.x-dlg div.x-resizable-handle-southwest {ext-all.css (line 2255)
background-image:none;
border:0px none;
height:0px;
width:0px;
margin-bottom:0px;
margin-left:0px;
}
.x-dlg .x-dlg-dlg-body {
border-color:none;
border-style:none;
border-width:0px 0px 0px;
}
</style>
</head>
<body>
<div align="center">
<img src="/Images/ScottGravator.jpg" alt="" border="0" onclick="showImage('/images/scottbennett.jpg',238,318);"><br>
(click to enlarge)
</div>
<!--- set up the image window. --->
<cfwindow
name="ImageWindow"
closable="true"
draggable="true"
height="300"
initShow="false"
minHeight="100"
minWidth="200"
modal="false"
refreshOnShow = "false"
resizable="true"
title=""
width="200">
</cfwindow>
<!--- call the init function when the cf ajax stuff is done loading --->
<cfset ajaxonload("init")>
</body>
</html>
Comments (13) |
16804 Views
If you are looking for an experienced, professional, and reliable ColdFusion development company, contact PALADEM today.
http://vikjavev.no/highslide/
Thanks and to all you IT disciples, thanks for spreading the gospel.
Its more fun wen we share.
Cheers
I have used highslide on a few sites as well, and it is definitely a better way to go. I was actually going to mention that in this article, but forgot, so thanks for bringing it up.
This works perfectly in FF3, but gives me an "exception thrown but not caught" error in IE [7] (debugger says in cfajax.js). At this point I am only interested in removing the title bar and borders, but using textual html content.
Any ideas? Also, I went to the Ext site to browse the docs but didn't find the reference for the remove method you call on the toolbox and header.
Thanks,
Mark
I just tested it in IE 7 and it is working for me, so I'm not sure why it generated that error for you.
You can use textual html content the exact same way I used the html img tag. Just replace img tag in the line:
myWindow.body.update("<img src='" + imgPath + "' alt='' border='0' onclick='hideImage();'>");
with whatever html you want (you may need to use jsstringformat() to make the html javascript friendly)
Pretty much everything in ext extends the ext.element class which has a remove method.
http://extjs.com/deploy/ext/docs/output/Ext.Elemen...
If you are ever working with ext objects, you will want to be familiar with all the methods in the Ext.Element class.
I'm embarassed to say that the code I copy-pasted to a test page here was not complete - a fresh copy of both your code samples work fine in IE7 <red-faced> There is something wrong in my main page with cfajax.js not finding my window id (name) and that is the root of where I have to look.
Thanks for the clarification on the ext.element class, I'm still getting my head wrapped around OO stuff!
Mark
Make sure you are using firebug, it is a must have when dealing with javascript.
http://www.coldfusionguy.com/ColdFusion/blog/index...
Since all the other cfwindows defined on the page are not having a problem being displayed, I have to find out what sets this one apart. One thing is that the display call is being called within the function called by body onload, so perhaps something to do with late binding??
Thanks for your help Scott!