| Autor | Zpráva | ||
|---|---|---|---|
| Sennin Profil |
#1 · Zasláno: 5. 1. 2016, 00:30:35
Zdravím,
potrebujem pomôcť s Jquery nakoľko som v tom dosť amatér :) mám tento jquery toogle $('#toggle4').click(function() {
$('.toggle4').slideToggle('slide');
$(this).find('i').toggleClass('fa-eye fa-eye-slash')
return true;
});Ak v zmenšenom rozlíšení ukryjem div a následne stránku zväčším div ktorý klasický pri väčšej šírke je zobrazený je zrazu ukrytý a ja musím refreshnuť stránku aby sa mi div znova zobrazil.... Preto žiadam/prosím skúsenejších v Jquery ako pri zväčšení nad 767px zobraziť div i keď bol v rozlíšení menšom ako 767px ukrytý? Všetkým vopred ďakujem. |
||
| RastyAmateur Profil |
Já v js také moc neumím, ale ty píšeš, že se ti sám skryje, když změníš rozměry okna, ale to, co tu máš, je na kliknutí. Moc to nechápu... Nebo snad ne?
Jestli to dobře chápu, chceš nějaký div zobrazit při větším rozlišení jak 767px, a skrýt při menším než 767px. jQuery tu není potřeba! Dá se to udělat pomocí CSS #tendivcochcesmenit{
display: block;
}
@media only screen and (max-width: 767px){
#tendivcochcesmenit{
display: none;
}
} |
||
| Sennin Profil |
Responsive v css ovladam .... :)
Ale mne sa to kvolu tomu js scriptu nezobrazi po roztiahnuti stranky ale az po refreshe. Takto aby ste ma pochopili.... V css mam ze pri rozliseni mensom ako 767px skry tento div v js mám potom ukaz/ukry tento div ak ho v rozliseni 767 necham ukryty a nasledne zacnem stranku roztahovat tak ten div ostane ukryty az po refreshnuti sa zobrazi znova |
||
| Keeehi Profil |
#4 · Zasláno: 6. 1. 2016, 21:32:14
Pokud se nepletu, tak jQuery mění hodnotu atributu style přímo tomu skrývanému elementu. To má větší prioritu, než tvůj obecný zápis v CSS souboru. Řešením je zvýšit prioritu pravidlům v CSS pro stav nad 767px, nebo nepoužívat jQuery slideToggle ale jen tomu elementu nastavovat nějakou třídu.
|
||
| Sennin Profil |
#5 · Zasláno: 7. 1. 2016, 02:56:17
Keeehi:
Samozrejme ja pako som sa ani o to nepokusal... Stačilo pridat !important |
||
| Tomáš123 Profil |
#6 · Zasláno: 7. 1. 2016, 06:37:33
Sennin:
Important je príliš silný. Stačí o niečo konkrétnejší selektor.
|
||
| RastyAmateur Profil |
Tomáš123:
„Stačí o niečo konkrétnejší selektor.“ Mohu poprosit o konkrétnější vysvětlení? Jak jako konkrétnější selektro? Vzpomněl jsem si a znovu pročetl jednu kapitolu z jecas, ale pochopil jsem z toho jen, že class < id < !important... Myslel jsi tím snad přidat tomu divu id? |
||
| anonymníí Profil * |
#8 · Zasláno: 7. 1. 2016, 11:10:36
Tomáš123:
„Stačí o niečo konkrétnejší selektor.“ Jaký selektor prosím přebije inline zápis na elementu? |
||
| Tomáš123 Profil |
#9 · Zasláno: 7. 1. 2016, 12:27:43
anonymníí:
$(this).find('i').toggleClass('fa-eye fa-eye-slash')i prepnú triedy na fa-eye a fa-eye-slash. Tie dve triedy by sa dali využiť v selektore. Pozerám, že Keeehi písal niečo o inline zápise, ale z kódu mi nič také nevyplývalo.
Nehádam sa, iba vysvetľujem ako som sa dostal k takejto myšlienke. JQuery nepoznám. |
||
| Dan Charousek Profil |
#10 · Zasláno: 7. 1. 2016, 12:48:38
Tomáš123:
Skrývání/odkrývání zajišťuje IMHO $('.toggle4').slideToggle('slide');.
|
||
| anonymníí Profil * |
#11 · Zasláno: 7. 1. 2016, 12:48:45
Tomáš123:
Ne, to je jen nějaká ikonka. Podstatný je ten řádek výše, $('.toggle4').slideToggle('slide');. A jQuery, stejně jako pure JavaScript, nastavuje inline styl danému elementu, nemění-li se třída.
|
||
| Sennin Profil |
#12 · Zasláno: 7. 1. 2016, 22:48:47
Tomáš123:
„ Important je príliš silný. Stačí o niečo konkrétnejší selektor.“
Naviem akým iným prikazom v css by sa dalo prebit jquery... samozrejme som sa to pokusal vyriešiť pomocou jquery resize() ale nastali potom ine komplikacie tak mi prislo ze !important bude vhodnejsi. |
||
| Keeehi Profil |
Sennin:
Další možnost je nepoužívat jQuery a napsat si to sám. Nebo po jQuery uklidit. Tedy když dokončí animaci, přidáš elementu třídu, která zajistí skrytí prvku a odstraníš veškerý bordel co jQuery zanechal v style. Nebo animaci svěřit CSS a jeho transition a s jQuery nebo jen javascriptem vhodně měnit třídy.
No a aby toho nebylo málo, tak existují postupy, jak udělat to skrývání a odkrývání po kliknutí jen čistě s CSS. |
||
| Kcko Profil |
anonymníí:
.selektor[style] {} // :) |
||
| anonymníí Profil * |
#15 · Zasláno: 8. 1. 2016, 11:35:43
Kcko:
Sice nevím, co jsi tím kódem myslel, ale nemyslíš si, že tento zápis přebije inline styl na elementu s třídou selektor, že ne? :-) <style>span.modry[style] {color: blue}</style>
<span class=modry style="color: red;">cerveny text</span>jsfiddle.net/zkrpy2ga/1 (trochu jsem jej zesílil o třídu, aby korespondoval s tvým příkladem, výsledek je zřejmý) Nebo tím příspěvkem chtěl říct autor něco jiného? |
||
| Kcko Profil |
anonymníí:
Máš pravdu, nepřebije, s něčím jsem si to spletl. Resp. přebije s !important, ale to není zcela chtěné. |
||
| anonymnii Profil * |
#17 · Zasláno: 8. 1. 2016, 12:53:45
Tímto selektorem se da zaměřit element s atributem style, nejde však přebit jeho vlastnost (bez importantu). Vhodné například pro zvýraznění toho, čemu JS nejake styly nastavil a na co ještě nesahl :-)
|
||
| Kcko Profil |
#18 · Zasláno: 8. 1. 2016, 13:06:12
anonymnii:
JJ jsem dneska nějaký pomýlený :) |
||
| Sennin Profil |
#19 · Zasláno: 8. 1. 2016, 14:10:33
Jquery toogle som dal stranou zatiaľ takže sa to pokúšam celé spojazdniť cez Css ale nejako to nezobrazuje to čo by malo zobraziť....
aktuálne takto <a href="#" class="show-hide-link" id="show"> Zobraziť </a> <a href="#" class="show-hide-link" id="hide"> Skryť </a> <div class="hide-this info"> Informácie </div> .show-hide-link {
text-decoration: none;
width: 120px;
display: block;
padding: 5px 0;
background: blue;
color: #fff;
text-align: center;
}
@media (max-width: 767px) {
.hide-this {display: none;}
.info {
position: absolute;
top: 80px;
left: 0;
background: rgba(0, 0, 0, .8);
color: #fff;
}
#show {display: none; }
#hide:focus + #show {display: inline; }
#hide:focus { display: none; }
#hide:focus ~ .info { display:none; }
#show:after, #hide:after {
font-family: 'FontAwesome';
}
#show:after {
content: "\f06e";
}
#hide:after {
content: "\f070";
}
@media print {#hide, #show { display: none; } }
}
@media (min-width: 768px) {
.hide-this {display: block;}
}Tlačidlo sa mení teda po kliknutí zobraziť zobrazí ikonku oko prečiarknuté a po kliknutí skryť zobrazí ikonku len oko čo je správne ale nevyhodí <div class="hide-this info">...</div>
|
||
| Tomáš123 Profil |
#20 · Zasláno: 8. 1. 2016, 14:51:52
Sennin:
Chýba ti tam ešte: #show:focus ~ .info { display: block; }Deklarácia #hide:focus + #show { display: inline; } nefunguje, lebo #show je pred #hide. Môžeš vymeniť prvky v HTML.
Ukážka: Živá ukázka |
||
| Sennin Profil |
#21 · Zasláno: 8. 1. 2016, 16:32:07
Tomáš123:
To moj problem neriesi.... |
||
|
Časová prodleva: 9 let
|
|||
0