1 Reply Latest reply on Jun 22, 2009 6:25 AM by Dileep_NR

    Pass Variable to popup DIV

    TheScarecrow Level 1

      I have a query that builds a list of links. When you rollover the links is shows a popup div that has more information about the link before you click on it.  What I am not sure how to do is pass what item they are rollingover so it displays the correct information in the popup div. Anyone know how to do this? thanks.

       

      //Link code

      <CFOUTPUT query="getcalendar" maxrows="5">    
           <CFIF #event_date#  IS NOT "">
                <cfif DateCompare(#event_date#, Now()) is +1>
                     <li><a href="../calendar/calendar_info.cfm?proj_key=#proj_key#&id=#id#" onMouseOver="ShowPopup(this);" >#title# #CurrentRow#</a></li>
                </cfif>
            </CFIF>

      </CFOUTPUT>  

       

      //ShowPopup code

      function ShowPopup(hoveritem) {
         
          hp = document.getElementById("hoverpopup");
          // Set position of hover-over popup
          hp.style.top = hoveritem.offsetTop - 150;
          hp.style.left = hoveritem.offsetLeft - 250;

       

          // Set popup to visible
          hp.style.visibility = "Visible";
      }

       

      //DIV tag information

      <div id="hoverpopup" onMouseOut="HidePopup();">
          <cfoutput>
                <span class="headerpop">#getcalendar.title#</span><hr />

       

                 <p>#getcalendar.description#</p>
              <div class="hoverBottom">
             
              </div>
          </cfoutput>
      </div>

        • 1. Re: Pass Variable to popup DIV
          Dileep_NR Level 2

          Hi,

           

          Please try the following sample code

           

           

          <ul>
          <cfloop index="i" from="1" to="10">
                <cfoutput>
                       <li><a href="##" onMouseOver="ShowPopup(this,hoverpopup#i#,#i#);" >title #i#</a></li>
                      <div id="hoverpopup#i#" style="display:none;">
             
                    <span class="headerpop">Title</span><hr />

           

                     <p>OK</p>
                  <div class="hoverBottom">
                
                  </div>
                  </div>
              </cfoutput>

           

          </cfloop>
          </ul><br /><br />

          <script language="javascript">

          function ShowPopup(hoveritem,divName,passedvalue) {
              hp = document.getElementById(divName.id);
              hp.style.top = hoveritem.offsetTop - 150;
              hp.style.left = hoveritem.offsetLeft - 250;
              hp.style.display='block';
              hp.innerHTML =  hp.innerHTML + "<BR>Helloo world" + passedvalue;
          }
          </script>