CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

meyer Nybegynder

05. juni 2008 - 11:26 Der er 18 kommentarer og
1 løsning

mål pixelbredde af variabel

Hvordan klarer jeg den her:

Nu har jeg i et par andre spørgsmål fået lidt styr på min css i min menu, så nu skal jeg måle indholdet af min record i px gange det med fontstørrelse og bruge den til min width.

Jeg henter antal tegn fra databasen med LEN(rs("indhold") og får et tegnantal - hvordan omformer jeg det til en fysisk bredde når min font er f.eks. size 12 ja og så lige BOLD?

Ja det lyder vildt - men det må kunne lade sig gøre :-)

Synes godt om

meyer Nybegynder

05. juni 2008 - 11:47 #1

Får lige en anden ide hvis det her ikke kan lade sig gøre - så kan jeg vel i min admindel når jeg gemmer menupunktet tegne en tabel med den rigtige font - måle tabellen og gemme bredden i databasen sammen med menuen:

Hvordan måler jeg det? nu kommer der en masse og siger javascript ;-)
ja men hvordan? :-)

Synes godt om

fennec Nybegynder

05. juni 2008 - 11:59 #2

Ja vi siger JavaScript :o)

Men lad mig lige forklare hvorfor du ikke bare kan nøjes med ASP og len(). Den kan du nemlig kun bruge til en generel brede. Og du kan se hvorfor her:
iiiiiiiiii
OOOOOOOOOO

Begge tekster består af 10 tegn, men "O" er meget brede end "i". Derfor skal du gennem JS, hvor du kan måle edn faktiske brede på elementet.

Du kunne også klare problemet hvis du lader brugerne indtaste en ønskede brede når de oprette menupunktet.

Synes godt om

meyer Nybegynder

05. juni 2008 - 12:21 #3

Jamen så skriver jeg en tabel med min variabel før jeg gemmer - hvordan måler jeg fysiske bredde af den med javascript og smider den i en variabel jeg kan gemme i db?

Synes godt om

mclemens Nybegynder

05. juni 2008 - 12:49 #4

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
function checkit(elm){
a=document.createElement("span");
a.appendChild(document.createTextNode(elm.value));
document.getElementById("check").appendChild(a);
document.getElementsByName(elm.name+"width")[0].value=a.offsetWidth+"px";
a.parentNode.removeChild(a);
}
</script>

<style type="text/css">
#check {font:20px bold arial,sans-serif;}
</style>

</head><body>

<form method="get" action="nåja.noget">
Indtast menu tekst <input type="text" name="menunavn" onkeyup="checkit(this);" onchange="checkit(this);"><br>
Menu width: <input type="text" name="menunavnwidth">
</form>

<div id="check"></div>

</body></html>

Synes godt om

mclemens Nybegynder

05. juni 2008 - 12:58 #5

Hvis du f.eks. vil have 5px margin på hver side kan du tage
=a.offsetWidth+"px"; og rette til =a.offsetWidth+10+"px";
... Men måske er det bedre at gemme det rene tal i db'en
og så tilføje "px" ved output =a.offsetWidth+10;

Synes godt om

meyer Nybegynder

05. juni 2008 - 13:07 #6

Den var smart :-)

Kan man ikke flette den ind skjult så den selv regner den ud hidden ?

Synes godt om

fennec Nybegynder

05. juni 2008 - 13:10 #7

Det er bare at sætte
<input type="text" name="menunavnwidth">

Til hidden:
<input type="Hidden" name="menunavnwidth">

Synes godt om

mclemens Nybegynder

05. juni 2008 - 13:13 #8

( Jeg satte den kun til text, så
du kunne se ændringen på den ;) )

... Et lille men: Hvis du bruger en bestemt
font der ikke er tilgængelig på alle styresystemer
eller i alle browsere kan fonten falde tilbage til en
fallback font som du angiver (i mit tilfælde sans-serif)
- Og så passer width'en ikke helt med fallback fonten ...

Synes godt om

fennec Nybegynder

05. juni 2008 - 13:41 #9

Om ikke andet, så vil jeg smide en buffer på, som forøger den faktiske brede med x%. Det burde løse de fleste font problemer:
document.getElementsByName(elm.name+"width")[0].value=(a.offsetWidth*1.2)+"px";

Synes godt om

meyer Nybegynder

05. juni 2008 - 13:52 #10

Det er genialt :-)

Men selvfølgelig kan den ikke regne helt præcist, men tror jeg kan leve med det :-)

Kan man ikke lave en funktion der måler en tabelbredde så ville den da passe 100%

F.eks.
<table><tr><td>HER MÅLER VI</td></tr></table>

Synes godt om

meyer Nybegynder

05. juni 2008 - 13:53 #11

Tror der især er problemer med mellemrum..

Synes godt om

mclemens Nybegynder

05. juni 2008 - 14:42 #12

