jquery width van een string achterhalen

[Verwijderd]

Hallo,
Ik probeer een functie te maken waarbij als op een van de li's geklikt wordt, diens waarde in een inputbox verschijnt (vrij gemakkelijk), maar deze inputbox moet zijn 'width' aan de 'width' van de gekozen string aanpassen, dwz, net zo lang zijn, zodat de string er net inpast. Helaas kan ik in jquery de width van een string niet achterhalen.(zie code). de .width() blijkt maar niet te werken.

HTML:

<script type="text/javascript">
            $(document).ready(function() {
            $('li').click(function() {
                var selected_name= $(this).text();
                $("#naam").val(selected_name);
                $("#naam").addClass("selected");
                $(".dropdown").addClass("hidden");
                var width=$(selected_name).width();
                $("#naam").width(width);

            });
                    
        });
            
            
        </script>

Hopelijk heeft iemand ervaring met dit probleem.
Alvast bedankt

[RobIII]

Geen idee wat precies de bedoeling is, maar is contentEditable op true zetten niet veel handiger?

[Verwijderd]

Sorry als ik me niet echt duidelijk gemaakt heb.
De gebruiker krijgt dus een aantal namen te zien, die dus zitten in <li> tags. Als één van deze li tags aangeklikt wordt, wordt deze zijn inhoud de waarde van de selected_name variabele (zie code). De inputbox heeft als id "#naam", en zoals men kan zien op regel 6, wordt deze zen waarde dus vervangen door de waarde van de selected_name variabele. Nu zou ik graag willen dat de lengte van deze inputbox even lang is als de lengte van de string die erin zit, maw, zodat de inputbox schijnbaar een kader is van de string (puur illustrafief voorbeeld). Om dit te kunnen doen, moet je natuurlijk eerst de 'width' van de string kennen, maar die kan ik niet achterhalen omdat de .width() op regel 8 niet werkt.

[rnark]

Je kunt alleen het aantal tekens tellen van een string, niet de breedte. Wat je kan doen is de tekst in een element plaatsen en dan de breedte van dat element door jQuery laten berekenen.

[Kayshin]

Probleem met tekst is over het algemeen dat een letter als i of l een stuk smaller zijn dan een m bijvoorbeeld. Het berekenen van breedte dmv de lengte van de string wordt dan een problematisch iets. Beter kan je dus zoals rnark zegt iets kunnen doen met het berekenen van de breedte van het bevattende element.

[Verwijderd]

Bedoel je niet het aantal karakters van het element? Of werkelijk de breedte van de li tag ?

Anders kan je gewoon .length gebruiken..

En anders .outerWidth() van jQuery.

Zie: http://api.jquery.com/outerWidth/

[ Voor 22% gewijzigd door Verwijderd op 20-03-2013 18:30 ]

[RobIII]

Verwijderd schreef op woensdag 20 maart 2013 @ 18:28:
Bedoel je niet het aantal karakters van het element?

Nee. Lees 't topic eens goed

@TS: Google eens op jquery measure text width -> hit n° 1

JavaScript:

$.fn.textWidth = function(){
  var html_org = $(this).html();
  var html_calc = '<span>' + html_org + '</span>';
  $(this).html(html_calc);
  var width = $(this).find('span:first').width();
  $(this).html(html_org);
  return width;
};

Et voila (even hoveren over de items voor de breedte in pixels).

[ Voor 145% gewijzigd door RobIII op 20-03-2013 18:56 ]

[TheNephilim]

Belangrijk bij deze methode is dat je zeker weet dat het 'test' element dezelfde eigenschappen heeft qua padding/font-size/font-family/etc. Dat telt namelijk allemaal mee in de breedte van het echte element.

Ik kwam iets soortgelijks tegen in een 'autogrow' functie voor textarea's, alleen dan verticaal.

http://stackoverflow.com/...-cross-browser-compatible

[Verwijderd]

@robblll
Met jouw code versmalt de inputbox wel, maar vreemd genoeg past ze zich niet aan aan de lengte van de string, maar wordt zeer klein. Vrij bizar.

[NMe]

Heb je gelezen wat TheNephilim zei of heb je gewoon op goed geluk gecopy/pasted van RobIII zonder te begrijpen wat je doet?