Autor Zpráva
Sennin
Profil
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;
});
funguje a perfektne ukryje zobrazí div
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
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
Keeehi:
Samozrejme ja pako som sa ani o to nepokusal...
Stačilo pridat !important
Tomáš123
Profil
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 *
Tomáš123:
Stačí o niečo konkrétnejší selektor.
Jaký selektor prosím přebije inline zápis na elementu?
Tomáš123
Profil
anonymníí:
$(this).find('i').toggleClass('fa-eye fa-eye-slash')
Z tohoto riadku som vydedukoval, že sa zrejme prvku 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
Tomáš123:
Skrývání/odkrývání zajišťuje IMHO $('.toggle4').slideToggle('slide');.
anonymníí
Profil *
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
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 *
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>
https://jsfiddle.net/zkrpy2ga/ (jen selektor)
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 *
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
anonymnii:
JJ jsem dneska nějaký pomýlený :)
Sennin
Profil
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>
A CSS
.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
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
Tomáš123:
To moj problem neriesi....

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: