Lengte string in pixels - Softwareontwikkeling

woensdag 16 april 2003 14:35

Acties:

Vrolijkheid alom!

Topicstarter

Ik ben nog steeds druk bezig met m'n menu'tje, waar ik al meer vragen over heb gesteld (ander topic). Alles is helemaal geweldig gelukt, ik blijf alleen met 1 probleem zitten.
Afbeeldingslocatie: http://members.ams.chello.nl/e.venema4/images/menu.jpg

Afbeeldingslocatie: http://members.ams.chello.nl/e.venema4/images/menu.jpg

Alle items hebben een standaard grootte, die al-dan-niet wordt verhoogd, afhankelijk van het aantal tekens in de string. Nou is het de bedoeling dat een knop hoger en hoger blijft worden, zolang er meer tekens zijn.

Om dit te kunnen doen, heb ik de breedte van een string in pixels nodig. Dit verschilt uiteraard per lettertype en -grootte. Is er een manier om van een willekeurige string de totale breedte in pixels te krijgen?

Ik heb al gezocht op verscheidene sites en naar topics op GoT, maar deze komen allemaal uit op string.lenght of iets in die richting. Da's leuk, maar houdt natuurlijk geen rekening met de grootte van een font. Kan het wel?

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

woensdag 16 april 2003 14:37

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Gooi de string in een (onzichtbare) span ofzo, en vraag dan de breedte van die span op? Weet niet of dat werkt... kga effe proberen...

