7 Replies Latest reply on Oct 24, 2007 5:59 PM by TheScarecrow

    CSS & ColdFusion, replacing DIV content

    TheScarecrow Level 1
      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 ColdFusion 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>
        • 1. Re: CSS &amp; ColdFusion, replacing DIV content
          WolfShade Level 4
          You didn't 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>

          ^_^
          • 2. Re: CSS &amp; ColdFusion, replacing DIV content
            TheScarecrow Level 1
            Here would 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>
            • 3. Re: CSS &amp; ColdFusion, replacing DIV content
              WolfShade Level 4
              In the javascript, the line that says:
              magnify = getElementById('magnify');

              Should read:
              magnify = document.getElementById('magnify');

              ^_^
              • 4. Re: CSS &amp; ColdFusion, replacing DIV content
                TheScarecrow Level 1
                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??
                • 5. Re: CSS &amp; ColdFusion, replacing DIV content
                  WolfShade Level 4
                  Is the javascript on the same page as the CF 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 CF page.

                  That's the only thing I can think of. What isn't working? How is it not working? I need some more specifics. JS error messages?

                  ^_^
                  • 6. Re: CSS &amp; ColdFusion, replacing DIV content
                    TheScarecrow Level 1
                    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>
                    • 7. Re: CSS &amp; ColdFusion, replacing DIV content
                      TheScarecrow Level 1
                      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 would 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 would be:
                      <cfoutput>
                      <script language="javascript">
                      function changeContent(i) {
                      magnify = document.getElementById('magnify');
                      magnify.innerHTML = "<img src="../#staffmember.imageName #" align="middle"><span class="normalText">
                      #staffmember.wName
                      # </span>";
                      }
                      </script>
                      </cfoutput>

                      The DIV tag would be:
                      <cfoutput><div id="magnify"><img src="../#staffmember.imageName[2]#" align="middle"><span class="normalText">
                      #staffmember.wName[2]# </span> </div></cfoutput>

                      unfortunately the i is not defined. I am not sure that I can do this without Ajax or doing individual layers for each picture. That do you think?