4 svar · 489 visningar · startad av Fuel
Säg att jag kan visa / gömma en <div> med en länk. Om jag nu vill att den div jag öppnar ska synas precis under den länk jag använder - hur styr jag det ? länk & div ligger långt ifrån varandra i html koden. Länken ligger iofs i en div den också så det blir väl limma div till div :)
$('#mylink').click(function(){
var p = $('#mylink').offset();
$('#mydiv').css('left',p.left).css('top',p.top).css('position','absolute');
});
Strålande! hade fingrat lite på offset men inte haft helt klart hur..
dock så öppnar den i överkant på cellen.. har provat ändra css('top till bottom & -26 pixlar ? men då sabbar den designen
<script type="text/javascript">
$(document).ready(function()
{
$("#toolz_menu").hide();
$("#toolz_link").click(function ()
{
var p = $("#toolz_cell").offset();
$("#toolz_menu").toggle("slow").css('left',p.left).css('top',p.top).css('position','absolute');
return false;
});
});
</script>
<style type="text/css">
#toolz_menu { background:#F5ECCB; margin: 1px; border: 1px solid #444444; width: 200px; }
#toolz_link { }
#toolz_cell img { border: none; }
#toolz_cell { background: #F9C04D; }
</style>
<td id="toolz_cell" nowrap="nowrap">
<a href="#toolz_menu" id="toolz_link">Verktyg
<img src="/images/toolz_open.png" width="10" height="10" alt="Open Toolz">
</a>
</td>
</tr>
</table>
<div id="toolz_menu">
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
<li>test 5</li>
</ul>
</div>
vad händer om du ger den ett "larvigt" högt z-index? Det borde ju hålla den borta ifrån att knuffa runt på saker
Du borde kunna kolla höjden på din toolz_cell och plussa på den på din offset låter det som. Typ:
$("#toolz_link").click(function ()
{
var c = $("#toolz_cell");
var p = c.offset();
var h = c.height();
$("#toolz_menu").toggle("slow").css('left', p.left + "px").css('top', (p.top + h) + "px").css('position','absolute');
return false;
});
(Otestad kod dock...)