Πρόβλημα με δημιουργεία site(js/html)

SlackulatoR · 4 Οκτωβρίου 2012

Καλησπέρα, πρόσφατα ξεκίνησα να φτιάχνω μια ιστοσελίδα και την είχα δημιουργήσει με iframes. Όμως προέκυψαν κάποια προβλήματα οπότε είπα να αντικαταστήσω το iframe με ένα div που θα λειτουργεί σαν iframe και όλα τα υπόλοιπα θα παραμένουν ίδια για να μην ξαναφορτώνουν(header/footer κτλ).

Έτσι μέσω javascriptβρήκα αυτό:

><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#content").load("news.html");
});
</script>

Λειτουργεί όμως υπάρχουν 2 προβλήματα:

1) Δεν κάνει include το external css file που έχω στο news.html(με link rel)

2) Το news html περιέχει μία λίστα με Νέα που έχουν links για το κάθε άρθρο(ξεχωριστό html). Στο iframe μόλις πατούσες σε ένα από τα άρθρα φόρτωνε το νέο html μέσα στο iframe αυτόματα. Με τον παραπάνω κώδικα αυτό δεν συμβαίνει και λογικά για να λειτουργήσει θα έπρεπε να φτιάχνω ξεχωριστό js script για το κάθε link πράγμα μη ορθόδοξο φαντάζομαι(ή να φτιαχτεί ένα JS function που να κάνει την δουλεία) π.χ:

><script type="text/javascript">
$(function() {
$("#content a").each(function() {
$("#content").load($(this).attr("href"));
});
});
</script>

Το ίδιο πρόβλημα νομίζω συνάντησα και με το php include και τα links. Μπορεί κάποιος να μου πει ποιός είναι ο πιο σωστός τρόπος να φορτώνουν όλες οι σελίδες στο ίδιο main div γιατί έχω κολλήσει;

Επεξ/σία 4 Οκτωβρίου 2012 από SlackulatoR

alexitsios · 4 Οκτωβρίου 2012

Για ποιο λόγο να κάνεις σελίδα με frame?

SlackulatoR · 4 Οκτωβρίου 2012

Για να παραμένουν κάποια στοιχεία τα ίδια(header/footer) και να αλλάζει το κυρίως περιεχόμενο μόνο. Αν διαβάσεις όμως ξανά το ποστ, λεω θα χρησιμοποιήσω ένα div που θα λειτουργεί σαν iframe. Θα φορτώνουν δηλαδή όλες οι html σελίδες μέσα εκεί.

drumforhim · 4 Οκτωβρίου 2012

Νομίζω ότι εάν το κάνεις με την load του jquery θα έχεις πρόβλημα με την ιστορικότητα. Εάν δηλαδή αφού έχει κάνει εμφανίσει την news.html μέσα στο #content , ο χρήστης πατήσει το back του browser τότε ο browser θα τον πάει στην σελίδα που ήταν πριν (google,etc.) , δεν θα τον πάει πίσω στο index.html πράγμα που δεν νομίζω ότι είναι καλό για να πάει η σελίδα σου καλά και να έχει πολλούς επισκέπτες.

αυτό που μπορείς να κάνεις είναι να χρησιμοποιησεις την php και να φτιαξεις 2 αρχεία που θα λέγονται header.php και footer.php.

δηλαδή τα αρχεία σου θα είναι κάπως έτσι

index.php

header.php

footer.php

news.php

κτλ .php

το header.php θα έχει τον παρακάτω κώδικα

>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id='content'>'

το footer.php θα έχει τον παρακάτω κώδικα

>
</div>
</body>
</html>

το index.php θα έχει τον κώδικα

>
<?php
include('header.php');
?>
<h3>Welcome page και ότι άλλο θέλεις</h3>
<?php
include('footer.php');
?>

και τέλος η news.php και όποια άλλη σελίδα θέλεις να έχει το project σου θα έχει τον παρακάτω κώδικα

>
<?php
include('header.php');
?>
<h3>This the news page</h3>
<?php
include('footer.php');
?>

τώρα εάν δεν θέλεις η σελίδα σου να κάνει refresh σε κάθε κλικ και θες να χρησιμοποιήσεις την load της jquery θα πρέπει τα css να τα έχεις στην index.html κι όχι στην news.html . και για να δουλέψει η ιστορικότητα που είπαμε πριν θα πρέπει να μάθεις να χρησιμοποιείς ένα history plugin της jquery.

Ελπίζω να βοήθησα

SlackulatoR · 5 Οκτωβρίου 2012

Το δοκίμασα και το php include αλλά υπάρχουν προβλήματα και σε αυτόν τον τρόπο. Καταρχάς έχω ένα mp3 player που θέλω να παίζει παντού οπότε ο μόνος εύκολος τρόπος είναι τα iframes. Γι αυτό είπα να φτιάξω ένα div στην αρχική σελίδα που θα λειτουργεί σαν iframe όμως προέκυψε άλλο πρόβλημα.

Το news.html περιέχει διάφορα links-άρθρα που ανοίγουν νέα html σελίδα για να εμφανιστεί όλο το άρθρο. Οπότε πάει: news.html φορτώνει στο div, πατάς στο link του άρθρου φορτώνει το news1.html. Αυτό ανοίγει σε νέα καρτέλα, και δεν βρήκα τρόπο να του λέω να φορτώνει στο index.html -> στο div. Μου είπαν για jQuery κώδικα μου κάνει αυτό που χρειάζομαι αλλά δεν λειτούργησε λογικά κάτι δεν κάνω σωστά:

>
$('ul#nav li a').click(function() {
 $('#content').load($(this).attr('href'));
 return false;
}):

drumforhim · 6 Οκτωβρίου 2012

Εφ'όσον έχεις player και παίζει σίγουρα δεν δουλεύει το include. Αυτό που θα έκανα εγώ θα ήταν να χρησιμοποιήσω την load της jquery ως εξής

HTML

>
<ul id='nav'>
<li><a href='#' page='news.html'>News</a></li>
<li><a href='#' page='links.html'>Links</a></li>
</ul>

jQuery

>
$(function(){
 $("ul#nav li a").click(function(){
		 var page = $(this).attr('page');
		 $('#content').load(page);
	    return false;
 });
});

και βέβαια εάν είχες τις σελίδες σου σε folder στο page attribute του a tag αντί για το όνομα της σελίδας θα έγραφες και το path. Τώρα για τα css θα τα φορτώσεις κανονικά όχι στην κάθε σελίδα που φορτώνεις στο #content αλλά στο index σου.

Σύνδεση

Πρόβλημα με δημιουργεία site(js/html)

Προτεινόμενες αναρτήσεις

SlackulatoR

alexitsios

SlackulatoR

drumforhim

SlackulatoR

drumforhim

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση