Keskustelu: Nettisivujen teko: Liukuvat elementit

MIB [22.12.2009 21:37:39]

Pystyisinkö ilman XML:ää toteuttamaan tälläisen? Kun elementtiä klikkaa, niin se liukuu esiin (Juuri noin), ja niin edelleen.

Grez [22.12.2009 21:42:36]

Varmasti pystyy. En itse asiassa edes keksi mitä hyötyä juuri XML:stä olisi tuon toteuttamisessa.

Itse käyttäisin tuohon ehkä jQueryä. Sille löytyy muistaakseni valmiita esimerkkejäkin juuri tuollaisesta.

Merri [22.12.2009 23:55:41]

jQuery on tuohon passeli, onnistuu muistaakseni yhdellä rivillä koodia.

Tuolla sivulla on käytetty XML:ää ja XSLT:tä ehkä hivenen ylimääräisesti kikkaillen. XML linkittää XSL-tyylitiedostoon, joka taas sitten prosessoi XML:n pohjalta HTML:ää. Tekeepähän hallaa joillekin lähdekoodin urkkijoille, ja saattaa jollekin kokemattomalle lähdekoodista kiinnostuneelle antaa vau-elämyksen. Oman kokeiluni tein joskus 2003, mutta silloin sitä tuki vasta IE6 (Firefoxin tuki taisi tulla vasta joskus 2005?). Mobiiliselaimet ei taida tukea vieläkään, en tosin ole satavarma kun ei ole pahemmin millä kokeilla.

MIB [23.12.2009 10:42:43]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    #liukuvat {
        width: 100%;
    }

    ul {
        list-style: none;
        margin: 0;
        padding: 5px;
    }


    .drawer-handle {
        margin: 0;
        padding: 5px;
        background-color: #e5e5e5;
    }

    .drawer-handle.open {
        background-color: #4E64A5;
    }
    </style>
    <script src="js/jquery-1.2.1.js" type="text/javascript"></script>

    <script type="text/javascript">
    <!--
    $(document).ready(function () {
      $('.drawer UL:not(:first)').hide();
      $('.drawer-handle').click(function () {
        $('LI.drawer UL:visible').slideUp('slow').prev().removeClass('open');
        $(this).addClass('open').next().slideDown('slow');
      });
    });
    //-->
	</script>
</head>
<body>
    <ul id="liukuvat">
        <li class="drawer">
            <h3 class="drawer-handle open">Liukuva elementti 1</h3>
            <ul>
                <li>Hee</li>
				<li>Haa</li>
				<li>Hoo</li>
            </ul>
        </li>
        <li class="drawer">
            <h3 class="drawer-handle">Liukuva elementti 2</h3>
            <ul>
                <li>Hee</li>
				<li>Haa</li>
				<li>Hoo</li>
			</ul>
        </li>
        <li class="drawer last">
            <h3 class="drawer-handle">Liukuva elementti 3</h3>
            <ul>
                <li>Hee</li>
				<li>Haa</li>
				<li>Hoo</li>
            </ul>
        </li>
    </ul>
</body>
</html>

Tälläisen löysin, ja kyllähän se toimii. Lisäksi tuohon kun saisi sen, että ensimmäinenkin elementti liukuu auki.

netman87 [27.12.2009 11:13:11]

Olisikohan liian lame ratkaisu? =]

Tämä piilottaa drawer ul elementit ensimmäistä lukuunottamatta

$('.drawer UL:not(:first)').hide();

Sen voisi vaihtaa tämmöiseen

Tämä piilottaa kaikki drawer ul elementit ja sitten aukaisee ensimmäisen efektin kera

$('.drawer UL').hide();
$('.drawer UL:first').slideDown('slow');

MIB [29.12.2009 20:03:47]

Kiitos sinulle. =) Tässä tuli mieleen, että miten saisin liutettua elementin oikealta vasemmalle tai toisinpäin? Ajattelin, että jos olisi sivu jolla on kaksi elementtiä vasen ja oikea. Vasemmassa olisi valikko, oikeassa sisältö.

Kun valitsee jonkin linkin, niin jQuery piilottaa oikeanpuoleisen elementin liuttaen oikealle. Kun sivu on kiinni, se odottaisi 0,5 sek. ja liukuisi vasemmalle auki kunnes vasen elementti tulisi vastaan. Sitten kun se olisi kokonaan auki, se näyttäisi sisällön sivulta. Olisiko joku kiltti, ja näyttäisi miten tälläinen voidaan tehdä?

Tässä runko

<html>
	<head>
		<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
		<script src="http://jqueryui.com/latest/ui/effects.core.js"></script>
		<script src="http://jqueryui.com/latest/ui/effects.slide.js"></script>

		<style type="text/css">
			#vasen { float: left; width: 300px; }
			#oikea { margin: 0px; width: 100%; height: 80px; background: green; border: 1px solid black; position: relative; padding: 5px; }
		</style>
		<script type="text/javascript">
		$(document).ready(function() {
			$("#oikea").click(function () {
				$(this).hide("slide", { direction: "right" }, 2000);
				$(this).show("slide", { direction: "right" }, 2000);
			});
		});
		</script>
	</head>
	<body>
		<div id="vasen">Huuhaa</div>
		<div id="oikea">Juu</div>
	</body>
