WWW-sivujen kännyversiolle käyttöliittymä

Korjasin muutaman pienen CSS-virheen. Mietin, tarvitseeko HD-laite/iPad 9,7 -näyttötason omaava laite vaakasuuntaan päävalikkolinkkiä lainkaan vaan vain yhden valikkopainikkeen ja sen eteen tekstin VALIKOT (sekä mahdollisesti >-merkin perään)?
_______________

Ps. Unohdin, että ehdotettiinhan sitä helpompaakin tapaa kopoida sivusto.
All-in-One WP Migration

No kuvia en kaivannut. Olisin selvinnyt vain helpommalla.
 
Viimeksi muokattu:
Sain siirrettyä riittävän hyvin phpMyAdmin avulla. Olen jo tehnyt muutoksia, joten uutta yritystä ei edes kannata yrittää enää.

Sitäpaitsi klooniakin olisi tarvinnut korjata, jotta linkit toimisivat. Siihen on etsi ja korvaa -työkalu, jolla saa korvattua virheelliset linkit tietokannassa.

Kuvien osoitteet jätin ennalleen, jolloin niistä ei tarvitse kopioita. Lopputulos on nyt parempi kuin klooni.

Hyvä olla tosiaan erillään. Tuli asia, jota en ymmärrä.

Suorittamisjärjestysongelmia | WordPress.org
 
Viimeksi muokattu:
Heitän arvauksen, että pageLists-funktiota ei ole kutsuhetkellä ladattu. Jos pistät pageLists-kutsun toiseen funktioon, sitä toista funktiota ei suoriteta heti sillä hetkellä, kun se tulee koodissa vastaan, joten silloin ei haittaa, vaikkei pageLists-funktiota löytyisikään. Ongelma tulee vasta sitten, kun yrität kutsua tätä toista funktiota, sillä silloin tarvitaan välittömästi tietoa siitä, mikä funktio tämä pageLists on. Vähän toiselta kannalta: Jos kirjoitat pageLists-kutsuja ns. globaaliin scopeen, ne suoritetaan saman tien, joten funktiokutsunkin pitää onnistua. Jos taas kirjoitat samalle paikalle funktion, joka tekee pageLists-kutsuja, ei pageLists-kutsuja suoriteta saman tien vaan vasta kun myöhemmin kutsut tätä toista funktiota. Kun sitten myöhemmin kutsut tätä toista funktiota, myös pageLists-kutsut suoritetaan, jolloin tulee virheitä, jos pageLists ei ole "tiedossa".

Oletettavasti tiedostossa, jossa käytät pageLists-funktiota onnistuneesti, on määritelty myös pageLists. Tällöin on tiedossa, missä moinen funktio on, joten funktiokutsukin onnistuu. Toinen tiedosto ei kuitenkaan itsekseen tiedä mitään eri tiedostossa määritellystä pageLists-funktiosta, joten tiedostoa pitää vähän avittaa. Käytännössä esim. require_once on tähän yksi tapa.
 
Oletettavasti tiedostossa, jossa käytät pageLists-funktiota onnistuneesti, on määritelty myös pageLists.

Ei, mutta prioriteetti on niin, että siinä, millä kutsutaan, on prioriteetti, joka määrittää tietueen latautumaan myöhemmin.
Vaikutus on sama, jos funtio olisi ensimmäisenä samassa tietueessa.

Kyseessä oli ns. shortcode-koodissa käytetty funktio. Koska siinä tapauksessa ongelmia ei ollut ajamisen suhteen, funktion täytyi olla käytettävissä. Shortcode ajetaan siis funktion kannalta sopivassa järjestyksessä.

Code Snippet prioriteettimäärityksillä voi yrittää saada funktiot oikeaan suoritusjärjestykseen. Tosin WordPressillä on oma käsittelytapa, joka sekin on otettava huomioon. Joskus Code Snippet ei osaa sitä ottaa huomioon. Mutta onneksi testisivustolla ei niin väliä, jos sivusto koodausvirheiden takia kaatuu.

Yritin kerran include... Ei toiminut. Code Snippet taitaa hylätä ne, koska ei pysty niiden syntaksia tarkistamaan.

Laadin funktion väärin, joten siitä ei ollut hyötyä siinäkään kohdassa, jossa se oli käytettävissä.

function pageLists($list){
$blogi=stristr($currentUrl='https://' . $_SERVER['HTTP_HOST']. $_SERVER['REQUEST_URI'],'/test/blogikirjoitukset');
...
$list[0]=$blogi;
$list[1]=$articles1;
$list[2]=$articles2;
$list[3]=$muut;
$list[4]=$howAlt;
return $list;}
...

function topOpenSidebar($forum_id = 0 ){
$articles = pageLists($list[2]);
$blogi = pageLists($list[0]);
if($articles){...}elseif($blogi){...}else{...}
...

Ei listannut oikeita valikoita. Tuli aina sama valikko.
Idea oli määritellä sivuryhmät yhdessä funktiossa ja käyttää muualla array-muuttujaa käyttäen. Miten array-muuttujan yksittäisiä arvoja voisi käyttää ehtoina mikä tehtävä (tässä tapauksessa valikon printtaus) suoritetaan ja mikä ei.

Tällaista ei tullut vastaan kun joskus puoliammattilaisesti koodasin.
___________

Totesin, että LÖYDÄT VALIKOT TÄSTÄ on sittenkin liikaa "rautalangan vääntämistä". Laitoin vain VALIKOT. Poistin avautuvasta valikosta ylhäältä tekstin TOIMINNOT, koska välilehdistä näkee, mistä on kyse. Tarpeeton opastaminenkin on turhaa.

___________

Sivustoni toimii oikeastaan ikäänkuin kahdessa suunnassa. Välilehdet eivät liikuta käyttäjää juurikaan pystysuunnassa vaan ovat vähän kuin rinnakkaisikkunoita.

___________

Testisivustolla kokeilussa versio, jossa HD-näytöllä vaakasuuntaan on vain yksi valikkopainike. Siinäkin sivupalkki on nyt turhake. Ihan vain testimielessä poistin näkyvistä sivupalkin. Käyttöliittymä siinäkin on varsin minimalistinen, mutta ei ihan niin riisuttu kuin pystysuuntaisessa versiossa.

https://www.sanaristikkofoorumi.net/test/wp-content/uploads/IMG_20190910_200655.jpg

Voisihan senkin minimoida pystynäytön tyyliseksi, mutta pari isoa kuvaketta oikeassa reunassa tuntuvat kivoilta.
___________

Kolmannen välilehden teksti LISTAT ei tunnu hyvältä, mutta en keksinyt parempaakaan. Pääsääntöisesti kyse on linkkilistoista. Mikä olisi parempi teksti? Hirveän pitkä ei saisi olla. MUUTA? MUUT LINKIT? Jälkimmäisessä se, että ihan kaikki asiat eivät ole linkkejä. LISÄT? - kuvaa olemusta, mutta onko senkään parempi. Tuntuu nyt kuitenkin parhaimmalta vaihtoehdolta, joten vaihdoin. Napakan kuvaavan nimikkeen löytäminenkin on joskus hankalaa.

https://www.sanaristikkofoorumi.net/test/wp-content/uploads/IMG_20190910_221758.jpg
___________

Voihan nämä minun minimalistisuuskokeilut mennä överiksikin. Tavallaan haluan kyseenalaistaa liian ahdettuja sivustoja.

Kyllähän sivuja rullaa, mutta ongelmaksi hyvin pitkällä sivulla esim. mtv3 uutiset muodostuu se, että hyvin äkkiä unohtaa, mitäs sitä sivulla oikein olikaan kun tavaraa on paljon. Kun sivu vain jatkuu ja jatkuu ja jatkuu loppupää kyllä jää usein katsomatta.

Jos halutaan hyvin paljon asiaa samalle sivulle, mikään ratkaisu ei enää toimi.
 
Viimeksi muokattu:
Laitoin myös säännöt valikoiden yhteyteen. Nyt tosin vasta testisivustolla.

Tyttäreltä sivusto sai tyylillisesti tuomion: "Ysäriä". Ruma fontti ja huonot värit. Huono väri koski tosin lähinnä valikoiden tummaa sinistä. Footerin vaaleampi sininen olisi valikoissa hänen mielestään parempi. Koin ongelmaksi sen, että tietokoneella oli ns. pudotusvalikoissa tumma sininen, mutta kapealla näytöllä avautui vaaleampi sininen. Yhtenäistin värit, mutta ehkä olisi pitänyt yhtenäistää sen toisen sinisen mukaan.

Ysäriä on kyllä välilehtien visuaalinen toteutus. Se pitäisi saada moderniksi. Ehkä jokin muukin yksityiskohta. Vähän yksinkertaistin, mutta tytär piti tyyliä edelleen ysärinä. Olisiko kellään ehdotuksia välilehtien ulkoasuksi niin, että ne on vain CSS:llä toteutettavissa?

Kokeilin testisivustolla vaaleampaa sinistä:
https://www.sanaristikkofoorumi.net/test/wp-content/uploads/IMG_20190911_144230.jpg

Fontin vaihdoin erikoisfontista perusfontiksi, että voisin välttää yhden fontin latauksen. Ehkä pitäisi palauttaa Google-fontti 'Lato'. Valikoiden taustalle on helppo vaihtaa toinen väri.

Tein aikoinaan teknisiä toteutuksia. Välillä ne onnistuivat todella hyvin, mutta välillä takkuili. Olen teknisessä ajattelussa parempi kuin ulkoasutoteutuksessa.

Myönnän avoimesti, että hyvän väriskaalan luominen ei kuulu vahvuuksiini, minkä vuoksi olen käyttänyt pääsääntöisesti annettujen palettien värejä.
 
Viimeksi muokattu:
PHP-koodista Code Snippet -lisäosan kanssa on outo ongelma.

Laitoin Code Snippet -tietueelle, jossa määritin funktion prioriteetin 1.
Funtio, jossa oli kutsu, oli prioriteetilla 7.

Oletin, että funktio löydettäisiin enkä saisi virheilmoitusta.

Kun laitoin funktion samaan tietueeseen, missä sitä kutsuttiin, ongelmaa ei tullut.

Jotenkin prioriteetit eivät toimi ihan oikein. Ymmärtääkseni 1-merkitty tietue pitäisi lukea ennen 7-merkittyä, mutta niin ei käynyt. Ei ainakaan Code Snippet -tietueen tallennusvaiheessa. Koodi olisi saattanut todellisuudessa toimia ilman virheilmoitusta netissä, jos sen olisi pystynyt tallentamaan. Ymmättääkseni lisäosa toimi tässä kohtaa bugisesti.

Kysyin tästä asiasta tekijältä:
Priority checking error? | WordPress.org
 
Viimeksi muokattu:
Testasin funktion palauttamia arvoja eri sivuilla

print_r(pageLists($list));

Se antoi käyttökelpoisia arvoja, kuten:

Array
(
[0] => /test/blogikirjoitukset/
[1] =>
[2] =>
[3] =>
[4] =>
[5] =>
[6] =>
[7] =>
)
Array
(
[0] =>
[1] => 1
[2] => 1
[3] =>
[4] =>
[5] =>
[6] =>
[7] =>
)

Tosta array-muuttujasta pitäisi vain saada oikealla lailla testi ulos, eli tuleeko testistä 1 tai string eli antaako se lopputuloksena arvon true vai ei.

$blogi = pageLists($list[0]);
$articles= pageLists($list[2]);

elseif($blogi)... ei silti toimi sillä arvo on aina true kohdassa if($articles)...

Hiivatti kun en keksi oikeaa tapaa toteuttaa tämä. Eihän tämä kysymys tärkeä ole, mutta harmittaa niin *piip* kun en keksi, mikä mättää.
____________

PS. Kyse vähän samasta asiasta, jos en hoksaa jonkin ristikon vihjeen ideaa.
 
Viimeksi muokattu:
Yritin eilen etsiä googlella funktiota, joka purkisi arrayn string-tyyppisiksi muuttujiksi. Oletan, että tähän olisi jokin valmis funktio, mutta en eilen osannut laittaa oikeaa hakusanaa.

Yritin uudestaan "convert array into strings php". Tuli implode-funktion käyttöesimerkkejä.

Esimerkeissä tulostettiin suoraan arvot käyttäen echo-komentoa, esim.:


$arr = array('Hello','World!','Beautiful','Day!');
echo implode(" ",$arr)."<br>";
echo implode("+",$arr)."<br>";
echo implode("-",$arr)."<br>";
echo implode("X",$arr);

Yhdessäkään ei neuvottu, miten luoda uusia muuttujia. Pitäisikö tässä luoda jokin silmukka?
 
Yritin eilen etsiä googlella funktiota, joka purkisi arrayn string-tyyppisiksi muuttujiksi. Oletan, että tähän olisi jokin valmis funktio, mutta en eilen osannut laittaa oikeaa hakusanaa.

Yritin uudestaan "convert array into strings php". Tuli implode-funktion käyttöesimerkkejä.

Esimerkeissä tulostettiin suoraan arvot käyttäen echo-komentoa, esim.:


$arr = array('Hello','World!','Beautiful','Day!');
echo implode(" ",$arr)."<br>";
echo implode("+",$arr)."<br>";
echo implode("-",$arr)."<br>";
echo implode("X",$arr);

Yhdessäkään ei neuvottu, miten luoda uusia muuttujia. Pitäisikö tässä luoda jokin silmukka?
PHP:tä yhtään tuntematta oletan kuitenkin, että sun ei yksikerrallaan kannata tallentaa listan arvoja muuttujiin. Todennäköisesti for-loop tai joku map-funktio on oikea ratkaisu.
 
Itse asiassa yritän miettiä, miten saada ulos.
Silmukkaesimerkki:

$colors = array("red", "green", "blue", "yellow");

foreach ($colors as $value) {
echo "$value <br>";
}
Tuon pohjalta voisi kokeilla:

Koodi:
$address = pageLists($list);
$x=0;// laskuri for-silmukan tapaan
foreach ($address as $value) {
 if($x<3){
     if($x==0){
       $blogi=$value;
    }
    elseif($x==2){
      $articles=$value;
    }
  }
  else{break;}
$x++
}
 
Viimeksi muokattu:
@Tapio X, laitapa koodi CODE -tagien sisään, niin helpompi lukea kun sisennykset pysyvät. Ja toiseksi: mitä tarkalleen yrität tehdä?
 
Kirjoitin tuon ilman sisennyksiä. Aika usein jätän sisennykset laittamatta ja teen varsin kompaktia koodia. Idea on saada silmukassa ulos yksittäisiksi muuttujiksi tietyt funktion pageLists($list) sisältämät array-muuttujan arvot, joita sitten käyttäysin testaamaan, mitä tulostetaan.

Itse asiassa tuo toimi! Voit testata tuon koodin toimivuutta mobiililaitteella osoitteessa

Foorumit | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa
avaa valikko ja klikkaa LISÄT
testaa sama blogiosiossa ja artikkeliosiossa.
Tulee eri sisältö.
 
En oikein keksi, miksi käytät for-silmukkaa. Tuossahan olet kiinnostunut vain talukon 1. ja 3. arvosta - jos ne taulukosta löytyvät. Muilla et tee mitään. Ja oikeasti kannattaa alkaa sisentää koodia. Sitä lukee nopeammin, hahmottaa helpommin lohkojen alut ja loput, sekä mihin joku satunnainen else liittyy jne. Ja jos kuka tahansa muu koodiasi joskus katsoo, niin ei katso ellei se ole kunnolla muotoiltu.
 
foreach silmukka on näppärä array-muuttujalle. For-silmukasta lainasin vain tuon $x++; käyttämisen. Tuo oli ainoa koodi, jonka osasin koodata niin, että tekee, mitä haluan.

Toisessa käyttöyhteydessä logiikka mulla vähän petti, mutta keksin, missä on vika. Kun ehdot voi määrittää yhdessä paikkaa, mahdollisia muutoksia ei tarvitse tehdä monessa tiedostossa.
 
Viimeksi muokattu:
Muokkasin välilehtien ulkoasua:
https://www.sanaristikkofoorumi.net/test/wp-content/uploads/IMG_20190912_162039.jpg

Varmaan parempi, mutta varmaan joku osaa esittää tyylikkäämmänkin toteutuksen. Ei aktiivisen välilehden avaajan (span) luokka on "normal-tab" ja aktiivisen "gold". Muutin JS-koodia niin, että välilehdillä on aina vain jompikumpi noista. Jos toinen on päällä ja klikataan, toinen poistetaan ja toinen lisätään. Poistot tehdään myös viereisiin välilehtiin. Yhteiset määrittelyt tulee tehdä span.normal-tab,span.gold{...}

Lisäsin välilehtiin kevyen varjostuksen, kun ne minusta eivät näyttäneet näteiltä ilman varjostusta.

Sulje valikko/Sulje ikkuna voisi ehkä kehystää? Tällöin sekä tummaa että vaaleaa taustaa vastaan voisi käyttää samoja värejä. Kokeilu, joka vaatii varmasti hiomista:

https://www.sanaristikkofoorumi.net/test/wp-content/uploads/IMG_20190912_233043.jpg
 
Viimeksi muokattu:
Muokkasin välilehtien ulkoasua:
https://www.sanaristikkofoorumi.net/test/wp-content/uploads/IMG_20190912_162039.jpg

Varmaan parempi, mutta varmaan joku osaa esittää tyylikkäämmänkin toteutuksen. Ei aktiivisen välilehden avaajan (span) luokka on "normal-tab" ja aktiivisen "gold". Muutin JS-koodia niin, että välilehdillä on aina vain jompikumpi noista. Jos toinen on päällä ja klikataan, toinen poistetaan ja toinen lisätään. Poistot tehdään myös viereisiin välilehtiin. Yhteiset määrittelyt tulee tehdä span.normal-tab,span.gold{...}

Lisäsin välilehtiin kevyen varjostuksen, kun ne minusta eivät näyttäneet näteiltä ilman varjostusta.

Sulje valikko/Sulje ikkuna voisi ehkä kehystää? Tällöin sekä tummaa että vaaleaa taustaa vastaan voisi käyttää samoja värejä. Kokeilu, joka vaatii varmasti hiomista:

https://www.sanaristikkofoorumi.net/test/wp-content/uploads/IMG_20190912_233043.jpg
Ehdottaisin, että et liitä CSS-luokkien nimiin mitään ulkoasuun suoraan viittaavaa (esim. gold-sanaa) vaan pyrit nimeämään ne käyttötarkoituksen mukaan (esim. active-tab). Todennäköisesti olisi myös järkevää käyttää kaikkiin yhteistä luokkaa (esim. tab) ja tehdä siihen valittuun muutoksia omalla luokka (esim. se active-tab). Näin välilehdillä on jotain yhteistä myös luokkien osalta (ja onhan niillä oikeastikin jotain yhteistä: ne ovat kaikki välilehtiä), ja lisäksi esim. värimaailman muutokset eivät riko nimeämisen järkevyyttä. Nythän gold ei ole nimenä järkevä, jos muutat värimaailmaa jossain vaiheessa enemmänkin.

Itse tykkäsin enemmän aiemmasta kulmikkaasta tyylistä, mutta enpä kyllä olekaan sen puoleen käyttöliittymäasiantuntija. Selaimista Chrome käytti ennen kulmikkaampaa tyyliä ja vaihtoi sitten pyöreämpään tyyliin, kun taas Firefoxissa oli ennen pyöreä tyyli ja nyt on kulmikas. Molemmat lienevät siis sinänsä ihan perusteltavissa olevia valintoja. Omasta mielestäni isoin ongelma on värimaailma, joka ei tosiaankaan ole ihan tätä päivää. Suoralta kädeltä en kuitenkaan osaa parempaakaan ehdottaa vaan vaatisi kokeilua. Todennäköisesti kannattaisi kuitenkin vaihtaa pääväri noinkin tummasta sinisestä johonkin vaaleampaan sävyyn (tai tummempaan, jos hakee tumma teema -trendin mukaista värimaailmaa, mutta tällöin pitäisi varmaan miettiä koko homma uusiksi).

Lisäksi - joskin pikkukuvan perusteella on vaikea ottaa kantaa - kannattaisi mahdollisesti järjestää käyttöliittymä jotenkin niin, että välilehdellä valittavat elementit yhdistetään jotenkin paremmin siihen välilehteen itseensä. Perinteisesti tämä on taidettu tehdä usein jonkinlaisella reunuksella, joka sitoo välilehden ja sen vaikutusalueen toisiinsa, mutta voinee olla muitakin ratkaisuja. Tällä hetkellähän välilehtien alla oleva sisältö hukkuu vähän taustaan (mikä tosin on sekin nykyään varsin trendikästä - omasta mielestäni lähes järjenvastaisesti, mutta en tosiaan ole käyttäliittymäasiantuntija), sillä sen tausta on käytännössä yhteinen välilehtien "ulkopuolisen maailman" kanssa (esim. välilehtien yläpuolella olevan tilan kanssa).
 
Kiitti kommenteista. Kun kaikki oma koodi ja CSS on Code Snippet -tietueissa, kolme tietokannan ajoa muutti kaikkialla luokan gold nimelle active-tab. Kahdelle sivustolle tehtynä vei aikaa alle kaksi minuuttia.

Yhteisen luokan muuttaminen ja joihinkin välilehtiin sen lisääminen veivät vähän enemmän aikaa, mutta varsin nopeasti sekin hoitui. Tein senkin tietokanta-ajona. Laitoin ihan ehdotuksesi mukaan, joka oli hyvä.

Pikku muutosten suhteen työtapani on käyttää Code Snippet -lisäosaa on hyvä. Siinä on kyllä neljä perusongelmaa:
  1. Saattaa kaataa sivuston, sillä se ei osaa luotettavasti tarkistaa, onko funktio käytettävissä vai ei. Se tekee tämän asian suhteen kaikkia mahdollisia virheitä! Nämä ovat tulleet vastaan:
    1. Ei aina varoita siitä, että funktio ei ole käytettävissä. Virhe kaataa sivuston.
    2. Ei aina löydä määriteltyä funktiota. Estää käyttämästä toisessa tietueessa määriteltyä funktiota.
    3. Ei aina varoita siitä, että funktio on jo määritelty. Virhe kaataa sivuston.
  1. Jos koodissa on CSS:ää, se ei luotettavasti osaa etsiä koodista sulkujen päättymiskohtia.
  2. Siinä ei ole CSS:n syntaksin tarkistusta. Virheellinen CSS saattaa pilata totaalisesti sivuston ulkonäön.
  3. Siinä ei ole JavaScriptin syntaksin tarkistusta. Virheellinen JavaScript aiheuttaa sen, että osa sivuston toiminnallisuuksista on rikki.
Se, että kaikki on tietokannassa helpottaa suuresti ylläpitoa ja systemaattisten muutosten teko on helppoa. Miten muuten tekisi sekä PHP-koodiin että CSS-koodiin tämän tyylin muutokset noin puolessa minuutissa koko sivustolle?

Vaikka Code Snippet -lisäosassa on todella ilkeitä ja kavalia bugeja ja puutteita, sen käytössä on myös merkittävät etunsa. Minulle ne edut voittavat puutteet. Tosin kun olen virheherkkä, puutteet ja bugit ovat kyllä jonkin tason ongelma.

Code Snippetillä olisi jopa järkevä tehdä jonkinlaisia lisäosia. Silloin kaikkinainen pikku muuttaminen olisi helppoa. Irrallisina lisäosina muutokset joutuisi tekemään erillisellä koodieditorilla. Pitää vain olla tietoinen siitä, että Code Snippet saattaa kaataa sivuston.

Muutokset tulivat myös aiempiin versioihin, joten myös siinä kulmikkaan tyylin CSS:ssä on muutokset. Kulmikas, pyöristetty, varjostettu/ei-varjostettu ovat niin paljon makuasioita, että minulla on ihan yhtä epävarma tunne siitä, mikä on hyvä vaihtoehto.

Sen huomasin, että pelkkä pyöristys on rumin vaihtoehto. Joko kulmikas kevyellä reunustuksella tai pyöristys varjon kanssa. Tämäkin on tosin mututuntumaa.

Välilehtien sisältö on minulla tarkoituksellisesti hukutettu taustaan, koska reunustus olisi minusta ruma - ja se vaatisi lisää JavaScriptiä, että

Olen saanut opetusta koodaamisesta. Sain käymästäni koulusta periaatteessa riittävän opetuksen verkkosivustojen pystyttämiseen, ylläpitoon ja niiden koodaamiseen PHP:llä, HTML:llä ja CSS:llä. JavaScript -opetusta oli niukasti - käytännön tarpeisiin nähden riittämättömästi. Lisäksi oli hieman opetusta Flashin ja Javan käytöstä, mutta kun niillä ei enää uusissa sivustoissa käytetä, niillä ei ole merkitystä. Ulkonäkösuunnittelua ei koulutukseeni kuulunut. Olen sen suhteen kyllä ihan täysi amatööri.

Värimaailmaan koskemisen suhteen tunne oloni hyvin avuttomaksi. bbPress suhteen olen siihen kyllä koskenut vaihtamalla sen värejä teeman väreiksi. Teeman väreihin en ole muuten puuttunut kuin laittanut tummimpaan siniseen läpinäkyvyyttä + luonut omia korostuksia aktiivisille sivuille/sivuosioille ja välilehdille.
 
Viimeksi muokattu:
Yhtenäistin SULJE VALIKKO, SULJE LISTA ja SULJE IKKUNA ulkoasun eli ne ovat kaikkialla ihan samat kuin kuvakaappauksessa. Hieman asemoin valikoiden sulkemispainikkeita niin, että ne ovat välilehtiin nähden nätimmin.
https://www.sanaristikkofoorumi.net/test/wp-content/uploads/IMG_20190913_123424.jpg

En nyt oikein osaa parantaa ulkoasua muussa suhteessa kuin hienosäätää marginaaleja ja dimensioita (niitä taasen voi hioa loputtomiin eikä koskaan ole tyytyväinen). Hioin jonkin verran marginaaleja paremmiksi.

Sinänsä kivan ja ystävällisen tuntuinen Xiyng ei minua tässä asiassa osaa auttaa. Rakentavat ehdotukset muilta olisivat paikallaan.

____________

Ihan vaan tiedoksi, että oli pakko vaihtaa live-sivustolle sama ulkoasu kuin testisivustolle, sillä HD-laitteella kapealla näytölle joskus näkyvä päävalikko oli ulkonäöllisesti ihan rikki. En jaksanut ruveta korjaamaan.

____________

Täällä pikavalikossa on vain SULJE eikä SULJE VALIKKO. Onko täsmennys tarpeen kun minulla noiden ikkuinoiden merkitys vaihtelee vaikka kaikki sinänsä ovat avautuvia ikkunoita?
 
Viimeksi muokattu:
Miksi osallistua sitten keskusteluun ollenkaan, jos sitä ei jaksa seurata? Jos ei voi esittää rakentavaa kommenttia, ei kannata esittää kommenttia lainkaan.

Kiva, että täällä on Xiyng kaltaisia kommentoijia, joilla on aina asiaa.

____________

Kiitos kuitenkin tuosta kuvakaappauksesta. Olin vahingossa poistanut index.htlm-tiedoston. Se oli rakentavaa osallistumista.
 
Viimeksi muokattu:
Xiyngin ja tyttäreni mielestä tumma väri valikoissa oli huono, kokeilin testisivustolla vaihtaa sen vaaleamman sininiseen.

Aihe: XenForon pikanavigoinnin ja tämän sivuston toimintavalikon vertailu | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa

Jätin header-osan päälle tulevat hover-efektit sekä valikoiden hover-efektit ennalleen. Vaalensin valikoiden varjon väriä, koska vaaleammalle värille ihan musta varjo oli liian voimakas kontrasti.

Toivoisin tästä kommenttia. Kapealla tietokoneruudulla valikolla on kuvassa näkyvän vaalean sinisen värinen taustaväri (sama kuin mobiiliversiossa)
 
Aivan se ja sama minkä värisiä nuo ovat kunhan eivät vaan avautuisi kun hiirellä menee niiden kohdalle. Klikkaamalla auki niin olisi parempi.
 
Mielestäni tietokoneella hiirellä ylimeneminen ja siten avautuminen toimii. Sen tyyppisiä valikoita käytetään tietokoneella paljonkin.

Tuo on teeman oletuskäytäntö eikä sen muuttaminen ole yksinkertaista. Vaatisi jQueryen luomista ja ehkä lisäluokkien määrittelyä avautuville valikoille. Kun on monta tasoa, JavaScriptistä tulisi aika monimutkainen. En edes ole yrittänyt, koska tuntuu aika kompleksilta.

Toteutuksen liiallisen monimutkaisuuden vuoksi en yritä muuttaa tietokoneversiossa JavaScriptillä valikkoa klikattavaksi.

Mobiilissa toiminta täytyy perustua klikkaamiseen. Mobiilissa ei leveälläkään näytöllä saisi olla :hover-toimintoon perustuvaa avautumista. Sellainen oli käyttämässäni teemassa, mistä syystä määritin valikot mobiiliin täysin uusiksi.

Mobiiliin klikattava leveä valikko ei joka tapauksessa olisi käynyt, sillä valikko on monelle laitteelle liian korkea. Joka tapauksessa nykyinen mobiilivalikko olisi pitänyt määrittää ainakin HD-laitteille.

Koska rullaaminen on mobiililaitteella varsin helppoa, sivustoni päävalikko ei mielestäni ole liian pitkä rullattavaksi. Toki jonkin toisen teeman valikko olisi ollut taso kerrallaan avattava. jQueryllä tietenkin tällaisenkin voisi toteuttaa, mutta koen tarpeettomaksi.

Vaikka osaan hieman jQueryn käyttöä ja ymmärrän sen idean, en ole siitä kovinkaan hyvä.

Se taas olisi tietänyt melko kompleksia mobiilisuunnittelua. Mobiililaitteille pitäisi määrittää useita päävalikoita, joista näyttää laitteesta riippuen eri valikon. Liian monimutkaista ja liian vaikeasti hallittavaa. Jo nyt hallinta on aika kompleksia. Enempää kompleksisuutta en kaipaa.

______________

Jotta päivitys olisi helpompaa, laitoin kaikille yli 783px mobiililaitteitta HD-tyyppisen ratkaisun.

1280x800 Chrome Android en saa millään edelleenkään fontteja näkymään oikean kokoisina. html{font-size:16px} lisäsin, mutta siitä ei ole apua. Selain ei osaa laskea relatiivisia fonttikokoja. Laittaa ne melkein ihan miten sattuu.

Ainut keino saada selaimelle toimivat fonttikoot olisi pikselimääritetyt koot.
 
Viimeksi muokattu:
Ihan omana subjektiivisena kokemuksena välilehdistä on se, että välilehden LISÄT käyttö on kapealla näytöllä mobiilissa paljon miellyttävämpää kuin tietokoneversion kapea näyttö, jossa välilehtiä ei ole. Pitää nuolella siirtyä sivun loppuun, että näkee foorumin listaukset. Ihan subjektiivisena kokemuksena sivukohtainen linkkilistaus toimii varsin paljon kivemmin kuin rullaaminen linkkien luokse tai meneminen sinne nuolilla. Kummassakin tapauksessa ikävä piirre on se, että pitää keskeyttää kommentin lukeminen ja pitää palata samaan paikkaan takaisin. Ainakin omasta mielestäni kapea mobiiliversio on kivempi kuin kapea tietokoneversio.

Juuri tämä on välilehtien idea. Jos haluat jotain tarkistaa, sinun ei tarvitse keskeyttää tilannetta, jossa olet. Kaikki tarpeettomat keskeytykset ovat *piip* ärsyttäviä. Hyvin suunnitellulla pikanavigoinnilla niistä pääsee eroon.

Joissakin tapauksissa keskeytystä voi välttää myös uusien välilehtien avaamisella. Ainakin kännykässä välilehtien käyttö on hankalaa, eikä linkkejä mielellään avaa uuteen välilehteen. Pikanavigoinnit sisäiset välilehdet vähentävät uusien välilehtien avaamisen tarvetta ihan yleisestikin.

Jos olet kohdassa, jossa ei ole mitään linkkiä, keskeytykseltä ei ilman paikalla olevaa pikanavigointia voi välttyä. Selaimissa ei ole yleisesti ole ominaisuutta "tuplaa sivu", jonka saisi painamalla tyhjää tilaa pidempään tai hiiren oikealla klikillä. Huomaa, että kirjanmerkkinä olevan sivun avaaminen toiseen välilehteen tai osoiterivillä olevan sivun kopioiminen toiseen välilehteen on keskeytys sekin.
 
Viimeksi muokattu:
Mottoani voisi parantaa:

Älä juoksuta, älä pompota, älä piilota, älä etsitytä äläkä keskeytä tarpeettomasti - vaan pysy rinnalla!

____________

Laitoin MT3:een twiitin, voisiko se muuttaa oikean yläkulman valikon aina käytettäväksi pikanavigoinniksi tyyliin, jonka olen täällä esittänyt.
 
Viimeksi muokattu:
Eivät varmaan reagoi tuohon pyyntöön mitenkään. Aika paksu noillakin tuo palkki on että vähän kyllä häiritsisi jos se olisi siinä aina sivua scrollatessa. Toki siitä saisi vähän ohuemman niin ehkä voisi toimia.
 
Heidänpähän on asiansa. Laitoin saman myös palautelomakkeella. Lisäsin siihen toisen Twitter-viestin.
Lisäsin kuvakaappauksen MTV3:n uutisten oikean reunan navigaatiosta ja muutaman siihen liittyvän kommentin:https://sanaristikkofoorumi.net/test/forums/topic/xenforon-pikanavigoinnin-ja-taman-sivuston-toimintavalikon-vertailu/#post-15793
Kuvakaappaus löytyy Aihe: XenForon pikanavigoinnin ja tämän sivuston toimintavalikon vertailu | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa
 
Koin niin *piip* ärsyttäväksi oman sivustoni toimintovalikon käytön kapealla näytöllä, että laitoin siihen kaksi välilehteä. Ei tarvitse siirtyä sivun alalaitaan kun haluaa vain katsoa, mitä aiheita on viimeksi käsitelty. On se vaan *piip* ärsyttävää, jos listaa viimeisistä aiheista ja vastauksista pitää hakea sivun lopusta tai peräti joltakin toiselta sivulta.
 
palkki on että vähän kyllä häiritsisi jos se olisi siinä aina sivua scrollatessa.

En ehdottanut sitä, vaan sitä, että valikkopainike jäisi pysyvästi oikeaan yläkulmaan. Mitä sisältöä avautuvaan valikkoon laittaisi, en osannut ehdottaa. Sisältö riippuu sivuston käyttötarkoituksesta ja valitusta alustasta.
 
Viimeksi muokattu:
En ehdottanut sitä, vaan sitä, että valikkopainike jäisi pysyvästi oikeaan yläkulmaan. Mitä sisältöä avautuvaan valikkoon laittaisi, en osannut ehdottaa. Sisältö riippuu sivuston käyttötarkoituksesta ja valitusta alustasta.
Niin. En tiedä vaan onko tuo toteutettu tällä hetkellä niin että tuo koko palkki on osana tuota valikkoa että se sitten seuraisi perässä jokatapauksessa.

Tämä siis tuli vaan mieleen että olisiko niin. En tiedä yhtään miten tuo on nyt toteutettu.
 
Vain se X sivun yläreunassa liittyy MTV 3 -uutissivustolla avautuvaan valikkoon. X + sen alapuolella olevat linkit ovat valikkoa. Valikko ei avaudu aivan sivun ylälaitaan vaan sulkemispainikkeen vievän tilan verran alemmaksi. Muistutan sitä ottamassani kuvakaappauksessa. Kuvakaappaus antaa väärän vaikutelman siitä, mikä kuuluu valikkoon.

Tein raa'an vertailun oman sivustoni, XenForo-sivuston pikanavigoinnin (tämä sivusto) ja MTV3:n yläreunan valikon toimivuudesta nimen omaisesti pikanavigointina:
Aihe: XenForon pikanavigoinnin ja tämän sivuston toimintavalikon vertailu | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa
 
Viimeksi muokattu:
Aika helvetin sekava tulisi tuosta mtv uutissivustosta jos se pikavalikko kattaisi kaikki kohdat mitä sinä haluaisit sen kattavan. Nythän siellä on ne tärkeimmät mitkä on hyvä olla. Ja noin tuokin näyttäisi olevan täysin riittävä.

Toki scrollatessahan tuota ei saa auki että joku pysyvä pieni valikon aukaisija tuolla ylhäällä voisi olla.
 
Viimeksimainitun voisivat tehdä.

Mutta olen kyllä osoittanut, että kaikki luettelemani asiat voi laittaa pikavalikkoon. Mielestäni pikavalikkoni ei ole *piip* sekava.

Että kaikki saa pikavalikkoon, edellyttää välilehtien käyttöä.

________________

PS. Testisivusto ei aina auta. Laitoin testisivustollani testaamani CSS:n varsinaiselle sivustolle. Tietokoneversio ei ole identtinen vaikka sen nyt pitäisi olla. Live-sivustolle tuli virheitä, joita testisivustolla ei ole.

Näemmä johtui siitä, että minulla on auto-optimize -lisäosa. Se pakkaa CSS:ää. Tekee sen hieman väärin. CSS:n pakkaus oli otettava pois käytöstä. No pakkaan itse suurimman osan määrittämästäni CSS:stä.

Voihan olla, että CSS:ssä on jotain virhettä, joka Autoptimizen kanssa tekee ongelmia.
 
Viimeksi muokattu:
Ei sen suunnittelu on mitään rakettitiedettä ainakaan foorumisivuston suhteen:
  1. Vasemmanpuoleiseen välilehteen XenForon vasemmanpuoleiset linkit lisäten siihen yksi tai kaksi linkkiä, että yleislinkit ovat kattavia. Lisäksi joku tilannekohtainen linkki olisi paikallaan.
  2. Pääryhmittely keskimmäiseen - aika lailla sitä, mitä XenForossa on oikea puoli.
  3. Oikeanpuolimmaiseen välilehteen tilannekohtaiset apulistat.
Sitten vaan määritellään järkevät dimensiot ja painike jäämään oikeaan kulmaan. Näin tälläkin sivustolla olisi ihan oikeasti pikanavigointi eikä kaksi turhakepainiketta.
 
Viimeksi muokattu:
Kokeilin testisivustolla osittaista pikanavia tietokoneella leveällä näytöllä. Kaksi välilehteä. Ideana tuossa on se, että sivupalkki jää pitkällä sivulla kauaksi ja sitä pitäisi käydä katsomassa. Kun se on välilehdessä, sitä ei tarvitse käydä erikseen katsomassa.

Aihe: XenForon pikanavigoinnin ja tämän sivuston toimintavalikon vertailu | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa

Sivusuunnittelu on minun mielestäni yleisesti siinä, että kaikkea pitää hakea sieltä sun täältä ja vielä tuolta. Asioiden löytymiseen helpolla, nopeasti ja ilman tarpeetonta hakemista ei panosteta juuri mitenkään.

Myönnän, että minun lähestymistavassa ongelmana on saada ihmiset huomaamaan valikkosetit. Ongelmana on myös nimetä kaikki järkevästi, että niiden käyttötarkoitus tulisi ymmärrettyä.

Mutta mitään kehitystä ei voi saada aikaan, jos ei aidosti kokeile jotain ihan uutta.
 
Viimeksi muokattu:
Ainakin MTV 3 luki Twitter-viestini

Tuo uskoakseni on ihan vakiovastaus, joten tuo on vain lukemisilmoitus eikä siitä voi tehdä mitään päätelmiä, miten asiaan on oikeasti suhtauduttu.
 
Viimeksi muokattu:
Muutin tietokoneversion leveänkin näytön live-versiossa kaksivälilehtiseksi, jotta eri leveydet olisivat yhtenevämpiä. Siirtyminen kapeammasta leveämpään näyttöön ei toiminut kunnolla. Siinä tuli outoja, hämmentäviä tilanteita.

Kun tilaa tuli enemmän, lisäsin suoraan näkyviä linkkejä. Vain muutama sivu tarvitsee enää Lisää toimintoja/sivuja klikkaamisen. Alla kirjautuneen henkilön saamat linkit:

https://www.sanaristikkofoorumi.net/test/wp-content/uploads/lisavalikot-1.png

Vähän uudempi versio ei-kirjautuneelle henkilölle:

https://www.sanaristikkofoorumi.net/test/wp-content/uploads/IMG_20190917_213544.jpg

Toiminnan täytyy olla johdonmukaista. Pitäisikö käyttää click vai mouseover avaamiseen, on asia, joka on pohdinnan alla.

Toinen asia, mitä pohdin on missä listata sivukohtaiset linkit ja mahdollinen foorumin/säikeen informaation. Otin tietokoneversiosta testisivuston tapaan pois sivukohtaiset linkkilistat sivupalkista. Jätin sivupalkkiin foorumin/aiheen tiedot. Ne eivät ole avautuvassa valikossa.
 
Viimeksi muokattu:
Suomi24:ssä tuotiin esille, että ratkaisu on mainosrahoitteisille sivuille huono.

Jos mainosmielessä ajatellaan, ratkaisuni on mobiililaite pystysuunnassa käytettynä huono. Kun ei ole isoa header-osaa eikä suurimmassa osassa sivuja ole lainkaan footer-osaa, ainoa paikka mainoksille on kommenttien väliin. Mainokset kommenttien välissä olisivat äärimmäisen ärsyttäviä.

Tosin Twitterissä ne eivät hirveästi ole häirinneet. On vähän vaikea kuvitella, miten vaikka se, että joka kuudes viesti olisi mainos, tuntuisi käyttäjästä.

Itse asiassa vaakanäytöllä tilanne olisi mainostuksen suhteen erinomainen sivupalkissa. Siinä lähes koko sivupalkki olisi käytettävissä mainoksille.

Mutta kun kännykän pystynäytössä ei ole järkevää paikkaa mainoksille nyt ollenkaan, ei hyvä mainostamista ajatellen.

Kun tiedon etsimisen kannalta footeria ei tarvita, pelkästään mainosfooter ei oikein toimi. Jos et mitään hyödyllistä löydä footer-osasta, ei sinne pelkkien mainosten takia kannata mennä.

______________

Tämän sivuston rakenteesta. Kun sivupalkki menee tietokoneessa kapella näytöllä loppuun, ainakaan minulla sitä ei tule usein katsottua. Ehkä mobiililla tulisi katsottua enemmän.

Minulla tämän sivuston oikeanpuoleista ja kapealla näytöllä alas menevää sisältöaluetta vastaa minulla pikanavigaatiossa kolmas välilehti.

En tiedä muista, mutta minut tulisi mieluummin katsottua em. sisältöalueen sisältö kiinteästä pikanavigaatiosta kuin sivun lopusta. Tämä nyt on vain oma mielipiteeni.

Minä koen asian niin, että mitä pidemmäksi sivu menee, sitä vähemmän lopussa olevaa tietoa tulee luettua. Mutta en tiedä, tulisiko sama tieto useammin luettua pikanavigoinnin välilehdestäkään. Vaati kaksi klikkiä - avaa valikko ja siirry välilehteen.
 
Viimeksi muokattu:
Kun nyt mietin tämän sivuston kaltaista perinteisesti suunniteltua sivustoa sen *piip piip* ärsyttävä seikka on ihan järjetön siirtymistarve kännykällä.

Jos avaan tietyn säikeen ja haluan katsoa, mitkä ovat yleisimmät muuta aiheet, on *piip* ärstyttävän hankalaa käydä listaus katsomassa tai avata vaivalloisesti uusi välilehti ja palata takaisin samaan välilehteen - se on * piip piip * ärsyttävää.

Kun seuraa tiettyä aihetta, on ihan totaalisen mahdoton millään järkevällä tavalla ja miellyttävällä tavalla kännykällä katsoa, mitkä ovat seuratuimmat aiheet. Ainut miellyttävä tapa olisi avata lisäikkuna.

Jos halutaan, että sivusto oikeasti on näppärä käyttää kännykällä pystytasossa, sivujen pitäisi toimia kolmessa suunnassa.

Näppärintä olisi avata vasemmalle toimintovalikko ja oikealle listaukset, esim. listaus ajankohtaisimmista kysymyksistä, uutisista. Vaatisi ikään kuin karusellinuolet. Ongelma on siinä, että kännykällä ei voi opastaa, mikä olisi sivunuolien tarkoitus, koska :hover ei toimi.

Yritin luoda tämäntyyppisen ratkaisun, mutta en saanut toimimaan. Todennäköinen syy on siinä, että JavaScript-koodaukseen liittyy elementeissä kaksi samaa id-arvoa. Pitäisi koodata niin, että id:n sijasta on luokat, joihin JavaScript liittyy.

Kolmas suunta on avata tärkeä informaatio apuikkunaan eli ylöspäin.

Perinteinen suunnittelu ansaitsee minusta korkeintaan arvosanan 6 1/2-7. Sen korkeampaa arvosanaa en tästä sivustosta voi antaa.

Mainostus pitäisi olla sekä pääaluen lopussa että sivusuunnassa olevien ikkunoiden lopussa.

Yhteen suuntaan toimiva kännykkäsivusto on kyllä minusta perin antiikkinen. Tiedän kyllä, että jotkut vastustavat häiritseviä sivunuolia. Heillä ihan järjetön edestakainen liike on miellyttävämpi vaihtoehto. Ja heidän ehdoillaanhan sivut tehdään.
 
Viimeksi muokattu:
No ainakin Suomi24:ssä tietokoneversio on uudistunut. Anna näistä kehuja:

Suomi24:
  1. valikko on esillä ja Nightuser esityksen mukaan klikattava. Eli tässä suhteessa ainakin Nightuser mielestä omaani parempi
  2. ydintoiminnot yläpalkissa - ei tarvitse hakea niitä mistään
  3. uuden kommentin luonti tulee kivasti kuvioihin mukaan. (XenForo ja oma foorumini ei kaipaa tätä, koska niissä ei ole mahdollisuutta vastata yksittäiseen kommenttiin, vaan riittää vastauspainike yksittäisen kommentin yhteydessä.)
Seuraavista annoin risuja:
  1. Jos olisi vielä nuolet ylös/alas olisi vielä kivempi. Huomattavasti helppokäyttöisempi kuin tämä foorumi.
  2. Hiivatin ärsyttävää kyllä, kun kun tulee kirjautuneillekin kuva-arvoitukset.
  3. Murupolku saisi olla myös sivun alareunassa.
 
Uudessa kokeiluversiossa on siis JavaScript-käsittelyongelma.

Tämän rakenteiset funktiot:

Koodi:
function open1() {
var y = document.getElementById("tab-b");
if (y.style.display === "block") {y.style.display = "none";}
var z = document.getElementById("tab-c");
if (z.style.display === "block") {z.style.display = "none";}
var x = document.getElementById("tab-a");
if (x.style.display === "none") {x.style.display = "block";}}

+
Koodi:
 onclick=" open1();return false;"

pitäisi muuttaa tämän tapaiksiksi:

Koodi:
jQuery(document).ready(function($){

$('.side-opener-left').click(function() {
var x = document.getElementById("tabA");
if (x.style.display === "none") 
{
   x.style.display = "block";
}
else{
   x.style.display = "none";
}
var y = document.getElementById("tabC");
if (y.style.display === "block") 
{
   y.style.display = "none";
}
})

mutta niin, että haetaan getElementByClassName

tämä on vähän mutkikkaampaan, koska W3C:n esimerkeissä mukana on indeksit

Koodi:
document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

jQuery esimerkeissä tuli "each" johonkin väliin (en nyt löydä esimerkkiä)

Jotain siis:

Koodi:
$('.side-opener-left').each.click(function() {

En nyt oikein tiedä, miten muuttaisin avaus/sulkufunktiot id:n sijaan class & JQuery hyödyntäviksi.
 
@Tapio X: Oletko sattunut harkitsemaan, että opettelisit ohjelmoinnin ihan kunnolla? Nähtävästi näiden juttujen kanssa tulee kuitenkin säädettyä mutta ohjelmointitaidossa vaikuttaa olevan aukkoja. Saattaisi siis olla mielekästä panostaa perusteiden rautaiseen hallintaan. Se ei lopulta ole mitenkään mielettömän vaikeaa vaikka työtä varmasti vaatiikin.

jQuery esimerkeissä tuli "each" johonkin väliin (en nyt löydä esimerkkiä)

Jotain siis:

Koodi:
$('.side-opener-left').each.click(function() {

En nyt oikein tiedä, miten muuttaisin avaus/sulkufunktiot id:n sijaan class & JQuery hyödyntäviksi.
jQueryn each on funktio, joten ei sitä näin voi käyttää. Lisäksi se on luullakseni tuossa yhteydessä turha ja homma luultavasti toimii, jos ottaa välistä eachin pois. Helpoiten testaaminen käy varmaan näin:
Koodi:
$('KLIKATTAVIEN ELEMENTTIEN CSS-VALITSIN').click(function() {console.log("klikkaus!"); });
Jos konsoliin tulostuu teksti, tämä menetelmä toimii ja konsoliin tulostamisen voi korvata halutulla toiminnallisuudella. Ilmeisesti haluttu toiminnallisuus on jotain tämäntapaista:
Koodi:
$('.luokanNimi').each(function() {
    var element = this;
    // element-muuttujalla voi nyt tehdä mitä haluaa
});
 
  • Tykkää
Reactions: hmb
Kuten olen tuonut esille, JavaScript-osaamiseni ei ole kovin kehuttava.

Eikö pelkkä each aiheuta automaattisen tekemisen?

$('KLIKATTAVIEN ELEMENTTIEN CSS-VALITSIN').click(function() - tyyppisen toiminnallisuuden sain aikaan, mutta siinä kohde oli id eikä class. Tiedän, että 'KLIKATTAVIEN ELEMENTTIEN CSS-VALITSIN' voi olla joko luokka tai id kun laittaa eteen joko pisteen tai #.

Id saa olla vain yksi, mutta samaa luokkaa käyttäviä elementtejä voi olla monta. Silmukalla voisi kai käydä asiaa lävitse

Jos kohdekohtia on kaksi, voi käyttää indeksejä. Alla oleva toimi:

Koodi:
$('.topic-info').click(function() {
var x0 = document.getElementsByClassName("infoText")[0];
if (x0.style.display === "none") {x0.style.display = "block";}
else{x0.style.display = "none";}
var x1 = document.getElementsByClassName("infoText")[1];
if (x1.style.display === "none") {x1.style.display = "block";}
else{x1.style.display = "none";}})

______________

Huom. Laitan tiivistä koodia, jotta tiedostojen koko pysyisi inhimillisenä. Tuossa vähän erottelin, mutta en kovin paljon. En enempää tuota ruvennut muotoilemaan:
______________

Ajattelin, että each loisi silmukan ja sitä voisi käyttää click kanssa, jolloin saisi monen kohteen, mutta niin ei olekaan.

Ideassani täytynee joko käyttää indeksejä tai luoda silmukka.

Se, että JavaScriptillä voi luoda toiminnallisuutta CSS:n tapaan, on kyllä kätevää. En ole ennen omaa projektia koskaan tullut käyttäneeksi tätä ominaisuutta. Onhan CSS-tyylinen ohjelmoitavuus joustavaa.

Jos kiinnostaa, keskeneräinen toteutus mobiililaitteille pystynäytölle. Toiminnallisuudet ovat kunnossa, mutta CSS:n määrittely on keskeneräinen.

Alla idea kuvakaappauksena:
https://www.sanaristikkofoorumi.net/test/wp-content/uploads/IMG_20190919_214506.jpg

Vasen keskinuoli avaa toimintavalikon ja oikea aihevalikon. Vaakasuuntaisia listauksia voi luoda enemmänkin, jos laittaa niille apuvalikon/välilehtiä. Toki nyt kaikki nuo apuvalikot pitää ladata aina sivulle, mikä tuo lisäkoodia. Se tuo käytännön rajoitteen.

Mutta olisihan tuo nyt sata kertaa järkevämpää kuin siirtyillä aihelistaukseen ja palata siihen takaisin tai vaihdella välilehtien välillä.

Mutta enpä pysty laajemmin vaikuttamaan mobiilisivujen suunnittelun idooottimaisuuksiin. Edestakainen pompottelu tai rullailu on minusta vaan niin totaalisen idioottimaista.

Tosin ehkä taas saan kuraa niskaani noista sivunuolistakin. On se vaan niin totaalisen turhauttavaa, kun sivut pitäisi suunnittella totaalisen idioottimaisesti.
 
Viimeksi muokattu:
No ainakin Suomi24:ssä tietokoneversio on uudistunut. Anna näistä kehuja:

Suomi24:
  1. valikko on esillä ja Nightuser esityksen mukaan klikattava. Eli tässä suhteessa ainakin Nightuser mielestä omaani parempi
  2. ydintoiminnot yläpalkissa - ei tarvitse hakea niitä mistään
  3. uuden kommentin luonti tulee kivasti kuvioihin mukaan. (XenForo ja oma foorumini ei kaipaa tätä, koska niissä ei ole mahdollisuutta vastata yksittäiseen kommenttiin, vaan riittää vastauspainike yksittäisen kommentin yhteydessä.)
Seuraavista annoin risuja:
  1. Jos olisi vielä nuolet ylös/alas olisi vielä kivempi. Huomattavasti helppokäyttöisempi kuin tämä foorumi.
  2. Hiivatin ärsyttävää kyllä, kun kun tulee kirjautuneillekin kuva-arvoitukset.
  3. Murupolku saisi olla myös sivun alareunassa.
Kävin nyt katsomassa tuota Suomi24 sivustoa kerta nimeni mainitsit. Onhan tuo selkeästi parempi että "Valikko" aukeaa pelkästään klikkaamalla jos sitä haluaa edes avata.

Mitä tulee muuten itse Suomi24 sivustoon niin minua ei haittaisi ollenkaan vaikka kaatuisi koko sivusto.
 
Mainitsin itse asiassa vahingossa nimesi. Piti poistaa. Mutta oletukseni mukaan toimit. Kuten jo kerroin, omassani olisi hirveä työ luoda jQueryt, joilla saisi toiminnan logiikan toiseksi.
 
Kuten olen tuonut esille, JavaScript-osaamiseni ei ole kovin kehuttava.
Juu. Kysyntää osaamiselle vaikuttaisi kuitenkin olevan, joten ehdotin osaamisen kehittämistä ennen kaikkea sinun itsesi vuoksi.

Eikö pelkkä each aiheuta automaattisen tekemisen?
En nyt ihan ymmärrä kysymystä, mikä luullakseni kertoo enemmänkin siitä, ettet ihan ymmärrä, mitä funktio tarkoittaa ohjelmoinnissa...? Joka tapauksessa jQueryn each on tosiaan funktio, ja funktio ei tee yhtikäs mitään ilman, että sitä kutsutaan. Javascriptissä funktiokutsua merkataan suluilla, joiden välissä voi funktiosta riippuen olla parametrejä tai olla olematta niitä. Esittämässäsi yrityksessä käyttää eachiä ei sitä kuitenkaan kutsuta funktion tapaan, sillä siitä puuttuu sulut. Aiemmassa esimerkissäni taas annoin itse asiassa eachille vahingossa väärät parametrit, sillä se olisi kaivannut parametrit index ja element. Tällöin sen käyttö olisi näyttänyt jokseenkin tältä:
Koodi:
$(...).each(function(index, element) { /* koodia */ })

Huom. Laitan tiivistä koodia, jotta tiedostojen koko pysyisi inhimillisenä.
Huono idea mutta toimii, jos tykkää elää vaarallisesti. "Tiivis koodi" tarkoittaa yleensä vaikealukuista ja siten vaikeaa ymmärtää ja virhealtista. Koodin tiivistämiseen on automaattisia työkaluja juuri siitä syystä, että koko pysyisi inhimillisenä. Tosin rohkenen arvata, että sinun datamäärilläsi tiedostokoon merkitys minkään kannalta on aika olematon.
 
  • Tykkää
Reactions: hmb
Joo, en ymmärtänyt each merkitystä. Jos haluaisin käyttää, pitäisi tutustua. Toistaiseksi olen saanut kaikki haluamani JS:n lopulta toimimaan.

Joka tapauksessa sain funktiot toimimaan halutusti. Yhdessä kohtaa ongelmia. Kun kerran tilaa on, laitoin somekirjautkumisetkin erikseen. Jostakin syystä toisessa kutsussa, ikkunaan ei tulekaan somelinkit. Tosin se saattaa johtua lisäsosasta, jota haetaan toistamiseen samalla id-arvolla.

Minulla näytön vasemman puolen linkki ei aina aukea kerralla. Oikealla ei ongelmia. Ehkä näytön heikkoutta sillä kohtaa ruutua.
 
Varsin tiivis koodi on itse asiassa siksi, että yritän pitää tietueen suhteellisen lyhyitä, ettei rullaamista olisi niin paljon. Kun koodipätkät ovat varsin lyhyitä ja niiden välissä on tyhjää, minun on helpompi hahmottaa tietueen kokonaisrakenne.

jos { + } välissä on lyhyt koodi, ehtoja sisältävän koodin laittaminen yhdelle riville minulle selventää koodia.
Koodi:
if (x.style.display === "none") {x.style.display = "block";}else{x.style.display = "none";}})

________________

Mitä esittämääni ideaan tulee, ideaa voisi soveltaa mm. teatterisivustolla. Kun tutustuu yhteen teatterikappaleeseen, on minusta totaalisen idioottimaista, että jos haluaa tutustua muuhun tarjontaa, joutuu rullailemaan tai pomppaamaan sivun alkuun ja etsimään toisen sivun/avaamaan uuden välilehden ja siirtymään takaisin.

Luettelon voisi avata oikealla olevalla painikkeella.

Vasemmalle voisi avata iframe sisään ostoikkunan. Kun käy ostamassa vain sulkee ikkunan ja sitten jatkaa entistä lukemistaan.

Minusta mobiilisivustoja ei oikeasti olla perinpohjin mietitty. On vain tehty mobiililaitteessa jollakin tavoin toimiva sivusto, mutta itse toiminta on primitiivistä ja idioottimaista. Kun on totuttu primitiiviseen sivustoon, primitiivisyydestä poispääsemiseen on muutosvastarinta.

Primitiivisyydellä tarkoitan nimen omaisesti sitä, että sivusto toimii vain ylös-alas-suunnassa. Tämän sivuston pikanavigointi on pieni askel pois pelkästä ylös-alas-suunnittelusta, mutta toteutettu niin, ettei siitä ole juuri mitään hyötyä.
 
Viimeksi muokattu:
Tosin minulla suurin ongelma taitaa olla ulkoasussa. Tytär piti sivustoa edelleen ysärinä. Värejä pitäisi ainakin korjailla. Niiden suhteen on kyllä hirveän avuton olo.

Kehotti poistamaan otsikoista ikonit. Niiden idea oli vahvistaa ns. leivänmurujen sanomaa eli ollaan tietyn osa-alueen lähtösivulla. Poistin ne käytöstä.

Mobiilissa vaalensin testisivutolla kiinteiden elementin taustan: background-color:rgba(0,0,0,0.05). Nuolet eivät ihan häviä taustaansa, mutta eivät muutu ihan näkymättömiksikään. Mielestäni nyt on varsin hyvä kompromissa näkyvyyden ja piiloutuvuuden kannalta.
 
Viimeksi muokattu:
jos { + } välissä on lyhyt koodi, ehtoja sisältävän koodin laittaminen yhdelle riville minulle selventää koodia.
Koodi:
if (x.style.display === "none") {x.style.display = "block";}else{x.style.display = "none";}})

Voidaan kirjoittaa myös ternary operatorina, muotoon:
Koodi:
x.style.display = (x.style.display === 'none') ? 'block' : 'none';
 

Statistiikka

Viestiketjuista
258 785
Viestejä
4 499 021
Jäsenet
74 283
Uusin jäsen
Maunula

Hinta.fi

Back
Ylös Bottom