HTML:n muotoilu dynaamisesti CSS:llä

tee · Viesti Kirjoittaja **tee** » 4.2.2010 klo 19.44

Miten muutan HTML-sivulla CSS-tyylin arvoja painikkella?

Ilmeisesti JavaScript ja onClick-in käynnistämä functio?

Vaiko PHP ja formin potkaisema muutos?

aritko · Viesti Kirjoittaja **aritko** » 4.2.2010 klo 20.04

Jquery hoitaa homman helposti http://www.jquery.com.

Koodi: Valitse kaikki

<script type="text/javascript">
$(document).ready(function() {
  $("button").click(function() {
     $(".boxi").css("background-color","yellow");
  });
});
</script>
<div class="boxi" style="width:50px; height:50px;"></div>
<button>Muuta boxi keltaiseksi</button>

Muista tietysti liittää jquery.js ensin.

Käy lukee lisää tuolta jquery sivuilta

BlueTide · Viesti Kirjoittaja **BlueTide** » 4.2.2010 klo 20.05

Molemmat toimii. Riippuu mitä, miksi ja kelle teet. Jos on kyse vaan demoilusta voi kantsia kattoa Safarin animaatio tukeakin.

Sabbath · Viesti Kirjoittaja **Sabbath** » 4.2.2010 klo 20.11

Koodi: Valitse kaikki

<?php
if ( empty($_GET['color']) )
	{
		$color = "black";
	}
	else
	{
		$color = $_GET['color'];
	}
?>
<html>
<head>
<style type="text/css">
h1
{
	color:<?php print $color; ?>;
}
</style>
</head>

<body>

<h1>Hieno sivu</h1>

<a href="color.php?color=blue">Sininen</a> <a href="color.php?color=black">Musta</a>
</body>
</html>

Pikainen säätö PHP:llä mutta perusidea selviää, on toki muitakin tapoja. Kuten jo sanottu.. Riippuu monesta, miten se kannattaa toteuttaa.

tee · Viesti Kirjoittaja **tee** » 4.2.2010 klo 20.18

Kiitos vastauksista.

Tarkennan ongelmaa.

HTML:
<p class="fi">on kova juttu</p>
<p class="en">is hard thing</p>

CSS:
.fi { display: none;}
.en { display: inherit;}

Jos voisin editoida suoraan tyylimäärittelyjä, niin koko sivuston kaikki tekstit vaihtuisivat kielestä toiseen.

Kyse on siis "suomeksi/in English" napista.

Macco · Viesti Kirjoittaja **Macco** » 4.2.2010 klo 20.27

Jos php käy, niin itse tekisin tuon ennemminkin näin:

Koodi: Valitse kaikki

if ($lang == "fi") { 
echo '<h1>otsikko</h1><p>jne</p>';
 }

if ($lang == "en") { 
echo '<h1>headline</h1><p>etc</p>';
 }

Ja sitten kaikkiin linkkeihin URL:n jatkoksi esim. &lang=fi.

aritko · Viesti Kirjoittaja **aritko** » 4.2.2010 klo 20.30

Esim näin:

Koodi: Valitse kaikki

<script type="text/javascript">
    $(document).ready(function() {
       // Aloitetaan sillä että piilotetaan kaikki josta löytyy class="en"
       $(".en").hide();     
      // Kun klikataan kielen valintaa
      $("a.kieli").click(function() {
         // piilotetaan kaikki tekstit
         $(".text").hide();
          // mikä kieli kyseessä
         var kieli = $(this).attr("name");
         // näytetään haluttu kieli
         $("."+kieli).show();
      });
    });
</script>
<a href="#" class="kieli" name="fi">Suomeksi</a><a href="#" class="kieli" name="en">in english</a>
<p class="fi text">on kova juttu</p>
<p class="en text">is hard thing</p>

Tässä yksi tapa.

Itse kyllä laittaisin tekstit PHP arrayhin ja jakaisin sieltä halutun kielen. Ei tarvitsis tehdä kaikki elementtejä tuplana.

EDIT: typo

Aaaron · Viesti Kirjoittaja **Aaaron** » 6.2.2010 klo 18.24

Sabbath kirjoitti:
Koodi: Valitse kaikki
<?php
if ( empty($_GET['color']) )
	{
		$color = "black";
	}
	else
	{
		$color = $_GET['color'];
	}
?>
<html>
<head>
<style type="text/css">
h1
{
	color:<?php print $color; ?>;
}
</style>
</head>

<body>

<h1>Hieno sivu</h1>

<a href="color.php?color=blue">Sininen</a> <a href="color.php?color=black">Musta</a>
</body>
</html>
Pikainen säätö PHP:llä mutta perusidea selviää, on toki muitakin tapoja. Kuten jo sanottu.. Riippuu monesta, miten se kannattaa toteuttaa.

Ehkä kannattaa siivota se inputti, ettei saitille ilmaannu ylimääräisiä iframeja tai skriptejä.

tee · Viesti Kirjoittaja **tee** » 14.2.2010 klo 12.25

Linkkiin upotettu php-muuttujan arvottaminen näyttää siistiltä.

