Hjelp til å sette opp en meny, som ikke må lastes på nytt hver gang.

[Ajaco]

Heisann!

 

Jeg jobber for tiden med et prosjekt, der jeg skal lage en internetside. På denne siden skal jeg ha en meny øverst, som henger sammen med logoen, og denne menyen skal brukes til å navigere seg over hele siden. Jeg ønsker at kun innholdet UNDER menyen skal lastes hver gang jeg navigerer meg til ett nytt sted på siden. Altså, at hele menyen forhåndslastes når man går inn på siden for første gang. Dette er fordi det er mer praktisk på denne måten, og fordi jeg har tenkt til å bruke litt bevegelse når jeg bruker menyen.

 

Jeg kan legge ved noen bilder for å beskrive hvordan jeg tenker.

 

Jeg ønsker at siden skal bli delt inn i 3 deler, slik som delt inn på dette bildet:

Den grønne og blåe delen ønsker jeg skal lastes inn 100% første gang man besøker siden, slik at kun det røde feltet oppdateres når jeg trykker på noe i menyen.

 

Slik ser menyen ut før jeg har trykket på noe, og jeg ønsker at når jeg trykker på noe så skal undermenyen "skli" ned fra skillestreken i midten.

 

Menyen ser slik ut med en undermeny:

 

----

 

Spørsmålet mitt er altså, hvordan kan jeg lage siden slik at kun det røde feltet lastes når jeg trykker i menyen? Og må jeg bruke javascript for å forhåndslaste headeren/menyen/footeren? Er det også javascript som vil lønne seg for å bruke for å få undermenyen til å "skli" ned fra skillestreken?

 

Håper noen skjønte spørsmålet mitt, hadde versatt svar

[Bjonski]

Kan vel bruke php for å løse det problemet der?

 

Alt lastes i en index.php fil, så inkluderes innholdet ved et include script.

 

Lenkene blir da f.eks slik som dette:

http:// dinside.com/index.php?page=home

http:// dinside.com/index.php?page=about

Endret 26. januar 2010 av Bjohansen

[Ajaco]

Jeg har ikke noe peiling på PHP, men slik jeg forstår det, så lastes hele siden inn første gang man besøker den, også istedet for at en link peker til en sti, så utfører linken en script som gjør at du skjuler, eller viser deler av siden?

Endret 26. januar 2010 av Ajaco

[Bjonski]

Jeg mener det skal virke, men vi bør nok få en bekreftelse av noen som kan dette mer enn meg.

[MikkelRev]

Med php include(), så vil alt lastes hver gang. Hvis kun det rød feltet skal oppdateres, kan du bruke frames.

[Ajaco]

Med php include(), så vil alt lastes hver gang. Hvis kun det rød feltet skal oppdateres, kan du bruke frames.

Ok, vet du om noen nettstedet som lett lar deg lære å designe sider ved hjelp av frames?

 

Og fortsatt, dersom jeg ønsker at elementer i menyen skal bevege på seg (og skjule/vise seg) ved klikk, må jeg bruke javascript da?

[MikkelRev]

Ja, javascript eller flash.

Hvorfor vil du kun laste header og footer en gang? Er de så tung å laste? Jeg ville egentlig ikke anbefalt å bruke frames der, men heller php include. Omtrent slik:

 

 

red.php:

 

include("green.php");

 

her er innholdet på den røde siden

bla bla bla bla

bla bla bla bla

 

include("blue.php");

[Ajaco]

Altså, headeren og footeren er ikke noe spesielt tunge å laste, men jeg har lyst til at når jeg trykker på en knapp på headeren (en av de 3 knappene over streken), så skal det skje en bevegelse i banneren (altså at en knapp sklir ned fra skillestreken). Men dette går vel ikke, dersom man laster hele siden på nytt, hver gang man trykker på en menyknapp?

 

Bare jeg som er helt ute å kjører nå, eller?

 

Jeg har forøvrig ingen peiling på PHP, så får vel lese meg opp på mulighetene det tilbyr @ w3schools.

Endret 27. januar 2010 av Ajaco

[Bjonski]

Kan vel kjøre en spørring i php.

 

f.eks hvis du er på kursinfo så laster den undermenyen.

 

Den spørringen jeg tenker på kjøres ved å lese av " ?side= "... så da må man benytte include script.

 

 

Edit:

<?php
$page = $_GET['side'];
if($page == "side1") {
echo "Undermeny";
}
else if($page == "side2") {
echo "Undermeny2";
}

 

