Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    matching top css position with another element

    So I have created a simple calendar (http://www.akapa.org/newsite/events/calendar.htm) and I have a bunch of "More Info" buttons I made from cells. In a table cell to the right are a bunch of hidden DIV's that all appear when you rollover a "More Info" button, obviously giving more details about the calendar date/event.

    My problem is that I have to give an exact "top" css position to every one of these hidden div's every single time I add a new event to the calendar. I want to dynamically tell each hidden div to match the "top" css position to match the top position of each "More Info" button. How do I do that?

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,349
    Thanks
    11
    Thanked 589 Times in 570 Posts
    tested in ff3.5 and IE7:

    changes:
    replace the old function with this one i made:
    Code:
    function MM_showHideLayers(id,targ,cmd){
     var elm=document.getElementById(id);
     var es=elm.style;
     var v = (cmd == "show" ? "visible" : "hidden"); 
     es.visibility = v; 
     es.top=targ.getBoundingClientRect().top+"px";
    }
    comment-out the positions, you don't need them anymore:
    Code:
    /*
    #moreinfo_dec3_09 {
    	top: 379px;
    }
    #moreinfo_dec12_09 {
    	top: 420px;
    }
    #moreinfo_jan21_10 {
    	top: 570px;
    }
    #moreinfo_apr15_10 {
    	top: 720px;
    }
    #moreinfo_jul15_10 {
    	top: 870px;
    }
    #moreinfo_oct28_10 {
    	top: 1020px;
    }
    */
    -->
    change to fixed: :
    Code:
    .more_info_hidden_div {
    	position: fixed;
    }

    add "this" as the 2nd argument to MM_showHideLayers in your html:


    Code:
                        <table width="650" border="0" cellpadding="6" cellspacing="0">
                          <tr>
                            <td colspan="3" class="month">December 2009</td>
                          </tr>
                          <tr>
                            <td width="30" align="center" class="day">3</td>
                            <td width="504" class="day_separator">Journal Club Meeting</td>
                            <td width="80" align="center" class="more_info_cell" id="dec3marker" onmouseover="MM_showHideLayers('moreinfo_dec3_09',this,'show')" onmouseout="MM_showHideLayers('moreinfo_dec3_09',this,'hide')">More info &gt;&gt;</td>
                          </tr>
                          <tr>
                            <td width="30" align="center" class="day">12</td>
                            <td width="504" class="day_separator"><span class="bodyText">Kidney Health Screening</span></td>
                            <td width="80" align="center" class="more_info_cell" onmouseover="MM_showHideLayers('moreinfo_dec12_09',this,'show')" onmouseout="MM_showHideLayers('moreinfo_dec12_09',this,'hide')">More info &gt;&gt;</td>
                          </tr>
                          <tr>
                            <td width="30" align="center" class="day">25</td>
                            <td width="504">Christmas Day</td>
                            <td width="80" align="center">&nbsp;</td>
                          </tr>
                        </table>
                        <p>&nbsp;</p>
                        <table width="650" border="0" cellpadding="6" cellspacing="0">
                          <tr>
                            <td colspan="3" class="month">January 2010</td>
                          </tr>
                          <tr>
                            <td align="center" class="day">21</td>
                            <td class="day_separator">Alaska State Medical Board Meeting</td>
                            <td width="80" align="center" class="more_info_cell" onmouseover="MM_showHideLayers('moreinfo_jan21_10',this,'show')" onmouseout="MM_showHideLayers('moreinfo_jan21_10',this,'hide')">More info &gt;&gt;</td>
                            </tr>
                          <tr>
                            <td width="30" align="center" class="day">22</td>
                            <td width="504" class="day_separator">Alaska State Medical Board Meeting</td>
                            <td width="80" align="center" class="more_info_cell" onmouseover="MM_showHideLayers('moreinfo_jan21_10',this,'show')" onmouseout="MM_showHideLayers('moreinfo_jan21_10',this,'hide')">More info &gt;&gt;</td>
                          </tr>
                        </table><p>&nbsp;</p>
                        <table width="650" border="0" cellpadding="6" cellspacing="0">
                          <tr>
                            <td colspan="3" class="month">April 2010</td>
                          </tr>
                          <tr>
                            <td align="center" class="day">15</td>
                            <td class="day_separator">Alaska State Medical Board Meeting</td>
                            <td width="80" align="center" class="more_info_cell" onmouseover="MM_showHideLayers('moreinfo_apr15_10',this,'show')" onmouseout="MM_showHideLayers('moreinfo_apr15_10',this,'hide')">More info &gt;&gt;</td>
                          </tr>
                          <tr>
                            <td width="30" align="center" class="day">16</td>
                            <td width="504" class="day_separator">Alaska State Medical Board Meeting</td>
                            <td width="80" align="center" class="more_info_cell" onmouseover="MM_showHideLayers('moreinfo_apr15_10',this,'show')" onmouseout="MM_showHideLayers('moreinfo_apr15_10',this,'hide')">More info &gt;&gt;</td>
                          </tr>
                        </table>
                        <p>&nbsp;</p>
                        <table width="650" border="0" cellpadding="6" cellspacing="0">
                          <tr>
                            <td colspan="3" class="month">July 2010</td>
                          </tr>
                          <tr>
                            <td align="center" class="day">15</td>
                            <td class="day_separator">Alaska State Medical Board Meeting</td>
                            <td width="80" align="center" class="more_info_cell" onmouseover="MM_showHideLayers('moreinfo_jul15_10',this,'show')" onmouseout="MM_showHideLayers('moreinfo_jul15_10',this,'hide')">More info &gt;&gt;</td>
                          </tr>
                          <tr>
                            <td width="30" align="center" class="day">16</td>
                            <td width="504" class="day_separator">Alaska State Medical Board Meeting</td>
                            <td width="80" align="center" class="more_info_cell" onmouseover="MM_showHideLayers('moreinfo_jul15_10',this,'show')" onmouseout="MM_showHideLayers('moreinfo_jul15_10',this,'hide')">More info &gt;&gt;</td>
                          </tr>
                        </table>
                        <p>&nbsp;</p>
                        <table width="650" border="0" cellpadding="6" cellspacing="0">
                          <tr>
                            <td colspan="3" class="month">October 2010</td>
                          </tr>
                          <tr>
                            <td align="center" class="day">28</td>
                            <td class="day_separator">Alaska State Medical Board Meeting</td>
                            <td width="80" align="center" class="more_info_cell" onmouseover="MM_showHideLayers('moreinfo_oct28_10',this,'show')" onmouseout="MM_showHideLayers('moreinfo_oct28_10',this,'hide')">More info &gt;&gt;</td>
                          </tr>
                          <tr>
                            <td width="30" align="center" class="day">29</td>
                            <td width="504" class="day_separator">Alaska State Medical Board Meeting</td>
                            <td width="80" align="center" class="more_info_cell" onmouseover="MM_showHideLayers('moreinfo_oct28_10',this,'show')" onmouseout="MM_showHideLayers('moreinfo_oct28_10',this,'hide')">More info &gt;&gt;</td>
                          </tr>
                        </table>
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •