jQuery toggle - lijeva strana

Pozdrav.

Relativno sam slab sa Javascriptom i njegovim bibliotekama pa bih molio za pomoc.

Znam da unutar jQuey-a postoji funkcija koja se zove slideToggle(), meni treba nesto slicno ali da sekcija ide sa lijeve na desnu stranu.

Znaci imam sekciju koja treba da bude prikazana na vecim ekranima, ta sekcija treba da ima toggle button, koji ce sakriti tu sekciju, odnosno prikazati je ponovo na drugi klik i sve tako.Dok ce na malim rezolucijama biti skrivena u startu.

Evo konkretan primjer: http://freakpixels.com/portfolio/brio/ .

Ako postoji neko gotovo rijesenje to bi bilo najbolje.

Hvala.

Evo jedan od načina. http://jsfiddle.net/n2wdsass/1/

Složeno u roku od 7 minuta, pa je vjerovatno podložno dodatnoj optimizaciji, ali ti pokazuje jedan od načina kako to riješiti.

1 Like

Bojim se da nije bas to sto zelim.

Imamo lijevi container koji je u startu otvoren.Kada se izvrsi klik na odredjeni button sekcija sa desne strane zatvara taj container koji je na lijevoj strani (prelazi preko containera na lijevoj strani u potpunosti) - kao na primjeru.

http://www.jqueryscript.net/tags.php?/off%20canvas%20menu/ evo ih na bacanje(ne garantiram da ima isti kao što ti hoćeš, ali probaj iskombinirati nešto). Mada ako želiš naučit JS trebao bi sam pisat kod, ovo je vrlo lagano za napravit što se tiče JS-a(10ak linija koda) , bitno je da si CSS dobro posložiš.

Pa evo ti onda ovako. http://jsfiddle.net/n2wdsass/2/
Ovo je samo primjer kako se to može odraditi, @blaja ti je dao link na neznam koliko različitih pluginova. Samo ne znam zašto to koristiti kada je kao što je @blaja rekao to je 10tak linija koda, evo ja odradio ovaj primjer sa 3.

Bitno je da skužiš bit, a ostalo su nijanse. Je si li opgledao kod i probao ga izmjeniti?

1 Like

Hvala to bi trebalo biti to.

Ali hajde da i ja nesto probam nauciti.Malo sam cackao i dosao sam do jedne ideje, koja je "tezi"put ali to u biti nije bitno, bitno je da djelomicno radi.Evo kako sam ja to osmislio:

$('.menutoggle').click(
    function() {
        $('#items-left') .toggleClass('collapsed');
        $('.content') .addClass('fullwidth');
    }
);

Ovo djelomicno radi.Problem je u drugome kliku, znaci na drugi klik treba da se izbrise klasa .fullwidth i to ne znam rijesiti.Pokusao sam unutar click eventa dodati jos jednu funckiju unutar koje bih obrisao fullwidth klasu, ali onda nista ne radi.

Tvoj primjer radi perfektno, ali bih trebao vrsiti vece izmjene unutar CSS-a a to mi se trenutno ne radi jer je skoro sve gotovo.

U CSS-u .collapsed i .fullwidth imaju sljedeca svojstva:

.collapsed {
    display: none !important;
}
.fullwidth {
    margin-left: 0;
    width: 100%;
}

Pa za sto i na $(’.content’) ne staviš toggleClass() funkciju u ovoj gore funkciji?

$('.menutoggle').click(
function() {
    $('#items-left') .toggleClass('collapsed');
    $('.content') .toggleClass('fullwidth');
});
1 Like

Vidis to mi nije palo na pamet, radi sad super.Hvala :smiley:

Ali sada nastupa zajebani dio, ukomponovati ovo sa RWD.

Pa to bi trebalo biti najlakše. Ionako ti je u primjeru sve sa postotcima dakle automatski se prilagođava širini uređaja, a onda možeš za uređje koji npr. imaju širinu < 480 px napisati nešto ovako:

@media screen and (max-width: 480px) {
.sidebar {
display: none;
}
.content {
max-width: 100%;
width: 100%;
}
}

i onda u ovaj jQuery na početak možeš još dodati

if($(document).width() < 480) ) return;

Ovo su osnove osnova.