Tror den skal funke.

Endret 27. januar 2010 av Bjohansen

[Ajaco]

Ok, takk. Skal prøve dette, og se hvor langt jeg kommer

[Bjonski]

Jeg kjører et include script for å hente innholdet på siden og da funker det scriptet uten noen problemer.

 

Ser at jeg glemte å avslutte scriptet, skal være en ?> på slutten.

[Ajaco]

Takker for alle svar!

 

Det endte opp med at jeg brukte en allerede kodet javascript, og satte den opp slik jeg ville etter mine behov. Senere skal jeg lære meg å kunne skrive disse kodene selv, men måtte ta den lettvindte løsningen nå, siden jeg har en tidsfrist.

 

Så om noen har lyst til å se på resultatet, kan du gå til www.teknetub.com :>

 

Er det forøvrig noen som vet om det er mulig å unngå at knappene mine får den "selection rammen" (den laget av små dotter) etter jeg har trykket på en link?

Endret 28. januar 2010 av Ajaco

[JohndoeMAKT]

Siste spørsmål:

http://css-tricks.com/removing-the-dotted-outline/

 

Ganske flott at ingen har faktisk hjulpet deg med det du ønsker. Det jeg hadde gjort er dette:

 

MVC-struktur slik at forskjellige requests kan bruke samme cache/datagrunnlag og HTML-template. I en perfekt verden (med andre ord en verden uten Internet Explorer) hadde jeg så satt opp siden som dette:

 

OBS, helt utestet kode bare skrevet i full fart!

<nav>
<a href="?do=index" data-action="index">index</a>
<a href="?do=about" data-action="about">about</a>
<a href="?do=something" data-action="something">something</a>
</nav>
<div id="main-content">
//content here
</div>
<script type="text/javascript">
function doAjax(url)
{
	//standard AJAX stuff, on HTTP 200:
	document.getElementById('main-content').innerHTML = data;
}
var anchors = document.getElementsByTagName('nav')[0].getElementsByTagName('a');
for (var i = 0, iMax = anchors.length; i < iMax; i++) {
	anchors[i].addEventListener('click', function(event) 
	{
		event.preventDefault();
		var anchors = event.currentTarget.parentNode.childNodes;
		for (var i = 0, iMax = anchors.length; i < iMax; i++) {
			anchors[i].className = '';
		}
		event.currentTarget.className = 'active';
		doAjax('?do=ajax-' . event.currentTarget.dataset['action']);
	});
}
</script>

 

Dette degrader uten JavaScript, bruker et par HTML5-features for penere og mer logisk kode. Det største problemet med dette er mangelen på linkability. Det kan du delvis forbedre ved å ha et JavaScript som leser og skriver fragmentet (#) ved pageload laster innholdet. Den biten vil desverre ikke degradere uten JavaScript.

[Bjonski]

Ganske flott at ingen har faktisk hjulpet deg med det du ønsker.

 

Hva mener du med dette egentlig?

 

Jeg har iallefall tolket spørsmålene etter beste evne og deretter prøvd å hjelpe så godt jeg kan.

[JohndoeMAKT]

Han etterspør en løsning hvor han kan bruke navigasjonen på toppen til å vise forskjellig innhold på midten uten å omlaste hele siden.

 

Et include script vil ikke gjøre det han ber om.

 

---

 

Men når det er sagt må du absolutt se noe negativt i det jeg skriver, jeg ser at ordlyden kommer frem heller hovmodig og det var ikke meningen. Så lenge utvikler deg kan ingen kreve annet enn at du svarer etter beste evne.

Din løsning (dene generelle modellen) er forresten veldig god og absolutt hva jeg anbefaler til alle opp til et ganske høyt kunnskapsnivå, og selv da skal du ha en god rasjonale for å bruke det jeg beskriver i min post.

[Kaptein Snus]

$(function() {

$("#nav li").click(function() {

	var href = $(this).find("a").attr("href");
	$("#rød-box").load(href);

	return false;

});

});

 

Noe sånt noe med jQuery

Endret 29. januar 2010 av Lek1

[Ajaco]

Jeg fikk til menyen, og forøvrig også hele siden, men det er fortsatt en liten ting som irriterer meg.

 

I alle nettlesere bortsett fra Firefox, kommer det en liten blå strek (samme blåfarge som når du merker et bilde) når man drar musen over knappene i menyen. Er det noen som aner hva dette kan forekomme av?

 

For å se hva jeg mener:

 

http://www.teknetub.com