[javascript] Browser breedte en hoogte detecteren? - Softwareontwikkeling

vrijdag 22 maart 2002 08:55

Acties:

Verwijderd

Topicstarter

Het is misschien super makkelijk maar ik zou willen weten
hoe je precies de breedte en hoogte van iemands window/browser bepaald en daarvan afhankelijk de groote en positie van text aanpast...
((dus als ik rechtsonder in beeld altijd een bepaalde tekst wil hebben staan onafhankelijk van de schermgrootte))

kan iemand mij (als redelijke leek) uitleggen met een voorbeeld ofzo hoe ik dat zou moeten aanpakken...
alvast bedankt!!!!!!!!

vrijdag 22 maart 2002 09:03

Acties:

crisp

Devver

Pixelated

hier staat een voorbeeldje.

Intentionally left blank

vrijdag 22 maart 2002 09:05

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

je moet dan de breedte en hoogte van het browservenster opvragen, helaas is het vervolgens wel onmogelijk om de buitengrootte van ht venster (dus de grootte van eventuele tabbladen links, status onder en locatie- en buttonbar bovenin op te vragen)

verder is er verschil tussen netscape en msie:

voor netscape window.innerWidth en window.innerHeight, voor msie document.body.clientWidth
en document.body.clientHeight

een redelijke crossbrowserfunctie hiervoor:

code:

function getWindowWidth() {
    if (document.all) {
        return document.body.clientWidth
    } else {
        return window.innerWidth
    }
}
function getWindowHeight() {
    if (document.all) {
        return document.body.clientHeight
    } else {
        return window.innerHeight
    }
}

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

vrijdag 22 maart 2002 11:00

Acties:

Verwijderd

Het lijkt me niet zo verstandig om met een document.all check te bepalen met welke methode de binnenafmetingen van het browservenster kunnen worden opgevraagd.

Opera ondersteunt namelijk document.all, maar werkt - voor de bepaling van de binnenafmetingen - met window.innerWidth en window.innerHeight.

Om problemen in Opera te voorkomen zou je de functies als volgt kunnen herschrijven:

function getWindowWidth() {
if (window.innerWidth!=null) {
return window.innerWidth;
} else {
return document.body.clientWidth;
}
}
function getWindowHeight() {
if (window.innerHeight!=null) {
return window.innerHeight;
} else {
return document.body.clientHeight;
}
}

Overigens kun je in Netscape ook de buitenafmetingen van het browservenster opvragen (met window.outerWidth en window.outerHeight).

vrijdag 22 maart 2002 12:17

Acties:

Verwijderd

Topicstarter

Quote:
--------------------------------------------------------------------------------
function getWindowWidth() {
if (document.all) {
return document.body.clientWidth
} else {
return window.innerWidth
}
}
function getWindowHeight() {
if (document.all) {
return document.body.clientHeight
} else {
return window.innerHeight
}
}
------------------------------------------------------------

Ok goed, stel ik wil nu een plaatje rechts onderin hebben...
hoe moet ik dat doen... (het is heel basic denk ik) en ik heb de bovenstaande code gebruikt....

vrijdag 22 maart 2002 12:19

Acties:

disjfa

be

code:

1 2	image.top = window.innerheight - image.height image.left = window.innerwidth - image.width

dan moet je alleen die image vervangen met de id die je dan die image geeft:
[img]"blaat"[/img]

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 22 maart 2002 13:34

Acties:

Verwijderd

Topicstarter

Ik snap er niks van.
Ik heb nu dit..

<HTML>
<HEAD>
<TITLE>Testing this page</TITLE>

<SCRIPT language=JavaScript>

function getWindowWidth()
{
if (document.all)
{
return document.body.clientWidth
}
else
{
return window.innerWidth
}
}

function getWindowHeight()
{
if (document.all)
{
return document.body.clientHeight
}
else
{
return window.innerHeight
}
}

image.bottom = window.innerheight - image.height
image.right = window.innerwidth - image.width

</SCRIPT>

[img]"test.gif"> </HEAD> </HTML[/img]

Ik wil test.gif rechts onder in beeld hebben...
Dat lukt niet en ik weet zeker dat iemand van jullie het weet.

vrijdag 22 maart 2002 13:39

Acties:

disjfa

be

Op vrijdag 22 maart 2002 13:34 schreef Djasp het volgende:
image.bottom = window.innerheight - image.height
image.right = window.innerwidth - image.width

image.top & image.left gebruiken.... bottom en right bestaan nie

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 22 maart 2002 14:14

Acties:

Verwijderd

Topicstarter

quote:
--------------------------------------------------------------------------------
Op vrijdag 22 maart 2002 13:34 schreef Djasp het volgende:
image.bottom = window.innerheight - image.height
image.right = window.innerwidth - image.width

image.top & image.left gebruiken.... bottom en right bestaan nie
--------------------------------------------------------------------------------

dan heb ik er toch niets aan als ik een plaatje rechtsonder wil hebben of zie ik dat verkeerd?

vrijdag 22 maart 2002 14:16

Acties:

disjfa

be

Op vrijdag 22 maart 2002 14:14 schreef Djasp het volgende:
dan heb ik er toch niets aan als ik een plaatje rechtsonder wil hebben of zie ik dat verkeerd?

