/ Forside / Teknologi / Udvikling / Java Scripts / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
Tilpasse billede til browserens størrelse ~
Fra : Jakob Munck


Dato : 08-11-03 09:35

Jeg er webmaster for en site (www.forfatterkvarteret.dk) hvor vi gerne vil
have det store forsidebillede tilpasset i størrelse til størrelsen af
brugernes browser (IE), således at forsiden altid fylder hele browseren og
der ikke kommer elevator i højre side.

Men det kræver at vi får information om brugerens browsers størrelse og om
hvilken indstilling han har valgt (visning af store ikoner?).

Kan det lade sig gøre?

Hvordan?

v.h.
Jakob Munck




 
 
Lasse Reichstein Nie~ (08-11-2003)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 08-11-03 12:13

"Jakob Munck" <admin@seniorxxgroup.dk> writes:

> Jeg er webmaster for en site (www.forfatterkvarteret.dk) hvor vi gerne vil
> have det store forsidebillede tilpasset i størrelse til størrelsen af
> brugernes browser (IE),

*Ved* du at brugeren bruger IE? Ellers kan man lige så godt sørge for
at det virker i flere browsere.

> således at forsiden altid fylder hele browseren og der ikke kommer
> elevator i højre side.

Du har altså *et* billede, og vil gerne have det forstørret så det
passer i størrelsen til browservinduet.

Scrollbaren er der altid i IE, men hvis billedet passer i størrelsen,
så er der ikke nogen slider (elevator, sødt navn).

Det vil strække billedet, hvis højde/bredde-forholdet ikke er det samme
for browservinduet som for billedet. Er du interesseret i det, eller
skal forholdet også bevares?

> Men det kræver at vi får information om brugerens browsers størrelse og om
> hvilken indstilling han har valgt (visning af store ikoner?).

Det burde være nok at kende browserens viewports størrelse.

> Kan det lade sig gøre?

Det skulle jeg mene. Sørg for at fjerne margin og padding fra body,
så det ikke ødelægger beregningen.
---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="dk">
<head>
<title>Min Fede Forside</title>
<style type="text/css">
html,body,div,img {
margin:0px;
padding:0px;
border:none; /* til hvis billedet er inde i et link */
background:black; /* baggrundsfarve */
}
</style>
</head>
<body>
<div><a href="fortsæt.html"><img
src="mitForsidebillede.png" id="bld" name="bld"></a></div>
<script type="text/javascript">
function setImageSize() {
var root = (document.documentElement||document.body);
var width = (window.innerWidth || root.clientWidth);
var height = (window.innerHeight || root.clientHeight);
if (width && height) {
var img = document.images['bld'];
img.style.width = width + "px";
img.style.height = height + "px";
}
}
setImageSize();
document.body.onload = setImageSize;
window.onresize = setImageSize; // hvis vinduet ændrer størrelse
</script>
</body>
</html>
---
Testet i IE6 og Opera 7. Giver dog scrollbarer i Mozilla FB.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

Jakob Munck (08-11-2003)
Kommentar
Fra : Jakob Munck


Dato : 08-11-03 12:54

> *Ved* du at brugeren bruger IE? Ellers kan man lige så godt sørge for
> at det virker i flere browsere.
>

Jeg koder kun mod IE (efter brugerens ønske)


> Det vil strække billedet, hvis højde/bredde-forholdet ikke er det samme
> for browservinduet som for billedet. Er du interesseret i det, eller
> skal forholdet også bevares?
>

Nej, jeg er kun interesseret i at regulere billedets højde.


Og billedet skal - i højde - fylde X antal % af vinduets højde, så jeg skal
kunne indsætte denne variabel i billedets højdedefinion ("height"xx"), som
nævnt i min tidligere postering i denne tråd.

Så vidt jeg kan se er det script jeg selv har indsendt (i forrige postering)
mere simpelt end det jeg får foreslået, men tak for det alligevel. Det
foreslåede script kan jeg kun anvende, hvis jeg kan isolere variablen for
billedets højde og indsætte den under <img....

v.h.
Jakob



Lasse Reichstein Nie~ (08-11-2003)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 08-11-03 13:28

"Jakob Munck" <admin@seniorxxgroup.dk> writes:

> Jeg koder kun mod IE (efter brugerens ønske)

Det er så hans valg. Det forhindrer dig ikke i at lave noget der virker
i andre browsere, bare det også virker i IE.

Hvilke versioner af IE. Hvis det kun er version 6, så vil jeg foreslå
at bruge en DOCTYPE der sætter browseren i standards mode.

> Nej, jeg er kun interesseret i at regulere billedets højde.

Hvad skal det, mere præcist, bruges til. Måske kan det klares med
ren CSS (style="height:80%;") eller bare højde-attributten (height="80%").

> Og billedet skal - i højde - fylde X antal % af vinduets højde, så jeg skal
> kunne indsætte denne variabel i billedets højdedefinion ("height"xx"), som
> nævnt i min tidligere postering i denne tråd.

Om du bare kan skrive height="80%" afhænger af hvad der ellers er på siden.

> Så vidt jeg kan se er det script jeg selv har indsendt (i forrige postering)
> mere simpelt end det jeg får foreslået, men tak for det alligevel. Det
> foreslåede script kan jeg kun anvende, hvis jeg kan isolere variablen for
> billedets højde og indsætte den under <img....

Det er det der er svært :)

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

Jakob Munck (08-11-2003)
Kommentar
Fra : Jakob Munck


Dato : 08-11-03 14:42

> Hvilke versioner af IE. Hvis det kun er version 6, så vil jeg foreslå
> at bruge en DOCTYPE der sætter browseren i standards mode.
>

jeg går ud fra at det er den indstilling, hvor der er store topikoner, altså
den som de fleste (vist nok) bruger.

>
> Hvad skal det, mere præcist, bruges til. Måske kan det klares med
> ren CSS (style="height:80%;") eller bare højde-attributten (height="80%").
>

Oprindelig var min idé blot den at søge at undgå at der vises en elevator
til højre på browseren, uanset om den er indstillet med store eller små
ikoner og om den er i max. størrelse eller ej. Så jeg kan ikke bare gengive
billedet i 80% størrelse, for størrelsen afhænger af browserens størrelse.


> > Så vidt jeg kan se er det script jeg selv har indsendt (i forrige
postering)
> > mere simpelt end det jeg får foreslået, men tak for det alligevel. Det
> > foreslåede script kan jeg kun anvende, hvis jeg kan isolere variablen
for
> > billedets højde og indsætte den under <img....
>
> Det er det der er svært :)
>

Det forstår jeg nu. Men jeg arbejder videre med det, og forsøger at forstå
den kode du har givet mig. Så jeg siger mange tak til dig for hjælpen.

v.h.
Jakob



Lasse Reichstein Nie~ (08-11-2003)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 08-11-03 22:19

"Jakob Munck" <admin@seniorxxgroup.dk> writes:

> > Hvilke versioner af IE. Hvis det kun er version 6, så vil jeg foreslå
> > at bruge en DOCTYPE der sætter browseren i standards mode.

> jeg går ud fra at det er den indstilling, hvor der er store topikoner, altså
> den som de fleste (vist nok) bruger.

Det har intet med browserens udseende at gøre (hvis jeg endelig bruger
Microsofts HTML-renderer, så bruger jeg *ikke* IE som interface, så jeg
du kan ikke forudsige noget om udseendet af browseren).

Browserens knapper er også ligegyldige. Det er kun den plads der er
afsat til siden der er interessant.

"Standards mode" (som modsætning til "quirks mode") har indflydelse
på hvordan IE viser *siderne*. I quirks mode efterligner den en masse
fejl i IE4, mens standards mode viser siderne ifølge standarderne.
Læs mere på:
<URL:http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp?frame=true#cssenhancements_topic2>

> Oprindelig var min idé blot den at søge at undgå at der vises en elevator
> til højre på browseren, uanset om den er indstillet med store eller små
> ikoner og om den er i max. størrelse eller ej. Så jeg kan ikke bare gengive
> billedet i 80% størrelse, for størrelsen afhænger af browserens størrelse.