[ Voor 22% gewijzigd door RobIII op 16-04-2003 14:37 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 16 april 2003 14:38

Acties:

dominic

will code for food

Klopt, eerst neerzetten, dan de offsetWidth van het element opvragen, vervolgens de breedte aanpassen.

Download my music on SoundCloud

woensdag 16 april 2003 14:42

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Hoe moet ik me dat voorstellen? De stringwaarden worden gelezen uit een array...

ik krijg this.code als var, daar zit de string in.

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

woensdag 16 april 2003 14:44

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Kaastosti schreef op 16 april 2003 @ 14:42:
Hoe moet ik me dat voorstellen? De stringwaarden worden gelezen uit een array...

ik krijg this.code als var, daar zit de string in.

Zoiets:

HTML:

1 2	<knip> zie verderop in deze draad...

maar ik krijg geen width van de span terug... Ook niet als ik de display style weg haal... Hmmzzz... Effe zoeken nog dus

Je kunt deze functie dus aanroepen als:

JavaScript:

1	myVar = getPxLength('Whatever');

of

JavaScript:

1	myVar = getPxLength(myArray[18]);

[ Voor 85% gewijzigd door RobIII op 16-04-2003 14:53 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 16 april 2003 14:48

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Okee maar dan de grote test... Netscape... liefst versie 4 (maar dat is een beetje erg miereneuken), maar iig vanaf 6 ofzo moet het werken...

Als ik dit script in Netscape plak (wat ik al met meer scripts geprobeerd heb) krijg ik als error (Netscape heeft een mooie javascript error console, hulde daarvoor):
Error: document.all has no properties
Line: 5

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

woensdag 16 april 2003 14:51

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

klopt.. Ik ben nog effe in IE aan het testen. Deze code moet je straks omgooien naar getElementByID enzo...

...en dit zou het moeten zijn:

HTML:

<html>
<head>
    <script language="JavaScript">
        function getPxLength(strVal) {
            var mySpan = document.getElementById('spTest');
            mySpan.innerHTML = strVal;
            return mySpan.offsetWidth;
        }
    </script>
</head>

<body>
    <span id="spTest" style="position:absolute;top=-1000px;"></span>
    <input type="Button" onclick="alert(getPxLength(this.value));" value="Test">
    <input type="Button" onclick="alert(getPxLength(this.value));" value="Bla die bla die bla">
</body>
</html>

/edit/
Bugfixed: display style none geeft altijd 0 terug

Of dit in NS/Opera/Whatever werkt weet ik niet, maar dat kun je zelf wel oplossen dan

[ Voor 192% gewijzigd door RobIII op 16-04-2003 15:25 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 16 april 2003 15:05

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Dit lijkt heel redelijk te werken, ook in netscape... er zit alleen een verschil tussen IE en Netscape:

IE:
Test =35
Bla.. = 149

Netscape:
Test = 26
Bla.. = 108

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

woensdag 16 april 2003 15:07

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Dat heeft dan denk ik te maken met een style die je ergens op hebt staan ofzo, want ik krijg onder IE de waardes die jij opnoemt voor Netscape...Of heb je IE/Netscape omgedraaid?

[ Voor 9% gewijzigd door RobIII op 16-04-2003 15:07 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 16 april 2003 15:08

Acties:

Verwijderd

Kaastosti schreef op 16 April 2003 @ 15:05:
Dit lijkt heel redelijk te werken, ook in netscape... er zit alleen een verschil tussen IE en Netscape:

IE:
Test =35
Bla.. = 149

Netscape:
Test = 26
Bla.. = 108

Conclusie: gaat iets niet goed..

is het geen optie om van alle letters van het alfabet te tellen hoeveel pixels breed ze zijn op beeld en op die manier kijken hoe breed een woord is?
Kan natuurlijk alleen maar als je steeds hetzelfde lettertype gebruikt.

woensdag 16 april 2003 15:10

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Verwijderd schreef op 16 April 2003 @ 15:08:
[...]
Conclusie: werkt niet goed..

Doh... Maar dat valt geheid op te lossen. Geef jij het zo snel op?

Verwijderd schreef op 16 April 2003 @ 15:08:
[...]
is het geen optie om van alle letters van het alfabet te tellen hoeveel pixels breed ze zijn op beeld en op die manier kijken hoe breed een woord is?
Kan natuurlijk alleen maar als je steeds hetzelfde lettertype gebruikt.

Ik denk dat meneer verschillende fonts wil kunnen gebruiken:

Kaastosti schreef op 16 april 2003 @ 14:35:
...Da's leuk, maar houdt natuurlijk geen rekening met de grootte van een font. Kan het wel?

"Mijn" oplossing werkt altijd (mits we 'm werkend krijgen) voor alle fonts...

[ Voor 20% gewijzigd door RobIII op 16-04-2003 15:11 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 16 april 2003 15:11

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Ik heb jouw code los gebruikt, dus zonder eigen zooi er omheen, krijg ik hetzelfde resultaat. Van de browsers IE en Netscape heb ik hier om te testen allebei versie 6.

Waaazig je meet gewoon de breedte van de span... dat zou dus automatisch altijd gelijk moeten zijn, ongeacht de browser...

[ Voor 28% gewijzigd door Kaastosti op 16-04-2003 15:13 ]

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

woensdag 16 april 2003 15:12

Acties:

Verwijderd

RobIII schreef op 16 April 2003 @ 15:10:
Doh... Maar dat valt geheid op te lossen. Geef jij het zo snel op?

Ik verwoorde het niet goed, is inmiddels gewijzigd ...

woensdag 16 april 2003 15:13

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

En als je eens effe keihard opgeeft welk font 'ie moet gebruiken voor die span? Misschien gebruikt IE default een ander font dan NS? Of met een andere spacing ofzo?

Gooi dit eens in je head:

code:

<STYLE>
  BODY {
    font-family: arial;
    font-size : 12px;
  }
</STYLE>

Wat doet 'ie dan? Ik heb helaas alleen IE hier om te testen... Hierdoor voorkom je dat er verschillen optreden in font-sizes/types onderling tussen de browsers...

[ Voor 18% gewijzigd door RobIII op 16-04-2003 15:15 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 16 april 2003 15:14

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Yup 24 en 98 pixels in beide browsers

IK BEN BLIJ
Nou gaat het helemaal goedkomen. Hartelijk dank voor de hulp!

Het is mogelijk dat die font uiteindelijk veranderd wordt, maar dit zal waarschijnlijk in een stylesheet gebeuren. Dat heeft dus hetzelfde effect als dit

[ Voor 40% gewijzigd door Kaastosti op 16-04-2003 15:15 ]

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

woensdag 16 april 2003 15:15

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Kaastosti schreef op 16 April 2003 @ 15:14:
Yup 24 en 98 pixels in beide browsers IK BEN BLIJ
Nou gaat het helemaal goedkomen. Hartelijk dank voor de hulp!

RobIII schreef op 16 april 2003 @ 15:10:
[...]
Doh... Maar dat valt geheid op te lossen. Geef jij het zo snel op?
[...]

Tadaaaaaaaaaaaaaaaaaa!

[ Voor 28% gewijzigd door RobIII op 16-04-2003 15:16 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 16 april 2003 15:16

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

lollige avatar ovigens

(lekker off-topic)

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

woensdag 16 april 2003 15:16

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

ook offtopic: Welke? Mijne?

Kaastosti schreef op 16 April 2003 @ 15:17:
ja

Dank u

Kaastosti schreef op 16 April 2003 @ 15:14:
Het is mogelijk dat die font uiteindelijk veranderd wordt, maar dit zal waarschijnlijk in een stylesheet gebeuren. Dat heeft dus hetzelfde effect als dit

...en dan is deze oplossing dus 1 van de betere lijkt me. Werkt "altijd", ongeacht lettertype/grootte

[ Voor 161% gewijzigd door RobIII op 16-04-2003 15:19 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 16 april 2003 15:17

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

ja

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

woensdag 16 april 2003 19:17

Acties:

Verwijderd

kuch *boxmodel* ...