div absoluut positioneren wil niet helemaal zoals het moet

[WernerL]

Hallo tweakerts,

De situatie is als volgt:
Ik heb een div die klikbaar is, wanneer hierop geklikt wordt, wordt er een andere div zichtbaar gemaakt. Deze moet OVER de andere content komen te staan zodat er niks verschoven wordt. Echter moet de positie van deze div afhankelijk zijn van de positie van de div waarop geklikt wordt. Maar dit gebeurd niet, hij komt altijd opdezelfde positie. Is hier een simpel truukje voor ? Ik gebruik nu deze code:

code:

<script type="text/javascript">
       $(document).ready(function() {
        $("div#blaat").toggle(function() {
            //$("div#profile").animate({ height: 'hide', opacity: 'hide' }, 'slow');
            $('div#profile').slideToggle('hide');


        },function(){
            //$("div#profile").animate({ height: 'show', opacity: 'show' }, 'slow');
            $('div#profile').slideToggle('show');
        });
    });



</script>

<div id="contentblok2">

    <div id='blaat' url='#' style='cursor: pointer' class='searchbox'>Filter opties</div>
    <div id="profile" style='position: absolute; top: 250px; left: 200px; display: none;' class='bgfade'>

    <!-- content -->

    </div>

</div>

Hoe zorg ik ervoor dat de div met id profile altijd onder de div met id blaat komt te staan? Ik heb ook al position: relative geprobeerd maar dan wordt de overige content eronder alsnog naar beneden geduwd.

Hoop dat mensen me kunnen helpen. :-)

[_Thanatos_]

De top en left instellen op de x en y van de muiscursorpositie? In een click-event kan dit, maar in een toggle weet ik het ook niet (ik verwacht van wel, maar in de documentatie van jQuery krijg je meer zekerheid).

[Cartman!]

Heb je wel een idee hoe absolute positionering werkt (vooral t verschil tussen relative/absolute)? Waar lees je de coordinaten uit van de muisaanwijzer of doe je dat nog niet? Etc etc.

Het lijkt er nu n beetje op dat je de vraag hier neergooit en een kant en klaar antwoord verwacht. Met andere woorden: laat weten wat je allemaal al geprobeerd hebt en welk framework je gebruikt. Ik denk zover dat je wel wat meer moeite mag doen dus.

[WernerL]

Cartman!, wtf heb ik aan zo'n reactie ? Ik maak op geen enkele wijze in de startpost duidelijk dat ik een kant en klare oplossing verwacht. Ik stel gewoon een simpele vraag waar ik niet uitkom. Ja ik kan even googlen hoe ik de mouse positie opvraag, geweldig maar waar zeg ik dat ik de div op de muispositie wil hebben ? Ik verwacht gewoon heel simpel of er mensen zijn die weten hoe ik dit het beste aan kan pakken omdat google me niet echt verder hielp.

En om mijn vraag dan nog maar even duidelijk te maken, ik wil dat er door mijn script gekeken wordt waar de klikbare div zich bevind. En dan kan ik wel met muisposities gaan kloten maar dan komt de div lekker irritant op de positie van de muis en niet mooi netjes onder de klikbare div. En hoe je de x en y positie van een div opvraagt heb ik via google niet kunnen vinden anders had ik dit topic al niet gestart.

Het framework wat ik gebruik lijkt me verder duidelijk, jquery.

[Bosmonster]

Je weet toch op welke div geklikt wordt door hier het click-event op te hangen? Dit kun je in jQuery 1.3 ook mooi doen met event delegation als je dat voor willekeurige content in een container wilt doen (kijk eens naar de live() functie hiervoor).

Als je weet op welke div geklikt is weet je ook waar je je nieuwe div moet plaatsen toch?

[WernerL]

Uiteindelijk na veel zoekwerk bleek het ook met de offset functie te gaan.

code:

var blaat = $('div#blaat').offset();

En vervolgens blaat.left en blaat.top .. etc.

Opgelost.