Σταθερό μέρος ιστοσελίδας, καθώς ο χρήστης εναλλάσει σελίδες

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
philos
Δημοσιεύσεις: 264
Εγγραφή: 30 Αύγ 2007 23:32

Σταθερό μέρος ιστοσελίδας, καθώς ο χρήστης εναλλάσει σελίδες

Δημοσίευση από philos » 29 Σεπ 2014 19:07

Γεια σας παιδιά :D

Μια ερώτηση: θέλουμε έναν mp3 player - html χωρίο σε μια σελίδα, να μένει σταθερό καθώς ο χρήστης εναλλάσσει σελίδες σε ένα site. Πως το πετυχαίνουμε αυτό; Να υποθέσω με iframes; Με τι κώδικα πάνω κάτω; :idea:

Ασφαλώς και όταν ο χρήστης φεύγει τελείως από το site, το πλαίσιο (πχ του mp3) θα πρέπει να εξαφανίζεται.

Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

Σταθερό μέρος ιστοσελίδας, καθώς ο χρήστης εναλλάσει σελίδες

Δημοσίευση από giannis17 » 30 Σεπ 2014 13:22

Η πιο σωστή λύση είναι το μενού, το mp3 player και ότι άλλο θες να μένει σταθερό να αποτελούν τη βασική ιστοσελίδα και να έχεις ένα div όπου θα φορτώνονται τα επιμέρους περιεχόμενα με ajax. Ορίστε ένα κομμάτι κώδικα βασισμένο σε jQuery που παίζει και με permalinks

Κώδικας: Επιλογή όλων

/*
	με βάση το παρακάτω παράδειγμα:
		το μενού σου έχει id="navigation"
		οι σύνδεσμοι στο μενού είναι της μορφής&#58; <a href="#home">Αρχική</a>
		οι σελίδες σου βρίσκονται σε υποφάκελο "pages" με onomasia.php όπου onomasia είναι το #link από το μενού
		έχεις τίτλο της μορφής&#58; <div id="title"><h1>titlos</h1></div>
		τα περιεχόμενα εμφανίζονται στο <div id="content"></div>
*/

	function setTitle&#40;page&#41;&#123;
		var link = $.find&#40;'&#91;href="#'+page+'"&#93;'&#41;;
		$&#40; "#title h1" &#41;.first&#40;&#41;.text&#40;$&#40;link&#41;.text&#40;&#41;&#41;;
	&#125;
	$&#40; document &#41;.ready&#40;function&#40;&#41; &#123;
		if&#40;window.location.hash&#41;&#123;
			$&#40; "#content" &#41;.load&#40; "pages/"+window.location.hash.substr&#40;1&#41;+".php" &#41;;
			setTitle&#40;window.location.hash.substr&#40;1&#41;&#41;;
		&#125; else &#123;
			$&#40; "#content" &#41;.load&#40; "pages/home.php" &#41;;
			setTitle&#40;'home'&#41;;
		&#125;
	  &#125;&#41;;
	  $&#40;'#navigation a'&#41;.click&#40;function&#40;&#41;&#123;
		var href = $&#40;this&#41;.attr&#40;"href"&#41;;
		var page = href.substr&#40;1&#41;;
		$&#40; "#content" &#41;.load&#40; "pages/"+page+".php" &#41;;
		setTitle&#40;page&#41;;
	  &#125;&#41;;
	&#125;&#41;;
Με τον παραπάνω κώδικα λοιπόν φορτώνεις μέσα στο content τα περιεχόμενα του εκάστοτε αρχείου το οποίο φορτώνεται με ajax άρα ότι κώδικα php έχει μέσα τον τρέχει και γυρνάει το αποτέλεσμα. Ταυτόχρονα σου αλλάζει τον τίτλο με βάση το link που πατήθηκε και μπορείς κάλλιστα να κάνεις share permalinks από συγκεκριμένες σελίδες με τη μορφή www.mypage.gr/#contact και θα εμφανίζει το αντίστοιχο περιεχόμενο.

Γίνεται και με iframe αλλά πιστεύω με τον παραπάνω τρόπο έχεις πολύ περισσότερη ευελιξία και είναι και πιο γρήγορο για τον χρήστη (δεν βλέπει πουθενά να γίνεται κάποιο loading).
"There is only one problem with common sense; it’s not very common."
&#8211; Milt Bryce

Απάντηση

Επιστροφή στο “HTML και XHTML”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες