...

View Full Version : matching top css position with another element



thecommonthread
12-15-2009, 12:54 AM
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?

rnd me
12-15-2009, 02:08 AM
tested in ff3.5 and IE7:

changes:
replace the old function with this one i made:


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:


/*
#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: :

.more_info_hidden_div {
position: fixed;
}


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




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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum