Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie

jquery width van een string achterhalen

Pagina: 1
Acties:

Onderwerpen


  • androidfan22
  • Registratie: februari 2012
  • Laatst online: 20-04-2013
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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
  • Registratie: december 2001
  • Laatst online: 23:12

RobIII

DT Doktersteam / Moderator DevschuurŽ

^ Romeinse 3 ja!

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

Mistakes happen. It's the mistakes inside a For Loop that are a real problem - Scott Hanselman.

Over mij


  • androidfan22
  • Registratie: februari 2012
  • Laatst online: 20-04-2013
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
  • Registratie: november 2009
  • Laatst online: 21:59
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
  • Registratie: juni 2004
  • Laatst online: 10-12-2017

Kayshin

Bl@@T @@P!!!

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.

My personal videoteek: -Clique-; -NMe- is een snol!


  • Borrejj
  • Registratie: maart 2012
  • Laatst online: 26-04-2013
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/

Borrejj wijzigde deze reactie 20-03-2013 18:30 (22%)


  • RobIII
  • Registratie: december 2001
  • Laatst online: 23:12

RobIII

DT Doktersteam / Moderator DevschuurŽ

^ Romeinse 3 ja!

quote:
Borrejj 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:
1
2
3
4
5
6
7
8
$.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).

RobIII wijzigde deze reactie 20-03-2013 18:56 (145%)

Mistakes happen. It's the mistakes inside a For Loop that are a real problem - Scott Hanselman.

Over mij


  • TheNephilim
  • Registratie: september 2005
  • Laatst online: 16:26

TheNephilim

Wtfuzzle

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

VILF Gaming


  • androidfan22
  • Registratie: februari 2012
  • Laatst online: 20-04-2013
@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
  • Registratie: februari 2004
  • Laatst online: 23:18

NMe

Admin DevschuurŽ

Quia Ego Sic Dico.

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

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

Pagina: 1


Apple iPhone X Google Pixel 2 XL LG W7 Samsung Galaxy S9 Google Pixel 2 Far Cry 5 Microsoft Xbox One X Apple iPhone 8

© 1998 - 2018 de Persgroep Online Services B.V. Tweakers vormt samen met o.a. Autotrack en Hardware.Info de Persgroep Online Services B.V. Hosting door True

*