Panelen



Forumnavigering
Senast inloggade
RSS
Sponsorer

Forum > Klientspråk > HTML, XHTML, DHTML

Placera en <div> i mitten av en annan div oberoend

pbf
pbf

Gradering

#14182

Tjenare.

Rubriken tillät endast 50 tecken, i alla fall: Placera en <div> i mitten av en annan div oberoende av scrollpositionen.

Centrerar en popup med följande kod:
  function centerPopup(popupID, wrapperID) {
    var wrapperWidth = J("#" wrapperID).width();
    var wrapperHeight = J("#" wrapperID).height();
    var popupHeight = J("#" popupID).height();
    var popupWidth = J("#" popupID).width();
    J("#" popupID).css({

        "top": wrapperHeight/2-popupHeight/2,
        "left": wrapperWidth/2-popupWidth/2
    });
  }

Detta är mitt wrapperID:
<div id="mpuGiveAwayWrapper">, denna div sträcker sig runt hela sidan.

Popupen placerar sig längst ned till höger lite utanför min skärm. Nu kan det inte vara så svårt att bestämma vart den skall ligga va?
Alert:ade ut mina värden för att se om det stämde och den går ju runt hela sidan:

wrapperHeight: 1647
wrapperWidth:  1565

Nu vill jag bara få popupen i mitten vertikalt och horisontellt m.h.a. dessa värdena... Men hur?

Grejen är ju den att varje medlem har en vykortssamling, om man scrollar ner nårra gånger och klickar på en knapp under varje vykort som triggar denna popupen så skall popupen placeras i mitten av sin skärm oberoende av skärmupplösning.

life is short, enjoy it!
Taggar: div, popup,
ID: #14182 | Skapades: 2009-01-20 11:01:53 | Tråden har 4 svar och har lästs 514 gånger.

Shadi
Shadi

Gradering

#14186

Som jag ser så använder du JQuery som har ganska bra inbyggda metoder för att skapa en snygg popup som visas precis i mitten, funktionen kallas för Dialog. Du hittar mer information här:

Exempel: http://ui.jquery.com/demos/dialog
Dokumentation: http://docs.jquery.com/UI/Dialog

Jag ska försöka lösa det genom din kod också, men tills vidare så kanske du kan kika på det jag skrivit ovan.

Administratör på AspKoll.se!
Taggar: jquery,
ID: #14186 | Skapades: 2009-01-20 15:40:33

pbf
pbf

Gradering

#14187

Är medveten om den. Men använder detta på typ 12,000 olika ställen så det tar lite tid att byta.. Kmr tyvärr ej på fråga ;-)

life is short, enjoy it!
ID: #14187 | Skapades: 2009-01-20 16:52:03

voigtan
voigtan

Gradering

#14191

Om du använder denna kod på så många ställen så borde det ju vara rätt enkelt att skriva över denna kod.

Vad jag förstå med dina texter så är det ju inte riktigt sanning med att du vill placera en div i diven, det är skärm upplösningen /2 som du vill använda dig av istället. Vill du inte också använda dig av position absolute/fixed för att få önskad effekt?

Jag skall se om jag hittar en tutorial på en lösning, hade en liknande tråd uppe innan jag åkte till Kina. 

http://yensdesign.com/2008/09/how-t...p-using-jquery/

Jag  vet att det finns en bra tutroial hur man gör sina enga addons som gör en exakt samma lösning du är ute efter, dock rinner tiden iväg här på internet Cafet, jag återkommer när jag har hittat den.

Hur man ställer en fråga: http://support.microsoft.com/kb/q555375
ID: #14191 | Skapades: 2009-01-21 04:03:43

voigtan
voigtan

Gradering

#14206

Nu har jag hittat länken: http://nettuts.com/javascript-ajax/...a-jquery-plugin/ Om det är så att du måste har wrapper elementet så kan ju den växa sig större än vad användarens upplösning är. Men om det är en wrapper per klick så tycker jag du bör använda dig av parent istället och ha en mer strikt HTML struktur så både JS HTML jobbar bra ihop med varandra.

Hur man ställer en fråga: http://support.microsoft.com/kb/q555375
Taggar: jquery,
ID: #14206 | Skapades: 2009-01-22 11:39:35
© Copyright 2007-2009 Shadi Domat | Version 3.0 | Sidkarta | Policy