</html>

MIB [29.12.2009 21:05:19]

<html>
	<head>
		<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
		<script src="http://jqueryui.com/latest/ui/effects.core.js"></script>
		<script src="http://jqueryui.com/latest/ui/effects.slide.js"></script>

		<style type="text/css">
			body { margin-right: 0px; }
			#vasen { float: left; width: 300px; background: red; border: 1px solid black; padding: 5px; }
			#oikea { width: 100%; background: green; border: 1px solid black; padding: 5px; }
		</style>
		<script type="text/javascript">
		$(document).ready(function() {
			$("#oikea").click(function () {
				$(this).hide("slide", { direction: "right" }, 2000);
				$(this).show("slide", { direction: "right" }, 2000);
			});
		});
		</script>
	</head>
	<body>
		<div id="vasen">
			<a href="#sivu1">Linkki 1</a><br>
			<a href="#sivu2">Linkki 2</a><br>
			<a href="#sivu3">Linkki 3</a><br>
			<a href="#sivu4">Linkki 4</a>
		</div>
		<div id="oikea">
			Lorem ipsum...<br>
			Lorem ipsum...<br>
			Lorem ipsum...<br>
			Lorem ipsum...
		</div>
	</body>
</html>

Pieni muokkaus. Helppiä pian? =)

netman87 [29.12.2009 21:35:21]

Ei tuota koko koodia tarvitse aina pasteta ja väritys näyttäisi kivalta =] Hyvä jos aikaisemmasta purkasta oli jotain hyötyä.

MIB [29.12.2009 21:37:36]

Ongelmat:

1. En saa tehtyä omaa funktiota tuosta.
2. Miten haen sivun joka on funktion paramenttinä?
3. Miten sisällön oikeasta elementistä voi piilottaa kun suljetaan ja näyttää kun on taas auki?

Auttaisitteko...

MIB [30.12.2009 19:14:14]

Eikö täällä kukaan tiedä?

MIB [30.12.2009 20:17:05]

Kyllä se toimii, mutta tosin kahdella ongelmalla: Tuon hakeva data on UTF-8 kun sivu on ISO-8859-1. Toinen ongelma: Kun sivulle saapuu, tämä vetää etusivun kiinni ja avaa saman uudelleen. Miten vältän että sivulle saapuessa sivua ei suljeta?

MIB [31.12.2009 01:46:15]

Kiitos, mutta miten ääkköset?

Merri [31.12.2009 03:07:53]

Lisäät ennen sivun callbacks.php tulostusta vaikka header('Content-type: text/html; charset=iso-8859-1');

Muoks!
Eikun hetki, kyllähän sen silti pitäisi tulla oikein. No, tässä kohtaa en tunne jQueryä, en ole vielä leikkinyt sisällön hakemisella lennossa. Toisaalta sen UTF-8:n käytössä voi olla ideaa.

MIB [01.01.2010 14:40:51]

Ei auta, sillä jQueryn pätkä vääntää sen joksikin omaksi sötköksi. En ala muuttamaan merkistöä yhden sivun takia - koko sivusto käyttää samaa merkistöä!

MIB [04.01.2010 13:29:35]

No, muutin sitten ne sivut UTF-8 muotoon niin ei tule siinä ongelmia.

Ongelmana on seuraava kohta:

if(window.location.hash) {
	$.get("include.php", query, function(data) {
		$("#oikea").hide("slide", { direction: "right" }, 2000);
		$("#oikea").show("slide", { direction: "right" }, 2000);
		$("#oikea").html(data);
	});
}

Tämä tekee nyt siten, että heti kun sivua aletaan sulkea niin sisältö muuttuu toisen sivun sisällöksi. Toiminnan pitäisi olla näin: Kun sivu lähtee sulkeutumaan niin sisällön pitäisi pysyä siinä vielä. Kun sivu lähtee aukeamaan niin lisätään seuraavan sivun sisältö tilalle. Eli, sivun sisältö ei muuttuisi heti linkkiä klikatessa vaan sen jälkeen kun #oikea elementti on aukeamassa.

Miten pystyisin disabloimaan funktion neljän sekunnin ajaksi viimeisestä klikkauksesta? Että linkkiä voisi painaa korkeintaan 4 sekunnin välein siten että se tehoaa.

MIB [04.01.2010 15:59:07]

