Archief - Beetje hulp met auto font-size

-BVR- · 9 jan 2012

Hallo

Ik ben van plan me eindelijk eens in Javascript te verdiepen, maar ik zit momenteel in de blok dus heb er niet echt tijd voor. Toch zit ik met een probleem.

Zoals je hier ziet Foto's 2010 | De Notenbalkers Schaffen wordt de lay-out verpest wanneer de tekst te groot is. Een eerste manier om dit op te lossen is al een jQuery scriptje dat ik ergens gevonden heb - ik heb het aangepast aan m'n noden. De tekstgrootte wordt aangepast aan de width van zijn parent.

Het probleem is dat ik niet goed begrijp wat alles in het script juist doet, dus ik kan het niet aanpassen aan m'n noden ...

HTML:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">.fotopagina {width: 200px;}</style>
<script type="text/javascript">
$.fn.textfill = function(options) {
    var fontSize = options.maxFontPixels;
    var ourText = $('.fotopagina .node-title a', this);
    var maxHeight = $(this).height();
    var maxWidth = $(this).width();
    var textHeight;
    var textWidth;
    do {
            ourText.css('font-size', fontSize);
            textHeight = ourText.height();
            textWidth = ourText.width();
            fontSize = fontSize - 1;
    } while (textHeight > maxHeight || textWidth > maxWidth && fontSize > 3);
    return this;
}

$('.fotopagina').textfill({ maxFontPixels: 30});
</script>
</head>

<body>
<div id="node-##" class="fotopagina">
    <h2 class="node-title"><a>HALLODITISHEELVEELTEKSTNOTREALLYBUTHEYJUSTTOTEST</a></h2>
</div>
</body>
</html>

Het werkt bij mij niet. Dus als iemand weet wat er fout is?

Bedankt!

dJeez · 9 jan 2012

Die ; in het begin is wellicht een copy/paste restje, want die hoort daar idd helemaal niet te staan. Het script gaat gewoon de font-size verkleinen (tot minimaal 3), zolang die qua breedte / hoogte buiten de grenzen van zijn parent (de div met klasse fotopagina) ligt.

-BVR- · 9 jan 2012

dJeez zei:
Die ; in het begin is wellicht een copy/paste restje, want die hoort daar idd helemaal niet te staan. Het script gaat gewoon de font-size verkleinen (tot minimaal 3), zolang die qua breedte / hoogte buiten de grenzen van zijn parent (de div met klasse fotopagina) ligt.

Zo ver was ik al

Daarom dat ik het had opgezocht. Maar het werkt niet en ik weet niet waarom

Dastardly · 9 jan 2012

HTML:

var ourText = $('.fotopagina .nodetitle a', this);

probeer die laatste a in uw selector is nekeer weg te doen (uw <a> element neemt momenteel de breedte aan van uw tekst, dus uw tekst blijft even groot).

.nodetitle zie ik ook nergens staan, zal .node-title moeten zijn vermoed ik.

edit: na wat beter bekijken moet uw eerste .fotopagina ook weg uit uw selector, je geeft al mee in welke context hij moet zoeken (this, = .fotopagina);

dJeez · 9 jan 2012

Ik zie het script ook nergens geinclude worden of inline staan (kan ook zijn dat ik erover kijk). Zet anders bij performance eens ff de Drupal caching/JS minimize af, want nu zie je uiteraard niet welke JS scripts er effectief geinclude worden...

-BVR- · 9 jan 2012

Het staat inderdaad niet online, ik ben lokaal aan het testen.

Hier een test case: Untitled Document

$ not defined zegt Chrome. Wat wilt dat zeggen?

Dastardly, ik begrijp niet goed waarom ik die 'a' zou moeten wegdoen?

LOOOOOOOOOL: jQuery vergeten includen. GOD-DAMN

EDIT: zelfs met jQuery werkt het niet

Dastardly · 9 jan 2012

BramVroy zei:
$ not defined zegt Chrome. Wat wilt dat zeggen?

Dastardly, ik begrijp niet goed waarom ik die 'a' zou moeten wegdoen?

$ is not defined = jQuery zelf is nog niet included op uw testpagina

dat van die a heb ik precies fout, dacht dat hij daar de breedte ging ophalen van het parent element om zo de max. fontsize te gaan ophalen (waarvoor die a dus niet ideaal is

). zal sebiet is proberen wat er juist anders moet (als ge uwe jQuery include).

-BVR- · 9 jan 2012

Ik was sneller.

Dastardly · 9 jan 2012

BramVroy zei:
Ik was sneller.

ik was de rest nog aan 't typen :angry:

anywayz,

HTML:

<script type="text/javascript">
$.fn.textfill = function(options) {

    var fontSize = options.maxFontPixels;
    var ourText = $('.node-title a', this);
    var maxHeight = $(this).height();
    var maxWidth = $(this).width();
    var textHeight;
    var textWidth;

    do {

            ourText.css('font-size', fontSize);
            textHeight = ourText.height();
            textWidth = ourText.width();
            fontSize = fontSize - 1;

    } while (textHeight > maxHeight || textWidth > maxWidth && fontSize > 3);
    return this;
}

// Altijd gebruiken!
$(document).ready(function() {
     $('.fotopagina').textfill({ maxFontPixels: 30});
});
</script>

$(document).ready(.... toegevoegd, anders was $(this).height() sowieso NULL (is ook best practice om alles dat met DOM manipulatie te maken heeft in die functie te zetten).

uw selector binnen uw functie was ook niet (helemaal) in orde.

HTML:

var ourText = $('.node-title a', this);

werkt wel.

code zoals ze hierboven staat zal normaal gezien werken (deed het hier lokaal in chrome toch, de rest niet getest).

-BVR- · 9 jan 2012

Hm, lokaal werkte het hier inderdaad ook, maar online niet:
Foto's 2010 | De Notenbalkers Schaffen

Bij 2011 werkt het goed, maar bij 2010 niet. Daar geeft hij de a terug een value van 30 (de max value).

dJeez · 9 jan 2012

Dat komt omdat je niet loopt over de verschillende titels hé. Je gaat nu op basis van de eerste gaan schalen. Aangezien dat bij 2011 net de langste titel is lijkt het alsof het correct werkt, maar bij 2010 staat de langste titel niet als eerste. Je zal dus moeten loopen met .each om zo de correcte grootte te gaan bepalen.

Wellicht ligt dit dus meer in de lijn van wat je wil bekomen : Looping a dynamic text sizing function jquery/javascript - Stack Overflow

Het hangt er uiteraard ook een beetje vanaf of je elke titel wil schalen tov de langste titel - dus 1 fontgrootte voor alle titels, of dat je ze apart wil aanpassen (zodat ze verschillende fontgroottes kunnen hebben afhankelijk van de lengte van de titel in kwestie).

-BVR- · 10 jan 2012

Nice. Wat in dat topic besproken wordt is niet echt iets dat ik zoek (verschillende classes) maar ge bracht me wel op het juiste spoor. Het werkt nu toch ongeveer zoals ik wil

Foto's 2010 | De Notenbalkers Schaffen Heb nog een beetje css toegevoegd zodat de tekst op twee rijen geen probleem geeft in de hoogte.

De code voor de geïnteresseerden:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">.fotopagina {width: 200px;}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.textfill = function(options) {
	this.each(function() {
    var fontSize = options.maxFontPixels;
    var ourText = $('.node-title a', this);
    var maxHeight = $(this).height();
    var maxWidth = $(this).width();
    var textHeight;
    var textWidth;

    do {

            ourText.css('font-size', fontSize);
            textHeight = ourText.height();
            textWidth = ourText.width();
            fontSize = fontSize - 1;

    } while (textHeight > maxHeight || textWidth > maxWidth && fontSize > 3);
    });
	return this;
}

$(document).ready(function() {
     $('.fotopagina').textfill({ maxFontPixels: 30});
});
})( jQuery );
</script>
</head>

<body>
<div id="node-##" class="fotopagina">
    <h2 class="node-title"><a>HALLODITISHEELVEELTEKSTNOTREALLYBUTHEYJUSTTOTEST</a></h2>
</div>
<div id="node-##" class="fotopagina">
    <h2 class="node-title"><a>DITISWATMINDERTEKST</a></h2>
</div>
<div id="node-##" class="fotopagina">
    <h2 class="node-title"><a>HALLO</a></h2>
</div>
</body>
</html>

Archief - Beetje hulp met auto font-size

-BVR-

Legacy Member

dJeez

Legacy Member

-BVR-

Legacy Member

Dastardly

Legacy Member

dJeez

Legacy Member

-BVR-

Legacy Member

Dastardly

Legacy Member

-BVR-

Legacy Member

Dastardly

Legacy Member

-BVR-

Legacy Member

dJeez

Legacy Member

-BVR-

Legacy Member