Autor Zpráva
Pelikán_1
Profil
Zdar lidi,
potřeboval bych pomoct s JS, který zrovna neovládám. :(
Mám DIV s pevnou šířkou a v něm (v H1) singel-line text. Potřebuju, aby pokud text (při načtení stránky) přesahuje DIV, aby se zmenšil na maximální možnou velikost, při které přesahoval nebude.
Podle některých návodů jsem zkoušel následující, ale bohužel to nefunguje.

<!DOCTYPE html>
<html lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />

<style>
#m1{background: black; width: 300px; height: 200px;}
#m2 {display: inline; font-size: 120px; text-align: center; color: red;}
</style>

<script type="text/javascript">
var fontsize = $("#m2").css("font-size");
while($("#m2").width < ("#m1").width) {
    $("#m2").css("font-size", --fontsize+"px");
}
</script>

</head>
<body>

<div id="m1">
<h2 id="m2"><?=$_GET['text']?></h2>
</div>

</body>
</html>
frantisek.nesveda
Profil
Zdravím,
řešení, které používáš, využívá javascriptovou knihovnu jQuery, kterou ale v kódu nemáš načtenou. Musíš jí stáhnout z jQuery.com a vložit do <head> její načtení, asi takhle:
<!DOCTYPE html>
<html lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
 
<style>
#m1{background: black; width: 300px; height: 200px;}
#m2 {display: inline; font-size: 120px; text-align: center; color: red;}
</style>
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">
var fontsize = $("#m2").css("font-size");
while($("#m2").width < ("#m1").width) {
    $("#m2").css("font-size", --fontsize+"px");
}
</script>
 
</head>
<body>
 
<div id="m1">
<h2 id="m2"><?=$_GET['text']?></h2>
</div>
 
</body>
</html>
Fisir
Profil
Reaguji na frantisek.nesvedu [#2]:
Musíš jí stáhnout z jQuery.com
Nemusí. Stačí použít CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Pelikán_1
Profil
[#3]Fisir:
Nemusí. Stačí použít CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Přesně tenhle řádek jsem tam měl, ale ani s ním to nefungovalo, tak jsem ho zase odstranil. Vkládám tedy znovu.

Vidí někdo chybu v mém kódu, popřípadě jiné řešení?
Chamurappi
Profil
Reaguji na Pelikána_1:
Přesně tenhle řádek jsem tam měl
Tak ho zase vyhoď. Uvedený kousek skriptu nemůže fungovat z více důvodů — zejména proto, že se nadpis zalomí a tedy bude mít šířku vždy nižší než šířka rodiče.
Bude to složitější. Proto bych se chtěl zeptat — fakt to potřebuješ? K čemu přesně? Nedovedu si představit moc rozumných využití. V podstatě žádné…
Pelikán_1
Profil
Chamurappi:
fakt to potřebuješ? K čemu přesně?
Do DIVu potřebuju načítat text z DB, ten však může mít 5 nebo třeba 20 znaků a lepší čitelnost chci zajistit tím, že krátké texty budou velkým fontem, dlouhé budou menším tak, aby se vešli.

Našel jsem např tohle, což by se po úpravě použít dalo, ale věřím, že se zásis (vzhledem k tomu, že potřebuju single-line) dá provést jednodušeji.
Pelikán_1
Profil
Chamurappi:
že se nadpis zalomí a tedy bude mít šířku vždy nižší než šířka rodiče
Když dáš display:inline;, tak ne. ;)

Nikoho nenapadá jiné řešení? :(
john258
Profil *
Ten while je kanón na vrabce. Stačí jen zjistit počáteční velikost textu a jeho šířku a pak pomocí cílové šířky trojčlenkou spočítat novou velikost písma.

http://jsbin.com/izamid/8
john258
Profil *
A navíc v případě, že ten text nebude mít plovoucí šířku bude ten kód ještě mnohem jednodušši.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: