| Autor | Zpráva | ||
|---|---|---|---|
| Pelikán_1 Profil |
#1 · Zasláno: 29. 6. 2012, 21:03:06
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 |
#2 · Zasláno: 29. 6. 2012, 22:27:34
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 |
|||
| 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 |
#5 · Zasláno: 30. 6. 2012, 04:09:00
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í? :( |
||
|
Časová prodleva: 17 dní
|
|||
| john258 Profil * |
#8 · Zasláno: 18. 7. 2012, 17:48:56
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 * |
#9 · Zasláno: 18. 7. 2012, 19:49:40
A navíc v případě, že ten text nebude mít plovoucí šířku bude ten kód ještě mnohem jednodušši.
|
||
|
Časová prodleva: 12 let
|
|||
0