CSS & Cold Fusion, replacing DIV content
8 Message(s) by 2 Author(s) originally posted in advanced cfml techniques
| From: TheScarecrow |
Date: Wednesday, October 24, 2007
|
Ok I have a DIV that on rollover of an
object it changes position to the mouse
pointer. However, I also want it to replace the content of the DIV
tag with
Cold Fusion
code . Something like this:
<CFOUTPUT><img src="../#staffmember.imageName[3]#" align="middle"><span
class="style1">
#staffmember.wName[3]#
</span> </CFOUTPUT>
Does anyone know how to do this? Thanks.
(current
link code):
<a
onmouseover="ShowContent('magnify'); return true;"
onmouseout="HideContent('magnify'); return true;"
href="JAVA script:ShowContent('magnify')">
IMAGE
</a>
| From: WolfShade |
Date: Wednesday, October 24, 2007
|
You did not
include the DIV, itself (unless you're referring to the anchor).
But you can use the name of the DIV and innerHTML to change the content.
<div id="thisDiv">
nbsp;
</div>
<CFOUTPUT>
<script language="JAVAscript">
function whatever() {
thisDiv = getElementById('thisDiv');
thisDiv.innerHTML = " #content
variable name#";
}
</script>
</CFOUTPUT>
^_^
| From: TheScarecrow |
Date: Wednesday, October 24, 2007
|
Here'd be my new code but it doesnt work. Did I do something wrong?
<CFOUTPUT>
<script language="JAVAscript">
function changeContent() {
magnify = getElementById('magnify');
magnify.innerHTML = " <img src="../#staffmember.imageName[3]#"
align="middle"><span class="normalText">
#staffmember.wName[3]# </span>";
}
</script>
</CFOUTPUT>
DIV
<div id="magnify" style="display:none;
position:absolute;
border-style: solid;
background-color: white;
padding: 5px;"><CFOUTPUT><img src="../#staffmember.imageName[2]#"
align="middle"><span class="normalText">
#staffmember.wName[2]# </span> </CFOUTPUT> </div>
| From: WolfShade |
Date: Wednesday, October 24, 2007
|
In the JAVAscript, the
line that says:
magnify = getElementById('magnify');
Should read:
magnify = document.getElementById('magnify');
^_^
| From: TheScarecrow |
Date: Wednesday, October 24, 2007
|
Strange still doesnt work. Here is updated code.
<CFOUTPUT>
<script language="JAVAscript">
function changeContent() {
magnify = document.getElementById('magnify');
magnify.innerHTML = "<img src="../#staffmember.imageName[3]#"
align="middle"><span class="normalText">
#staffmember.wName[3]# </span>";
}
</script>
</CFOUTPUT>
DIV tag
<CFOUTPUT><div id="magnify"><img src="../#staffmember.imageName[2]#"
align="middle"><span class="normalText">
#staffmember.wName[2]# </span> </div></CFOUTPUT>
I have other JAVAscript on the page is that a problem??
| From: WolfShade |
Date: Wednesday, October 24, 2007
|
Is the JAVAscript on the same page as the
ColdFusion code? Or is it in a separate .js
file?
If it's a separate .js file, copy the
<script></script> into the same page as
the ColdFusion page.
That's the only thing I can think of. What is not working? How is it not
working? I need some more specifics. JS
error messages?
^_^
| From: TheScarecrow |
Date: Thursday, October 25, 2007
|
The JAVAscript is on the same page. it doesnt change the
picture or the
text
in the div on the rollover. The code for the for the rollover is this:
<a
onmouseover="ShowContent('magnify'); return true; changeContent();"
onmouseout="HideContent('magnify'); return true;"
onClick="HideContent('magnify');"
href="staffmember.cfm?EmployeeID=2"><img
src="../staff_pictures/thumb/tn_mckee.jpg" width="43" height="60"
border="0"></a>
| From: TheScarecrow |
Date: Thursday, October 25, 2007
|
ok if I have say seven pictures and I want the content of the DIV tag to change
differently with each of the pictures. So I guess the code'd be something
like this.
Button Code:
<a
onmouseover="ShowContent('magnify'); return true; changeContent(2);"
onmouseout="HideContent('magnify'); return true;"
onClick="HideContent('magnify');"
href="staffmember.cfm?EmployeeID=2"><img
src="../staff_pictures/thumb/tn_mckee.jpg" width="43" height="60"
border="0"></a>
The JAVAscript'd be:
<CFOUTPUT>
<script language="JAVAscript">
function changeContent(i) {
magnify = document.getElementById('magnify');
magnify.innerHTML = "<img src="../#staffmember.imageName[i]#"
align="middle"><span class="normalText">
#staffmember.wName[i]# </span>";
}
</script>
</CFOUTPUT>
The DIV tag'd be:
<CFOUTPUT><div id="magnify"><img src="../#staffmember.imageName[2]#"
align="middle"><span class="normalText">
#staffmember.wName[2]# </span> </div></CFOUTPUT>
unfortunately the i isn't defined. I am not sure that I can do this without
Ajax or doing individual layers for each picture. That do you think?
Next Message: Hide parameters passed in path
Blogs related to CSS & Cold Fusion, replacing DIV content
The World Of World Of WarCraft
Note,
ColdFusion will need to be running on the server.Once this is done, the following XML data will be returned, as there is a lot of data I am going to break it down step by step. The first thing you’ll notice is the entire XML sheet
...
Let me break internet this down even further Lets say I want a ...
thanks hear anything about
coldfusion these days? I haven’t been around in a while. Yamaha-R1:
Coldfusion was a failure. It’s fairly dead. thats what I thought. Yamaha-R1: There are the odd CFM pages on Corporate sites still kicking
...
Forms
... forms 1040-es irstaxforms fbi check/pennsylvania/forms military uniforms manufacturer in uganda tent platforms everglades print 1040 ez forms saveable forms rotary business forms sheboygan tutorial +troubleshoot +
coldfusion +forms
...
Forms
... achieveforms uniforms.vfimagewear.com nh school principal credentialing forms alternative 3 positives of school uniforms what is the purpose of nchs standardizing forms? scrubs uniforms dickies creating xdp files in
coldfusion for
...
Code
So for
ColdFusion 8 we had Adobe IT put Getting Started on a cluster . Code Lyoko I've been told by my programmer that this is not possible on the referral code and that he will have to use the coupon code. Doing this on the coupon code
...
419, Chicken and Cambodian textiles - or Fair Trade is Hard
's services; Serialized PHP – Info on Yahoo giving back serialized PHP directly to web service requests;
ColdFusion Muse – Daily blog from CF developers; RSS date formats – The history of RSS date formats and their incompatibilities
...