Eli pitäisi saada nettisivuille seuraavanlainen toiminto:
sivulla kerrotaan asia tiivistetysti. Tekstin loppuun linkki "lisää tietoa", jota klikkaamalla avautuu edellisen tekstin perään (ja seuraavan osion eteen) lisää tekstiä, esim. lisainfo.htm -tiedostosta tms. Ja vielä linkki "vähemmän tietoa" joka sulkee avatun lisätekstin.
On varmaan aivan perusjuttu, mutta ei meikäläiselle. Aikaa ei ole opetella php-koodausta...
Jos edes oikeat hakusanat olis niin osaisin hakea, mutta ei niin ei...
Kiitos etukäteen vaivannäöstä!
Eli tarkennuksena onko sivulla olemassa yksi pitkä juttu, joka on katkottu esimerkiksi kappaleisiin, joista näytetään hieman alusta? Vai onko olemassa useita juttuja, joista jokaisesta näytetään hiukan alusta?
Ensimmäinen vaihtoehto voisi olla seuraavanlainen. Tuota kannattaa kyllä varmaan hiukan korjailla, mutta idea ehkä selvinnee kuitenkin.
<?php $raaka = file_get_contents("juttu.txt"); $kappaleet = explode("\r\n\r\n", $raaka); if (isset($_GET['kpl'])) { echo"<p>" . $kappaleet[$_GET['kpl']] . "</p>"; } for ($i = 0; $i < count($kappaleet); ++$i) { echo "<p>" . substr($kappaleet[$i], 0, 10) . "<a href=\"?kpl={$i}\">lue lisää</a></p>"; } ?>
PHP:llä tuo onnistuu tähän tapaan:
// Sivun osoite sekä sama GET-parametrilla lisaa=1. $osoite = "asia.php"; $osoite_lisaa = "asia.php?lisaa=1"; // Tiedosto, josta lisätieto luetaan $lisatieto = "lisatieto.htm"; // Tarkistetaan, onko parametri annettu, ja tulostetaan tieto sen mukaan. if (isset($_GET["lisaa"])) { printf('<p><a href="%s">Vähemmän tietoa</a></p>', htmlspecialchars($osoite)); printf('<div class="lisatieto">%s</div>', file_get_contents($lisatieto)); } else { printf('<p><a href="%s">Lisää tietoa</a></p>', htmlspecialchars($osoite_lisaa)); }
Ajattelin että kyseessä olisi kuitenkin html+javascript. No tiedä häntä, tässä kuitenkin tällainen:
<div id="something">
Tämä näkyy jo alkuunsa!
<script type="text/javascript">
function EnableView(div_id)
{
var hidden_element = document.getElementById(div_id);
hidden_element.style.display="block";
}
function DisableView(div_id)
{
var hidden_element = document.getElementById(div_id);
hidden_element.style.display="none";
}
</script>
<!--EnableView parametrina "toggle" divin id-->
<button type="button" onclick="EnableView('hiddenInfo');">Lisätietoja</button>
<!--tämä divi on piilotettu alussa-->
<div id="hiddenInfo" style="display:none;">
<!-- inputtia tai tekstiä tai jotain -->
tänne lisää tietoa
<!--DisableView parametrina "toggle" divin id-->
<button type="button" onclick="DisableView('hiddenInfo');" >Vähemmän tekstiä</button>
</div>
</div>Kiitos nopeista vastauksista. Täytyypi kokeilla noita kunhan kerkiää.
No niin tulipa kokeiltua noita. XYZ:n javascript miellytti toiminnaltaan eniten :D
Sivuilla useampia kätkettäviä juttuja, joten kokeilin hieman omaa yritys/erehdys/yritä uudelleen/ei toimi mikään -metodia... Php:llä en saanut ollenkaan toimimaan: avaa kaikki kerralla ja pomppaa sivun alkuun (lataa "uuden" sivun), jolloin kävijä hukkaa kohdan jossa oli.
Javascriptilla sain toimimaan kun muokkasin div id osiot. Koitin saada id:n vaihdettua class:ksi, jotta ei tarvitsisi css:ään laittaa aina uutta #id, muttei onnistunut.
Voihan sinne css:ään tietysti laittaa valmiiksi id:t vaikka kymmenelle div:lle, mutta kuitenkin...
Flatologi kirjoitti:
Koitin saada id:n vaihdettua class:ksi, jotta ei tarvitsisi css:ään laittaa aina uutta #id, muttei onnistunut.
Voihan sinne css:ään tietysti laittaa valmiiksi id:t vaikka kymmenelle div:lle, mutta kuitenkin...
Mikset voi antaa elementille molempia, eli id:n jota käytettään Enable- ja DisableView -funktioiden kanssa, sekä class:in jolle määrittelet tyylit.
Tässä on toimiva esimerkki, jossa lisätietoja voi olla monta. Esimerkki käyttää Prototype-kirjastoa.
<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Piilotettava lisätieto JavaScriptilla</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/prototype/1.6/prototype.js"></script>
<script type="text/javascript">
// Tämä funktio muuttaa napin tekstin ja divin näkyvyyden halutuksi.
function vaihda(nappi, div, nayta) {
// Jos nayta on null, vaihdetaan tila vastakkaiseksi.
if (nayta === null) {
nayta = !div.visible();
}
if (nayta) {
nappi.update("Piilota lisätiedot");
div.show();
} else {
nappi.update("Lisää...");
div.hide();
}
}
// Sivun latautuessa laitetaan JS-asiat paikoilleen.
Event.observe(window, "dom:loaded", function() {
// Etsitään kaikki lisätiedot.
$$("div.lisatieto").each(function(div) {
// Luodaan nappi ja laitetaan se ennen lisätietoa.
var nappi = new Element("button");
div.insert({"before": nappi});
// Kun nappia painetaan, vaihdetaan näkyvyys vastakkaiseksi.
nappi.observe("click", function(e) {
e.stop();
vaihda(nappi, div, null);
});
// Aluksi laitetaan lisätiedot piiloon.
vaihda(nappi, div, false);
});
});
</script>
<style type="text/css">
/* <![CDATA[ <!-- */
div.juttu, div.lisatieto {
border: 1px dashed black;
margin: 0.5em;
padding: 0.5em;
}
/* --> ]]> */
</style>
</head>
<body>
<p>Tällä sivulla on kaksi juttua, joista ensimmäisessä on yksi lisätietolaatikko ja toisessa kaksi. Lisätietojen yläpuolelle laitetaan JavaScriptilla napit, joista tiedon saa näkyville ja piiloon.</p>
<p>Esimerkki käyttää <a href="http://www.prototypejs.org/">Prototype-kirjastoa</a>.</p>
<div class="juttu">
<p>Juttu alkaa niin, että siinä on alku, jossa kerrotaan jotain hurjan tärkeää.</p>
<div class="lisatieto">
<p>Myöhemmin jutussa on jotain muuta. Sitä ei tarvitse aluksi näyttää.</p>
</div>
</div>
<div class="juttu">
<p>Tämä on jännä juttu: tässä on monta lisätietoa.</p>
<p>Ensimmäinen lisätieto on lyhyt.</p>
<div class="lisatieto"><p>On se!</p></div>
<p>Toinen lisätieto on pidempi.</p>
<div class="lisatieto"><p>(Ihan vähän vain.)</p></div>
</div>
</body>
</html>Aihe on jo aika vanha, joten et voi enää vastata siihen.