Box zentrieren mit Impromptu

Cujo

Hallo,

ich habe auf meiner Seite jetzt Impromptu eingebaut, z. B. hier:

Scherzfragen

(Zum Testen auf einen Lösungsbutton klicken)

Wie ihr seht, erscheint die Box am oberen Bildschirmrand.

Ist es möglich, die Box auf dem Bildschirm zu zentrieren, wie es z. B. alert() macht?

Gruß,

Cujo

synaptic

bestimmt kannste da was mit css machen... musste halt rausfinden an welcher stelle das element seinen style zugewiesen bekommt

Cujo

Kannst du es dir vielleicht mal angucken? Ich finde die entsprechende Stelle einfach nicht.

Code

/*
------------------------------
    Impromptu's
------------------------------
*/
.jqifade{
    position: absolute; 
    background-color: #aaaaaa; 
}
div.jqi{ 
    width: 400px; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    position: absolute; 
    background-color: #ffffff; 
    font-size: 11px; 
    text-align: left; 
    border: solid 1px #eeeeee;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 7px;
}
div.jqi .jqicontainer{ 
    font-weight: bold; 
}
div.jqi .jqiclose{ 
    position: absolute;
    top: 4px; right: -2px; 
    width: 18px; 
    cursor: default; 
    color: #bbbbbb; 
    font-weight: bold; 
}
div.jqi .jqimessage{ 
    padding: 10px; 
    line-height: 20px; 
    color: #444444; 
}
div.jqi .jqibuttons{ 
    text-align: right; 
    padding: 5px 0 5px 0; 
    border: solid 1px #eeeeee; 
    background-color: #f4f4f4;
}
div.jqi button{ 
    padding: 3px 10px; 
    margin: 0 10px; 
    background-color: #2F6073; 
    border: solid 1px #f4f4f4; 
    color: #ffffff; 
    font-weight: bold; 
    font-size: 12px; 
}
div.jqi button:hover{ 
    background-color: #728A8C;
}
div.jqi button.jqidefaultbutton{ 
    /*background-color: #8DC05B;*/
    background-color: #BF5E26;
}
.jqiwarning .jqi .jqibuttons{ 
    background-color: #BF5E26;
}


/*
------------------------------
    impromptu
------------------------------
*/
.impromptuwarning .impromptu{ background-color: #aaaaaa; }
.impromptufade{
    position: absolute;
    background-color: #ffffff;
}
div.impromptu{
    position: absolute;
    background-color: #cccccc;
    padding: 10px; 
    width: 300px;
    text-align: left;
}
div.impromptu .impromptuclose{
    float: right;
    margin: -35px -10px 0 0;
    cursor: pointer;
    color: #213e80;
}
div.impromptu .impromptucontainer{
    background-color: #213e80;
    padding: 5px; 
    color: #ffffff;
    font-weight: bold;
}
div.impromptu .impromptumessage{
    background-color: #415ea0;
    padding: 10px;
}
div.impromptu .impromptubuttons{
    text-align: center;
    padding: 5px 0 0 0;
}
div.impromptu button{
    padding: 3px 10px 3px 10px;
    margin: 0 10px;
}


/*
------------------------------
    columns ex
------------------------------
*/
.colsJqifadewarning .colsJqi{ background-color: #b0be96; }
.colsJqifade{
    position: absolute;
    background-color: #ffffff;
}
div.colsJqi{
    position: absolute;
    background-color: #d0dEb6;
    padding: 10px; 
    width: 400px;
    text-align: left;
}
div.colsJqi .colsJqiclose{
    float: right;
    margin: -35px -10px 0 0;
    cursor: pointer;
    color: #bbbbbb;
}
div.colsJqi .colsJqicontainer{
    background-color: #e0eEc6;
    padding: 5px; 
    color: #ffffff;
    font-weight: bold;
    height: 160px;
}
div.colsJqi .colsJqimessage{
    background-color: #c0cEa6;
    padding: 10px;
    width: 280px;
    height: 140px;
    float: left;
}
div.colsJqi .jqibuttons{
    text-align: center;
    padding: 5px 0 0 0;
}
div.colsJqi button{
    background: top left repeat-x #ffffff;
    border: solid #777777 1px;
    font-size: 12px;
    padding: 3px 10px 3px 10px;
    margin: 5px 5px 5px 10px;
    width: 75px;
}
div.colsJqi button:hover{
    border: solid #aaaaaa 1px;
}


/*
*------------------------
*   Ext Blue Ex
*------------------------
*/
.extbluewarning .extblue{ border:1px red solid; }
.extbluefade{ position: absolute; background-color: #ffffff; }
div.extblue{ border:1px #C0C0C0 solid; position: absolute; background-color: #ffffff; padding: 0; width: 500px; text-align: center; }
div.extblue .extblueclose{ background-color: transparent; cursor: pointer; color: black; text-align: right; }
div.extblue .extbluecontainer{ background-color: #bed2e1; padding: 0 5px 5px 5px; color: #000000; font:normal 11px Verdana; }
div.extblue .extbluemessage{ background-color: #ede9aa; padding: 5px; margin:0 15px 15px 15px; }
div.extblue .extbluebuttons{ text-align: center; padding: 0px 0 0 0; }
div.extblue button{ padding: 1px 4px; margin: 0 10px; background-color:#BFE0BD; font-weight:normal; font-family:Verdana; font-size:10px; }

Alles anzeigen

Thonixx

Code

div.extblue {
    position: absolute;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
        }

synaptic

leider liegste da falsch firefox.. da wird nen element-style per javascript gesetzt....
oder .sollte das objekt schon im code existieren- dann direkt im code.. nicht im style-tag

Cujo

Hmmm...heißt das, dass es für mein Problem keine Lösung gibt?

synaptic

das heisst, dass es ne firemelarbeit is die entsprechende stelle zu finden, da im script alle umbrüche fehlen und es in einer einzelnen zeile is...

such mal nach "fixed",height:$window.height(),width:"100%",top:(ie6)?$window.scrollTop():0,left:0,right:0,bottom:0});
(suchwort "fixed" sollte reichen, des kommt nur einmal vor im gesamten code der ../../scripts/jquery-impromptu.js

und da ändere mal des top:(ie6)?$window.scrollTop():0, und setz da mal nen wert...zb 200px oder sowas

bin mir bei der ganzen faxe noch net sicher, weil ich a) noch kaum plan von jquery hab und b) das ganze hier nich testen kann (is mir zu mühselig alles zu kopieren und mir nen entsprechendes szenario zu basteln)

Cujo

Ich habe den Wert jetzt auf 200 geändert (allerdings ohne px) und bei meiner Auflösung 1280 x 1024 ist die Box jetzt auch ungefähr mittig. Bei einer niedrigeren Auflösung ist die Box allerdings jetzt ziemlich weit unten.

Gibt es nicht die Möglichkeit, dass sich die Box von selbst automatisch zentriert? alert() macht das doch auch.

synaptic

ei bei alert is des ja auch programmiert...
du könntest unter des script noch nen anderes script setzen.. viewport auslesen,
document.body.clientWidth oder sowas ..
element holen neu positionieren (top:50% minus (höhe der box/2) und left:50% minus (breite der box/2)

Cujo

Nee, dafür reichen meine Kenntnisse leider nicht aus. Aber du hast mir schon mal ein Stück weiter geholfen. Vielen Dank dafür

synaptic

naja auch net so wild

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de">
<head>
<title></title>
<script type="text/javascript">
function centerObj(obj){
var target = document.getElementById(obj);
var oWidth = parseInt(target.style.width);
var oHeight = parseInt(target.style.height);
var vPortWidth = parseInt(window.innerWidth);
var vPortHeight = parseInt(window.innerHeight);
target.style.position="absolute";
target.style.left = (vPortWidth/2) - (oWidth/2) +"px";
target.style.top = (vPortHeight/2) - (oHeight/2) +"px";
}
</script>
</head>
<body>


<div id="base" style="width:200px; height:70px; border:1px solid black;">
pff inhalt... :o)
</div>


<input type="button" onclick="centerObj('base')" value="hier kliggen" />


</body>
</html>

Alles anzeigen

zieh dir des hier mal rein und guck, ob du damit was anfangen kannst
müsstest halt irgendwie nachdem deinen custom alert aufgerufen und angezeigt wurde die centerObj()-funktion anwenden und in hochkommata in den klammern der funktion die ID deines custom-alerts angeben.

Cujo

Ich habe es jetzt mal so gemacht:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de-de"><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>Scherzfragen 201-220</title>
<link rel="stylesheet" type="text/css" href="raetsel.css" />
<link rel="stylesheet" type="text/css" href="scripts/jquery.css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.raetselstunde.de/rss.xml" />
<link  rel="shortcut icon" href="favicon.ico" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/jquery-impromptu.js" type="text/javascript"></script>
<script type="text/javascript">
function centerObj(obj){
var target = document.getElementById(obj);
var oWidth = parseInt(target.style.width);
var oHeight = parseInt(target.style.height);
var vPortWidth = parseInt(window.innerWidth);
var vPortHeight = parseInt(window.innerHeight);
target.style.position="absolute";
target.style.left = (vPortWidth/2) - (oWidth/2) +"px";
target.style.top = (vPortHeight/2) - (oHeight/2) +"px";
}
</script>
</head>
<body>
<div id="stuff">
<h1>Scherzfragen</h1>
<h2>Scherzfragen 201-220</h2>
<br />
<table class="textraetsel-weiss" border="0" cellpadding="0" cellspacing="0">
<colgroup>
    <col width="376" />
    <col width="86" />
</colgroup>
<tr>
<td class="textraetsel-blau"></td>
<td class="textraetsel-blau"></td>
</tr>
<tr>
<td class="textraetsel-gelb">201) Bei welchem Fußballspiel ist kein Schiedsrichter auf dem Spielfeld?</td>
<td class="textraetsel-gelb">
<img onclick="$.prompt('Beim Tischfußball',{prefix:'extblue',opacity: 0.1,overlayspeed:'fast',promptspeed:'fast'});centerObj('stuff')" alt="Scherzfragen Lösung" src="buttons/raetsel-loesung.png" /></td>
</tr>
<tr>
<td class="textraetsel-blau"></td>
<td class="textraetsel-blau"></td>
</tr>


...


</table>
<div class="pfeile">
<a href="scherzfragen-010.html"><img alt="Zurück" title="Zurück" src="buttons/pfeil-zurueck.png" /></a>
<a href="scherzfragen-012.html"><img alt="Weiter" title="Weiter" src="buttons/pfeil-weiter.png" /></a>
</div>
</div>
</body>
</html>

Alles anzeigen

Ich habe den Eintrag "200" wieder rausgenommen. Der ist ja jetzt überflüssig, denke ich mal. Die Box erscheint aber immer noch am oberen Rand.

Hier ist eine Testdatei:

http://www.raetselstunde.de/test.html

Ich habe es bei der Frage 201 ausprobiert.

Kannst du bitte nochmal drübergucken?

synaptic

<img onclick="$.prompt('Beim Tischfußball',{prefix:'extblue',opacity: 0.1,overlayspeed:'fast',promptspeed:'fast'});centerObj('stuff'); hierhin muss der funktionsaufruf=> also centerObj('extblue');" alt="Scherzfragen Lösung" src="http://www.raetselstunde.de/raetsel-loesung.png"></td>

also denke ich zumindest

Cujo

Funktioniert leider immer noch nicht:

Code

<tr>
<td class="textraetsel-gelb">201) Bei welchem Fußballspiel ist kein Schiedsrichter auf dem Spielfeld?</td>
<td class="textraetsel-gelb">
<img onclick="$.prompt('Beim Tischfußball',{prefix:'extblue',opacity: 0.1,overlayspeed:'fast',promptspeed:'fast'});centerObj('stuff'); centerObj('extblue');" alt="Scherzfragen Lösung" src="buttons/raetsel-loesung.png"></td>
</tr>

Außerdem läuft die Tabelle unten über die Seite raus

synaptic

ich seh grad dass des centerObj('stuff'); da nix zu suchen hat, des ding, was du da hast heisst ja 'extblue'...

und wieso des über die seite rausläuft weiß ich net, an meinem code darf es an sich nicht liegen..
bau mal in meinem script unter die zeile
var target = document.getElementById(obj);
nen
alert(target);

um zu testen, ob das entsprechende objekt überjhaupt übergeben wird..

Cujo

Zitat von synaptic

ich seh grad dass des centerObj('stuff'); da nix zu suchen hat, des ding, was du da hast heisst ja 'extblue'...

und wieso des über die seite rausläuft weiß ich net, an meinem code darf es an sich nicht liegen..

Ich habe centerObj('stuff'); rausgenommen. Jetzt läuft die Tabelle nicht mehr über die Seite raus, aber zentriert ist die Box immer noch nicht

Zitat

bau mal in meinem script unter die zeile
var target = document.getElementById(obj);
nen
alert(target);

Habe ich gemacht.

synaptic

edit:

habs mir grad doch selber gezogen und getestet...
also funktionsaufruf bleibt wie gehabt...

nur musste des script von mir nochma tauschen durch das hier:

Code

<script type="text/javascript">
function centerObj(obj){
var target = document.getElementById(obj);
var oWidth = parseInt(target.offsetWidth);
var oHeight = parseInt(target.offsetHeight);
var vPortWidth = parseInt(window.innerWidth);
var vPortHeight = parseInt(window.innerHeight);
target.style.position="absolute";
target.style.top = (vPortHeight/2) - (oHeight/2) +"px";
}
</script>

Alles anzeigen

Cujo

Ja, jetzt haut es hin.

Vielen Dank nochmal für die Hilfe

synaptic

ei dafür sind wa hier ja da :o)

Cujo

Ich habe noch eine ergänzende Frage zu dem obigen Problem, deshalb führe ich den Thread hier einfach mal weiter.

Ich habe folgenden Code:

PHP

<img onclick=\"$.prompt('$antwort',{prefix:'extblue',opacity: 0.1,overlayspeed:'fast',promptspeed:'fast'});centerObj('extblue')\" alt=\"Rätsel Lösung\" src=\"buttons/raetsel-loesung-small.png\" />

Ich hätte gerne, dass wenn beim Prompt auf "ok" geklickt wird, die Seite neu geladen wird. Ich habe das mit location.reload() versucht, also so:

PHP

<img onclick=\"$.prompt('$antwort',{prefix:'extblue',opacity: 0.1,overlayspeed:'fast',promptspeed:'fast'});centerObj('extblue');location.reload()\" alt=\"Rätsel Lösung\" src=\"buttons/raetsel-loesung-small.png\" />

Dann wird aber die Seite neu geladen, ohne dass auf den ok-Klick gewartet wird. Es erscheint also der Prompt und direkt danach wird die Seite neu geladen.

Wie kann ich es erreichen, dass die Seite erst nach dem Klick auf "neu" geladen wird.

Box zentrieren mit Impromptu

Tags

Benutzer online in diesem Thema