En saa sitä vaan toimimaan.
Ilmeisesti teen jotain väärin.

Ainoa tapa, jolla olen saanut painikkeeseen liitetyn muuttujaan sijoittamisen toimimaan on form.

Koodi: Valitse kaikki

<FORM class="en" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
            <input name="fi" type="hidden" value="inherit"/>
            <input name="en" type="hidden" value="none"/>
            <input class="painike" type="submit" value="suomeksi" />
</FORM>
<FORM class="fi" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
            <input name="fi" type="hidden" value="none"/>
            <input name="en" type="hidden" value="inherit"/>
            <input class="painike" type="submit" value="in English" />
</FORM>

Tapa on toimiva, muttei niin siisti, kuin esimerkissäsi. Minulla on siis kaksi luokkaa "en" ja "fi", joista vuoron perään toinen näkyy ja toinen on piilossa.

Koodi: Valitse kaikki

<style type="text/css">
<!--
  .fi {
     display:<?php print $fi;
  ?>;
  }
  .en {
    display: <?php print $en;
  ?>;
  }
-->
</style>

nobu178 · Viesti Kirjoittaja **nobu178** » 15.2.2010 klo 10.36

Kuten on jo edellä esitetty, on varmaan monta tapaa toteuttaa sama juttu. Jos JavaScript kelpaa, voisit kokeilla alla olevaa. Oletuksena on, että sivu on kirjoitettu xhtml:llä ja CSS ja JavaScript on kirjoitettu ulkoisiin tiedostoihin. JavaScriptin voisi lyhentää huomattavasti, mutta tässä noin kirjoitettuna on ehkä helpompi nähdä.

HTML:

Koodi: Valitse kaikki

<div><spanid="suomi">suomeksi</span> / <span id="englanti">in English</span></div>
<p class="fi">suomi</p>
<p class="en">english</p>
<p class="fi">suomi</p>
<p class="en">english</p>

CSS:

Koodi: Valitse kaikki

.fi { display: none;}
.en { display: inherit;}

JavaScript:

Koodi: Valitse kaikki

window.onload = function(){
	document.getElementById("suomi").setAttribute("onclick", "kielenvaihto('fi', 'en')");
	document.getElementById("englanti").setAttribute("onclick", "kielenvaihto('en', 'fi')");
}

function kielenvaihto(lang1, lang2){
	var tagit = document.getElementsByTagName('p');
	for (nro=0; nro < tagit.length; nro++){
		if(tagit[nro].getAttribute('class') == lang1){
			tagit[nro].style.display = 'inherit';
		}else if(tagit[nro].getAttribute('class') == lang2){
			tagit[nro].style.display = 'none';
		}
	}
}

Lisäys. Vanhoissa IE:ssä ( 6 ja 7) tämä ei toimi. Minimivaatimus on siis IE:n osalta 8. Koodi voisi toimia myös IE 6:ssa ja 7:ssä, jos pätkä "getAttribute('class')" muutetaan muotoon "getAttribute('className')". En ole varma enkä itse ehdi kokeilla.

Lisäys 2. Jos html:ssä tekstiä on paljon (esim. tiedoston koko on megatavun luokkaa), toi JavaScript joko ei toimi tai toimii niin hitaasti, että kannattaa käyttää muita keinoja.

EDIT. Koska "onclick" HTML:ssä on aiheuttanut hirmuisen metelin, nyt kahvitauolla vaihdoinpa siihen liittyvät jutut toisiin. JavaScriptin voisi vielä pikkasen lyhentää, mutta jätänpä sen tuollaiseksi niin, ettei juttu kokonaan muutu.

Perduel · Viesti Kirjoittaja **Perduel** » 15.2.2010 klo 21.37

On kyllä niin monella tasolla väärin tehdä tuollainen asia JavaScript + CSS kombolla, että ihan suosiolla katselisin PHP:n ja sen tarjoamien tapojen perään.
Entä jos käyttäjän selaimessa ei ole tukea JavaScriptille (ts. se on siis käytännössä pois päältä)?
Meinasitko jokaikiselle kielelle tehdä jokaikisen tekstielementin HTML:ään? Se on typerää ja väärin.
Jne. Jne.

Ja älkää nyt mitään onclick-attribuutteja ehdotelko edes JavaScript-ratkaisuissa. Ei niin saa tehdä, sekin on typerää ja väärin. Ensimmäisessä vastauksessa se oli tehty oikein(tm).

edit. Ja ei PHP-ratkaisuissakaan mitään attribuutteja URLiin. Se kielivalinta työnnetään sessioon tai kekseihin tai jonnekin vastaavaan paikkaan. URLien pitää olla kauniita. Rumat URLit on typeriä ja väärin.

nobu178 · Viesti Kirjoittaja **nobu178** » 15.2.2010 klo 22.13

Perduel kirjoitti:On kyllä niin monella tasolla väärin tehdä tuollainen asia JavaScript + CSS kombolla, että ihan suosiolla katselisin PHP:n ja sen tarjoamien tapojen perään.
Entä jos käyttäjän selaimessa ei ole tukea JavaScriptille (ts. se on siis käytännössä pois päältä)?
Meinasitko jokaikiselle kielelle tehdä jokaikisen tekstielementin HTML:ään? Se on typerää ja väärin.
Jne. Jne.

Ja älkää nyt mitään onclick-attribuutteja ehdotelko edes JavaScript-ratkaisuissa. Ei niin saa tehdä, sekin on typerää ja väärin. Ensimmäisessä vastauksessa se oli tehty oikein(tm).

Kuulostaa viime vuosituhannella kuullulta väitteeltä. Ja ilmeisesti sinulla on lukutaidossasi parantamisen varaa. Kirjoitin: " Jos JavaScript kelpaa". En ole edes väittänyt, että edellisissä viesteissä esiteyissä keinoissa olisi mitään vikaa, vaan yhtenä vaihtoehtona tuon esitin, koska noin tekemällä HTML:ään ja CSS:ään ei tarvitse kajota. Ymmärsin niin, että ketjunaloittaja pyrki juuri sellaiseen. Selitäs vähän tarkemmin, mitä oikein tarkoitat, kun sanot "monella tasolla väärin". En tietenkään tarvitse sinun omia mielipiteitäsi, vaan anna vaikapa kolmen vuoden sisällä jonkun ison tahon (Googlen tms.) netissä antamia suosituksia. Mielelläni tutustun sellaisiin

Lisäys. Niin unohdin kysyä sinulta, Perduel, sinä siis olet valmis haukkumaan Googleakin, kun se ei ota huomioon käyttäjiä, joilla JavaScript on pois päältä? Kai olet tehnyt Goolelle valituksen siitä? Mitä ne vastasivat? Kerros minullekin!

morbusg · Viesti Kirjoittaja **morbusg** » 15.2.2010 klo 22.56

nobu178 kirjoitti:
Perduel kirjoitti:On kyllä niin monella tasolla väärin tehdä tuollainen asia JavaScript + CSS kombolla, että ihan suosiolla katselisin PHP:n ja sen tarjoamien tapojen perään.
Entä jos käyttäjän selaimessa ei ole tukea JavaScriptille (ts. se on siis käytännössä pois päältä)?
Meinasitko jokaikiselle kielelle tehdä jokaikisen tekstielementin HTML:ään? Se on typerää ja väärin.
Jne. Jne.

Ja älkää nyt mitään onclick-attribuutteja ehdotelko edes JavaScript-ratkaisuissa. Ei niin saa tehdä, sekin on typerää ja väärin. Ensimmäisessä vastauksessa se oli tehty oikein(tm).
Kuulostaa viime vuosituhannella kuullulta väitteeltä. Ja ilmeisesti sinulla on lukutaidossasi parantamisen varaa. Kirjoitin: " Jos JavaScript kelpaa". En ole edes väittänyt, että edellisissä viesteissä esiteyissä keinoissa olisi mitään vikaa, vaan yhtenä vaihtoehtona tuon esitin, koska noin tekemällä HTML:ään ja CSS:ään ei tarvitse kajota. Ymmärsin niin, että ketjunaloittaja pyrki juuri sellaiseen. Selitäs vähän tarkemmin, mitä oikein tarkoitat, kun sanot "monella tasolla väärin". En tietenkään tarvitse sinun omia mielipiteitäsi, vaan anna vaikapa kolmen vuoden sisällä jonkun ison tahon (Googlen tms.) netissä antamia suosituksia. Mielelläni tutustun sellaisiin

Lisäys. Niin unohdin kysyä sinulta, Perduel, sinä siis olet valmis haukkumaan Googleakin, kun se ei ota huomioon käyttäjiä, joilla JavaScript on pois päältä? Kai olet tehnyt Goolelle valituksen siitä? Mitä ne vastasivat? Kerros minullekin!

Vaikkei tässä minulta kysyttykkään niin olen kyllä Perduelin kanssa samaa mieltä ja yritän tässä vähän selventää että miksi.

Eli kaksi kultaista sääntöä:

• Separate content from presentation: eli erota sisältö ja ulkoasu (html <-> css), eli inline css on ei-ei
• Separate content from functionality: eli erota sisältö ja toiminallisuus (html <-> js), eli inline js on ei-ei

(Mm. täällä syventävämmin. Sieltä tosin puuttuu yksi tärkeä pointti: saavutettava tarkoittaa kaikille saavutettavaa; esim. näkövammaiset ovat sellainen ryhmä joka jostain syystä aina unohdetaan!)

Kumpikaan ei ole viime vuosituhannen väitteitä (MUOKS: paitsi ensimmäinen nyt kun tarkemmin ajattelee. Table-tageillä ulkoasun luominen oli. Niin ja vilkkuva teksti

), ja ihan perusteltuja saavutettavuuden, semanttisuuden, ja käytettävyyden kannalta.
Se, että joku iso firma ei ole vaivautunut tekemään "graceful degradation/progressive enhancement"-sivuja, ei tarkoita sitä että se olisi oikein.

Se minua tosin häiritsee että aina tyrkytetään tuota PHP:ta joka paikkaan. Melkein mikä vaan server-side kielihän tuohon hommaan istuu (tai vaikka apachen content negotiation, katso /etc/apache2/extra/http-languages.conf).

wec · Viesti Kirjoittaja **wec** » 15.2.2010 klo 23.26

nobu178 kirjoitti:
Perduel kirjoitti:Ja älkää nyt mitään onclick-attribuutteja ehdotelko edes JavaScript-ratkaisuissa. Ei niin saa tehdä, sekin on typerää ja väärin. Ensimmäisessä vastauksessa se oli tehty oikein(tm).
Kuulostaa viime vuosituhannella kuullulta väitteeltä.

Olen kyllä samaa mieltä. Javascript on nykyisin melko pakollinen nettiselailussa ja kaikki selaimet sitä myös tukevat. Purkkavirityksiä kannattaa tietenkin välttää, mutta kyllä javascriptin etuja kannattaa hyödyntää silloin kun se on järkevää. Jos PHP:tä ei tarvita ja tehdään vain staattinen webbisivu, niin aivan hyvin javascriptiä voi käyttää tarvittaessa.

Perdue kirjoitti:Entä jos käyttäjän selaimessa ei ole tukea JavaScriptille (ts. se on siis käytännössä pois päältä)?

Mielestäni käyttäjä saa ihan suosiolla laittaa sen javascriptin päälle. Javascriptillä saadaan toteutettua moderneja käyttöliittymiä web-sovelluksiinkin ja se voi nykyisin olla aivan hyvin vaatimus (ja usein onkin), varsinkin kun javascript on selaimiin sisäänrakennettu (toisin kuin vaikkapa Flash).

Toki onclick-attribuutti voidaan toteuttaa javascriptillä aivan samaan tapaan ulkoisellakin js-tiedostolla, mutta on tilanteita joista tuosta ei ole oikeastaan mitään etua.

Perduel kirjoitti:Ja ei PHP-ratkaisuissakaan mitään attribuutteja URLiin. Se kielivalinta työnnetään sessioon tai kekseihin tai jonnekin vastaavaan paikkaan. URLien pitää olla kauniita. Rumat URLit on typeriä ja väärin.

Taas olen jokseenkin eri mieltä. Lyhyet urlit ovat mukavia, mutta kyllä niitä attribuutteja voi edelleenkin laittaa sinne urliin esimerkiksi kirjanmerkkejä varten. Jos esimerkiksi kielivalinta tallennetaan sessioon, niin samassa selaimessa ei voi olla yhtä aikaa auki useampaa saman web-sovelluksen sivua joissa selataan eri kielillä vuorotellen. Sessio myös kuolee jossain vaiheessa, joten joissain tilanteissa voi olla hyödyllistä jos kielivalinnan saa tallennettua myös kirjanmerkkeihin seuraavaa selauskertaa varten. Tiedon tallentaminen sessioon on järkevää oikeastaan silloin jos web-sovellus vaatii rekisteröitymisen ja sisäänkirjautumisen, sillä tällöin sessioon tallennettavat tiedot voidaan tallentaa tarvittaessa myös tietokantaan. Jos sovellus ei vaadi sisäänkirjautumista, ei session käyttäminenkään ole useinkaan järkevää. Jos käyttäjän ei tällaisessa tilanteessa tarvitse selailla sivustoa eri kielillä samaan aikaan, niin cookiet toimivat tietenkin ihan hyvin.

nobu178 · Viesti Kirjoittaja **nobu178** » 16.2.2010 klo 0.17

wec ehti vastata JavaScriptin käytön osalta

, joten itse tyydyn vastaamaan morbusgin juttuun.

morbusg kirjoitti:Vaikkei tässä minulta kysyttykkään niin olen kyllä Perduelin kanssa samaa mieltä ja yritän tässä vähän selventää että miksi.

Eli kaksi kultaista sääntöä:
• Separate content from presentation: eli erota sisältö ja ulkoasu (html <-> css), eli in-line css on ei-ei
• Separate content from functionality: eli erota sisältö ja toiminallisuus (html <-> js), eli in-line js on ei-ei

Toistan vaan samaa. Mitä tossa sanot, pidin sitä itsestäänselvyytenä, josta lähdetään liikkeelle. Siksi kirjoitin: "Jos JavaScript kelpaa". Periaate on periaate ja ratkaisu(ehdotus) on asia erikseen. Tuliko nyt selväksi?

morbusg kirjoitti:Se, että joku iso firma ei ole vaivautunut tekemään "graceful degradation/progressive enhancement"-sivuja, ei tarkoita sitä että se olisi oikein.

En ihan tuota tarkoittanut, mutta olkoon. En jaksa kirjoittaa enempää.

morbusg kirjoitti:Se minua tosin häiritsee että aina tyrkytetään tuota PHP:ta joka paikkaan. Melkein mikä vaan server-side kielihän tuohon hommaan istuu (tai vaikka apachen content negotiation, katso /etc/apache2/extra/http-languages.conf).

Mielestäni on järkevää käyttää (ainakin alkuun) sitä kieltä, mitä moni käyttää; apuahan saa paljon ja olemassa olevat ratkaisut ovat useimmiten valmiiksi hiottuja. Hompussahan nähtävästi PHP:tä suositaan ja mikäs siinä. Korostan, että tämä on oma mielipiteeni.

morbusg · Viesti Kirjoittaja **morbusg** » 16.2.2010 klo 0.34

nobu178 kirjoitti:wec ehti vastata JavaScriptin käytön osalta , joten itse tyydyn vastaamaan morbusgin juttuun.

Juu siis oma vastaukseni ei ollut vastine (vain ja ainoastaan) sinulle, vaan ylipäätään mielipideyhtyminen joidenkin ketjussa ehdotettujen vaihtoehtojen kritiikkiin. Perduel:han ei puhunut javascriptin kokonaan käyttämättä jättämisestä, vaan sen liittämisestä itse html-koodissa tagien event handlereihin (inline js).

nobu178 · Viesti Kirjoittaja **nobu178** » 16.2.2010 klo 1.04

morbusg kirjoitti: Juu siis oma vastaukseni ei ollut vastine (vain ja ainoastaan) sinulle, vaan ylipäätään mielipideyhtyminen joidenkin ketjussa ehdotettujen vaihtoehtojen kritiikkiin. Perduel:han ei puhunut javascriptin kokonaan käyttämättä jättämisestä, vaan sen liittämisestä itse html-koodissa tagien event handlereihin (inline js).

Tavallaan ymmärrän, mitä tuossa edellisessä viestissäsi tarkoitit, mutta oma juttuni oli puhdas ehdotus tuohon tilanteeseen ja siksi vastasin noin. En silti edelleenkään ymmärrä, mitä Perduel oikein tarkoittaa seuraavalla:

Ja älkää nyt mitään onclick-attribuutteja ehdotelko edes JavaScript-ratkaisuissa. Ei niin saa tehdä, sekin on typerää ja väärin.

Onko W3schoolin kirjoitukset (esim. tämä) siis ovat ihan puppuja?

morbusg · Viesti Kirjoittaja **morbusg** » 16.2.2010 klo 1.31

nobu178 kirjoitti:En silti edelleenkään ymmärrä, mitä Perduel oikein tarkoittaa seuraavalla:

Ja älkää nyt mitään onclick-attribuutteja ehdotelko edes JavaScript-ratkaisuissa. Ei niin saa tehdä, sekin on typerää ja väärin.
Onko W3schoolin kirjoitukset (esim. tämä) siis ovat ihan puppuja?

Eihän ne tietenkään puppua ole, se samainen event handlerihän se on johon kiinnitytään mutta ideaalisti itse html-dokumentin ulkopuolelta. Tokihan tämä on melkoista saivartelua jollain yksinkertaisella semi-staattisella yksittäisellä sivulla, mutta mielestäni on tärkeää tiedostaa ne syyt minkä takia niitä suositellaan. Esimerkiksi kehittäjän näkökulmasta jo pelkästään se, että kaikki js-toiminnallisuuteen liittyvä löytyy (esim.) yhdestä tiedostosta helpottaa paljon ylläpitoa ja ymmärrettävyyttä.

Haluaisin tässä vähän pureksia tuota ensimmäistä vastausta koska ensinnäkin se liittyy juurikin tuohon yllä mainittuun, ja toisekseen siksi ettei kukaan muu ole sitä näemmä selittänyt sen kummemmin.

aritko kirjoitti:

Koodi: Valitse kaikki

$(document).ready(function() {
  $("button").click(function() {
     $(".boxi").css("background-color","yellow");
  });
});

1.rivi: määritetään että jotain tehdään kun sivu on ladattu kokonaan.
2.rivi: määritetään että kaikkien "button"-tagien onclick -event handleriksi määritetään seuraava funktio.
3.rivi: funktion sisältö, jossa muutetaan kaikkien .boxi -luokan omaavien elementtien css-tyyliä

JQuery/Prototype/yms. (ja esim. Low Pro, tosin en tiedä miten hyvässä hapessa proggis tänä päivänä on) helpottaa kyllä kummasti "unobtrusive" javascriptin käyttöönotossa.

nobu178 · Viesti Kirjoittaja **nobu178** » 16.2.2010 klo 1.56

morbusg kirjoitti: Eihän ne tietenkään puppua ole, se samainen event handlerihän se on johon kiinnitytään mutta ideaalisti itse html-dokumentin ulkopuolelta. Tokihan tämä on melkoista saivartelua jollain yksinkertaisella semi-staattisella yksittäisellä sivulla, mutta mielestäni on tärkeää tiedostaa ne syyt minkä takia niitä suositellaan. Esimerkiksi kehittäjän näkökulmasta jo pelkästään se, että kaikki js-toiminnallisuuteen liittyvä löytyy (esim.) yhdestä tiedostosta helpottaa paljon ylläpitoa ja ymmärrettävyyttä.

Meinasin jo mennä nukkumaan, mutta ehdit pysäyttää mut

