Autor Zpráva
Jakub Rychlý
Profil
Zdravím,
potřeboval bych pomoct jak udělám náhledy obrázku jeko je na tomto webu: tomliska.eu
předem děkuji
RastyAmateur
Profil
Jakub Rychlý:
Co si budeme namlouvat, těch obrázků je tam více... Předpokládám, že myslíš ty náhledy těch projektů, nebo co to je. Jak se to hezky přiblíží a ztmavne... To se dělá v css pomocí transform: scale(), jednoduchý příklad na živé ukázce...

Jinak konkrétně na té stránce to najdeš ve stylech main.css na řádce 286.
Jakub Rychlý
Profil
RastyAmateur:
Ano to je jedna z věcí, díky :)
A další ještě je jak udělám to okno když na o kliknu? Kde je vypsané z čeho to je
RastyAmateur
Profil
Jakub Rychlý:
Nastyluješ 2 divy - jeden div jako pozadí (šedý, poloprůhledný) a druhý s tou zprávou. A pak javascriptem na kliknutí nastavíš, aby se zobrazily, nebo skryly... Lépe to bude opět poznat na živé ukázce...
Na té stránce je to sice řešené asi trochu jinak, ale princip je stejný (snad). Když si s tím pohraješ, docílíš také dokonalého efektu.


Nedávno jsme to tu řešili a Chamurappi mi ukázal i řešení čistě v CSS. Nemohu to najít, ale našel jsem ještě jednu živou ukázku, dále v textu je ještě jeden odkaz...
Jakub Rychlý
Profil
RastyAmateur:
Ještě mám otázku :ú na JS jsem levý jak to napojím aby to fungoval vHTML?
RastyAmateur
Profil
Jakub Rychlý:
Pokud používáš js s knihovnou jQuery (poznáš to tak, že někde v tom scriptu je napsáno "jQuery" nebo "$"), tak si ji stáhneš a do html přidáš (pravděpodobně do hlavičky, je to téměř jedno)
<script src="cesta/k/jQuery.js"></script>
<script>
  /* ten javascriptový script */
</script>
Pokud si nejsi jistý, jestli jQuery využíváš, tak sem hoď kus kódu a on ti někdo řekne. Každopádně pokud ji tam vložíš a nebudeš ji používat, možná se jen o trochu zpomalí načítání stránky, nic víc v tom snad nebude...
Jakub Rychlý
Profil
<!DOCTYPE html>
<html>
<head>
    <title>RKSoftwares</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- Smartsupp Live Chat script -->
    <script type="text/javascript">
    var _smartsupp = _smartsupp || {};
    _smartsupp.key = '683bc4cbf73c4c31bf5e338ddf9cec0c935184e2';
    window.smartsupp||(function(d) {
        var s,c,o=smartsupp=function(){ o._.push(arguments)};o._=[];
        s=d.getElementsByTagName('script')[0];c=d.createElement('script');
        c.type='text/javascript';c.charset='utf-8';c.async=true;
        c.src='//www.smartsuppchat.com/loader.js?';s.parentNode.insertBefore(c,s);
    })(document);
    </script>
</head>
Tohle je halvička :)
RastyAmateur
Profil
Jakub Rychlý:
Tak v hlavičce jQuery pravděpodobně nevyužíváš.

Jinak vyzkoušet si to můžeš i sám, vlož jQuery, otestuj funkce na stránce, odstraň jQuery a pozoruj, jestli vše funguje správně.. :)
Jakub Rychlý
Profil
RastyAmateur:
Ahoj :) mohu se ještě prosím zeptat jak tam vložím to jQuery?
Díky
PS: Kterou verzi mám stáhnout?
RastyAmateur
Profil
Jakub Rychlý:
Stáhneš toto, uložíš si to pod nějakým jménem (třeba jquery.js) a vložíš pomocí
<script src="jquery.js"></script>
Ale konkrétně v tomto případě to pravděpodobně nepotřebuješ...
Tomáš123
Profil
RastyAmateur:
Chamurappi mi ukázal i řešení čistě v CSS
Asi myslíš túto ukážku vo vlákne Vyskakovací okno pro přihlášení uživatele.

Jakub Rychlý, RastyAmateur:
JQuery tu vôbec netreba.

Skúsil som vytvoriť zobrazovanie podobného dialogóveho okna (kód) úplne bez JavaScriptu. CSS som neoptimalizoval, takže na zložitých selektoroch zbytočne stroskotá každý starší prehliadač. Kód ochudobnený o dekoračné prvky a obohatený o Chamurappiho náhradu pseudotriedy :checked by dokonca mohol mať aj celkom dobrú podporu (bohužiaľ ale iba so zapnutým JavaScriptom).
Kcko
Profil
Tomáš123:
JQuery tu vôbec netreba.

A to že, supluješ JavaScript CSSkem a používáš elementy formuláře k naprosto nevhodnému účelu Ti přijde normální?
Víš na co je input a label? K tomu na co jsi ho použil určitě ne.
Chamurappi
Profil
Reaguji na Kcka:
Víš na co je input a label?
<input type="checkbox"> je obecný dvojstavový element, používaný nejčastěji ve formulářích. Je podle tebe chybou použít ho kdykoliv mimo formulář? Nebo změnit mu vzhled přes :checked? Nebo měnit něčemu dalšímu viditelnost přes :checked?

Stejně je zajímavé, jak se různí lidé různě tváří na bizarní důsledky nedomyšleností HTML/CSS. Celkem dost lidí se mračí na stylování sourozenců :checked, já se třeba mračím na clearfixy přes :after, před pár lety se ještě skoro všichni mračili na box-sizing: border-box… je to taková nadstandardní kulturní vrstva nad prostým pragmatismem.

Čistě pragmaticky vzato bude ukázka od Tomáše123 fungovat v mírně větším množství prohlížečů, než jQuery 2.2.2 doporučené RastyAmateurem. Některé prohlížeče si pamatují stav formulářových prvků při znovunačtení, takže v nich se dialogové okno nedá zavřít přes F5, na což lze pohlížet jako přednost, ale i jako na vadu.
Možná by sémanticky dávalo větší smysl použít <input type="radio">, protože v konkrétní okamžik může být vybraná jen jedna možnost.

Ještě by na to šlo jít jinak – pokud zanedbáváme Explorer 8, použil bych :target a kotvy, což by vyřešilo i tradiční potíž lightboxů s tlačítkem Zpět. To už by ti přišlo normální?


Reaguji na RastyAmateura:
Proč mu doporučuješ zrovna tuto verzi? Aby ušetřil pár jednotek kB a přišel o pár jednotek procent uživatelů?
Kcko
Profil
Chamurappi:
Je podle tebe chybou použít ho kdykoliv mimo formulář?
Je. Co se týká dalších věcí, vzhled, viditelnost, s tím problém nemám, samozřejmě to bude ve formuláři nikde jinde.

To co tady Tomáš vytvořil je podle mě prasárna na druhou.
Výtka, že to jde udělat bez JS, že není v tomto případě potřeba, je jak z jiného světa. Modální okno a jakákoliv interakce v současné chvíli => JS.

Čistě pragmaticky vzato bude ukázka od Tomáše123 fungovat v mírně větším množství prohlížečů, než jQuery 2.2.2 doporučené RastyAmateurem
Ty znáš výstup z jeho GA, že víš pro jaké prohlížeče potřebuje optimalizovat resp. v jakých prohlížečích to potřebuje mít funkční? (Já bych 2kovou verzi jQuery taky nepoužil, ale pozadí jeho aplikace/webu a analýzu GA neznám, tak nebudu zbytečně fabulovat).

Možná by sémanticky dávalo větší smysl použít <input type="radio">, protože v konkrétní okamžik může být vybraná jen jedna možnost.
Ne, sémanticky mi to tedy smysl nedává. Není to formulář. Odesílají se tam nějaká data? Zpracovávájí se tam nějaká data?

Ještě by na to šlo jít jinak – pokud zanedbáváme Explorer 8, použil bych :target a kotvy, což by vyřešilo i tradiční potíž lightboxů s tlačítkem Zpět. To už by ti přišlo normální?
S :target jsem problém nikdy neměl stejně jako s tím, že nepotřebuji podporovat dinosauří prohlížeče .. to snad z našich debat již víš ;-)

