Javascript resultaat is in elke browser anders. - Softwareontwikkeling

zondag 26 juni 2005 13:56

Acties:

...

Topicstarter

Ik heb het volgende stukje code geschreven:

HTML:

<html>
<body>
<script type="text/javascript">

document.write("<table height=100 width=100% border=0 cellspacing=0><tr>")
for (i = 0; i < 16; i++)
{
  for (j = 0; j < 16; j++)
  {
    q=i
    w=j
    if (q==10) q="A"
    if (q==11) q="B"
    if (q==12) q="C"
    if (q==13) q="D"
    if (q==14) q="E"
    if (q==15) q="F"
    if (w==10) w="A"
    if (w==11) w="B"
    if (w==12) w="C"
    if (w==13) w="D"
    if (w==14) w="E"
    if (w==15) w="F"

    document.write("<td bgcolor=")
    document.write("#"+q+w+","+q+w+","+q+w)
    document.write(" ></td>")
  }
}
document.write("</tr></table><BR>")

document.write("<table height=100 width=100% border=0 cellspacing=0><tr>")
for (i = 0; i < 256; i++)
{
    document.write("<td bgcolor=")
    document.write("RGB("+i+","+i+","+i+")")
    document.write(" ></td>")
}
document.write("</tr></table><BR>")

document.write("<table height=100 width=100% border=0 cellspacing=0><tr>")
for (i = 0; i <= 100; i++)
{
    document.write("<td bgcolor=")
    document.write("RGB("+i+"%,"+i+"%,"+i+"%)")
    document.write(" ></td>")
}
document.write("</tr></table><BR>")

</script>
</body>
</html>

De bedoeling is dat er 3 keer een balk wordt weergegeven die van wit overgaat naar zwart.
De eerste keer gebeurt het met een hexadecimale code, 2e keer met een RGB-waarde en de 3e keer met een percentage.

Maar nu bekijk ik het effect met Internet Explorer, FireFox, Netscape en Opera, maar elke browser zet er weer andere kleuren neer.

Wat doe ik fout ?

Speel ook Balls Connect en Repeat

zondag 26 juni 2005 14:24

Acties:

Verwijderd

code:

1	document.write("#"+q+w+","+q+w+","+q+w)

Ik snapte er eerst niet veel van, maar nu zie ik dat je een "," gebruikt. Het resultaat is dus:

code:

1	<td bgcolor=#00,00,00></td>

Alle browsers renderen dat blijkbaar verschillend. Kortom; verwijder je ","

code:

1	document.write("#"+q+w+q+w+q+w)

dit lost trouwens alleen je eerste probleem op.

[ Voor 36% gewijzigd door Verwijderd op 26-06-2005 14:32 ]

zondag 26 juni 2005 14:33

Acties:

Onbekend

...

Topicstarter

ah, bedankt. Daar had ik helemaal overheen gekeken. In alle vier de browsers werkt dat met de hexadecimale code nu goed.

Maar nu die andere 2 balken werken niet goed met de rgb-waarden.

Speel ook Balls Connect en Repeat

zondag 26 juni 2005 14:53

Acties:

Johnny

ondergewaardeerde internetguru

En wat moet daar dan je output worden?

HTML:

1	<td bgcolor=RGB(1%, 1%, 1%)>

Waar heb je dat ooit geleerd?

[ Voor 5% gewijzigd door Johnny op 26-06-2005 14:53 ]

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

zondag 26 juni 2005 15:00

Acties:

Onbekend

...

Topicstarter

Johnny schreef op zondag 26 juni 2005 @ 14:53:
En wat moet daar dan je output worden?
HTML:
1
<td bgcolor=RGB(1%, 1%, 1%)>
Waar heb je dat ooit geleerd?

Hier http://www.handleidinghtml.nl/html/elementen/td.html#BGCOLOR
en hier http://www.handleidinghtml.nl/divers/kleuren/kleuren02.html

Speel ook Balls Connect en Repeat

zondag 26 juni 2005 15:04

Acties:

Karp

Ook onbekend schreef op zondag 26 juni 2005 @ 15:00:
[...]

Hier http://www.handleidinghtml.nl/html/elementen/td.html#BGCOLOR
en hier http://www.handleidinghtml.nl/divers/kleuren/kleuren02.html

http://www.handleidinghtml.nl/divers/kleuren/kleuren06.html

dat is dus alleen in css

zondag 26 juni 2005 15:23

Acties:

Borizz

Misschien een idee om er gewoon een plaatje van te maken? Dat werkt volgens mij net zo goed? En is zeker browser onafhankelijk!

If I can't fix it, it ain't broken.

zondag 26 juni 2005 16:40

Acties:

Onbekend

...

Topicstarter

Borizz schreef op zondag 26 juni 2005 @ 15:23:
Misschien een idee om er gewoon een plaatje van te maken? Dat werkt volgens mij net zo goed? En is zeker browser onafhankelijk!

Een plaatje kan ik maken. Maar niet voor het ontelbare aantal schermgroottes van de browsers.

Speel ook Balls Connect en Repeat

zondag 26 juni 2005 17:15

Acties:

Borizz

Een plaatje met overgangen is makkelijk te schalen, als je het plaatje maar groot genoeg maakt in de breedte, kan het makkelijk naar kleinere formaten geschaald worden zonder kwaliteitsverlies.

Dat vind ik een nettere oplossing dan een tabel en javascript hiervoor gebruiken.

If I can't fix it, it ain't broken.

zondag 26 juni 2005 17:25

Acties:

Parlor_Inventor

I doubt, therefore I might be

De RGB-gedeeltes (beide for-loopjes) moet je vervangen door inline-css:

code:

1
2
3

    document.write("<td style=\"background-color:");
    document.write("RGB("+i+","+i+","+i+");");
    document.write("\"></td>");