- Det er fordi at den laver et mellemrum for hvert mellemrum
mellemrum svarer så til   istedet for " ". Test evt. denne
og skriv a med mellemrum og så a ... sammenlign med det fra start af

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
function checkit(elm){
a=document.createElement("span");
a.appendChild(document.createTextNode(elm.value));
document.getElementById("check").appendChild(a);
document.getElementById("check").removeChild(document.getElementById("check").firstChild);
document.getElementsByName(elm.name+"width")[0].value=a.offsetWidth+"px";
/**/
}
</script>

<style type="text/css">
#check {font:20px bold arial,sans-serif;}
</style>

</head><body>

<form method="get" action="nåja.noget">
Indtast menu tekst <input type="text" name="menunavn" onkeyup="checkit(this);" onchange="checkit(this);"><br>
Menu width: <input type="text" name="menunavnwidth">
</form>

<div id="check">a a</div>

</body></html>

... Bedste løsning vil være at konvertere " " til   i asp'en.
At lave det i en tabel får det ikke til at passe bedre - det er
font family'en der spiller ind ved måling af tekstens bredde.

Du kan selvfølgelig også bruge innerHTML istedet for dom, men
hvorfor ikke give folk et mellemrum, hvis det er et mellemrum
de indtaster ?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
function checkit(elm){
a=document.createElement("span");
a.appendChild(document.createTextNode(""));
a.innerHTML=elm.value;
document.getElementById("check").appendChild(a);

document.getElementsByName(elm.name+"width")[0].value=a.offsetWidth+"px";
a.parentNode.removeChild(a);

}
</script>

<style type="text/css">
#check {font:20px bold arial,sans-serif;}
</style>

</head><body>

<form method="get" action="nåja.noget">
Indtast menu tekst <input type="text" name="menunavn" onkeyup="checkit(this);" onchange="checkit(this);"><br>
Menu width: <input type="text" name="menunavnwidth">
</form>

<div id="check"></div>

</body></html>

... InnerHTML er ikke det fedeste at benytte.

Synes godt om

meyer Nybegynder

05. juni 2008 - 15:13 #13

Det er bare perfekt!! :o)

Hvor er det så du siger jeg skal sætte offsetWidth ind henne i visningen?

Synes godt om

mclemens Nybegynder

05. juni 2008 - 16:45 #14

"Jamen så skriver jeg en tabel med min variabel før jeg gemmer - hvordan måler jeg fysiske bredde af den med javascript og smider den i en variabel jeg kan gemme i db?"
... "Hvor er det så du siger jeg skal sætte offsetWidth ind henne i visningen?"

function checkit(elm){ med rettelsen fra Fennec samt elementet <div id="check" og
input feltet med name ="menunavnwidth" indsætter du på siden hvor du indtaster
menu teksten til databasen - og så gemmer du width'en og outputter den v/menuen.

menuwidth skal hedde det name som feltet til menu navnet har plus width
f.eks. hedder det navntilmenu skal menunavn i checkit rettes til navntilmenu
og holderen til width'en skal så hedde navntilmenuwidth ...

Synes godt om

meyer Nybegynder

05. juni 2008 - 21:03 #15

Sorry... må ha' misforstået den i den her:

Hvis du f.eks. vil have 5px margin på hver side kan du tage
=a.offsetWidth+"px"; og rette til =a.offsetWidth+10+"px";
... Men måske er det bedre at gemme det rene tal i db'en
og så tilføje "px" ved output =a.offsetWidth+10;

Men det hele kører da vist som det skal nu - nu er der bare en masse tilretning så er den hjemme :o)

Tusind tak for hjælpen begge 2 - smid lige et svar :-)

Synes godt om

mclemens Nybegynder

05. juni 2008 - 21:38 #16

Her er der ene svar :)

Synes godt om

fennec Nybegynder

06. juni 2008 - 08:17 #17

De må gå til mclemens. Jeg havde kun den indledende kommentar, og et par kommentar til hans kode.

Synes godt om

meyer Nybegynder

06. juni 2008 - 08:52 #18

Så gerne ;-)

Synes godt om

mclemens Nybegynder

06. juni 2008 - 11:06 #19

Takker for point :)
Og Fennec's kommentarer :)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Programmeringssprog kurser

Kurser inden for grundlæggende programmering

Se alle Programmeringssprog kurser

Flere spørgsmål fra ASP kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Classic - filer vist med sidste fil først Af bsn i ASP	5	23/05/202409:56	24/05/202400:02
Optimer MySql table med ASP Af poulmadsen i ASP	4	26/04/202417:16	26/04/202418:37
JSON Af ingeman i ASP	3	07/04/202417:53	08/04/202412:09
Vis detaljeret fejlkoder Af poulmadsen i ASP	6	09/03/202418:16	10/03/202417:59
IIS virker ikke på asp sider... Af bsn i ASP	10	15/10/202313:12	18/10/202308:48

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS