Sagewire Logo

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 ...


Programming | Sports | Autos

copyright 2006
Valid XHTML 1.0 Transitional