No tuon lisäksi on ongelma, että kun validoin sivuni niin se lakkasikin toimimasta.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<script src="http://jqueryui.com/latest/jquery-1.3.2.js" type="text/javascript"></script>
		<script src="http://jqueryui.com/latest/ui/effects.core.js" type="text/javascript"></script>
		<script src="http://jqueryui.com/latest/ui/effects.slide.js" type="text/javascript"></script>

		<meta http-equiv="Content-type" content="text/html; charset=UTF-8">

		<style type="text/css">
			body { margin-right: 0px; background-image: url("tausta.bmp"); }
			#vasen { float: left; width: 300px; border: 1px solid black; padding: 5px; }
			#oikea { background-color: rgb(2, 22, 47); color: white; border: 1px solid black; padding: 5px; margin-left: 320px;}
			.linkki { width: 290px; background-color: rgb(2, 22, 47); margin-bottom: 5px; padding: 5px; color: white; }
			.linkki:hover { background-color: blue; }
			img { border: 0px; }
		</style>
		<script type="text/javascript">
		$().ready(function(){
			setInterval(checkAnchor, 300);
		});

		var currentAnchor = null;
		function checkAnchor(){
			if(currentAnchor != document.location.hash) {
				currentAnchor = document.location.hash;
				if(!currentAnchor) {
					query = "sivu=etusivu";
				} else {
					var splits = currentAnchor.substring(1).split('&');
					var section = splits[0];
					delete splits[0];
					var params = splits.join('&');
					var query = "sivu=" + section + params;
				}

				if(window.location.hash) {
					$.get("include.php", query, function(data) {
						$("#oikea").hide("slide", { direction: "right" }, 2000);
						$("#oikea").show("slide", { direction: "right" }, 2000);
						$("#oikea").html(data);
					});
				}
			}
		}
		</script>

		<title>Homepage of Timo Peltonen</title>
	</head>
	<body>
		<noscript><b>Kehotus:</b> Laitathan JavaScript tuen päälle selaimessasi, jotta sivut toimivat oikein.</noscript>
		<div id="vasen">
			<div class="linkki" onClick="document.location.hash = 'etusivu'">Etusivu</div>
			<div class="linkki" onClick="document.location.hash = 'jep'">Jep</div>
			<div class="linkki" onClick="document.location.hash = 'huuhaa'">Huuhaa</div>
			<div class="linkki" onClick="document.location.hash = 'error'">Error</div>

			<p>
				<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" height="31" width="88"></a>
				<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401-blue" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
			</p>
		</div>

		<div id="oikea">
			<?php include("etusivu.php"); ?>
		</div>
	</body>
</html>

Nyt kun klikkaa linkistä, niin #oikea hyppää korkeussuunnassa #vasemman alapuolelle ja liukuu. Sitten kun se tulee takaisin se hyppää ylös uudelleen. Lisäksi IE7:lla jää inhottava rako siihen oikeaan palkkiin. Koittakaapas.

MIB [10.01.2010 14:49:59]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<script src="http://jqueryui.com/latest/jquery-1.3.2.js" type="text/javascript"></script>
		<script src="http://jqueryui.com/latest/ui/effects.core.js" type="text/javascript"></script>
		<script src="http://jqueryui.com/latest/ui/effects.slide.js" type="text/javascript"></script>

		<meta http-equiv="Content-type" content="text/html; charset=UTF-8">

		<style type="text/css">
			body { margin-right: 0px; background-image: url("tausta.bmp"); }
			#vasen { float: left; width: 300px; border: 1px solid black; padding: 5px; }
			#oikea { background-color: rgb(2, 22, 47); color: white; border: 1px solid black; padding: 5px; margin-left: 320px;}
			.linkki { width: 290px; background-color: rgb(2, 22, 47); margin-bottom: 5px; padding: 5px; color: white; }
			.linkki:hover { background-color: transparent; }
			img { border: 0px; }
		</style>
		<script type="text/javascript">
		$().ready(function(){
			setInterval(checkAnchor, 300);
		});

		var currentAnchor = null;
		function checkAnchor(){
			if(currentAnchor != document.location.hash) {
				currentAnchor = document.location.hash;
				if(!currentAnchor) {
					query = "sivu=etusivu";
				} else {
					var splits = currentAnchor.substring(1).split('&');
					var section = splits[0];
					delete splits[0];
					var params = splits.join('&');
					var query = "sivu=" + section + params;
				}

				if(window.location.hash) {
					$.get("include.php", query, function(data) {
						$("#oikea").hide("slide", { direction: "right" }, 2000);
						$("#oikea").show("slide", { direction: "right" }, 2000);
						$("#oikea").html(data);
					});
				}
			}
		}

		function show() {
			$('#oikea').show();
		}
		</script>

		<title></title>
	</head>
	<body>
		<noscript><b>Kehotus:</b> Laitathan JavaScript tuen päälle selaimessasi, jotta sivut toimivat oikein.</noscript>
		<div id="vasen">
			<div class="linkki" onClick="document.location.hash = 'etusivu'">Etusivu</div>
			<div class="linkki" onClick="document.location.hash = 'jep'">Jep</div>
			<div class="linkki" onClick="document.location.hash = 'huuhaa'">Huuhaa</div>
			<div class="linkki" onClick="document.location.hash = 'error'">Error</div>
		</div>

		<div id="oikea">
			<?php include("etusivu.php"); ?>
		</div>
	</body>
</html>

MIB kirjoitti: