Keskustelu: Nettisivujen teko: Valikko sulkeutuu kosketusnäytöllä

http://javascript-array.com/scripts/jquery_simple_drop_down_menu/

Olen toteuttanut vastaavalla tavalla itselleni valikon, joka toimii moitteemostasi hiirellä, mutta ei kosketusnäytöllä. Koskettaessani sormella valikkoa, se aukeaa, mutta sulkeutu välittömästi kosketuksen jälkeen. Mitä teen väärin?

print '<div>';
print '<table border="0" cellspacing="0" cellpadding="7">';
  print '<tr>';
  print '<td align="left">';
     print '<ul id="jsddm">';
           print '<li>';
           print '<a href="#" style="font-size:9px;">OTSIKKO</a>';
              print '<ul>';
                print '<li><a href=""></li>';
                 print '<li><a href=""></a></li>';
              print '</ul>';
          print '</li>';
     print '</ul>';
  print '</td>';
  print '</tr>';
print '</table>';
print '</div>';

Ota pois rivi:

document.onclick = jsddm_close;

Kiitoksia vastauksesta, mutta ei auttanut ongelman kanssa.

Valikko pysyy hetken kauemmin auki, mutta sulkeutuu lähes välittömästi. Olen koittanut säätää myös timeria.

Loogista, mouseoverit yms. ei tietenkään toimi tableteilla :)

Jännä, että toimii kuitenkin puhelimella? Miten voin tarkistaa, käyttääkö käyttäjä pc:tä, tablettia yms..

Sellaisia purkkatarkistuksia ei pidä tehdä. Koodaa kunnolla.

Mitä tarkoitat koodaa kunnolla?

Haluaisin valikon toimivan kun sen päälle menee, toki toisena vaihtoehtona on, että käyttää click - komentoa, jolloin valikko aukeaa painaessa. Onko muuta vaihtoehtoa, että sen saisi toimimaan sormella painaessa?

manninen kirjoitti:

Mitä tarkoitat koodaa kunnolla?

Että kannattaa pitää poikkeukset minimissä.. Kuten "jos pc niin noin ja jos tabletti niin näin".

Latasin tuon alkuperäisen koodin linkin takaa, otin timodemuksen mainitseman rivin pois ja lisäsin bindauksiin click-tapahtuman jsddm_open-funktiota kohti. Ainakin omalla android tabletillani toimii nyt hyvin. Ei tuo hyvä esimerkki ole, mutta kyllä se kehityskelpoinen on. En tietenkään tiedä minkälaisia ja kuinka paljon muutoksia olet jo kerinnyt tekemään omaan versioosi, mutta tämän enempää ei tarvinne muokata.

// tämä rivi
$('#jsddm > li').bind('mouseover', jsddm_open);
// tälläiseksi
$('#jsddm > li').bind('mouseover click', jsddm_open);

// ja tämä rivi kokonaan pois, antaa timerin hoitaa sulkemisen
document.onclick = jsddm_close;

Tuo linkin valikkoviritelmä on aika wanha (jquery 1.2.6, kun nyt ollaan jo versiossa 1.11.1). Ei noin vanhalla tee yhtään mitään, kun uudempia ja toimivampia valikkohässäköitä löytyy pilvin pimein.

t0ll0

Eipä käynyt mielessäkään yhdistää mouseoveria sekä click komentoa! Kiitos, kokeilenpa tätä.

JaskaP

- Vanha on mutta toimiva. Suotta toimivaa rikkomaan pienellä korjaukselle, sekä oppiipahan uutta ;)

Toimi, kiitos!

Uuden oppiminen tarkoittaisi ajattelutyötä, mutta sä keskityt valitettavasti lähinnä copy-pasteen vailla omaa ajattelua. Et kai sinä muuten olisi tuota tableakaan tuonne tunkenut, koska se ei esimerkkiin kuulunut. Ilmeisesti halusit vain paddingia 7 px muttet ole kuullut css:stä?

The Alchemist

Oppiminen on uuden asian ymmärtämistä niin, että sitä osaa käyttää myöhemmin uusissa yhteyksissä. Käyttämäni valikko on copy-pastea, mutta ymmärrän sen toimintamallin, sekä olen oppinut sen avulla monia uusia asioita. Kuten nyt tämän. Myönnän, en ole kaikista fiksuin näissä asioissa, en millään hoksannut, että "mouseover sekä click" toimisivat samassa komennossa yhtä aikaa. En kuitenkaan halunnut jäädä niin tyhmäksi, joten kysyin asiasta itseäni viisaammilta ja luovemmilta. En jäänyt, vaan opin taas uutta. (Nyt osaan käyttää sitä myöhemmässä vaiheessa) En häpeä olla muita huonompi, sillä joka kerta kun kysyn jotain minusta tulee hieman oppineempi.

Huomasin myös sen, että teet nopeita johtopäätöksiä kysymättä asioista. Teit olettamuksen tablen liittämisestä, etkä kysynyt miksi sen liitin. Oletin, että vika voi olla siinäkin, jokin pieni pilkku virhe jota en huomaa. Olin väärässä, mutta mieleeni ei missään vaiheessa tullut, että tabletti ei ymmärrä mouseover efektiä, kuten kuuluisi. Toimihan se moitteettomasti puhelimellani, jossa on myös kosketusnäyttö.

Olen kuullut css:stä, mutten nähnyt sitä tarpeelliseksi tässä tilanteessa. Yksi taulu, kaksi tyylikomentoa. font-size sekä padding. En näe syytä rakentaa näiden kahden vuoksi omaa tyylitiedostoa, mutta se on vain näkemykseni. Toki siitä voi olla eri mieltä. Näkisit tässä jotain positiivista, jotain omaa mukana ;)

Oman ajattelun käyttäminen tarkoittaisi mielestäni uuden kehittämistä, josta toki tulee olla ylpeä. Se ei kuitenkaan ole oppimisen pääkohta, se on uuden kehittämisen.

Johtopäätökseni sinun kohdallasi ovat kaikkea muuta kuin impulsiivisia. Olen pitkään seurannut postauksiasi niin täällä kuin Muropaketissakin (nimimerkillä helppoheikkinen). Tuolla kokemuksella – kysymyksien määrässä mitattuna ainakin – pitäisi jo osata jotain muutakin kuin copy-pastea tableja joka paikkaan pelkän paddingin vuoksi.

Et nähnyt tarvetta tehdä selkeää, oikeaoppista ja hyvin muotoiltua html:ää? Ok. Minun mielestäni copy-pasten "oppimisesta" ei voi olla kovin ylpeä. Aloittelija voi toki olla ylpeä siitä, että on saanut tehtyä toimivan systeemin edes jollain tavalla, mutta sen jälkeen ammattiylpeyden pitäisi syrjäyttää pelkän onnistumisen ylpeyden. Pitäisi arvostaa paitsi onnistumista niin myös työnsä jälkeä.

En olisi maalarina ylpeä siitä, että olen saanut seinän maalattua, vaikka maalin pinta onkin rikkonainen ja ruttuinen ja kasvaa sammalta jo seuraavana kevääänä. Sekin on faktaa, ettet ole voinut koodata neljää vuotta edes satunnaisesti ilman tarvetta css:lle.

Faktahan on joka tapauksessa se, että tarvitset css:ää ja tyylitiedostoja jokaisella html-sivulla ja likipitäen jokaisen elementin kohdalla, et vain yhteen diviin tuossa valikkoräpellyksessä.

En ole väittänytkään missään nimessä olevani ylpeä työni jäljestä, tarkemmin luettuna huomaat.

manninen kirjoitti:

Oman ajattelun käyttäminen tarkoittaisi mielestäni uuden kehittämistä, josta toki tulee olla ylpeä. Se ei kuitenkaan ole oppimisen pääkohta, se on uuden kehittämisen.

En ole väittänyt käyttäväni omaa ajattelua, vaan nimen omaan copy-pastella tehtyä valikkoa. Sanoin, että uuden kehittämisestä tulee olla ylpeä, en ole kehittänyt uutta. Siksi en sillä myöskään ylpeile.

Viestisi vain vahvistaa näkemystäni impulsiivisuuden suhteen, sillä väität seuranneeni minua pitkään mm. muropaketissa (nimimerkillä helppoheikkinen). En koskaan ole käyttänyt muropaketin ohjelmointifoorumia, tänään menin sinne ensimmäistä kertaa ihan uteliaisuuttani. Tämän ketjun myötä.

Olen täällä aina vastaukseni saanut, oppinut tuntemaan nimimerkit joiden vastauksiin ja kommentteihin luotan. mm. Metabolix, The Alchemist. Toki muidenkin, mutta näiden nimimerkkien takana on henkilöt, joiden osaamiseen luotan ja heidän ammattitaitoaan arvostan. Yhtään muita väheksymättä. Sen vuoksi, minulla ei ole ollut mitään tarvetta lähteä muualta kysymään. Joten, seuratessasi minua ja jotain muuta henkilöä, olet liittänyt ne hätäisesti yhteen ja tehnyt vääriä johtopäätöksiä.

Edelleen liitin tablen sen vuoksi, että oletin vian myös voivan olla siinä. Jos olisin laittanut vain suoran linkin, jossa valikko olisi toiminut en olisi saanut vastausta ongelmaani. Näin oletin. Table oli ainut asia jonka muutin, joten oletin vian olevan siinä. En hoksannut hakea vikaa muualta, kuin kirjoittamastani koodista. Siinä on syyni tablen liittämiseen, ei paddingin hakemiseen. Tällä iällä, en sitä enää tarvitse.