Auto padding (jQuery)

Tags:    javascript

Hej udviklere,

Jeg står i en situation hvor jeg skal lave en menu som er dynamisk på den måde at man skal kunne tilføje og fjerne et menupunkt og samtidigt skal menuen kunne tilpadse sig så den fylder hele den container den ligger i.

Jeg har lavet et script som udregner den padding hvert menupunkt skal have og det funger fint i firefox.

I Chrome regner den dog anderledes ud.

Lidt om scriptet.

Fold kodeboks ind/udKode 


Problemet er i bund og grund at Firefox udregner 'calc_width' til 503 og Chrome udregner til 509. Har ikke engang prøvet i IE endnu. Men at de 2 browsers ikke engang regner breden af et element ens ud overrasker mig lidt. Jeg har mistanke om at det er grundet font-rendering som jeg ved at de håndtere forskelligt.


Er opgaven tabt på forhånd eller kan det lade sig gøre?



6 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma
Sorter efter stemmer Sorter efter dato
jeg tror den eneste sikre løsning er at køre em istedet for px. så bliver paddingen og størrelsen af boksen altid relativ til deres font-rendering.



Hej per,

Jeg køre allerede em's på alt der har med font at gøre. Mener du at jeg skal prøve med em's på elementerne også?



Har lige testet med em's som padding. Det gør ikke umidelbart nogen forskel.



Halløj,

jeg har nogenlunde samme script i et af mine projekter, hvor den dog giver samme bredde i alle browsere, men jeg bruger også .outerWidth() istedet for .width(), det kan du jo prøve? :)

jeg forstår heller ikke helt delen med
Fold kodeboks ind/udKode 


... men det har du vel en go' grund til ? ;)

forresten kan du lave

Fold kodeboks ind/udKode 


om til

Fold kodeboks ind/udKode 


så behøves du ikke sætte en class på det sidste element ;)





firefox, chrome og ie udregner idag box modellen ens, men de har forskellige default settings for mange tags.

Derfor bør man inkludere:

http://developer.yahoo.com/yui/build/reset/reset.css

Før alt sit eget css.

Så slipper man i hvert fald for at der kommer forskellige værdier, og at man ikke konstant skal opgive padding, margin, border mm på alle sine selectors - for at ensarte.

OBS: Hvis du inkludere ovenstående på¨en allerede eksisterende løsning, skal du nok forvente der skal lidt små rettelser til.


Desuden tror jeg Per mente du skulle opgive padding i em, og ikke px.

Personligt, syntes jeg det virker som du er lidt på afveje, det script bør være unødvendigt.

vh



Esben - Jeg har forsøgt med outerWidth også. Det gav intet resultat. Det med ligningen er jo fordi du ikke har taget hele parantesen med. Som du opstiller det udligner de hinanden, men det vil de ikke gøre i den fulde ligning.

Jokke - Jeg bruger skam allerede en CSS reset. Jeg kan ikke se hvordan scriptet ikke er nødvendigt for at opnå den løsning jeg prøver på at nå. En menu til et CMS hvor du kan tilføje og fjerne menu punkter som det passer dig, og uanset hvad (selvfølgelig inden for rimelighedens grænser) skal menuen fylde 100% af sidens brede. Hverken over eller under. Tager imod andre løsningsforslag med kyshånd.


Derudover tror jeg at jeg har fundet problemet. jQuery regner breden af elementerne rigtigt nok ud. Problemet opstår på grund af font renderingen. Såvidt jeg har testet gør det en forskel at skifte fra em til px, men der er trods alt stadig en lille forskel.



t