Mike Waller
asked on
shadowbox and cfdiv
I'm trying to use shadowbox with cfdiv but the shadowbox is not coming up. the ajax works but not the shadowbox. Any ideas experts?
shadowboxTest.cfm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ShadowBox with cfdiv</title>
<link type="text/css" rel="stylesheet" href="https://[url]/scripts/shadowbox/shadowbox.css" media="all">
<script type="text/javascript" src="https://[url]/scripts/jquery.js"></script>
<script type="text/javascript" src="https://[url]/scripts/animatedcollapse.js"></script>
<script type="text/javascript" src="https://[url]/scripts/easytooltip_HostGator.js"></script>
<script type="text/javascript" src="https://[url]/scripts/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: 'en',
players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']
});
</script>
<script language="JavaScript">
_cf_loadingtexthtml="";
</script>
</head>
<cfoutput>
<body >
<cfform name="form1">
<cfselect name="bundleID">
<option value="0" selected="true">Please make your selection...</option>
<option value="1">Access</option>
<option value="152">Internet</option>
</cfselect>
</cfform>
<cfdiv bind="url:https://[url]/blocks/cfajax_linkupdate.cfm?bundleID={bundleID}" id="dynaDiv" style="background-color:##ffffff;">
<a href="https://[url]/blocks/hiw.cfm?bundleID=152" title="HOW IT WORKS" rel="shadowbox;width=850;height=800">How It Works (works)</a>
</body>
</cfoutput>
</html>
cfajax_linkupdate.cfm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ShadowBox with cfdiv</title>
<link type="text/css" rel="stylesheet" href="https://[url]/scripts/shadowbox/shadowbox.css" media="all">
<script language="JavaScript">
_cf_loadingtexthtml="";
</script>
</head>
<body>
<cfif IsDefined ("URL.bundleID")>
<cfoutput>
<a href="https://[url]/blocks/3631VP_HostGator_HIW.cfm?bundleID=#URL.bundleID#" title="HOW IT WORKS" rel="shadowbox;width=850;height=800">How It Works (doesn't work)</a>
</cfoutput>
<cfelse>
Select value above.
</cfif>
</body>
</html>
ASKER
azadisaryev, no the shadowbox link should be outside the cfdiv. Is there a closing cfdiv tag?
>> Is there a closing cfdiv tag?
from CFML Reference for <cfdiv> tag:
"If the tag does not have a body and end tag, you must close it with /> character combination."
from CFML Reference for <cfdiv> tag:
"If the tag does not have a body and end tag, you must close it with /> character combination."
ASKER
ok, I have that in there but the shadowbox still does not work. Any ideas?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
that worked!!! One last thing Azadi.. I'm placing some text before and after the cfdiv tag but apparently the cfdiv tag is forcing a line break so it appears like..
To view how it works
Click Here
however, it should be..
To view how it works Click Here
Would you know why it forces a line break?
To view how it works
Click Here
however, it should be..
To view how it works Click Here
Would you know why it forces a line break?
because <cfdiv> just creates a regular <div> tag when it is rendered, which is a block-level tag.
if you want it to display inline instead, you need to apply appropriate styles to it, i.e. style="width:100px; display:inline"
Azadi
if you want it to display inline instead, you need to apply appropriate styles to it, i.e. style="width:100px; display:inline"
Azadi
ASKER
ok, thanks for your help Azadi!
Azadi