Kysynpä sitten. Enkö olekin sitten kirjoittanut ylhäällä olevan JavaScript-ehdotukseni juuri sillä tavalla, kuten sanot? Sen jo selitin, miksi ehdotin CSS:ään kajoamista JavaScriptillä. Muuten CSS- ja JavaScript-tiedostot ovat erikseen ja HTML on perushtml paitsi, että div-tägissä on Perduelin neuvostoliitonankarasti kieltämä onclick-attribuutti, mutta sehän on W3schoolin esimerkeissäkin. Vai tarkoitatko yhdellä tiedostolla sitä, että JavaScriptin pitää olla HTML-tiedoston head-tägien väliin kirjoitettuna? No, nyt pää ei enää toimi

. Taidan mennä nukkumaan.

Sinnittelen edelleen, kun huomasin yhden homman jääneen tekemättä

Itsekin käytän omissa tekeleissäni Jqueryä (ja varmaan moni muukin sitä käyttää), koska se on erinomainen kaikin puolin. Sehän ei kuitenkaan liity kysymykseeni millään lailla enkä itse kaipaa mitään Jqueryn käyttöohjeita

. Haluan vaan tietää, miksi onclickiä ei saa käyttää (rehellisesti sanottuna tämä kyllä kuulostaa todella naurettavalta väitteeltä), ja millä lailla "oikein" sitä on käytetty W3schoolin esimerkeissä PISTE

morbusg · Viesti Kirjoittaja **morbusg** » 16.2.2010 klo 11.04

Heh. Johan tästä nyt vääntö syntyi. Itse näköjään menin liian aikasin nukkumaan

Koitan nyt olla selvempi ja suoraviivaisempi kuin yöllä punaviinipäissäni.

nobu178 kirjoitti:Kysynpä sitten. Enkö olekin sitten kirjoittanut ylhäällä olevan JavaScript-ehdotukseni juuri sillä tavalla, kuten sanot?

Käytit inline js:ää (<joku_tagi onclick=jotain>) versus samaiseen event handleriin kiinnittymistä html-tiedoston ulkopuolelta (esim. tiedosto.html <- sisältö, toiminta.js <- javascript, tyyli.css <- ulkoasu), eli et.

nobu178 kirjoitti:mutta sehän on W3schoolin esimerkeissäkin.

Se, että esimerkissä esitellään mitä event handlerit on, ei ole indikaatio siitä miten niihin ideaalisti kiinnitytään.

nobu178 kirjoitti:Vai tarkoitatko yhdellä tiedostolla sitä, että JavaScriptin pitää olla HTML-tiedoston head-tägien väliin kirjoitettuna?

Vaikka sekin on melkein hyväksyttävää niin esim. cachetuksen vuoksi erillinen tiedosto on parempi.

nobu178 kirjoitti:Taidan mennä nukkumaan.

Valehtelija

nobu178 kirjoitti:Itsekin käytän omissa tekeleissäni Jqueryä ... Sehän ei kuitenkaan liity kysymykseeni millään lailla

kts. edellä, eli <tagi onlick=jotain> == erillisessä tiedostossa $('tagi').click(jne).

nobu178 kirjoitti:enkä itse kaipaa mitään Jqueryn käyttöohjeita

Pelkäsinkin että saatat tulkita sen niin. Ei ollut niin tarkoitus, vaan ylipäätään kenelle tahansa ketjua lukevalle.

nobu178 kirjoitti:Haluan vaan tietää, miksi onclickiä ei saa käyttää

Juu eli tähänhän linkittelinkin tuolla aikaisemmin (tosin vasta muokkauksen jälkeen).

Hei olikos sulla nobu aiemmin OpenBSD:n logo avattarena?

nobu178 · Viesti Kirjoittaja **nobu178** » 16.2.2010 klo 11.48

Tere

morbusg kirjoitti:Heh. Johan tästä nyt vääntö syntyi. Itse näköjään menin liian aikasin nukkumaan
Koitan nyt olla selvempi ja suoraviivaisempi kuin yöllä punaviinipäissäni.
nobu178 kirjoitti:Kysynpä sitten. Enkö olekin sitten kirjoittanut ylhäällä olevan JavaScript-ehdotukseni juuri sillä tavalla, kuten sanot?
Käytit inline js:ää (<joku_tagi onclick=jotain>) versus samaiseen event handleriin kiinnittymistä html-tiedoston ulkopuolelta (esim. tiedosto.html <- sisältö, toiminta.js <- javascript, tyyli.css <- ulkoasu), eli et.

Joo, tuon inline-jutun myönnän suosiolla, mutten tota linkkiäsi huomannut yöllä.

morbusg kirjoitti:
nobu178 kirjoitti:mutta sehän on W3schoolin esimerkeissäkin.
Se, että esimerkissä esitellään mitä event handlerit on, ei ole indikaatio siitä miten niihin ideaalisti kiinnitytään.

Tällä viittasin Perduelin juttuun.

morbusg kirjoitti:
nobu178 kirjoitti:Vai tarkoitatko yhdellä tiedostolla sitä, että JavaScriptin pitää olla HTML-tiedoston head-tägien väliin kirjoitettuna?
Vaikka sekin on melkein hyväksyttävää niin esim. cachetuksen vuoksi erillinen tiedosto on parempi.

Niin itse aina käytän erillistä tiedostoa niin kuin tuossa ehdotuksessani.

morbusg kirjoitti:
nobu178 kirjoitti:Taidan mennä nukkumaan.
Valehtelija

Vahinkoahan sattuu

morbusg kirjoitti:
nobu178 kirjoitti:Itsekin käytän omissa tekeleissäni Jqueryä ... Sehän ei kuitenkaan liity kysymykseeni millään lailla
kts. edellä, eli <tagi onlick=jotain> == erillisessä tiedostossa $('tagi').click(jne).

Tähän sanon vaan, että asia on niin kuin wec kirjoitti.

morbusg kirjoitti:
nobu178 kirjoitti:enkä itse kaipaa mitään Jqueryn käyttöohjeita
Pelkäsinkin että saatat tulkita sen niin. Ei ollut niin tarkoitus, vaan ylipäätään kenelle tahansa ketjua lukevalle.

Joo, nyt aamulla luettuani ymmärsin kyllä tuon tarkoituksesi, mutta yöllä taisin olla liian väsynyt.

morbusg kirjoitti:
nobu178 kirjoitti:Haluan vaan tietää, miksi onclickiä ei saa käyttää
Juu eli tähänhän linkittelinkin tuolla aikaisemmin (tosin vasta muokkauksen jälkeen).

Joo ymmärrän, mutta itse viittasin Perduelin karuun käskylauseeseen, jota en noteeraa sellaisena.

morbusg kirjoitti:Hei olikos sulla nobu aiemmin OpenBSD:n logo avattarena?

Ei ollut. Pitäisikö hankkia sellainen?

No, kiitti tarkennuksista, nyt on helpottunut olo.

morbusg · Viesti Kirjoittaja **morbusg** » 16.2.2010 klo 12.26

nobu178 kirjoitti:
morbusg kirjoitti:Hei olikos sulla nobu aiemmin OpenBSD:n logo avattarena?
Ei ollut. Pitäisikö hankkia sellainen?

Aaa, ei vaan sekoitin sitten johonkin toiseen.

Perduel · Viesti Kirjoittaja **Perduel** » 18.2.2010 klo 18.06

Sainpa näköjään aikaan hyvän väännön. Pahoittelut siitä.
Osa kuitenkin ihan totaalisesti missasi sen pointin. En minä ole JavaScriptiä ollut kieltämässä (vaikka periaatteessa sen käyttö tämän ketjun tapauksessa olisi kyllä idioottimaista koska palvelimen puolella homma hoituu varmasti). Ja joku kysyi jotain Googlesta ja sen JavaScript-käytöstä... uskokaa tai älkää, Opera-käyttäjänä (Ubuntu, Mac, Win) minulla olisi paljonkin sanottavaa esim. Googlen browser sniffingistä ja muusta paheellisesta toiminnasta. Ehkä se ei kuitenkaan kuulu tähän ketjuun.

Morbusg on tässä ansiokkaasti selittänyt sitä minäkin ajoin takaa. Eihän se onclick-attribuutin käyttö nyt mikään maailman vakavin asia ole, mutta se on vaan turhaa, rumaa ja periaatteellisella tasolla väärin. Miksi tehdä asiat "väärin", huolimattomasti ja aiheuttaa sillä kenties itselleen (tai jolle kulle muulle) vielä jatkossa haittaa?

Sama koskee niitä URLien attribuutteja. Tottakai siellä urlissakin saa attribuutteja olla, jos nyt oikeasti tarvitaan (keksit ja sessiot ovat ihan mahdollinen tapa kiertää niitäkin ongelmia). Ja jos ne attribuutit on pakko laittaa urliin niin sitten ne laitetaan sinne siten että osoite on vaikka muodossa http://osoite.com/blaablaa-423434/en tai http://osoite.com/en/blaablaa-423434. Eikä mikään http://osoite.com/blaablaa.php?language=en&aID=423434. Ei kyse ole urlin pituudesta niinkään, vaan sen kauneudesta. Ei se käyttäjä tee mitään niillä ihmemerkeillä, hasheilla ja attribuuteilla (kunhan juuri bookmarkkaus jne. toimii vaan), joten ne voidaan piilottaa / yrittää saada selväjärkiseen muotoon.

nobu178 · Viesti Kirjoittaja **nobu178** » 18.2.2010 klo 20.58

Perduel kirjoitti:Sainpa näköjään aikaan hyvän väännön. Pahoittelut siitä.
Osa kuitenkin ihan totaalisesti missasi sen pointin. En minä ole JavaScriptiä ollut kieltämässä (vaikka periaatteessa sen käyttö tämän ketjun tapauksessa olisi kyllä idioottimaista koska palvelimen puolella homma hoituu varmasti).

Sori, että minä ilmeisesti missasin pointisi. Mielestäsi siis myös ensimmäinen vastaus tässä ketjussa on idioottimainen (tarkoitan Jqueryn käyttöä)? Oletko edes ajatellut sitä, että kysymys ei ole siitä, mikä on oikein tai korrektein, vaan siitä, että kysyjän toive täytetään?