...And the world goes on racing, like the world always will...

zondag 26 juni 2005 18:01

Acties:

Onbekend

...

Topicstarter

Bedankt voor de reacties. Alledrie de balkjes worden nu in elke browser netjes weergegeven zoals het hoort.

@Borizz: Een plaatje op een site die in een ander formaat weergeven vind ik vaak niet netjes eruit zien. Daarom wil ik er graag geen plaatje van maken. Scheelt ook weer een beetje dataverkeer

.

Speel ook Balls Connect en Repeat

zondag 26 juni 2005 20:16

Acties:

Haan

dotnetter

Heb je een voorbeeld van hoe je dit in de praktijk gebruikt? Want ik vind het wel interessant eigenlijk op deze manier

Kater? Eerst water, de rest komt later

zondag 26 juni 2005 20:26

Acties:

Onbekend

...

Topicstarter

Kijk eens bovenaan deze site: http://www.microsoft.com/windows/default.mspx
Zoiets wil ik ook op een andere site gaan toepassen..... Ziet er wel leuk uit toch ?

[ Voor 22% gewijzigd door Onbekend op 26-06-2005 20:27 ]

Speel ook Balls Connect en Repeat

zondag 26 juni 2005 20:32

Acties:

Janoz

Moderator Devschuur®

!litemod

Waarom zit iedereen zich altijd in van die rare bochten te wringen om hexadecimale waarden af te drukken?

code:

for (var i=0;i<255;i++){
  hexString = i.toString(16);
  document.write("<td bgcolor=");
  document.write("#"+hexString+hexString+hexString);
  document.write(" ></td>");
}

Doet exact hetzelfde.

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'

zondag 26 juni 2005 20:33

Acties:

Verwijderd

Kun je dan niet beter een background image fabriceren die je rechts uitlijnt

zondag 26 juni 2005 20:40

Acties:

Onbekend

...

Topicstarter

Janoz schreef op zondag 26 juni 2005 @ 20:32:
Waarom zit iedereen zich altijd in van die rare bochten te wringen om hexadecimale waarden af te drukken?

Mijn kennis van JavaScript is helaas nog beperkt. Maar ik verwacht dat de komende zomer uit te breiden.

Janoz schreef op zondag 26 juni 2005 @ 20:32:

code:

for (var i=0;i<255;i++){
  hexString = i.toString(16);
  document.write("<td bgcolor=");
  document.write("#"+hexString+hexString+hexString);
  document.write(" ></td>");
}

Doet exact hetzelfde.

Niet helemaal. FireFox gaat er niet helemaal goed mee om.

Speel ook Balls Connect en Repeat

zondag 26 juni 2005 22:13

Acties:

Splash

Verwijderd schreef op zondag 26 juni 2005 @ 20:33:
Kun je dan niet beter een background image fabriceren die je rechts uitlijnt

Idd, want hoe doen ze het op die MS site die je aangeeft?
Afbeeldingslocatie: http://www.microsoft.com/library/toolbar/3.0/gradient.aspx?a=FFFFFF&b=B6C5EE&w=250&h=42&d=ltr&c=MxJXEmCSRJ7E1H62CeSYp3jSP0Q%3D

Afbeeldingslocatie: http://www.microsoft.com/library/toolbar/3.0/gradient.aspx?a=FFFFFF&b=B6C5EE&w=250&h=42&d=ltr&c=MxJXEmCSRJ7E1H62CeSYp3jSP0Q%3D

Met een plaatje dus

(Ok, een serverside script die een plaatje uitpoept, principe is hetzelfde

)

zondag 26 juni 2005 22:30

Acties:

wicher|IA

Ook onbekend schreef op zondag 26 juni 2005 @ 18:01: Daarom wil ik er graag geen plaatje van maken. Scheelt ook weer een beetje dataverkeer .

Mm.. een plaatje neemt waarschijnlijk minder bytes in dan de ongelooflijke brei aan html die je hier probeert te genereren. Maar goed, je genereert het bij de client, dus het is geen dataverkeer nee.

Maar ook ik zou zeggen: pak een plaatje, dat is ECHT beter. Daar zijn ze ook voor gemaakt.

zondag 26 juni 2005 23:11

Acties:

Onbekend

...

Topicstarter

Ik zal testen met een plaatje dat ingedrukt en uitgerekt wordt.
Uit ervaring weet ik dat normale afbeeldingen niet mooi worden, maar dit zijn natuurlijk alleen maar lijntjes. Misschien merk je dat daar heel weinig van.

Speel ook Balls Connect en Repeat

zondag 26 juni 2005 23:43

Acties:

SuperRembo

Janoz schreef op zondag 26 juni 2005 @ 20:32:
Waarom zit iedereen zich altijd in van die rare bochten te wringen om hexadecimale waarden af te drukken?
code:
1
2
3
4
5
6
for (var i=0;i<255;i++){
  hexString = i.toString(16);
  document.write("<td bgcolor=");
  document.write("#"+hexString+hexString+hexString);
  document.write(" ></td>");
}
Doet exact hetzelfde.

Gaat dat goed voor i < 16? Ik denk 't niet

Hmm, misschien in dit geval wel om dat je 3x dezelfde waarde gebruikt. #333 is hetzelfde als #333333. Maar in het algemeen (met verschillende r, g en b) gaat 't niet goed.

[ Voor 22% gewijzigd door SuperRembo op 26-06-2005 23:45 ]

| Toen / Nu

zondag 26 juni 2005 23:50

Acties:

Janoz

Moderator Devschuur®

!litemod

Klopt. Code is ook even snel uit het hoofd geklopt. Punt wat ik wilde maken was meer de hex conversie die veel mensen gebruiken terwijl daarvoor standaard functies zijn.

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'