Obhajuješ ho zcela nesmyslně ;], snad sám vnitřně cítíš, že to co vypotil nedává z hlediska použítí žádný smysl, pokud ano, dál nemám potřebu s tebou komunikovat (oba víme proč jsi vlastně zareagoval :-)))).
Keeehi
Profil
Kcko:
Ty znáš výstup z jeho GA, že víš pro jaké prohlížeče potřebuje optimalizovat resp. v jakých prohlížečích to potřebuje mít funkční?
Chamurappi nepsal o počtu návštěvníků ale o počtu prohlížečů. Rozumím tomu tak že mluví o funkčnosti v různých verzích různých prohlížečů. Porovnává funkčnost dvou technických provedení. A technické řešení žádnou návštěvnost nemá. Dá se ale spočítat v kolika různých prohlížečích by byl schopno fungovat.
Kcko
Profil
Keeehi:

Čistě pragmaticky vzato bude ukázka od Tomáše123 fungovat v mírně větším množství prohlížečů, než jQuery 2.2.2 doporučené RastyAmateurem

vs

Tvoje odpověd.



Přeloženo, znásilnění formulářových prvků nebo chceš-li nestandardní použití formulářových prvků, protože to bude fungovat ve větším počtu prohlížečů než běžné použití je tedy v pořádku?

Dál se v tom pitvat nebudu, svůj názor jsem k tomu řekl, at si pro mě za mě Tomas123 nebo tazatel postaví celý web z formulářových prvků a zanořených css pravidel.
Keeehi
Profil
Kcko:
Přeloženo, znásilnění formulářových prvků nebo chceš-li nestandardní použití formulářových prvků, protože to bude fungovat ve větším počtu prohlížečů než běžné použití je tedy v pořádku?
Já snad něco takového řekl? Já jen upozorňoval na to že jsi po citaci reagoval na něco co tam vůbec nebylo. A teď se ti to povedlo znovu.

Já nepopírám, že v reálu je nutné zohlednit co návštěvníci používají. V daném kontextu to však ale nebylo podstatné.
Tomáš123
Profil
Kcko:
Svojim príspevkom som nechcel navrhnúť používať krkolomné zmesi HTML a CSS namiesto JavaScriptu (ani som to nikde takto nevyjadril). Napísal som predsa, že nie je potrebné jQuery. Uznávam ale, že usporiadaním príspevku z toho mohlo niečo podobné vyplynúť.

Ten hnusný (a zároveň krásny) kód som stvoril, aby som sa zabavil a skúsil prísť na riešenie konkrétnej situácie. Aj vo svojom príspevku som sa to snažil podať ako zaujímavú možnosť riešenia.

A príde mi normálne skúšať niečo vytvoriť bez JS.

Chamurappi:
Možná by sémanticky dávalo větší smysl použít <input type="radio">
Áno, máš pravdu. Prepínačom mi to najprv nešlo; akonáhle niečo zaklikneš, nevieš sa dostať späť do pokojného stavu. Napadá mi ale, že namiesto dvoch labelov pre jeden input by šlo na pozadie rozťahovať label akéhosi predvoleného inputu, ktorý by simuloval ten pokojný stav.
Kcko
Profil
Tomáš123:
Možná jsem zaútočil zbytečně ostře, je v pořádku, že se vzděláváš a zkoušíš vymýšlet neotřelá řešení, ale tady mi to přišlo tedy dosti nevhodné a nepoužitelné.

A príde mi normálne skúšať niečo vytvoriť bez JS.
Kdyby nebyl JS, tak by se snad Chamurappi ani nenajedl ;-).
_es
Profil
Chamurappi:
<input type="checkbox"> je obecný dvojstavový element, používaný nejčastěji ve formulářích. Je podle tebe chybou použít ho kdykoliv mimo formulář?
Kcko:
Je. Co se týká dalších věcí, vzhled, viditelnost, s tím problém nemám, samozřejmě to bude ve formuláři nikde jinde.

Formulárové prvky použité mimo formulár sa predsa čato použivajú - napríklad je nejaká ich funkčnosť spravená cez JS - čo je na tom chybné? Môže tam byť aj dátová komunikácie so serverom cez JS - na to tiež nemusia byť formulárové prvky vo formulári - no aj bez dátovej komunikácie to môže byť nejaké zmysluplné použitie.
Kcko
Profil
_es:
Uved mi několik smysluplných použití, které by byly podobné řešení od Tomas123. Děkuji.
Chamurappi
Profil
Reaguji na Kcka:
Co se týká dalších věcí, vzhled, viditelnost, s tím problém nemám, samozřejmě to bude ve formuláři nikde jinde.
A pokud by tedy popup byl součástí formuláře a bylo v něm třeba odesílací tlačítko, je to OK? Pokud by měla hodnota zaškrtávátka/přepínače nějaký další efekt, i když by jediným projevem jeho zaškrtnutí byla viditelnost popupu?

Ty znáš výstup z jeho GA
Rozdíl bude hlavně v prohlížečích bez JS, které konkrétně v GA nikdy neuvidí. Vzal jsem to čiště matematicky, jedna množina bude v průměru větší než druhá množina, i když možná o malý kousek. Pokud je jediným argumentem proti podpoře té větší množiny jen nějaké iracionální kulturní pobouření (a hlavním cílem webu není potěšení kodérských labužníků), logika velí sáhnout po řešení, které má širší podporu. Sazmořejmě záleží i na tom, jak je pracné.

Není to formulář. Odesílají se tam nějaká data? Zpracovávají se tam nějaká data?
Zpracovávají se okamžitě tím, že se mění viditelnost něčeho. Je to z uživatelského hlediska srovnatelné se zaškrtávátkem „doručovací adresa je jiná než fakturační“, které ti také něco odkryje.

oba víme proč jsi vlastně zareagoval :-)))
Je to očividné – napadáš v podstatě mé řešení (ze kterého vyšel Tomáš123), přestože si z nějakého důvodu myslíš, že vnitřně cítím, že nedává smysl. U mnoha druhů použití CSS to cítím, tady zrovna ani moc ne. Jen bych se trochu bál o hlasové čtečky, ale pokud má být v dialogovém okně jen fotka, tak je to asi fuk. Jinak mám obecně k lightboxům a k vrstvení obsahu přes sebe spíš odpor, možná také někdy iracionální.

Přeloženo, znásilnění formulářových prvků nebo chceš-li nestandardní použití formulářových prvků, protože to bude fungovat ve větším počtu prohlížečů než běžné použití je tedy v pořádku?
On si checkbox o znásilnění přímo říká. Jeho vyzývavá dvojstavovost a vyšpulený selektor :checked nejdou použít skoro k ničemu jinému :-)
Upřednostňuješ jakési virtuální blaho neživého formulářového prvku před průměrným blahem návštěvníka. Kdybys měl dva naprosto totožné e-shopy s obrovskou návštěvností, oba by používaly popup dialogy, jeden by používal jQuery 2 a druhý by znásilňoval formulářové prvky, který by vydělával víc?
_es
Profil
Kcko [#21]:
Ty si ale konkrétne tvrdil, že použiť <input type="checkbox"> kdykoliv mimo formulář je chybou - z toho vychádzam.
Zmysluplné použitie: Napríklad: Na stránke by bolo „zaškrtávatko“ nastavujúce vyšší kontrast pre ľudí s horším zrakom.
Tomáš123
Profil
Chamurappi:
napadáš v podstatě mé řešení
Mrzí ma, že som to nestihol napísať prvý. Ospravedlňujem sa, že som na tvoj príspevok, spomenutý nižšie, neodkázal už v [#11].

Kcko:
Kdyby nebyl JS, tak by se snad Chamurappi ani nenajedl ;-).
Chamurappi ma to naučil, takže hladný neostane...

je v pořádku, že se vzděláváš a zkoušíš vymýšlet neotřelá řešení
Je v poriadku, že nerozumieš prečo je to riešenie zaujímavé.

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: