Keskustelu: Nettisivujen teko: jQuery: $(näkyvä laatikko).slideUp?

Voisiko joku kertoa, miten saan juuri "Päällä" olevan sivun slideouttaamaan. Kuten sivulla http://tyy.li/.

$("#tietoa").hide();
$("#projektit").hide();
$("#teemat").hide();
$( ".tietoa2" ).click(function() {
	$("#slide").slideUp("slow");
  $( "#tietoa" ).slideDown( "slow", function() {
  });
});

http://tiituus.org

En ihan ymmärrä, mikä kohta tässä ongelmana. Itse tekisin ehkäpä näin:

<nav>
	<a href="#etusivu">Etusivu</a>
	<a href="#foo">Foo</a>
	<a href="#bar">Bar</a>
</nav>
<div class="sivu" id="etusivu">Etusivu</div>
<div class="sivu" id="foo">Foo</div>
<div class="sivu" id="bar">Bar</div>

$(".sivu:not(#etusivu)").hide();
$("nav a").click(function(e) {
	$(".sivu:visible").slideUp("slow");
	$($(this).attr("href")).slideDown("slow");
	e.preventDefault();
});

en varsinaisesti ymmärrä mitä tarkoitat, mutta haetko kenties $(this) - valintaa?

esim.

$("#something).click(function() {
   $(this).slideUp("slow");
});

groovyb kirjoitti:

en varsinaisesti ymmärrä mitä tarkoitat, mutta haetko kenties $(this) - valintaa?

esim.

$("#something).click(function() {
   $(this).slideUp("slow");
});

Juuri tuota $(THis] valintaa hain, mutta loppujenlopuksi päädyin seuraavaanlaiseen koodiin:

$("#tietoa, #projektit, #teemat").hide();
$(".tietoa2").click(function() {
   $("#slide, #projektit, #teemat").slideUp("slow");
   $("#tietoa").slideDown("slow");
});
$(".projektit").click(function() {
   $("#slide, #tietoa, #teemat").slideUp("slow");
   $("#projektit").slideDown("slow");
});
$(".teemat").click(function() {
   $("#slide, #projektit, #tietoa").slideUp("slow");
   $("#teemat").slideDown("slow");
});
$(".etusivu").click(function() {
   $("#projektit, #tietoa, #teemat").slideUp("slow");
   $("#slide").slideDown("slow");
});

tiituus kirjoitti:

Loppujenlopuksi päädyin seuraavaanlaiseen koodiin: – –

Ehkä kannattaisi kuitenkin ottaa mallia minun versiostani, jossa samalla lyhyellä koodilla hoidetaan kaikki osat ja uusia laatikoita voi lisätä suoraan HTML-koodiin muuttamatta JS-koodia lainkaan.

Metabolix kirjoitti:

tiituus kirjoitti:

Loppujenlopuksi päädyin seuraavaanlaiseen koodiin: – –

Ehkä kannattaisi kuitenkin ottaa mallia minun versiostani, jossa samalla lyhyellä koodilla hoidetaan kaikki osat ja uusia laatikoita voi lisätä suoraan HTML-koodiin muuttamatta JS-koodia lainkaan.

Aluksi kokeilin sinun koodillasi, ja yritin tehdä omanlaisen, loppujenlopuksi koodi kusi, eikä sivu toiminu lainkaan. Tuo oli tosiaan ensimmäinen jQuerysäätöni, joten itseni kannalta on avsm onko pitkä vai ei.

tuossa sivustossasi voisi myös pohtia uudelleenkäytettävän html:n lataamista vaikka jqueryn load:illa, sen sijaan että jokainen, #teema, #tietoa ja #projektit sisältävät samaa koodia...

Yleensäkin kannattaisi heivata käsin väännetty purkka mäkeen ja tutustua frameworkkeihin. Niitä löytyy joka lähtöön. Omasta mielestäni visuaalisesti näyttäväkin sivusto on sontaa, jos koodi on huonoa.

Häh? Tuo on juuri sellainen yksinkertainen efekti, jota varten ei missään nimessä kannata mitään kokonaista frameworkiä alkaa vetämään kehiin. Frameworkit ei ole mikään laatutae koodille. Joissakin asioissa jopa päinvastoin. Oikeastaan voisi todeta, että paras framework on niistä pienin.

Jos framework tekee monta olennaista asiaa, jotka haluaa tehdä, niin sitten ookoo. Jos tarkoitus on tehdä pari hauskaa efektiä ja ehkä samalla oppia koodaamaan paremmin, niin frameworkien perään on järjetöntä haikailla.

Minä puhuin kokonaisesta sivustosta enkä tästä yhdestä efektistä.

Varsinaista vastapointtiani se ei kuitenkaan kumoa millään tavalla: frameworkkien valinnan suhteen saa olla varuillaan. Frameworkeissa saattaa olla jotakin, jossa toteutus on hyvä tai loistava, mutta sitten taas lupsuksia jossakin muussa. Ne ehkä sietää jossain projektityöpajassa, josta suolletaan uusi projekti X viikon välein ulos, mutta jos sen kanssa tarvitsee olla pidempään tekemisissä, niin mieluummin käyttää helposti korvattavia irtokomponentteja kuin yhden ajatusmaailman framework-ratkaisua.

Tästä syystä olen myös sitä mieltä, että frameworkin käyttö olennaisena osana omaa opettelua on aika myrkkyä. Kun asiat tekee ensin väärin itse, niin sitten tietää tehdä paremmin, tai ainakin osaa arvostaa sitä kun framework tarjoaa helpon ratkaisun johonkin vaikeaan ongelmaan. Frameworkin kanssa opetellessa lähinnä päätyy oppimaan, että jotain ei voi tehdä koska framework. Tai tekee vielä pahempia frameworkin rajoitukset kiertäviä purkkia, joita ei olisi koskaan tarvinnut tehdä jos olisi opetellut tekemään asiat ilman frameworkiä!

Koodaaminen on ikuista opettelua, joten välillä on vain pakko lyödä tosielämään breakpointtia ja miettiä hetki, että mitä pitäisi opetella seuraavaksi. Mielestäni on jo aika todeta tarpeelliseksi opetella uusia asioita, kun rupeaa tekemään ajax-tekniikalla webbisivustoa, eikä osaa muuta kuin jQuerylla vähän dom-puuta käpistellä.

Tuollaisella tavalla on helkkarin vaikeaa oppia järkevän koodin tekemistä (esim. yllä käyty keskustelu), muutenhan sitä voisi tietysti kasata itselleen jonkinlaisen kertakäyttöisen koodipohjan sivustoaan varten ja rakentaa sivut sen päälle. Jonkinlainen geneeriseksi miellettävä kehys on kuitenkin rakennettava, koska ainakin omasta mielestäni koodauksesta menee muuten maku todella pahasti, kun löytää itsensä tekemästä samoja asioita uudestaan ja uudestaan ja koodaamisesta tulee tekstin maalausta ja copy-pastea inspiroivan koodin naputtelun sijaan.