Scrolling content με Jquery

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

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

Απάντηση
netpumber
Δημοσιεύσεις: 103
Εγγραφή: 08 Μαρ 2009 19:06

Scrolling content με Jquery

Δημοσίευση από netpumber » 07 Φεβ 2011 17:00

Καλησπέρα σας..

Βρήκα αυτό το site http://www.charliegentle.co.uk/ και μου έκανε εντύπωση ο τρόπος με τον οποίο δουλεύει το navigation απο το menu. Έχει κανείς ιδέα κανένα καλό οδηγό που να εξηγεί τα βήματα και το πως να φτιάξεις κάτι τέτοιο; έψαξα λίγο αλλά δεν βρήκα κάτι που να με ικανοποιεί..

Επίσης ποιά είναι η άποψή σας ; Το βρίσκετε λειτουργικό ή όχι ; Καλύτερα μήπως είναι η κλασική μέθοδος για κάθε tab να έχουμε και ένα ξεχωριστό αρχείο ;

Και μιας και ανοιξα αυτή τη συζήτηση, υπάρχουν κι άλλοι τρόποι με τους οποίους μπορείς να μεταφέρεσαι απο την κετρική σελίδα στις άλλες ;

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

Akina
Δημοσιεύσεις: 89
Εγγραφή: 25 Νοέμ 2009 18:31

Scrolling content με Jquery

Δημοσίευση από Akina » 07 Φεβ 2011 17:45

Δεν νομίζω ότι είναι κάτι που πραγματικά εντυπωσιάζει με την jquery μπορείς να κανεις πολύ πιο εντυπωσιακά πράγματα (αλλα αυτά είναι άποψης και γούστα που διαφέρουνε από άτομο σε άτομο κλπ κλπ )

Ουσιαστικά έχει πάρει τον sroller για τις image και και έχει τοποθέτηση με αυτόν τον τρόπο το περιεχόμενο του.

ρίξε μια ματια σε αυτό το plugin
http://www.gmarwaha.com/jquery/jcarousellite/


εμενα πάντως αυτό που εντυπωσίασε τώρα τελευταία είναι το site του IE9 beta
http://www.beautyoftheweb.com/ έχει δέσει πολύ όμορφα η ajax με το content
και το πιο εντυπωσιακό απόλα είναι ότι καταφέρνανε όλο αυτό να δουλεύει άψογα στο IE :P ^^(πλακα κάνω)

* τα js που υπάρχουνε εσωτερικά στο site αυτό είναι ιδαίτερα χρήσιμα για οποιον σπάει το κεφάλι του με τον IE :hammer:

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Scrolling content με Jquery

Δημοσίευση από dimsis » 07 Φεβ 2011 18:30

Βασικά πρέπει να δεις την function animate()
Και πιο συγκεκριμένα animate του background με αλλαγή στο backgroundPosition. Λογικά και με την show('slide'...) μπορεί να γίνει η ίδια δουλειά.

Στο συγκεκριμένο site φαίνεται να έχει χρησιμοποιήσει και το http://flesler.blogspot.com/2007/10/jqueryscrollto.html

tutorials / examples:
http://www.enfew.com/jquerys-animate-fu ... -about-it/
http://viralpatel.net/blogs/2010/03/und ... ction.html
http://manos.malihu.gr/horizontal-page- ... ith-jquery

δες και αυτήν την παραλλαγή: http://net.tutsplus.com/tutorials/javas ... th-jquery/

netpumber
Δημοσιεύσεις: 103
Εγγραφή: 08 Μαρ 2009 19:06

Scrolling content με Jquery

Δημοσίευση από netpumber » 07 Φεβ 2011 19:01

Σας ευχαριστώ πολύ παιδιά...

ειδικά το τελευταίο λινκ απο http://net.tutsplus.com μου άρεσε πολύ!

netpumber
Δημοσιεύσεις: 103
Εγγραφή: 08 Μαρ 2009 19:06

Scrolling content με Jquery

Δημοσίευση από netpumber » 08 Φεβ 2011 13:59

Λοιπόν, έκανα μια απόπειρα να εφαρμώσω το τελευτάιο παράδειγμα στο δικό μου κώδικα.
http://net.tutsplus.com/tutorials/javas ... th-jquery/

Εδώ είναι ο κώδικας της σελίδας μου...

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

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<script type="text/javascript" src="js/js.js"></script>

<link href="style.css" rel="stylesheet" type="text/css" />

<body>




<div class="wrapper">

<div class="header"></div>

<div class="dock" id="dock">
  <div class="dock-container">
  <ul id="nav">
  <li><a class="dock-item" href="index.html"><img src="images/home.png" alt="home" /><span>Home</span></a></li>
  <li><a class="dock-item" href="news.html"><img src="images/news.png" alt="news" /><span>News</span></a></li>
  <li><a class="dock-item" href="about.html"><img src="images/about.png" alt="about" /><span>About</span></a></li>
  <li><a class="dock-item" href="categories.html"><img src="images/categories.png" alt="categories" /><span>Categories</span></a> </li>
  <li><a class="dock-item" href="contact.html"><img src="images/email.png" alt="contact" /><span>Contact</span></a> </li>
  </ul>
  </div>
</div>

<div id="content">
<br /><br /><br />
<div class="artTitle"></div>
<div class="artText"></div>
<br /><br />
<table>
<tr>
<td>
<div class="LPostTitle"></div>
<div class="LPostText"></div>
</td>
<td>
<div class="LNewsTitle"></div>
<div class="LNewsText"></div>
</td>
</tr>
</table>

</div><!--content-->
<br /><br />

<p align="center">
<div class="footer"></div>
</p>

</div><!--wrapper-->

</body>
</html>
Πατώντας τα κουμπιά του μενού το site κάνει fade out και fade In αλλα το θέμα ειναι οτι δεν ανοίγει το περιεχόμενο των άλλων αρχείων, και όπου κι αν πατήσω ξαναφορτώνει το περιεχόμενο του index.html . Πάντως στο URl εμφανίζει όπως πρέπει το index.html#news για παράδειγμα..

Μήπως μπορείτε να καταλάβετε γιατί δεν φορτώνει τα περιεχόμενα των άλλων αρχείων ?

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

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Scrolling content με Jquery

Δημοσίευση από dimsis » 08 Φεβ 2011 14:03

τα js ξέχασες...

netpumber
Δημοσιεύσεις: 103
Εγγραφή: 08 Μαρ 2009 19:06

Scrolling content με Jquery

Δημοσίευση από netpumber » 08 Φεβ 2011 14:22

Ποια js ? οχι αυτά που έχω βάλει στην αρχή..;

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Scrolling content με Jquery

Δημοσίευση από dimsis » 08 Φεβ 2011 14:32

Μα δεν έχεις βάλει τον κώδικα π.χ. του js/js.js ή του js/interface.js ... εκεί μέσα λογικά κάνεις κλήσεις ajax για να φορτώσει τις άλλες σελίδες.
Όπως και να'χει δυο συμβουλές για το javascript / ajax debugging:
1) Firefox
2) Firebug

ΑΠΑΡΑΙΤΗΤΟ εργαλείο για debugging... από εκεί θα δεις (από την επιλογή Δίκτυο) τι καλείς και τι επιστρέφει αυτό που καλείς με ajax...

netpumber
Δημοσιεύσεις: 103
Εγγραφή: 08 Μαρ 2009 19:06

Scrolling content με Jquery

Δημοσίευση από netpumber » 08 Φεβ 2011 14:57

Μα συγγνώμη.. δεν παίζει ρόλο που τα έχω κάνει include στο html ?

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<script type="text/javascript" src="js/js.js"></script>

ή εννοείς οτι δεν τα έχω ποστάρει..?

Θα βάλω και το Firebug να δω τι μου λέει..

netpumber
Δημοσιεύσεις: 103
Εγγραφή: 08 Μαρ 2009 19:06

Scrolling content με Jquery

Δημοσίευση από netpumber » 08 Φεβ 2011 16:38

το firefug δεν βγάζει τίποτα πάντως στη καρτέλα net..

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Scrolling content με Jquery

Δημοσίευση από dimsis » 08 Φεβ 2011 17:56

Ναι ότι δεν τον έχεις ποστάρει εδώ μέσα εννοώ. Έχεις κάποιο url να δούμε τις δοκιμές σου ή μόνο local δουλεύεις;

netpumber
Δημοσιεύσεις: 103
Εγγραφή: 08 Μαρ 2009 19:06

Scrolling content με Jquery

Δημοσίευση από netpumber » 08 Φεβ 2011 18:28

Ναι local δουλεύω.. αλλά το έφτιαξα τελικά..:) μια χαζομάρα ηταν με το css.

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

Απάντηση

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

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

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