style"left:400px;top400px;" zet je plaatje toch 400 van links af en 400 van de bovenkant

je moet uitgaan vanaf linksboven en van daaruit naar beneden rekenen

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 22 maart 2002 14:22

Acties:

r0bert

Tip 2 Djasp: Afbeeldingslocatie: http://www.sovenewmedia.nl/~infosove/troep.bmp

vrijdag 22 maart 2002 14:23

Acties:

disjfa

be

Op vrijdag 22 maart 2002 14:22 schreef r0bert het volgende:
Tip 2 Djasp:

nice one

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 22 maart 2002 14:28

Acties:

Verwijderd

Topicstarter

Op vrijdag 22 maart 2002 14:16 schreef disjfa het volgende:

[..]

style"left:400px;top400px;" zet je plaatje toch 400 van links af en 400 van de bovenkant

je moet uitgaan vanaf linksboven en van daaruit naar beneden rekenen

BEDANKT VOOR DE TIP

om die quote functie ha ha

Ahhh dus bijvoorbeeld het scherm is 600px bij 400px en ik wil mijn plaatje van 200px bij 100px rechtsonder hebben dan zeg ik dat is dan 400px naar rechts en 300px naar beneden en dan is het goed.

effe voor de leek net als ik: ik had de code die ik tot nu toe had gegeven. Wat ik moet ik daaraan toevoegen om de style dynamisch te maken aan de hoogte en breedte van het scherm?

vrijdag 22 maart 2002 14:30

Acties:

disjfa

be

Op vrijdag 22 maart 2002 14:28 schreef Djasp het volgende:

[..]

Ahhh dus bijvoorbeeld het scherm is 600px bij 400px en ik wil mijn plaatje van 200px bij 100px rechtsonder hebben dan zeg ik dat is dan 400px naar rechts en 300px naar beneden en dan is het goed.

je leert t al

maar verder was ie toch al dynamisch... alleen wat je nog zou kunnen doen is dat als t venster word vergroot dat je opnieuw je plaatje neer laat zetten

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 22 maart 2002 14:47

Acties:

r0bert

code:

<html>

<head>

<title> test </title

<script language="JavaScript" type="text/javascript">

function placeImage() {
  if (document.all) {
    iBreedte = document.body.clientWidth;
    iHoogte = document.body.clientHeight
  } else {
     iHoogte = window.innerHeight;
     iBreedte = window.innerWidth;
  }
  document.all['testImage'].top = iHoogte - testImage.height;
  document.all['testImage'].left = iBreedte - testImage.width;  
}

</script>

</head>

<body onload="placeImage();" onresize="placeImage();">

de image zal rechtsonder in het scherm geplaatst worden

[img]"test.gif"[/img]

</body>

</html>

niet getest.. zal trouwens nog even een andere maken en zo even editten..

crossBrowser gedoe moet je nog maar even uitzoeken..

code:

<html>

<head>

<title> test </title

<script language="JavaScript" type="text/javascript">

function placeImage(sWhichImage) {
  whichImage = document.getElementsById(sWichImage)
  whichImage.style.pixelRight = whichImage.width;
  whichImage.style.pixelBottom = whichImage.height;
}

</script>

</head>

<body onload="placeImage('testImage');" onresize="placeImage('testImage');">

de image zal rechtsonder in het scherm geplaatst worden

[img]"test.gif"[/img]

</body>

</html>

Niet getest & nog nooit eerder gebruikt..

vrijdag 22 maart 2002 14:56

Acties:

Verwijderd

Topicstarter

Op vrijdag 22 maart 2002 14:30 schreef disjfa het volgende:

[..]

je leert t al maar verder was ie toch al dynamisch... alleen wat je nog zou kunnen doen is dat als t venster word vergroot dat je opnieuw je plaatje neer laat zetten

Dat is ook handig ja daar kom ik wel uit.
Ik ben wel heel hardleers hoor:

<HTML>
<HEAD>
<TITLE>Testing this page</TITLE>

<SCRIPT language=JavaScript>

function getWindowWidth()
{
if (document.all)
{
return document.body.clientWidth
}
else
{
return window.innerWidth
}
}

function getWindowHeight()
{
if (document.all)
{
return document.body.clientHeight
}
else
{
return window.innerHeight
}
}

image.top = window.innerheight - image.height
image.left = window.innerwidth - image.width

</SCRIPT>

[img]"test.gif"> </HEAD> </HTML> Wat[/img] met welke variabelen ? Want welke variabelen bevatten nou de breedte en de hoogte. Om mijn 200px bij 100px plaatje rechtsonder te krijgen

vrijdag 22 maart 2002 14:57

Acties:

disjfa

be

k zou ff stiekum kijken wat dat menneke boven je hebt gezegd

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 22 maart 2002 16:48

Acties:

Verwijderd

Topicstarter

Op vrijdag 22 maart 2002 14:57 schreef disjfa het volgende:
k zou ff stiekum kijken wat dat menneke boven je hebt gezegd

\
SORRY ik had dat nog niet gezien...
BEDANKT ALLEMAAL..!!