CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede NielsErikP Mester
01. april 2012 - 15:04 Der er 11 kommentarer og
1 løsning

Et Script, der tæller antal pixels et link fylder i dokumentet??

Hej...

Var lidt i tvivl om katagorien...PHP eller JavaScript.

Vil høre om det er muligt at brygge et script sammen, der tæller antal pixels/em/pt link (<a href="#">Home</a>) fylder i et Html dokument. altså det der er selve linket?? Her "Home"!

På forhånd tak!
Avatar billede olebole Juniormester
01. april 2012 - 15:22 #1
<ole>

Du kan i princippet bruge GDLib, men det giver et mere nøjagtigt resultat at bruge et alm. HTML-element af samme type, teksten skal bruges i - og måle på det med JS. Det kunne gøres noget à la:

<script type="text/javascript">
function getTextWidth(sText, elmPar) {
    if (!getTextWidth.elm) {
        getTextWidth.elm = document.createElement("a");
        getTextWidth.elm.style.cssText = "position:absolute;left:100000px;visibility:hidden";
        getTextWidth.elm.appendChild(document.createTextNode("\u00a0"));
    }
    getTextWidth.elm.firstChild.nodeValue = sText;
    elmPar.appendChild(getTextWidth.elm);
    var nWidth = getTextWidth.elm.offsetWidth;
    elmPar.removeChild(getTextWidth.elm);
    return nWidth;
}

var nWidth = getTextWidth("En eller anden tekst", document.body);
alert(nWidth)
</script>

Læg mærke til, at jeg indsætter testelementet på det sted, det skal bruges (document.body). Det gør jeg for at sikre mig, at elementet arver CSS som forventet.

/mvh
</bole>
Avatar billede NielsErikP Mester
01. april 2012 - 15:54 #2
Hej..

Lidt derhen af..... kan se at når jeg kører dit script "alerter" den "38´" ! Det må så være <a href="#">En eller anden tekst </a> der er 38 pixels.
Ole er det muligt at alerte teksten (linket <a href="#">En eller anden tekst </a> er XXXX antal pixel, evt også em og pt. lang.

Sig til, hvis jeg er for krævende "Smiler"
Avatar billede olebole Juniormester
01. april 2012 - 15:59 #3
pt (et typografisk punkt) har man ikke noget at bruge til på en monitor. Det er et gammelt levn fra printindustrien. Du kan ikke få returneret værdien i em ... kun i px
Avatar billede olebole Juniormester
01. april 2012 - 16:02 #4
em er jo heller ikke en absolut måleenhed. En stump tekst, der er formateret som 2em kan have vidt forskellig størrelse - alt efter omgivelserne. Er den derimod formateret som 12px, så er den 12px  =)
Avatar billede Slettet bruger
01. april 2012 - 16:29 #5
Hvis det er et eksisterende link (med et id) stylet af sine "naturlige" omgivelser:
document.getElementById(id).offsetWidth (altid i px)

Læg mærke til at det er den "virtuelle boks" som omgiver hele linket der måles, ikke tekstindholdet
- eksempel:
<!DOCTYPE html><html><head>
<style>
body    {font:15px arial}
a            {font-size:20px}
#link3  {font-size:10px}
</style><script>
function getLang(id)
    {
    var w = document.getElementById(id).offsetWidth
    var h = document.getElementById(id).offsetHeight
    return w+"px * "+h+"px"
    }
function visLang()
    {
    alert("link1: "+getLang("link1") + "\nlink2: "+getLang("link2") + "\nlink3: "+getLang("link3"))
    }
</script></head><body onload="visLang()">
    <table width="200" border="1">
    <tr><td>bla bla <a id="link1" href="jaja">Link1 er kortest</a></td></tr>
    <tr><td>bla bla <a id="link2" href="jaja">Link2 er<br>brudt<br>med vilje</a> bla bla</td></tr>
    <tr><td>xxxxxxxx <a id="link3" href="jaja">Link3 er brudt af omgivelserne</a> blabla</td></tr>
    </table>
</body>
Avatar billede olebole Juniormester
01. april 2012 - 17:52 #6
#5: Ja, det fungerer præcist efter hensigten. Scriptet fortæller, hvad teksten fylder i den virkelige verden. Hvis du ønsker et script, der kan noget andet, åbner du bare et spørgsmål om det  *o)
Avatar billede NielsErikP Mester
01. april 2012 - 23:04 #7
Hej...

@olebole: Tak for påmindelsen om at em og pt er fortidslevn. Holder mig til pixels :-)