Perduel kirjoitti:Ja joku kysyi jotain Googlesta ja sen JavaScript-käytöstä... uskokaa tai älkää, Opera-käyttäjänä (Ubuntu, Mac, Win) minulla olisi paljonkin sanottavaa esim. Googlen browser sniffingistä ja muusta paheellisesta toiminnasta. Ehkä se ei kuitenkaan kuulu tähän ketjuun.

Ei mielestäni puhuttu mistään epämääräisestä JavaScript-käytöstä, en minä ainakaan puhunut sellaisesta eikä weckään varmaan. Kysymys on nimenomaan lauseestasi "Entä jos käyttäjän selaimessa ei ole tukea JavaScriptille (ts. se on siis käytännössä pois päältä)?". Oletko oikeasti edelleen tuota mieltä? Google on vain yksi esimerkki, kuten varmaan tajuat. Nettielämäsi taitaa olla hyvin vaikeaa, kun "vääryyksiä" on yllin kyllin. Ja tältä pohjalta purkautumisesi pienestä ehdotuksesta on ymmärrettävää

Perduel kirjoitti:Eihän se onclick-attribuutin käyttö nyt mikään maailman vakavin asia ole, mutta se on vaan turhaa, rumaa ja periaatteellisella tasolla väärin. Miksi tehdä asiat "väärin", huolimattomasti ja aiheuttaa sillä kenties itselleen (tai jolle kulle muulle) vielä jatkossa haittaa?

Minusta tuntui, että toi onclick-juttu on elämäsi tärkeimpiä kysymyksiä, kun kirjoitit - kuin joku kuolemaa tekevä profeetta pahantuloa ennustaessaan: "Ja älkää nyt mitään onclick-attribuutteja ehdotelko edes JavaScript-ratkaisuissa. Ei niin saa tehdä, sekin on typerää ja väärin". Palautuiko nyt mieleesi? onclick-attribuutista tai muustakaan haittaa ei varmaankaan ole, kunhan itse tietää, mitä tekee ja miksi. Jos tarkkoja ollaan, onclick-attribuutin käyttö ei ole missään nimessä "väärin". Muusta en jaksa toistaa, mitä wec on perustellusti kirjoittanut edellä, joten lues hänen vastauksensa uudestaan.

Perduel kirjoitti: Sama koskee niitä URLien attribuutteja. Tottakai siellä urlissakin saa attribuutteja olla, jos nyt oikeasti tarvitaan (keksit ja sessiot ovat ihan mahdollinen tapa kiertää niitäkin ongelmia). Ja jos ne attribuutit on pakko laittaa urliin niin sitten ne laitetaan sinne siten että osoite on vaikka muodossa http://osoite.com/blaablaa-423434/en tai http://osoite.com/en/blaablaa-423434. Eikä mikään http://osoite.com/blaablaa.php?language=en&aID=423434. Ei kyse ole urlin pituudesta niinkään, vaan sen kauneudesta. Ei se käyttäjä tee mitään niillä ihmemerkeillä, hasheilla ja attribuuteilla (kunhan juuri bookmarkkaus jne. toimii vaan), joten ne voidaan piilottaa / yrittää saada selväjärkiseen muotoon.

En vaan ymmärrä sinun tarvettasi esittää tietäjää niin kuin tuossakin. En tarkoita, ettet tietäisi. Varmaan tiedätkin paljon asioita. Silti tapasi esittää asioita niin kuin olisit keksinyt ne ensimmäisenä ihmisenä maapallolla, on hyvin vieras minulle (No, myönnettäköön, että profeettamainen tapasi ilmaista asioita on kieltämättä hauskaa ja huvittavaa

). Luuletko oikeasti, etteivät toiset (esim. tässä ketjussa) tiedä sitä, mitä sinä tiedät? Ei millään pahalla, mutta se on minusta sinun hengessäsi sanottuna "typerää ja väärin"

Jk. Perduel, unohdinpa taas yhden kysymyksen. Pahoittelen, että vaivaan sinua monesti

Sinä olet varmaan rautaisena Opera-käyttäjänä tehnyt ankaria valituksia Operalle? Ei kai tarvitse selittää, miksi kysyn? Unohdas nyt Google, mutta kerros sen sijaan, mitä Opera on vastannut sinulle? Kopioin tänne omat sanasi, ettei sinun tarvitse muistella, mitä olet kirjoittanut:

"On kyllä niin monella tasolla väärin tehdä tuollainen asia JavaScript + CSS kombolla, että ihan suosiolla katselisin PHP:n ja sen tarjoamien tapojen perään".

Mistäköhän johtuu, että Opera vieläkin tekee niin monella tasolla "typerästi" ja "väärin"? Ethän ole jättänyt valituksia tekemättä, ethän?

Voe voe, kauhukseni nyt huomasin, että Applekin tekee "typerästi" ja "väärin". Perduel, sinä varmaan tiesit tästä? Mikset ole kertonut siitä meille? Mitä Apple on vastannut sinulle? Sekin kiinnostaisi minua ja monia muita

HTML:n muotoilu dynaamisesti CSS:llä

HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä

Re: HTML:n muotoilu dynaamisesti CSS:llä