Forum > Klientspråk > HTML, XHTML, DHTML
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.
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.
Ä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 ;-)
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.
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.