@T4nk32:
" Læg mærke til at det er den "virtuelle boks" som omgiver hele linket der måles, ikke tekstindholdet
"... Nej nu ved jeg ik, hvor stor sprog spasser jeg er?? , men det var netop "tekstindholdet" jeg søgte noget der kunne måle.
Avatar billede olebole Juniormester
01. april 2012 - 23:42 #8
Så brug koden i #1 og indsæt i body'en hver gang
Avatar billede NielsErikP Mester
02. april 2012 - 00:00 #9
Hej...

Tja... forstår ik helt, hvad du mener med :
    " Læg mærke til, at jeg indsætter testelementet på det sted, det skal bruges (document.body). Det gør jeg for at sikre mig, at elementet arver CSS som forventet."

Men tak smid et svar olebole!
Avatar billede olebole Juniormester
02. april 2012 - 00:10 #10
Hvis du ønsker at finde ud af, hvormeget teksten fylder i et bestemt element, indsætter du det dér. Hvis du bare vil vide, hvad det fylder i total længde, sætter du det ind i body'en - og sætter evt. font styles på testelementet
Avatar billede olebole Juniormester
02. april 2012 - 00:10 #11
Og jeg samler som bekendt ikke point  =)
Avatar billede NielsErikP Mester
02. april 2012 - 00:29 #12
Hej...

Det lyder som en aftale, at du ik samler point, men tak skal du have.
Avatar billede 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.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra PHP kategorien

Titel Indlæg Oprettet Seneste aktivitet
Datoformat ved eksport til Excel Af dane022 i PHP 3 I går 14:48 I går 19:33
Hjælp til PHP ( mener jeg det hedder) Af lurup i PHP 0 12/09/202423:39 -
wp_delete_user virker ikke i Wordpress Af Ravnsen i PHP 2 21/08/202417:53 21/08/202422:03
php driller Af moscov i PHP 1 19/08/202415:09 20/08/202421:24
PHP alfabet Af John i PHP 4 10/08/202415:17 10/08/202417:47
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 01:39 Ipad lyd slår fra Af nu_igen i Apps til iOS
I går 14:48 Datoformat ved eksport til Excel Af dane022 i PHP
I går 10:01 Tæl celle hvis baggrundsfarve er blå Af MichaelBS i Excel
16/0921:30 gendan Iphone 13 Af lurup i Mobiltelefoner
16/0920:34 Wifi 6 eller Wifi 7 Af skolevej321 i Routere & Switches
White papers
Flere white papers »


Premium
Teaser billede
Intel skal splittes op i to - vil skille sig af med 15.000 medarbejdere inden nytår
Læs mere »
Microsoft lukker kæmpe-aftale: Sælger 68.000 Copilot-licenser med et pennestrøg
Her er EU's nye tech-kommissær: Se de 19 konkrete punkter, som hun får til opgave at arbejde efter
Nvidias GPU'er knuser Moores lov - så stærkt går udviklingen med AI
Se alle »
Computerworld
Teaser billede
Apple ændrer grundlæggende om på den måde, som din iPhone skal opdateres på
Læs mere »
Guide: Sådan wiper du dine harddrev og andre medier, så ingen kan læse dem – nogensinde
Test: Det kan ikke gå helt galt med B&O-lyd til under 1.000 kroner
Et af verdens største it-sikkerhedsselskaber ramt af hackerangreb – hackere har haft adgang til kundedata
Se alle »
CIO
Teaser billede
Dansk top-CIO går i rette med professor: Vi kan altså ikke undvære it-afdelingerne - vil være helt forkert beslutning at afvikle dem
Læs mere »
Nu kommer næste store version af Copilot
Tre måneder efter sin tiltræden har Nilfisk-CIO Anders Liechti lagt sin it-strategi - her er de fem store punkter
Søstrene Grene skifter Microsoft ud med SAP og rykker for første gang i clouden i stor ERP-transformation
Se alle »
Job & Karriere
Teaser billede
Pludselig exit fra Schultz kom som en overraskelse for Merete Søby: Derfor stoppede samarbejdet
Læs mere »
Merete Søby fratræder med omgående virkning som CEO for Schultz efter blot tre måneder på posten
Professor: "Det er på høje tid at opløse virksomhedernes it-afdelinger"
Kom tæt på Danmarks nye digitaliserings-minister: 33-årige Caroline Stage Olsen er tidligere tobaks-lobbyist - har været aktiv i politik siden hun var helt ung
Se alle »
White paper
Teaser billede
Har du styr på dine data? Bliv klar til ambitiøse AI-projekter
Læs mere »
Guide: Sådan udvikler du en moderne netværksstrategi
Sådan gør du: Elektronisk dokumentudveksling i praksis
Sådan høster du forretningsfordelene ved Internet of Things
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »