jQuery smooth scrolling when clicking an anchor link

[flienky]

Όταν έχει χρησιμοποιηθεί η pushState() για να αλλαχτεί το link και ο χρήστης πηγαίνει πίσω με το back button, είτε και με javascript δηλ με history.back() τότε ένα event fires ενονόματι popstate. Δες αν μπορεις να το χρησιμοποιήσεις. Σορρυ αλλά αυτο σκέφτηκα γρηγορα και δυστηχως δεν εχω χρονο να ασχοληθώ.

 

Το πρόβλημα τωρα ειναι οτι με το back button δεν σε παέι εκεί που ήσουν πριν καθώς δεν κάνει refresh ενώ από την άλλη μερία το λινκ αλλάζει σωστά (και με ένα back button).

 

πέρασε την πρώτη παράμετρο στην history.pushState και μετά

window.addEventListener('popstate',function(e){
    if(e.state !== null) {        
        //χρησιμοποίησε τα state data (πρωτη παράμετρο στην pushState() για να φορτώσεις την σελίδα
//η κανε refresh αλλα να εισαι σιγουρος οτι παντου η popstate θα γινει fired στο loading
    } 
},true);

Επεξ/σία 26 Ιανουαρίου 2016 από flienky

[M2000]

Το state object είναι όλη η σελίδα serialized και σώζεται στο δίσκο. Με τη χρήση strings γλιτώνουμε χώρο. Εδώ το θέμα είναι να καταχωρεί δείκτες στην ΙΔΙΑ σελίδα. Να γιατί παίζει αυτό που έδωσα, δεν αλλάζει η σελίδα. Αλλά εγώ δεν ξέρω τόσα πολλά..ας βρει κάποιος μια καλύτερη λύση!

[defacer]

Το state object είναι όλη η σελίδα serialized και σώζεται στο δίσκο. Με τη χρήση strings γλιτώνουμε χώρο. Εδώ το θέμα είναι να καταχωρεί δείκτες στην ΙΔΙΑ σελίδα. Να γιατί παίζει αυτό που έδωσα, δεν αλλάζει η σελίδα. Αλλά εγώ δεν ξέρω τόσα πολλά..ας βρει κάποιος μια καλύτερη λύση!

Είναι φανερό ότι "δεν ξέρεις τόσα πολλά", από την πρώτη πρόταση και μόνο.

[flienky]

Το state object είναι όλη η σελίδα serialized και σώζεται στο δίσκο. Με τη χρήση strings γλιτώνουμε χώρο. Εδώ το θέμα είναι να καταχωρεί δείκτες στην ΙΔΙΑ σελίδα. Να γιατί παίζει αυτό που έδωσα, δεν αλλάζει η σελίδα. Αλλά εγώ δεν ξέρω τόσα πολλά..ας βρει κάποιος μια καλύτερη λύση!

Οχι οχι. Το state object ειναι ενα object που το δινουμε στην πρώτη μεταβλητη της pushstate. Οταν το propstate is fired το event θα εχει property το state που θα ειναι αυτο που περασαμε σαν πρωτη μεταβλητη.Απλως θα ειναι serialized.

[M2000]

Τότε πως γίνεται να έχει ανώτατο όριο τα 640k (από που θα γεμίσει τόσο πράγμα, μιλάμε για τη σελίδα και όλα τα συνοδευτικά?)

 

σόρυ ρε φωστήρα defacer δεν είμαστε όλοι του βεληνεκούς σου!

[flienky]

Το οριο αυτο το δινει ο firefox σε καθε state object το οποιο ειναι serialized. Μπορει να εχω ενα state object το οποιο να ειναι τεράστιο.. δεν σημαινει πως ειναι και η σελιδα. Και ειναι 640κ χαρακτηρες για την serialized "αναπαρασταση" του object. Φιλικα..

[M2000]

οκ τι είναι όμως;

