Avatar billede cyberdude Nybegynder
02. oktober 2005 - 13:56 Der er 22 kommentarer og
1 løsning

Højden på brugerens browser

Hejsa

Jeg har følgende stump kode

<script type="text/javascript">
                                        <!--
                                        var myWidth = 0, myHeight = 0;
                                        if(typeof( window.innerWidth ) == 'number') {
                                            //Non-IE
                                            myWidth = window.innerWidth;
                                            myHeight = window.innerHeight;
                                        }
                                        else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                                            //IE 6+ in 'standards compliant mode'
                                            myWidth = document.documentElement.clientWidth;
                                            myHeight = document.documentElement.clientHeight;
                                        }
                                        else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
                                            //IE 4 compatible
                                            myWidth = document.body.clientWidth;
                                            myHeight = document.body.clientHeight;
                                        }
                                        var h = myHeight - 301;
                                        var img = '<img src="http://www.halserhvervsforening.dk/images/spacer.gif" alt="" width="1" height="' + h + '" border="0" align="right"/>';                                   
                                        document.write(img);
                                        //-->
                                    </script>

Ovenstående gør at der indsættes en transperente gif således at "bunden" af designet skubbes ned i bunden af brugerens browser
Linien :var h = myHeight - 301;
fortæller blot hvor meget plads toppen + bunden skal bruge og trækker så det fra således at den transperente gif ikke udvider sig mere end højst nødvendigt

Det funger næste optimalt, hvis altså der ikke er mere indhold på siden end at det kan ses i browseren når man kommer ind på siden, skifter man eks. til en side hvor der kommer scroll-bar på så funger det ikke længere, den sætter kun højden på den transperente gif
til at passe efter brugerens browser størelse, og således ikek efter indholdet, dvs. at der bliver brud i den grafik som ellers er i siden af designet :-(

Siden kan ses her : www.halserhvervsforening.dk i en skærmopløsning på 1280x1024 vl der være "brud" i grafikken på forsiden, men eks. ikke under punktet "kontigngent"

Nogen bud til hvordan jeg får grafikken til at strække sig med ned når der kommer scroll-bar på også ??
Avatar billede softspot Forsker
02. oktober 2005 - 14:22 #1
Kan du ikke bare sætte height til 100%?
Avatar billede roenving Novice
02. oktober 2005 - 14:28 #2
<script type="text/javascript">
window.onload = function(){
  var h = document.documentElement.clientHeight;
  document.getElementById(minSpacer).style.height = h - 301 + 'px';
}
</script>

<img src="http://www.halserhvervsforening.dk/images/spacer.gif" alt="" style="width:1px; height:1px; border:0; float:right;" id="minSpacer">

-- og så er forudsætningen vist, at der skal en rigtig doctype på !-)
Avatar billede cyberdude Nybegynder
02. oktober 2005 - 14:36 #3
det ser ikke ud til at fungere optimalt... prøv at tage et tjek på siden nu...
Avatar billede roenving Novice
02. oktober 2005 - 14:43 #4
Øeh, document.Element ...

document.documentElement !-)

-- det er bestemt ikke en fejl, at document er der to gange ...
Avatar billede cyberdude Nybegynder
02. oktober 2005 - 14:48 #5
det er den også, igen, forsøgte at fjerne den da det ike virkede i første omgang, og du har så selvf. lige kigget i de 25 sec. den var væk :-)
Avatar billede cyberdude Nybegynder
02. oktober 2005 - 14:50 #6
får en fejl der siger "'h' is undefined" ??
Avatar billede roenving Novice
02. oktober 2005 - 14:54 #7
Uff ...

document.getElementById('minSpacer').style.height = h - 301 + 'px';

-- og bemærk, at get ikke må være med stort !-)

-- og så ser det umiddelbart mærkeligt ud, at du kalder din html-4-kode for xhtml, når du ligesågodt kunne kalde den det, den er !o]
Avatar billede cyberdude Nybegynder
02. oktober 2005 - 14:59 #8
nu har jeg

<script type="text/javascript">
                                    <!--
                                    window.onload = function(){
                                      var h = document.documentElement.clientHeight;
                                      document.getElementById(minSpacer).style.height = h - 301 + 'px';
                                    }
                                    -->
                                    </script>
                                    <img src="http://www.halserhvervsforening.dk/images/spacer.gif" alt="" style="width:1px; height:1px; border:0; float:right;" id="minSpacer">


og får fejlen :
linie 67
cahr 12
rror Object required
Avatar billede cyberdude Nybegynder
02. oktober 2005 - 15:00 #9
hvilken doctype skal der så sættes ind.... ?
Avatar billede roenving Novice
02. oktober 2005 - 15:13 #10
Bemærk apostrofferne i ('minSpacer') ...

-- jeg bruger selv:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
!-)
Avatar billede cyberdude Nybegynder
02. oktober 2005 - 15:15 #11
ja, så er jeg tilbage til udgangspunktet... altså den skiller stadig i bunden... :-(
Avatar billede cyberdude Nybegynder
02. oktober 2005 - 15:17 #12
og doctypen ændrede ikke ved noget som helst...
Avatar billede roenving Novice
02. oktober 2005 - 15:21 #13
Hrm, det må vel da også¨være scrollHeight, du skal bruge:

var h = document.documentElement.scrollHeight;
Avatar billede cyberdude Nybegynder
02. oktober 2005 - 15:45 #14
jepper... det var lige det der skulle til :-)

Smid et svar...
Avatar billede cyberdude Nybegynder
02. oktober 2005 - 15:53 #15
og så virkdede den ikke længere...

hvis du går ind på eks. "kontingent" så hopper bunden op under indholdet... den skal stadig være "klistret" til bunden

Nogen bud ??
Avatar billede roenving Novice
02. oktober 2005 - 15:54 #16
Hrm, den virker ganske rigtigt, men prøv at se det i en anden browser end IE, så bliver du nok noget overrasket ...

-- og fejlene har så ikke relation til dette, men skal nok søges i nogle af IEs problemer med visse ting ...

-- og så virker det ikke somom du har optimeret dine billeder særlig godt, for det tager en krig at få alle elementer loadet, selv på min rimeligt hurtige 10 Mbit-forbindelse !-)

-- els velbekomme '-)
Avatar billede roenving Novice
02. oktober 2005 - 15:55 #17
Måske

var h = document.documentElement.scrollHeight;
var h1 = document.documentElement.clientHeight;

h = h>h1 ? h : h1;
Avatar billede cyberdude Nybegynder
02. oktober 2005 - 15:57 #18
og så har jeg opdaget en konflikt, jeg har på min body følgende
    <body onload="preloadImages();">

og i scriptet er der en
window.onload

fjerner jeg hele scriptet, så virker mine over knapper, men så snart scriptet er indsat, så forsvinder over funktionen igen ??
Avatar billede cyberdude Nybegynder
02. oktober 2005 - 16:02 #19
så funger højden, men ikke mine over funktioner....
Avatar billede roenving Novice
02. oktober 2005 - 16:03 #20
Fjern onload fra body-tagget og indsæt også den linje i window.onload:

  document.getElementById(minSpacer).style.height = h - 301 + 'px';
  preloadImages();
}
</script>
Avatar billede cyberdude Nybegynder
02. oktober 2005 - 16:05 #21
hmm mht. loadtiden, så oplever jeg en smule længere svar tid end normalt, vi har en 2 Mbit, men kan se på serveren at der er MANGE besøgende på nogle af de sites der er på den lige i øjeblikket
det er vores egen server, som står i et hosting center i københavn....
Avatar billede cyberdude Nybegynder
02. oktober 2005 - 16:06 #22
takker.... :-)
Avatar billede roenving Novice
02. oktober 2005 - 16:21 #23
-- og jeg takker for point ;~}
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