De 80% skal netop tages af dokumentets størrelse, ikke billedets. Det gør
det også både hvis man bruger CSS eller hvis man bruger height-attributten.

Prøv denne side:

---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="dk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Min Fede Forside</title>
<style type="text/css">
html,body,div {
height:100%;
margin:0px;
padding:0px;
background:black; /* baggrundsfarve */
}
img {
height:80%;
width:100px; /* billedets bredde, ellers ville det følge med højden */
}
</style>
</head>
<body>
<div><img src="mitForsidebillede.png" id="bld" name="bld"
alt="Forsiden!"></div>
</body>
</html>
---
Her er billedets højde sat til 80% af dokumentets højde, og det følger
med når browservinduet ændrer størrelse.


/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

Jakob Munck (08-11-2003)
Kommentar
Fra : Jakob Munck


Dato : 08-11-03 12:13

Ja, jeg fandt da ud af at jeg skal bruge et javascript som dette:

------------------------
<script type="text/javascript">
<!-- Start
if (document.all) {
browserwidth = document.body.clientWidth;
browserheight = document.body.clientHeight;
} else {
browserwidth = window.innerWidth;
browserheight = window.innerHeight;
}
// Slut -->
</script>

<img border="0" src="images_forside/forside.jpg"
height="<%=browserheight%>">
--------------------------------------
Men der hvor jeg forsøger at overføre browserhøjden til højden at mit
billede, går det galt, for billedet vises overhovedet ikke.

1. Hvad er der galt i min måde at overføre højdevariablen?

2. Hvordan kan jeg multiplicere denne variabel med et tal, så billedet altid
er 80% af browservinduets højde?

v.h.
Jakob




Lasse Reichstein Nie~ (08-11-2003)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 08-11-03 12:56

"Jakob Munck" <admin@seniorxxgroup.dk> writes:

> Ja, jeg fandt da ud af at jeg skal bruge et javascript som dette:
>
> ------------------------
> <script type="text/javascript">
> <!-- Start
Du behøver ikke HTML-kommentarer i dit Javascript.

> if (document.all) {

Det er en dårlig idé at tjekke om document.all findes, og derefter
bruge noget helt andet. Tjek om det andet findes direkte.

if (document.body.clientWidth !== undefined) {

Bemærk at hvis IE 6 (eller Opera eller Mozilla/Netscape 6+) er i
"standards mode", så er det ikke "document.body", men
"document.documentElement" du skal have fat i.

Det er derfor jeg skriver
var root = document.documentElement || document.body;
var width = window.innerWidth || root.clientWidth;
^^^^

Den bruger altid det rigtige element (Jeg sprang dog over nogle
skridt der skal til for at redde Netscape 4).

Du kan også læse om det her:
<URL:http://jibbering.com/faq/#FAQ4_9>

> <img border="0" src="images_forside/forside.jpg"
> height="<%=browserheight%>">

Men <%=browserheight%> er serverside-kode, og "browserheight" er
en klientside-variabel. Altså kender serveren ikke variablen,
og da slet ikke værdien af den, som først findes når siden har
nået klienten.

Du bliver nødt til at bruge Javascript til enten
1) at skrive hele img-tagget (anbefales ikke, da det så går helt
galt hvis Javascript er slået fra).
2) at ændre højde/bredde dynamisk. Det er den kode jeg foreslog.

> --------------------------------------
> Men der hvor jeg forsøger at overføre browserhøjden til højden at mit
> billede, går det galt, for billedet vises overhovedet ikke.
>
> 1. Hvad er der galt i min måde at overføre højdevariablen?

Du bruger server-side-kode.

> 2. Hvordan kan jeg multiplicere denne variabel med et tal, så billedet altid
> er 80% af browservinduets højde?

browserheight = Math.floor(browserheight * 0.8);

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

Søg
Reklame
Statistik
Spørgsmål : 177501
Tips : 31968
Nyheder : 719565
Indlæg : 6408526
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste