login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Text Stretch werkt niet

Offline bartmoore - 20/04/2016 03:23 (laatste wijziging 20/04/2016 03:42)
Avatar van bartmooreNieuw lid Hallo allemaal,

Ik ben Bart en ik zit met het volgende probleem. Ben bezig voor een plugin in woocommerce. Het is een PHP plugin maar de meeste belangrijke functies gaan via javascript

http://d3.reprex.nl/product/custom/demo-product/


De output in HTML

feitelijk is dit wat ik wil veranderen. Het gaat om de letter-spacing;

Het is goed dat hij hierdoor automatisch aan de maximale en minimale breedte aanpast, maar in plaats van letter-spacing, wil ik graag transform:scale(1.2);
gebruiken .

- Er mogen maximaal 16 letters zijn
- text moet gestretcht worden aan minimale en maximale breedte
- weet iemand welke ik dan moet aanpassen?

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="logo" style="
  2. "><span class="top-line"><img src="http://d3.reprex.nl/wp-content/plugins/woocommerce-custom-design/assets/images/top-line-red.png"></span><div class="top"><div class="topText redText justify" id="topLogoText"><span class="stretch_it" style="letter-spacing: 51.1111px;">urk</span></div></div><span class="bottom-line"><img src="http://d3.reprex.nl/wp-content/plugins/woocommerce-custom-design/assets/images/bottom-line-red.png"></span></div>



https://i.gyazo...139bda.png



En hier de JS code


javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. jQuery.fn.strech_text = function(){
  2.     var elmt          = jQuery(this),
  3.         cont_width    = elmt.width(),
  4.         txt           = elmt.html(),
  5.         one_line      = jQuery('<span class="stretch_it">' + txt + '</span>'),
  6.         nb_char       = elmt.text().length,
  7.         spacing       = cont_width/nb_char,
  8.  
  9.         txt_width;
  10.  
  11. 		elmt.html(one_line);
  12.     txt_width = one_line.width();
  13.  
  14.     if (txt_width < cont_width){
  15.         var  char_width     = txt_width/nb_char,
  16.              ltr_spacing    = spacing - char_width + (spacing - char_width)/nb_char ; 
  17. 			 ltr_transform    = spacing - char_width + (spacing - char_width)-nb_char ; 
  18.   			console.log(ltr_spacing);
  19. 			console.log(ltr_transform);
  20.         one_line.css({'letter-spacing': ltr_spacing});
  21. 		one_line.css({'transform': ltr_transform});
  22.     } else {
  23.         one_line.contents().unwrap();
  24.         elmt.addClass('justify');
  25.     }
  26. };
  27.  
  28.  
  29. });



mijn probleem is alleen dat hij nu een letter-spacing attriubuut aanpas.
Maar ik wil feitelijk de letter-spacing attribuut aanpassen, hoe kan dat ?

en ik wil graag een nieuwe formule implementeren. De berekend als er een keyup() gebeurt een nieuwe formule. De tekst heeft een maximale breedte
en dat moet automatisch gestretcht worden dus niet met letter-spacing....
Maar met transform: scale(1.1);
transform: scale(1.2);
transform: scale(1.3; etc


Kan iemand me daarbij helpen?

0 antwoorden

Gesponsorde links
Er zijn nog geen reacties op dit bericht.
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.216s