Script για αλλαγή κειμένου μέσα σε table?

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

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

Απάντηση
Άβαταρ μέλους
loukritia
Δημοσιεύσεις: 102
Εγγραφή: 02 Αύγ 2002 12:24
Τοποθεσία: Αθήνα

Script για αλλαγή κειμένου μέσα σε table?

Δημοσίευση από loukritia » 19 Απρ 2005 17:11

Εδώ και πάλι, για να ζητήσω βοήθεια απο τους «γκουρού» της τεχνολογίας.

Θέλω να κάνω το εξής στη σελίδα μου (δεν σας λέω ποιά θα είναι, θα την δείτε όταν τελειώσει ;) )

Να πατάς ένα link και το κείμενο να εμφανίζεται μέσα σε ένα cell ενός table, που υπάρχει στο κέντρο της ήδη υπάρχουσας σελίδας. Δηλαδή να μην πηγαίνει σε κάποια άλλη, ούτε να χρησιμοποιήσω frames.

Να πατάω τα links και να αλλάζει το κείμενο στο κεντρικό cell του table.

Υπάρχει κάποιο javascript ή κάτι άλλο που να μου δίνει αυτή τη δυνατότητα;

Για να φτιάξω το site μου δουλεύω σε Dreamweaver MX 2004.

Ευχαριστώ για τη βοήθειά σας

Υ.Γ. Εψαξα σε διάφορα sites που έχουν δωρεάν javascripts αλλά δεν βρήκα κάτι σχετικό. Δεν ξέρω αν δεν υπάρχει ή απλά δεν ξέρω πώς να το ψάξω...
Τελευταία επεξεργασία από το μέλος loukritia την 19 Απρ 2005 17:16, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
Nidas
Honorary Member
Δημοσιεύσεις: 2348
Εγγραφή: 03 Απρ 2003 13:09
Τοποθεσία: Germany/Wuppertal-Hellas/Preveza

Script για αλλαγή κειμένου μέσα σε table?

Δημοσίευση από Nidas » 19 Απρ 2005 17:15


Άβαταρ μέλους
loukritia
Δημοσιεύσεις: 102
Εγγραφή: 02 Αύγ 2002 12:24
Τοποθεσία: Αθήνα

Script για αλλαγή κειμένου μέσα σε table?

Δημοσίευση από loukritia » 19 Απρ 2005 17:22

Ναιιιιιιι ΑΚΡΙΒΩΣ κάτι τέτοιο ήθελα.

Πάω να το δοκιμάσω στη σελίδα μου και θα σε ενημερώσω αν λειτουργεί.

Χίλια ευχαριστώ :):)

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Script για αλλαγή κειμένου μέσα σε table?

Δημοσίευση από skeftomilos » 19 Απρ 2005 21:14

Το συγκεκριμένο script είναι πολύ καλό, αν και υπερβολικά περίπλοκο για τα γούστα μου. Η δυνατότητα persistanse που έχει το κάνει ακόμα καλύτερο, αλλά για άγνωστο λόγο έχουν περιορίσει τη διατήρηση του state σε μία user session μόνο. Δηλαδή αν κλείσω τελείως το browser, τον ανοίξω και επισκεφτώ εκ νέου τη σελίδα, θα είναι επιλεγμένο το πρώτο tab. Αυτό γίνεται διότι στον ορισμό του cookie δε έχει μπει ημερομηνία expires, με αποτέλεσμα αυτό να εκπνέει μόλις κλείσει ο browser.
loukritia έγραψε:Να πατάς ένα link και το κείμενο να εμφανίζεται μέσα σε ένα cell ενός table, που υπάρχει στο κέντρο της ήδη υπάρχουσας σελίδας. Δηλαδή να μην πηγαίνει σε κάποια άλλη, ούτε να χρησιμοποιήσω frames.
Ο λόγος που δε θέλεις iframe είναι φαντάζομαι γιατί το iframe δεν προσαρμόζει το μέγεθός του στα περιεχόμενα της σελίδας που περιέχει, και αφήνει κενό χώρο ή βγάζει scrollbar. Θέλεις λοιπόν να εμφανίσεις κείμενο σε ένα table cell, αλλά από που θα προέλθει αυτό το κείμενο? Στο παραπάνω script όλα τα κείμενα που εμφανίζονται εκ περιτροπής στο div περιέχονται στην ίδια σελίδα, και απλά δεν είναι όλα ορατά εξ αρχής. Αυτή η τεχνική έχει τα υπέρ και τα κατά της. Αν ο χρήστης δεν ασχοληθεί με τα tabs, σημαίνει ότι έχει κατεβεί HTML περιεχόμενο στον client το οποίο παρέμεινε αδιάβαστο. Η σελίδα βαραίνει, το download επιμηκύνεται, και όλα αυτά πιθανών για το τίποτα. Αν τα tabs είναι πολλά και περιέχουν άφθονο περιεχόμενο το καθένα, η κατάσταση μπορεί να γίνει τραγική. Από την άλλη η εναλλαγή των tabs είναι ακαριαία, κάτι πολύ ευχάριστο για το χρήστη. Επιπλέον ο χρήστης μπορεί να εναλλάσσει τα tabs ακόμα και αν αποσυνδεθεί από το internet, ή αν έχει φορτώσει τη σελίδα από το δίσκο μετά από αποθήκευση για off-line χρήση.

Υπάρχει παραταύτα και μία άλλη τεχνική. Μπορεί κάθε φορά που ο χρήστης κάνει κλικ σε ένα link, να εμφανίζεται το περιεχόμενο του body της αντίστοιχης σελίδας μέσα στο table cell. Πώς θα γίνει αυτό? Θα το αφήσω ως quiz προς το παρόν, για να δω αν το ξέρει κανείς.
:brushteeth:
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
Nidas
Honorary Member
Δημοσιεύσεις: 2348
Εγγραφή: 03 Απρ 2003 13:09
Τοποθεσία: Germany/Wuppertal-Hellas/Preveza

Script για αλλαγή κειμένου μέσα σε table?

Δημοσίευση από Nidas » 19 Απρ 2005 21:41


Άβαταρ μέλους
loukritia
Δημοσιεύσεις: 102
Εγγραφή: 02 Αύγ 2002 12:24
Τοποθεσία: Αθήνα

Script για αλλαγή κειμένου μέσα σε table?

Δημοσίευση από loukritia » 20 Απρ 2005 02:32

Ευχαριστώ πολύ γιά όλη τη βοήθεια.

Τελικά μέσα σ'αυτό το site που μου δείξατε, βρήκα ένα που κάνει απόλυτα γι'αυτό που το ήθελα.

Είναι αυτό:

http://www.dynamicdrive.com/dynamicindex17/agallery.htm

Το τροποποίησα λίγο και έγινε τέλειο.

Ευχαριστώ πολύ.

:kaloe:

Skeftomilos, δεν θέλω το iframe ακριβώς για τους λόγους που αναφέρεις.... και περιμένω κι εγώ να δώ τις απαντήσεις στο quiz που έβαλες. ;) γιατί θα μου άρεσε αν λειτουργούσε κι έτσι όπως περιγράφεις.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Script για αλλαγή κειμένου μέσα σε table?

Δημοσίευση από skeftomilos » 20 Απρ 2005 07:02

Λοιπόν, επαναδιατυπώνω το quiz για να προκαλέσω το ενδιαφέρον των χορηγών:

Έχουμε μία σειρά από συνηθισμένα links που δείχνουν σε συνηθισμένες HTML σελίδες. Θέλουμε όταν γίνεται κλικ στα links να εμφανίζεται το περιεχόμενο των εξωτερικών σελίδων μέσα σε ένα table cell της σελίδας που περιέχει τα links. Όχι το HEAD αλλά μόνο το BODY θέλουμε να μεταφέρεται μέσα στο TD.

1) Επιτρέπεται λίγη JavaScript (5 - 10 γραμμές το πολύ).
2) Το TD δεν επιτρέπεται να περιέχει IFrame.
3) Δεν επιτρέπεται server-side κώδικας.
4) Δεν επιτρέπεται submit της σελίδας. Τίποτα δεν πρέπει να κουνηθεί από τη θέση του εκτός από το περιεχόμενο του TD.
5) Αν η JavaScript δεν είναι ενεργή, τα links πρέπει να λειτουργούν κανονικά.
6) Για αποφυγή σφαλμάτων, δεν επιτρέπεται η αναγραφή της διεύθυνσης του κάθε link σε περισσότερα από ένα σημεία.

Λήξη του διαγωνισμού (και αποκάλυψη της απάντησης) στις 25-04-05 23:00. Ο πρώτος που θα το βρει κερδίζει μια ετήσια συνδρομή μέλους του FreeStuff. Ok, το έπαθλο έχει συμβολικό χαρακτήρα, αλλά αν υπάρχουν σπόνσορες παρακαλώ προσέλθετε!
:P
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
Cue
Δημοσιεύσεις: 19
Εγγραφή: 12 Απρ 2005 17:07
Επικοινωνία:

Script για αλλαγή κειμένου μέσα σε table?

Δημοσίευση από Cue » 20 Απρ 2005 13:51

Αν κατάλαβα καλά από την περιγραφή σου θέλουμε κάτι τέτοιο? :/

Challenge

-edit-
επειδή σαν εξωτερικό link το script δεν έπαιζε σε IE, αναγκάστηκα να το βάλω σε κάθε μια σελίδα ξεχωριστά.
Εικόνα

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Script για αλλαγή κειμένου μέσα σε table?

Δημοσίευση από skeftomilos » 21 Απρ 2005 09:06

Η μέθοδός σου Cue είναι ιδιοφυής. Είσαι στη σωστή κατεύθυνση. :D

Στην κύρια σελίδα έχεις links σαν το παρακάτω:

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

<a title="mpla" href="firstlink.htm" target="_blank" onblur="window.focus&#40;&#41;">First Link</a>
Και σε κάθε δευτερεύουσα σελίδα έχεις τον εξής κώδικα στο συμβάν onLoad του <body>:

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

window.opener.document.getElementById&#40;'cell'&#41;.innerHTML = document.body.innerHTML
Εξαιρετική ιδέα, αλλά έχει πρακτικά προβλήματα. Κατ'αρχήν αφήνει ανοιχτά παράθυρα που πρέπει να τα κλείσει ο χρήστης. Αυτό λύνεται εύκολα προσθέτοντας από κάτω την εντολή window.close():

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

window.opener.document.getElementById&#40;'cell'&#41;.innerHTML = document.body.innerHTML
window.close&#40;&#41;
Ακόμα όμως κι έτσι παραμένει μία αισθητική ενόχληση για το χρήστη. Το κύριο παράθυρο θα χάσει έστω και στιγμιαία το focus, και η οθόνη θα τρεμοπαίξει. Στην taskbar θα προστεθεί για λίγο το popup παράθυρο. Ακόμα χειρότερα υπάρχει η πιθανότητα να είναι ενεργοποιημένος ο popup-blocker στον browser του χρήστη. Τι γίνεται σε αυτή την περίπτωση?

Αν και έδωσες μία λύση που καλύπτει τις τυπικές απαιτήσεις του quiz, τη θεωρώ 50% ικανοποιητική. Υπάρχει καλύτερη?
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
Cue
Δημοσιεύσεις: 19
Εγγραφή: 12 Απρ 2005 17:07
Επικοινωνία:

Script για αλλαγή κειμένου μέσα σε table?

Δημοσίευση από Cue » 21 Απρ 2005 11:22

Τα πράκτικα προβλήματα που αναφέρεις είναι πολύ σωστά και η αλήθεια είναι ότι τα σκέφτηκα ναι μεν, αλλά δε μπήκα στο κόπο δε να ασχοληθώ περισσότερο μιας και δεν έχω όσο χρόνο θα ήθελα :). Απλά ήθελα να γράψω μία "απόδειξη" :D

Αυτό που αναφέρεις σχετικά με το close ομολογώ ότι δε το είχα καταλάβει επ'ακριβώς από την περιγραφή, αν θέλουμε δλδ το παράθυρο να μένει ανοιχτό ή όχι.

Πάντως το quiz είναι αρκετά ενδιαφέρον και θα περιμένω με ανυπομονησία την απάντηση. Εξάλλου η javascript δεν είναι το δυνατό μου χαρτί. ;)
Εικόνα

Άβαταρ μέλους
agrippas
Script Master
Δημοσιεύσεις: 494
Εγγραφή: 18 Ιούλ 2002 14:52
Τοποθεσία: Υπερπέραν
Επικοινωνία:

Script για αλλαγή κειμένου μέσα σε table?

Δημοσίευση από agrippas » 21 Απρ 2005 12:11

Διαμαρτύρομαι έντονα για τα κουίζ που βάζει ο σκεφτοαποτέτοιος με μούφα βραβεία. Ζητώ δωρεάν ταξίδι στις μπαχάμες με χαρέμι της επιλογής μου. Για να μη βασανίζεστε να, εδώ σας τό 'χω:

http://www.ftou.gr/aris/test/nato.html

Στην Όπερα και στον Explorer παίζει. Στους μοζιλοειδείς κάνουμε άλλα κόλπα και βαριέμαι τώρα. Επίσης βαριέμαι να βάζω <noscript> κλπ. Βάλτε τα μόνοι σας.

Φιλιά.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Script για αλλαγή κειμένου μέσα σε table?

Δημοσίευση από skeftomilos » 21 Απρ 2005 23:34

Λοιπόν agrippas μου φαίνεται ότι αυτό παραήταν εύκολο για σένα. Φτου να μη σε ματιάσω αγόρι μου! Τώρα πρέπει να βρω να σου βάλω κάτι πιο ζόρικο. Όσο για τις Μπαχάμες, δυστυχώς πέφτουν λιγουλάκι μακριά για το budget - αν και θα τις άξιζες. Το μόνο που μπορώ να κανονίσω είναι διήμερες διακοπές στις Μπραχάμες, με πληρωμένα ναύλα (ΟΑΣΑ πρώτη θέση) και διαμονή σε αντίσκηνο πολυτελείας σε προνομιακή τιμή.
:D
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27626
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Script για αλλαγή κειμένου μέσα σε table?

Δημοσίευση από cordis » 22 Απρ 2005 01:42

από εκεί που είναι ακόμα και στις Μπραχάμες είναι πολλά τα λεφτά για να τον φέρουμε... :P :P
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Άβαταρ μέλους
Cue
Δημοσιεύσεις: 19
Εγγραφή: 12 Απρ 2005 17:07
Επικοινωνία:

Script για αλλαγή κειμένου μέσα σε table?

Δημοσίευση από Cue » 22 Απρ 2005 11:41

Συγχαρητήρια agrippas.

Για αυτό πρέπει να διαβάζουμε καλύτερα την εκφώνηση!
skeftomilos έγραψε: 2) Το TD δεν επιτρέπεται να περιέχει IFrame.
Είχα στο μυαλό μου "no iframes" at all, όχι μόνο στο td και έκανα την ζωή μου δύσκολη :)

Till next time!
Εικόνα

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Script για αλλαγή κειμένου μέσα σε table?

Δημοσίευση από skeftomilos » 24 Απρ 2005 02:59

Ο agrippas έδωσε τη σωστή λύση, που δεν είναι άλλη από ένα αόρατο iframe. Ο Cue έφτασε πολύ κοντά, αλλά δυστυχώς χάνει το μαγευτικό ταξίδι στις Μπραχάμες. Το μόνο που μένει για μένα είναι να συμμαζέψω λίγο τη λύση ώστε να τρέχει σε όλους τους browsers, ακόμα και χωρίς JavaScript.

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

<html>
  <head>
    <style>
      iframe#joker &#123; display&#58;none &#125;
    </style>
    <noscript>
      <style>
        iframe#joker &#123; display&#58;inline; width&#58;100%; height&#58;100%&#125;
        div#joker-target &#123; display&#58;none &#125;
      </style>
    </noscript>
    <script>
      function begin_joker&#40;&#41; &#123;
        document.getElementById&#40;"joker-target"&#41;.innerHTML = "Loading..."
      &#125;
      function joker_load&#40;&#41; &#123;
        if &#40;joker.location.href != "about&#58;blank"&#41; &#123;
          document.getElementById&#40;"joker-target"&#41;.innerHTML = joker.document.body.innerHTML
        &#125;
      &#125;
    </script>
  </head>
  <body>
    <table width=100% border=1>
      <tr>
        <td valign=top width=20%>
          <a href="1.htm" target="joker" onClick="begin_joker&#40;&#41;">Page-1</a><br>
          <a href="2.htm" target="joker" onClick="begin_joker&#40;&#41;">Page-2</a><br>
          <a href="3.htm" target="joker" onClick="begin_joker&#40;&#41;">Page-3</a><br>
        </td>
        <td valign=top>
          <div id="joker-target">&nbsp;</div>
          <iframe id="joker" name="joker" onLoad="joker_load&#40;&#41;" frameborder=0></iframe>
        </td>
      </tr>
    </table>
  </body>
</html>
Έκανα μια ζαβολιά και έβαλα το αόρατο iframe μέσα στο table cell, με το σκεπτικό να είναι ορατό στην περίπτωση που δεν είναι ενεργή η JavaScript. Έτσι θα εμφανίζεται το κείμενο στην ίδια θέση, έστω και με τα μειονεκτήματα που έχουν τα iframes. Κατά τα άλλα το iframe θα μπορούσε να βρίσκεται οπουδήποτε μέσα στο body. Επιπλέον μέσα στο table cell βρίσκεται κι ένα div, στο οποίο καταλήγει το περιεχόμενο των εξωτερικών σελίδων. Υπάρχουν δηλαδή δύο περιπτώσεις:

α) Ενεργή JavaScript: το div είναι ορατό και το iframe αόρατο.
β) Ανενεργή JavaScript: το div είναι αόρατο και το iframe ορατό.

Για την αλλαγή αυτή φροντίζει ο CSS κώδικας μέσα στο <noscript>:

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

<noscript>
  <style>
    iframe#joker &#123; display&#58;inline; width&#58;100%; height&#58;100%&#125;
    div#joker-target &#123; display&#58;none &#125;
  </style>
</noscript>
Για να τρέχει το script και στον Firefox, χρειάστηκε να χρησιμοποιήσω την ιδιότητα location.href του iframe αντί της src.

Ένα έξτρα feature είναι η εμφάνιση του "Loading..." καθώς η σελίδα θα φορτώνεται στο iframe. Να σημειωθεί ότι ο χρήστης θα δει την εξωτερική σελίδα μόλις αυτή φορτωθεί ολόκληρη στο iframe. Αυτή η συμπεριφορά είναι αντίθετη με τη συνήθη τμηματική εμφάνιση της σελίδας καθώς αυτή κατεβαίνει από το server.

Δεν παραθέτω κώδικα για της εξωτερικές σελίδες 1.htm, 2.htm και 3.htm καθώς μπορούν να είναι οτιδήποτε. Αρκεί να περιέχουν κάτι στο body. Τα style που πιθανόν περιέχονται στο head δε λαμβάνονται υπόψη, αν και ίσως θα έπρεπε. Θα μπορούσε να γίνει κάτι γι αυτό, αλλά θα χρειαζόταν προσοχή για να μην υπάρξει σύγκρουση ανάμεσα στα styles των δύο σελίδων που ξαφνικά συγχωνεύονται.

Η τεχνική είναι μόνο κατάλληλη όταν οι εξωτερικές σελίδες ανήκουν στο ίδιο domain με την κεντρική. Τα χαρακτηριστικά ασφαλείας της JavaScript την εμποδίζουν να διαβάζει το innerHTML των σελίδων των iframes όταν αυτές ανήκουν σε διαφορετικά domains. Αυτό είναι καλό. Θα μπορούσε το innerHTML του body της εξωτερικής σελίδας να περιέχει scripts τα οποία θα κανιβάλιζαν (hijacking) τη σελίδα μας.

Για λόγους ευκρίνειας τα στοιχεία μέσα στο table cell είναι γραμμένα σε ξεχωριστές γραμμές. Επειδή μπορεί να υπάρξουν προβλήματα με τα περιθώρια, καλό είναι να κολλήσουν το ένα με το άλλο χωρίς κενά μεταξύ τους:

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

<td><div...>...</div><iframe...></iframe></td>
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

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

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