DIV Position nahc Button Click unter dem Button darstellen

[frey1]

Hallo,

ich bastel mir gerade für meine Homepage sowas wie AddThis.com.

Nach einem Buttonclick soll eine Divbox mit Inhalt erscheinen. Sie soll unter bzw. über dem Button positioniert werden (siehe AddThis).

Dazu habe ich folgendes gebastelt:

Dies ist der Button + der Dialog (zu beginn display: none; )

<a id="share_link" alt="share" href="#"><span class="share_button"></span></a>
<div id="share_dialog" class="hide_diag">
   <p>Hier der Inhalt des DIVS</p>
</div>
<script type="text/javascript" src="dialog.js"></script>

hier mal die CSS:

.hide_diag
{
    display: none;
}

.show_diag
{
    background-color: yellow;
    display: block;
    position: absolute;
    visibility: visible;
}

.share_button
{
    background: url("http://www.html.de/images/share_button.png") no-repeat scroll left top transparent;
    display: inline-block;
    position: relative;
    height: 21px;
    width: 45px;
    line-height: 21px;
    margin: 0;
    outline: 0 none;
    padding: 0;
    text-decoration: none;
    text-indent:-10000px;
}

#share_link
{
    
    height: 21px;
    width: 45px;
}

um den Click zu realisieren noch dieses JS File (dialog.js):

/* global definitions */
var share_button_toggle = 0;

/* initialization */
document.getElementById("share_link").onclick = function() 
{

    if(!share_button_toggle)
    {
        document.getElementById("share_dialog").className = "show_diag";
        share_button_toggle = 1;
    }
    else
    {
        document.getElementById("share_dialog").className = "hide_diag";
        share_button_toggle = 0;
    }
}

klappt alles wunderbar. nur wird der Dialog leider ganz links positioniert. Das heißt wird der Button mittig im HTML Content dargestellt, erscheint der Dialog nach dem Klick nicht unter dem Button.

Wie kann ich dies realisieren?
hoffe meine Frage ist klar.

Gruß Frey

 

[Marv]

Hmm, hab jetzt nicht die volle Vorstellung davon wie das genau bei dir aussieht. Probier doch mal dem Link ein display:block; zu geben.

Ansonsten, wie hast du den Link denn mittig dargestellt? Denn mit dem von dir geposteten Code müsste das eigentlich klappen.

 

[frey1]

hallo,

ich habe die Positionierung nun hinbekommen. Das ganze realisiere ich nun über einen Javascript, der die left und top Position des buttons ermittelt, der Div Dialog wird dann an dieser stelle angezeigt (zuweisen dessen left und top).

nur habe ich nun das Problem, dass ich bei einem onmouseover über den Button den Dialog DIV einblenden und bei einem onmouseout ihn ausblenden möchte. Das klappt auch, nur möchte ich zusätzlich wenn die Maus sich über dem Dialog befindet, ihn nicht ausblenden, wie kann ich denn solche bedingten Mausovers realisieren?

Das onmouseout Event blendet den Dialog nach 600msec aus

Mein Code:

var timer;

document.getElementById("share_link").onmouseover = function() 
{
    document.getElementById("share_dialog").className = "show_diag";
}

document.getElementById("share_link").onmouseout = function() 
{
    timer = setTimeout(timerTrigger    , 600);
}

function timerTrigger()
{
    document.getElementById("share_dialog").className = "hide_diag";
    if(timer != undefined) clearTimeout(timer);
}

Danke!

Gruß

 

[DarkDragon193]

Ich verstehe nicht ganz... Versuchst du so eine Art Tooltip zu erzeugen? Das einfachste wäre wohl, wenn du beim timeTrigger überprüfst, ob sich die Maus zwischen den left, left + width, top und top + height Koordinaten befindet. Dazu könntest du die offset-Werte verwenden... Dieses Zeugs bereitet mir auch Probleme, doch damit setze ich mich erst noch außeinander. Ansonsten - denkst du nicht, dass die 600 Millisekunden zu schnell sind? Apropos, wenn du setTimeout verwendest wird die Funktion nur 1x aufgerufen, daher ist ein löschen des timeouts nicht zwangsläufig nötig... Nur so dahingestellt. ^^