Avatar billede bingokaj Nybegynder
05. juli 2001 - 11:57 Der er 16 kommentarer og
1 løsning

placering af layer i forhold til centrum på skærmen (HASTER!!)

Hej med jer

jeg har følgende script:


<script language=\"Javascript\">
<!--
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
dom = (document.getElementById)? true:false;

function centrer() {
    if (ns4) document.layers[\"cen\"].left = ((document.innerWidth-100)/2);
    else if (ie4) document.all[\"cen\"].style.left = ((document.body.clientWidth-100)/2);
    else if (dom) document.getElementById(\"cen\").style.left = ((document.body.offsetWidth-100)/2);
}

//-->
</script>

<body onload=\"centrer()\" onresize=\"centrer()\">

<div id=\"cen\" style=\"position:absolute;\">
<table border=\"1\" cellspacing=\"0\" cellpadding=\"0\">
<tr>
    <td>hej</td>
</tr>
</table>
</div>


Der er to problemer:
1. Det virker ikke i netscape 4.7, da den ikke kan finde ud af at lave skærmbredden om til et integer - det SKAL virke i IE 4+ & NS4.7+ og også helst NS6...

2. Jeg vil gerne have mulighed for at placere mit div-tag _i forhold til_ centrum på skærmen.
Dvs. at jeg gerne vil kunne sige at mit div f.eks. skal placeres i en position der ligger 200 pixels til venstre for centrum af skærmen.

Det haster MEGA meget, så hvis jeg ikke får svar inden kl. 15.00 i dag så lukker jeg spørgsmålet....
Avatar billede keysersoze Ekspert
05. juli 2001 - 11:59 #1
har du dreamweaver?
Avatar billede bingokaj Nybegynder
05. juli 2001 - 12:08 #2
jeps 4.0
Avatar billede olebole Juniormester
05. juli 2001 - 12:13 #3
<ole>
Det er da heller ikke NS\' arbejde at lave parse bredden som en integer...det er dit  :o)

if (ns4) document.layers[\"cen\"].left = ((parseInt(document.innerWidth)-100)/2);

På samme måde gør du under \'dom\'...så er NS6 dækket. Du kan jo bare trække 200 fra dette tal, så har du svaret på andet spørgsmål... 
/mvh
</bole>
Avatar billede bingokaj Nybegynder
05. juli 2001 - 12:19 #4
det virker ikke og jeg får stadig samme fejl jeg skriver java script: i adresselinjen:

JavaScript Error: file:/C|/Working/nyttig
kode/layer-centrering/eksperten.html, line 14:

can\'t convert NaN to an integer.
Avatar billede jakoba Nybegynder
05. juli 2001 - 12:20 #5
Math.round( tal ) afrunder et tal så det er en integer.
    if (ns4) document.layers[\"cen\"].left = Math.round( ((document.innerWidth-100)/2) );

        //  find winduets indre bredde og højde:
var bredde;
var hojde;
if ( document.all ) {  // IE
  bredde = document.body.clientWidth;
  hojde  = document.body.clientHeight;
} else {
  bredde = window.inneWidth;
  hojde  = window.innerHeight;
};

        // find nuværende scroll offset
var xOff;
var yOff;
if ( document.all )
  xOff = document.body.scrollLeft;
  yOff = document.body.scrollTop;
} else {
  xOff = window.pageXOffset;
  yOff = window.pageYOffset;
};

        // og så er det bare at regne.
        //fx: 100px tilvenstre for midtpå:
var xPos = Math.round( bredde/2 -100 ) +xOff;
        //fx: lodret centreret:
var yPos = Math.round( hojde/2 ) +yOff;

(eller skal xOff og yOff trækkes fra? jeg roder altid rundt i det:)
det er ihvertfald de værdier du skal lege med.

mvh JakobA
Avatar billede jakoba Nybegynder
05. juli 2001 - 12:23 #7
Undrede mig også over at du syntes det var nødvendigt at afrunde.
NaN betyder \"slet ikke et tal, hverken integer eller real\"
det kommer af at du prøver at aflæse  document.innerWidth . den ligger i window.
Avatar billede jakoba Nybegynder
05. juli 2001 - 12:27 #8
Ups. stavefejl i linien. der skal r efte inne
  bredde = window.inneWidth;
så det bliver
  bredde = window.innerWidth;

Avatar billede olebole Juniormester
05. juli 2001 - 12:32 #9
Dooooohhhhhhh....så LÆS dog Ole...!  :oP
Avatar billede jakoba Nybegynder
05. juli 2001 - 12:46 #10
Ja og jeg lagde også omhyggeligt en Math.round( ... ) rundt om i første runde, uden at lægge mærke til noget.
Avatar billede bingokaj Nybegynder
05. juli 2001 - 12:50 #11
Hej, jeg får en Syntax Error (Linje 26) hvis jeg kører dit script:

det er yOff = document.body.scrollTop; der volder problemer...

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">

<html>
<head>
    <title>Untitled</title>
</head>
<script language=\"Javascript\">
  if (ns4) document.layers[\"cen\"].left = Math.round( ((document.innerWidth-100)/2) );

//  find winduets indre bredde og højde:
var bredde;
var hojde;
if ( document.all ) {  // IE
  bredde = document.body.clientWidth;
  hojde  = document.body.clientHeight;
} else {
  bredde = window.innerWidth;
  hojde  = window.innerHeight;
};

// find nuværende scroll offset
var xOff;
var yOff;
if ( document.all )
  xOff = document.body.scrollLeft;
  yOff = document.body.scrollTop;
} else {
  xOff = window.pageXOffset;
  yOff = window.pageYOffset;
};

// og så er det bare at regne.
//fx: 100px tilvenstre for midtpå:
var xPos = Math.round( bredde/2 -100 ) +xOff;
        //fx: lodret centreret:
var yPos = Math.round( hojde/2 ) +yOff;

</script>

<body>

<div id=\"cen\">centreret</div>


</body>
</html>
Avatar billede jakoba Nybegynder
05. juli 2001 - 12:59 #12
var yOff;
if ( document.all ) {  // < - - -  jeg havde glemt start-tuborgen her
  xOff = document.body.scrollLeft;

men burde være alt i IE der gav problemer.
body bliver først oprettet når browseren kommer ned til din body kommando

så scriptet skal lægges ind i <body sektionen eller endnu bedre kaldes i en funktion.

mvh JakobA
Avatar billede olebole Juniormester
05. juli 2001 - 13:08 #13
jakoba >> Vi må desværre væk fra den gamle vane med at lægge scriptet ned lige efter <body>.
NS6 kræver, at hele body\'en er indlæst - altså også </body> - så derfor bør der afgjort kaldes på onload...eller:

</body>
<script language=\"JavaScript\">kald();</script>
</html>

/mvh
Avatar billede bingokaj Nybegynder
05. juli 2001 - 15:05 #14
Jeg kan kraftederbankeme ikke få skidtet til at virke ...argh... javascript skal dø!

Nuværende fejlmeddelelse på nedenstående kode:
Line 17: Object required

Er der ikke nogen der kan rette nedenstående til, så div-tagget er centreret 200px til venstre for centrum ?? Pretty please ?

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">

<html>
<head>
    <title>Untitled</title>
</head>
<script language=\"Javascript\">
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
dom = (document.getElementById)? true:false;

if (ns4) document.layers[\"cen\"].left = Math.round( ((document.innerWidth-100)/2) );

//  find winduets indre bredde og højde:
var bredde;
var hojde;
if ( document.all ) {  // IE
  bredde = document.body.clientWidth;
  hojde  = document.body.clientHeight;
} else {
  bredde = window.innerWidth;
  hojde  = window.innerHeight;
};

// find nuværende scroll offset
var xOff;
var yOff;
if ( document.all ) {
  xOff = document.body.scrollLeft;
  yOff = document.body.scrollTop;
} else {
  xOff = window.pageXOffset;
  yOff = window.pageYOffset;
};

// og så er det bare at regne.
//fx: 100px tilvenstre for midtpå:
var xPos = Math.round( bredde/2 -100 ) +xOff;
//fx: lodret centreret:
var yPos = Math.round( hojde/2 ) +yOff;
</script>

<body onLoad=\"\">



<div id=\"cen\">centreret</div>


</body>
</html>

Avatar billede olebole Juniormester
05. juli 2001 - 15:10 #15
Nej, selvfølgelig kan du ikke det...du gør ikke, som der bliver skrevet  :o)
Du kan ikke få dimensionerne, før body\'en er tegnet. Derfor skal du pakke det sted - hvor du spørger om størrelserne - ind i en funktion, som du fyrer af på onload.
/mvh
Avatar billede jakoba Nybegynder
05. juli 2001 - 15:35 #16
det her skulle være lige til at bruge:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">

<html>
<head>
    <title>Untitled</title>

<script language=\"Javascript\">
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
dom = (document.getElementById)? true:false;

function placerCen () {
      //  find winduets indre bredde og højde:
  var bredde;
  var hojde;
  if ( document.all ) {  // IE
    bredde = document.body.clientWidth;
    hojde  = document.body.clientHeight;
  } else {
    bredde = window.innerWidth;
    hojde  = window.innerHeight;
  };

        // find nuværende scroll offset
  var xOff;
  var yOff;
  if ( document.all ) {
    xOff = document.body.scrollLeft;
    yOff = document.body.scrollTop;
  } else {
    xOff = window.pageXOffset;
    yOff = window.pageYOffset;
  };

      // og så er det bare at regne.
      //fx: 100px tilvenstre for midtpå:
  var xPos = Math.round( bredde/2 -100 ) +xOff;
      //fx: lodret centreret:
  var yPos = Math.round( hojde/2 ) +yOff;

    if (ns4) document.layers[\"cen\"].left = xPos;
    else if (ie4) document.all[\"cen\"].style.left = xPos;
    else if (dom) document.getElementById(\"cen\").style.left = xPos;

}; //end  her slutter funktionen placerCen.

</script>

</head>
<body onLoad=\"placerCen()\">


<div id=\"cen\">centreret<br>Næ. starter 100px<br>tilvenstre for center</div>


</body>
</html>
Avatar billede bingokaj Nybegynder
05. juli 2001 - 17:19 #17
Hej Jakoba, dit svar holder MAX :-)

Det eneste der skulle ændres var at div-tagget skulle have en style=\"position:absolute;\" før det virkede.

Anyway, tak for hjælpen...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester