| Autor | Zpráva | ||
|---|---|---|---|
| medved Profil |
#1 · Zasláno: 23. 12. 2018, 22:47:18
Prosím o radu.
Potřebuji změnit velikost okraje objektu po kliknuti na jiný objekt a ta velikost ještě nabývá dvou hodnot závislých na velikosti displeje. Představoval bych si to takto (v sekci style vůbec nevím jak na to ) : <style> zmena:100px; @media(min-width:500px){zmena:200px;} </style> <script> function okraj(x){ return (x.marginLeft=zmena); } </script> <body> <img src=obrazek.jpg onclick=okraj(objekt.style)> <div id="objekt">blablabla</div> </body> |
||
| RastyAmateur Profil |
#2 · Zasláno: 23. 12. 2018, 23:44:51
medved:
Tak třeba by šlo jednoduše na kliknutí přidat nějakou třídu a velikost obrázku v různých situacích si pak v CSS ohlídáš jednoduše img { width: 100px; }
img.clicked { width: 200px; }
@media only screen and (max-width: 30em) {
img { width: 300px; }
img.clicked { width: 400px; }
} |
||
|
Časová prodleva: 3 dny
|
|||
| medved Profil |
#3 · Zasláno: 26. 12. 2018, 19:29:37
RastyAmateur:
img.clicked mi nějak nefunguje, není tam nějaký překlep? Jak jsem psal, potřebuji měnit jiný objekt, než na který klikám. čili něco jako: objekt1.clicked { objekt2.width: 200px;} zkouším to všelijak a nejde mi to, netuším, kde zjistit správnou syntaxi. |
||
| Mlocik97 Profil |
medved:
ne neni.... tu triedu clicked si musíš totiž sám pridať do elementu podľa potreby... typicky skrz: $("#mujobrazek").click(function() {
$(this).addClass('clicked');
})a do elementu dopíšeš dané ID: <img src="pes.png" alt="pes" id="mujobrazek"> kliknutím na obrázok sa pes zvätší... ale prepísaním selectoru môžeš zvoliť ať sa zmení po kliknutí na tlačítko alebo vlastne čokoľvek. Document - živá ukázka |
||
| RastyAmateur Profil |
#5 · Zasláno: 27. 12. 2018, 03:30:34
medved:
„objekt1.clicked { objekt2.width: 200px;}“ Jsi si jistý, že to opravdu zvládneš změnit sám a víš, co děláš? |
||
| medved Profil |
#6 · Zasláno: 28. 12. 2018, 16:26:34
RastyAmateur:
Nejsem :-), ale vytrvalost a trpělivost jsou moje nástroje. Skládám ta divná slova tak dlouho až to funguje. A občas se mi to stane :-))) |
||
| medved Profil |
#7 · Zasláno: 28. 12. 2018, 19:35:53
Mlocik97:
Mě to prostě nechodí. Vezmu celý kód, pošlu na server, zobrazí se pes, ale kliknutím se nestane nic. Jak to, že to v ukázce funguje? Musím otevřít nějakou knihovnu, nebo co je špatně?¨ Navíc u řádku: $("#mujobrazek").addClass('clicked'); mi poslední slovo svítí celé zeleně i s uzavírací závorkou a středníkem, jakoby tam byla nějaká chyba a závorka je ignorovaná. (používám pspad, škoda, že to sem nejde zkopírovat i s barvami) uložil jsem celý kód zde:ridery.cz/pokus2.html |
||
| T-fon Profil |
#8 · Zasláno: 28. 12. 2018, 20:15:50
Používáš jQuery funkce, takže si tam tu knihovnu musíš nahrát.
|
||
| Mlocik97 Profil |
medved:
jQuery nainstaluješ buď skrz: npm install jQuery alebo použiješ CDN, teda do kódu vložíš tento riadok (presne na miesto kde je komentár "jQuery lib"): <script src="ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> prípadne stiahneš JS súbor. viďte jquery.com/download ďalšia možnosť je prepísať jQuery do Vanilla JS (čož je vyhovujúce pre prípad že je to jediná vec kde by ste jQuery využili, v akýchkoľvek komplexnejších projektoch jQuery využijete vždy) p.s. pspad je shit na tvorbu webstránok, rozumnejšie je používať Sublime text, VSCode alebo Atom ja osobne používam VS Code a Atom p.s. ostatne jQuery je najpoužívanejšia knižnica a aj ju odporúčam používať, bežne sa neoplatí ju používať ak potrebujete napísať len jednu funkciu, ale pri čomkoľvek komplexnejšom hodne usnadní prácu. |
||
| medved Profil |
#10 · Zasláno: 28. 12. 2018, 22:32:08
Uf díky moc všem. Nevím jestli jsem to udělal kulantně, ale je to a funguje to! Krásně se to mění na různě velkých obrazovkách. Pro mě asi zatím nejsložitější záležitost.
Jen na mobilu a malém tabletu se (pro mě bezdůvodně) zmenší písmo v druhém odstavci, a přitom nikde nepracuji s velikostí písma... Zkoušel jsem, dle rady jednoho kolegy, <meta name="viewport" content="width=device-width">, ale to mi rozdrbe celou stránku. ridery.cz |
||
|
Časová prodleva: 5 let
|
|||
0