| Autor | Zpráva | ||
|---|---|---|---|
| paprika Profil * |
#1 · Zasláno: 11. 8. 2022, 18:37:53
Ahoj, snažím se teď tvořit web a narazil jsem na drobný problém s tím, jak mám udělat historii. Mám představu, že bych udělal časovou osu s jednotlivými roky a po kliknutí na rok by se informace o daném roce zobrazily v další části na téže stránce. Zkouším iframe s name="historie" a na jednotlivé roky dávám odkaz na txt soubor s target="historie". Toto řešení funguje, ale narážím na dva problémy:
1) v iframu se mi zobrazí úplně jiný font, než je na webu. 2) velikost iframu se mi nemění dle rozsahu textu. První problém bych mohl obejít tím, že bych znovu nasadil do daného iframu font, který používám na celém webu, ale upřímně moc nevím, jak bych si poradil s druhým problémem. Je vůbec iframe správné řešení? Server bohužel nepodporuje PHP, ale Javascript, kterým by to zřejmě šlo, absolutně neumím, hledám tedy řešení čistě v rámci html. |
||
| anoynm Profil * |
#2 · Zasláno: 11. 8. 2022, 20:36:07
paprika:
JavaScript ti stačí základní onclick, getElementById (element, kam budeš vypisovat) a innerHTML. Včetně studia to máš na odpoledne. Iframe bude mít spíše nevýhody než výhody. Výška obsahu v iframu by měla jít dopocitat taktéž javascriptem, alespoň mám pocit, ze to před nějakými 15 lety, když se iframy používaly, dalo. Hledej případně v angličtině. |
||
| paprika Profil * |
Díky za radu, zkusil jsem se teď naučit alespoň základy JS a s pomocí internetu dal dohromady jednoduchou funkci
<p id="historie">vyberte rok</p>
<button onclick="letopocet('událost 1 a bližší informace k ní')">1893</button>
<button onclick="letopocet('událost 2 a bližší informace k ní')">1952</button>
<script>
function letopocet(jinyrok){
const elem = document.getElementById('historie');
elem.innerHTML = jinyrok;
}
</script>V zásadě to děla přesně to, co chci, ale objevil jsem drobný nedostatek. Chtěl bych si dát letopočet do nadpisu a jako možné řešení vidím v tom, že bych nadpis jednoduše vložil do onclick v tlačítku - tj. <button onclick="letopocet('<h2>1952</h2> \n událost 2 a bližší informace k ní')">1952</button>. To by sice v tuto chvíli fungovalo bezvadně, ale problém bych viděl v budoucnu, kdy by bylo potřeba web nějakým způsobem přestylovat a letopočet by neměl být přímo nad doplňující informací. Napadlo mě do tlačítka na onclick vložit přímo letopočet, tj. <button onclick="letopocet('1893')">1893</button> a ve skriptu pak letopočet nejprve uložit do vlastní proměnné "rok" a pak letopočet porovnat se zapsanými letopočty a přidělit letopočtu událost podle jeho hodnoty. Zkusil jsem tohle:
<script>
function letopocet(jinyrok){
const rok = document.getElementById('rok');
const elem = document.getElementById('historie');
if(this.value=="1893") this.value="letopocet('událost 1 a bližší informace k ní.";
if(this.value=="1852") this.value="letopocet('událost 2 a bližší informace k ní.";
elem.innerHTML = jinyrok;
}
</script>Předpokládám, že moje uvažování nebude úplně vedle, ale nedokážu to úplně převést do skriptu. Dokázal by mi někdo poradit? EDIT: omlouvám se, pracuji s ostrými daty a špatně jsem tu překopíroval zástupný text, kterým nahrazuji originální data. Poslední skript mám zapsán takto: <script>
function letopocet(jinyrok){
const rok = document.getElementById('rok');
const elem = document.getElementById('historie');
if(this.value=="1893") this.value="událost 1 a bližší informace k ní.";
if(this.value=="1852") this.value="událost 2 a bližší informace k ní.";
elem.innerHTML = jinyrok;
}
</script> |
||
| anonym_ Profil * |
#4 · Zasláno: 12. 8. 2022, 06:38:34
Tvůj popis je zmatecny. Dodej odkaz na web, kde bude vidět, co chceš a co realne mas (včetně HTML markupu).
|
||
| paprika Profil * |
#5 · Zasláno: 12. 8. 2022, 08:58:26
V tuhle chvíli bych úplně nechtěl zveřejňovat web, tak to přidám alespoň jako živou ukázku:
V tuto chvíli mám tohle, ale chtěl bych letopočtu definovat vlastní proměnnou, abych samostatný letopočet mohl umístit kamkoliv jinam, třeba takhle. Po kliknutí na tlačítko s rokem by zmizel nápis "rok" a zobrazilo se místo něj např. 1893 a místo slova "historie" by se zobrazila informace k danému roku. |
||
| Kajman Profil |
#6 · Zasláno: 12. 8. 2022, 09:58:27
Živá ukázka
Pokud ale chcete, aby ty texty mohli lidé najít ve vyhledávači, nemějte ten text takto v javascriptu. Udělejte dlouhou html stránku, kde budou jednotlivé roky. Nejjednodušší je pak na roky skákat kotvou (pozor id by nemělo raději začínat číslovkou) a mít všechny zobrazené (navigaci s roky lze fixovat, aby byla vidět). Pokud musí být vidět jen jeden, tak javascriptem všechny řádky schováte a po kliknutí ten správný zase zobrazíte. Ale tam opět můžete narazit na to, že text nebudou vyhledávací roboti brát tak, že ho uživatel uvidí, když přijde na stránku a tak nebude stránka dohledatelná. |
||
| paprika Profil * |
#7 · Zasláno: 12. 8. 2022, 10:35:55
Kajman: v této konkrétní části mi o vyhledávače ani tak nejde, nemusí být vyhledatelná, takže nepotřebuji zobrazovat všechny prvky najednou. Předtím jsem měl ty letopočty pod sebou a po nějakých 10 už se v tom začínám ztrácet, reálně tam mám těch letopočtů asi 30, tři letopočty v ukázce jsou jen pro uvdení příkladu. Jak už jsem uvedl výše, přesně tenhle způsob přepínání mi vyhovuje a v reálu je to pro mě mnohem přehlednější.
Každopádně díky moc za ukázku, zkusím to vložit do mého kódu někdy v pondělí, mám to na localhostu a teď nebudu u stroje.. |
||
| anonym_ Profil * |
#8 · Zasláno: 12. 8. 2022, 12:45:25
paprika:
Pokud bude v buttonu vždy ten letopočet, můžeš s ním pracovat takto: Živá ukázka Pokud to nemá být na text buttonu vázané, použij data atribut (třeba data-year, v JS pak přes `getAttribute`).
|
||
|
Časová prodleva: 2 roky
|
|||
0