κάτι έχω καταλάβει και νομίζω πως αυτό μπορεί να δώσει μια λύση στο τι φαίνεται στο address bar

function doPushState(color) {
    var state = {},
        title = "Page title",
        path  = "/" + color;

    history.pushState(state, title, path);
};

http://stackoverflow.com/questions/17612307/pushstate-what-exactly-is-the-state-object-for

http://jsfiddle.net/janfoeh/2SCbv/11/

[flienky]

Οι 640κ χαρακτηρες ειναι οριο. Εσυ μπορει απλα να χρησιμοποιείς μονο πχ λεμε 20. Ετσι ειπα και εγω να χρήσιμοποιησει τα state data για να ξερει που ηταν πριν πατησει το λινκ

[M2000]

Φίλε το διάβασα και κατάλαβα...το State το ορίζουμε αν θέλουμε εμείς! Δες εδώ:

http://jsfiddle.net/janfoeh/2SCbv/11/

έχει μια μεταβλητή την οποία κρατάει στο state...και βάζει όσα χρειάζονται (κάθε φορά που επιλέγουμε ένα χρώμα). Πάντως είναι ξεκάθαρο πως το onclick δεν το γλιτώνει.

Η δική μέθοδος με μια μόνο μεταβλητή απλά κράταγε τις δυο τελευταίες τιμές.Mε το state μπορείς να φυλάξεις ότι θέλεις!

[randomcat]

Στο είπα ήδη. Βγάλε το "html" από τη γραμμή που βάζεις το $root.

 

Επίσης δε θα ήταν και κακή ιδέα να κάτσεις λίγο να προσπαθήσεις να καταλάβεις τι ακριβώς κάνει αυτό που έχεις στα χέρια σου.

 

Έχω δοκιμάσει ό,τι μου είπες, δεν τα αγνόησα. Και δεν δουλεύει ούτε το $(document.body) ούτε και το $('body'), ενώ με το $('html, body') δουλεύει. Άλλωστε δεν έχει σχέση με το πρόβλημα του history.

 

By the way, το scriptάκι το βρήκα σε απαντήσεις στο StackOverflow αλλά και σε αρκετά άλλα σάιτ με μικρές διαφορές. Καταλαβαίνω πολύ καλά τι κάνει, καθώς και ποιο ήταν το πρόβλημα με το target αν και δεν βρήκα κάποια λύση. Επίσης γνωρίζω γιατί το 'this' δεν είχε νόημα μέσα στο callback αλλά λόγω περιορισμένου χρόνου απλά έβαλα την πρότασή σου σε εφαρμογή για να δω εάν θα δουλέψει, χωρίς να κάτσω να την αναλύσω και να σκεφτώ κάτι παραπάνω.

 

Απ' ό,τι είπε ο flienky και απ' ό,τι διάβασα (http://stackoverflow.com/questions/3870057/how-can-i-update-window-location-hash-without-jumping-the-document) χρειάζεται ένας popstate event listener και είναι έτοιμο.

 

"Note that pushState has the side- (indented) effect of adding a state to the browser history stack. In other words, when the user clicks the back button, nothing will happen unless you also add a popstate event listener."

Επεξ/σία 27 Ιανουαρίου 2016 από randomcat

[defacer]

Έχω δοκιμάσει ό,τι μου είπες, δεν τα αγνόησα. Και δεν δουλεύει ούτε το $(document.body) ούτε και το $('body'), ενώ με το $('html, body') δουλεύει. Άλλωστε δεν έχει σχέση με το πρόβλημα του history.

Δε γίνεται να μη δουλεύει εκτός αν κάνεις κάτι άλλο λάθος. Δες και μόνος σου: https://jsfiddle.net/4mrbny8L/1/

 

By the way, το scriptάκι το βρήκα σε απαντήσεις στο StackOverflow αλλά και σε αρκετά άλλα σάιτ με μικρές διαφορές. Καταλαβαίνω πολύ καλά τι κάνει, καθώς και ποιο ήταν το πρόβλημα με το target αν και δεν βρήκα κάποια λύση. Επίσης γνωρίζω γιατί το 'this' δεν είχε νόημα μέσα στο callback αλλά λόγω περιορισμένου χρόνου απλά έβαλα την πρότασή σου σε εφαρμογή για να δω εάν θα δουλέψει, χωρίς να κάτσω να την αναλύσω και να σκεφτώ κάτι παραπάνω.

Ωραίος, αλλά προσωπικά δυσκολεύομαι να συμβιβάσω αυτά που γράφεις εδώ και δείχνουν ότι ξέρεις πέντε πράγματα με το προηγούμενο περι $("html, body") το οποίο μου λέει πως δεν καταλαβαίνεις ακριβώς τι κάνει το jQuery εκεί.

 

Το αν θα βάλεις $("html, body") έχει μεγάλη σημασία γιατί έτσι τα πράγματα που ξεκινάς με $root γίνονται δύο φορές σε κάθε κλικ, οπότε και το pushState θα γίνει δύο φορές, οπότε θα πρέπει να πατήσεις δύο φορές back (και θα γίνει δύο φορές popState) κλπ κλπ. Εν μέρει τουλάχιστον, όσον αφορά το τι εμφανίζεται στο address bar, αυτό το είδες και με τα μάτια σου.

 

Απ' ό,τι είπε ο flienky και απ' ό,τι διάβασα (http://stackoverflow.com/questions/3870057/how-can-i-update-window-location-hash-without-jumping-the-document) χρειάζεται ένας popstate event listener και είναι έτοιμο.

Ναι, αλλά εξαρτάται τι ακριβώς θες να κάνεις. Scroll σε τυχόν προηγούμενα κλικαρισμένο section? Γιατί μέχρι το σημείο που θα κλικάρεις δεύτερο, και χωρίς popState η συμπεριφορά είναι η ίδια που θα ήταν ακόμα κι αν δεν έβαζες το script.

 

Επίσης (άσχετο): ο τρόπος που κάνεις attach event handlers δεν είναι και ο καλύτερος για την περίπτωση. Προσωπικά θα προτιμούσα delegation, δηλαδή αντί για

$('a[href*="#"]:not([href="#"])').on('click', ...)

να έχεις

 

$(document.body).on('click', 'a[href*="#"]:not([href="#"])', ...)

σόρυ ρε φωστήρα defacer δεν είμαστε όλοι του βεληνεκούς σου!

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

 

Το έκανες στη C, το κάνεις και δω. Την επόμενη φορά που θα το κάνεις κάνε πάλι και τον αστείο, εξάλλου δε θα φταις εσύ ο φωστήρας θα φταίει.

[M2000]

Defacer... ουδείς τέλειος. Αν καθόμουν να καταγράφω πόσα λάθη κάνουν οι άλλοι.. θα το είχα χάσει τελείως. Κάποια στιγμή πρέπει να συμβιβαστείς στην ιδέα ότι δεν είναι για επίπληξη όποιος καταλάβει κάτι στραβά. Μαλάκωσε λίγο, όχι όλο στη τσίτα που λέμε και μεις οι αδαείς...

[flienky]

Και κατι αλλο. Γτ καλείς την stop() ετσι και οχι stop(false,true) ωστε αν υπαρχει animation να το ολοκληρωσει αμέσως

[defacer]

Defacer... ουδείς τέλειος. Αν καθόμουν να καταγράφω πόσα λάθη κάνουν οι άλλοι.. θα το είχα χάσει τελείως. Κάποια στιγμή πρέπει να συμβιβαστείς στην ιδέα ότι δεν είναι για επίπληξη όποιος καταλάβει κάτι στραβά. Μαλάκωσε λίγο, όχι όλο στη τσίτα που λέμε και μεις οι αδαείς...

 

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

[M2000]

Σε πάω με χίλια (όπως το έλεγε και ο Χριστόδουλος).