Δημιουργία sliding panel με minifolio + jQuery:Mέρος 2

[Anastasis 48]

Σκέψεις και δημιουργία κρυφής περιοχής με html και CSS..

Θυμάστε την κρυφή περιοχή;Είναι η περιοχή η οποία βρίσκεται ακριβώς κάτω από τα 4 εικονίδια και πάνω από τον τίτλο του
“portfolio” μας.Είναι μία περιοχή που θέλουμε όταν κλικάρουμε πάνω στα εικονίδια να ξετυλίγεται προς τα κάτω.Ανάλογα με το εικονίδιο που πατάμε η περιοχή αυτή θα “γεμίζει”με διαφορετικό περιεχόμενο.Η περιοχή αυτή είναι 4 div ουσιαστικά οι οποίες είναι κρυμμένες και εμφανίζονται και εξαφανίζονται με jQuery.Ας θυμηθούμε λίγο την εικόνα:



Βλέπετε στα δεξιά που μιλάμε για 4 divs που έχουν κοινή κλάση content;; Εκεί ακριβώς είναι η κρυφή περιοχή.Αυτές οι 4 divs θα έχουν μία κοινή κλάση και 4 διαφορετικά ids αναλόγως με το τι θα περιέχει η κάθε μία περιοχή..Ας δούμε τι θέλουμε ακριβώς..
1.)Εάν κλικάρω το εικονίδιο με το RSS θέλω να εμφανίζεται η περιοχή η οποία μέσα θα έχει μία φόρμα που θα μπορεί κάποιος να βάλει το email του ώστε να λαμβάνει τα άρθρα μας.Δεν θα την κάνω λειτουργική τη φόρμα απλά θα τη δημιουργήσουμε
2.)Εαν κλικάρω το fb εικονίδιο θέλω να εμφανίζεται μέσα στην περιοχή αυτή η σελίδα μου στο facebook.Εδώ θα χρησιμοποιήσω τον κώδικα που μου δίνεται στο facebook,στη σελίδα των developers.Θα το εξηγήσουμε παρακάτω.

3.)Eάν κλικάρω το twitter εικονίδιο θέλω στην περιοχή αυτή να εμφανίζονται τα τελευταία 3 tweets μου.Για ακόμα μία φορά θα μας λυθούν τα χέρια με τη βοήθεια από το επίσημο site του twitter.

4.)Εάν κλικάρω το εικονίδιο με το mail τότε στην περιοχή αυτή θέλω να εμφανιστεί μία φόρμα επικοινωνίας που θα μου ζητάει να τη συμπληρώσω.

5.)Κάθε div από τις παραπάνω θα έχει ένα link από κάτω που θα την κλείνει .Δηλαδή θα το πατάμε και θα την κλείνουμε..
Αυτά....Για πάμε..


Ο html κώδικας..

Ο παρακάτω κώδικας τοποθετείται αμέσως μετά το

 

κώδικας:

<div class="socialIcons" id="mail" title="mailDiv"></div>

που υπάρχει στον html κώδικα μας της σελίδας "social.html".

κώδικας:

<div id="rssDiv" class="content"> <!-- I forma gia to rss!! --> <-- to link poy tha kleinei ti div ayti --> </div> <div id="facebookDiv" class="content"> <!-- O kwdikas apo to facebook developers center --> <-- to link poy tha kleinei ti div ayti --> </div> <div id="twitterDiv" class="content"> <!-- O kwdikas apo to twitter gia ta teleytaia tweets --> <-- to link poy tha kleinei ti div ayti --> </div> <div id="mailDiv" class="content"> <!--I forma epikoinwnias mas --> <-- to link poy tha kleinei ti div ayti --> </div>

Html και CSS για τις divs με class “content”

1) rssDiv

Στη div με id = “rssDiv” δημιουργούμε μία φόρμα επικοινωνίας με ένα πεδίο για το mail.Άρα η div μας γίνεται..

κώδικας:

<div id="rssDiv" class="content">        <form method="POST" action="" id="form">        <label for="name" id="mails">Email</label>        <input type="text" id="text" value="Your Email here"/>        <input type="submit" value="Submit" id="submit"/>        </form>        <div class="close"><a href="#">Close</a></div> </div>

Αυτό ήταν.Παρατηρείτε που κάτω ακριβώς από τη φόρμα τοποθέτησα ένα link με κλάση “close”;Είναι το link που θα κλείνει την div αυτή όταν θέλουμε εμείς.
Ας προσθέσουμε και τον αντίστοιχο κώδικα στο CSS αρχείο και μετά να δούμε πώς μοιάζει.
 

κώδικας:

.content{     float:left;     background-color: #E4E4E4;     width:100%;     margin-top:2px;     padding:2px;     overflow:hidden; } .close{     font-size:10px;     padding-left:1px;     width: 100%;     float:left; } .close a{     color:red;     font-weight:bold; } #rssDiv{     margin-bottom:-2px; } #rssDiv label{     padding-top:5px;     font-size:12px;     font-family:Kalinga;     display:inline; } #form #text {     padding-bottom:3px; } #form #submit{  font-family:Kalinga;  font-size:11px;  color:White;  width:40px;  background: #383838;  cursor: pointer;  border:1px solid blue;  margin-bottom:1px;  padding-top:3px; }

Γραμμή 1:Εδώ είναι οι κανόνες CSS που εφαρμόζονται σε όλες τις divs που έχουν την κλάση “content“.

Γραμμή 11:Εδώ δημιουργούμε το στυλ που θα έχει η div που θα περιέχει το link μας το οποίο θα κλείνει τη div.Επειδή το link αυτό θα το χρησιμοποιήσουμε 4 φορές γι αυτό και δημιουργούμε ουσιαστικά μία css class την “.close“.

Γραμμή 19:Εδώ ρυθμίζουμε την εμφάνιση του link μας που θα κλείνει τις div.

Γραμμή 23:Εδώ ορίζουμε τα css στυλ της div που έχει id = “rssDiv”..

Γραμμές 29,36,40:Σε κάθε ένα από αυτά τα block κώδικα ελέγχουμε την εμφάνιση των στοιχείων της φόρμας επικοινωνίας.Ελέγχουμε την εμφάνιση του label,του input που είναι το πεδίο εισαγωγής του mail καθώς και του κουμπιού submit!!

Ας δούμε ένα στιγμιότυπο..



Όμορφα.Έτσι ακριβώς θα δημιουργήσουμε και τις άλλες 3 divs και θα τις κρύψουμε προσθέτοντας στο τέλος το CSS κανόνα display:none μέσα στο css της κλάσης “.content”.

2) facebookDiv

Σε αυτή τη div θα χρησιμοποιήσουμε τα εργαλεία που μας δίνει το facebook για developers.Πάμε στη σελίδα
Facebook Plugins-Like Box και βλέπουμε ότι εκεί έχει μία εφαρμογή η οποία μας δίνει τη δυνατότητα να δημιουργήσουμε ένα like-box !Mας ζητάει το id της σελίδας μας στο fb ,το πλάτος που θέλουμε να έχει το like box (εμείς ζητάμε 250px πλάτος) κλπ.Όταν τα δώσουμε αυτά και πατήσουμε “get code” αντιγράφουμε τον κώδικα και θα τον τοποθετήσουμε στη div με id =”facebookDiv“..
 

παράθεση:

Σημείωση:Κανονικά το like box περιέχει και μικρογραφίες από κάποιους θαυμαστές της σελίδας μας.Για κάποιο λόγο τις τελευταίες μέρες κάποιες φορές περιέχει και κάποιες όχι..

Ας Δούμε λίγο τα περιεχόμενα της div..
 

κώδικας:

<div id="facebookDiv" class="content"> <iframe src="http://www.facebook.com/plugins/likebox.php?id=125811164104079&amp; width=250&amp;connections=20&amp; stream=false&amp;header=true&amp;height=287" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:287px; " allowTransparency="true"></iframe>    <div class="close"><a href="#">Close</a></div> </div>

Δεν υπάρχουν κανόνες css για το id=”facebookDiv” διότι δεν χρειάζεται.Όπως βλέπεται ο κώδικας που μας δόθηκε περιέχει και css μέσα.

3) twitterDiv

Εδώ θα τοποθετήσουμε στη div αυτή τα τελευταία μας tweets. Πηγαίνετε στη σελίδα Τwitter profile Widget και από κει μπορείτε να ελέγξετε κάποιες παραμέτρους για το widget σας.Αφού τελειώσετε πατήστε “grab code” και θα σας δoθεί ο κώδικας.Αυτόν τον κώδικα πρέπει να τοποθετήσουμε μέσα στη div με id =”twitterDiv”.Εμείς όμως θα κάνουμε κάτι πιο έξυπνο από το να τοποθετήσουμε όλο αυτόν τον κώδικα μέσα στη div.Λοιπόν ο κώδικας που μας δίνει στη σελίδα με το Twitter widget είναι ο εξής:
 

κώδικας:

<script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({   version: 2,   type: 'profile',   rpp: 4,   interval: 6000,   width: 250,   height: 300,   theme: {     shell: {       background: '#333333',       color: '#ffffff'     },     tweets: {       background: '#000000',       color: '#ffffff',       links: '#4aed05'     }   },   features: {     scrollbar: false,     loop: false,     live: false,     hashtags: true,     timestamp: true,     avatars: false,     behavior: 'all'   } }).render().setUser('akisplace').start(); </script>

Εμείς θα κάνουμε το εξής εδώ:

Βήμα 1:
Την πρώτη γραμμή του κώδικα αυτού θα την τοποθετήσουμε στο head της σελίδας μας.Αυτό μπορούμε να το κάνουμε διότι αν παρατηρήσετε στη πρώτη γραμμή καλείται ένα javascript αρχείο το “widgets.js” από το widget.twimg.com.Οπότε εάν τοποθετηθεί στη σελίδα μας μπορούμε να καλούμε το αρχείο από το head μας.Ας δούμε λίγο το head μας.
 

κώδικας:

<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="Archimidis Mertzanos" /> <link rel="stylesheet" href="styles_test.css"/> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <title>Socialize with us!!</title> </head>

Βήμα 2:
Στο κώδικα που που μένει ,από τη γραμμή 2-31, θα τον τοποθετήσουμε σε ένα αρχείο javascript το οποίο θα δημιουργήσουμε εμείς.Το αρχείο το ονομάζουμε “tweet.js” και το τοποθετούμε σε ένα φάκελο που δημιουργούμε και τον ονομάζουμε “js”.Το αρχείο αυτό θα περιέχει τον κώδικα από τις γραμμές 2-31 χωρίς φυσικά τα script tags(αφού το αρχείο είναι javascript έτσι και αλλιώς-τα script tags τα χρησιμοποιούμε σε σελίδα html για να δηλώσουμε ότι θα ενσωματώσουμε κάποιο script στη σελίδα μας).
Αφού κάνουμε τα παραπάνω βήματα μέσα στην div “twitterDiv” τοποθετούμε το παρακάτω και η div μας θα μοιάζει ως εξής..
 

κώδικας:

<div id="twitterDiv" class="content">    <script src="js/tweet.js"></script>     <div class="close"><a href="#">Close</a></div> </div>

Είδατε; Mε μία γραμμή κώδικα (γραμμή 2) καλούμε το twitter widget πλέον!!

4) mailDiv

Εδώ θα δημιουργήσουμε τα περιεχόμενα της div με id “mailDiv” που θα περιέχει την φόρμα επικοινωνίας μας.
Ο html κώδικας….
 

κώδικας:

<div id="mailDiv" class="content">        <form method="get" action="" id="contactform">        <label for="name">Name:<abbr>*</abbr></label>        <input type="text" id="name" name="name"/>        <br />        <label>Email:<abbr>*</abbr> </label>       <input type="text" id="email" name="email"/>        <br />        <label for="comments">Your Comments<abbr>*</abbr></label>        <textarea id="textarea" name="textarea" id="textarea"></textarea>        <br />        <input type="submit" value="Submit" id="button_validate"/>        <span id="validation_result" class="result"></span>        </form> <div class="close"><a href="#">Close</a></div>    </div>

Ας το κάνουμε λίγο πιο όμορφο με τη χρήση CSS.

Ας προσθέσουμε τον παρακάτω κώδικα στο CSS αρχείο που έχουμε..
 

κώδικας:

#contactform label{ display:block; margin-left:2px; font:Verdana; font-size:16px; font-weight:bold; color:black;} #contactform input{ font:Kalinga; font-size:12px; color:black; padding:2px; } #contactform textarea{     width:80%;     height:60px;     padding:2px;     text-align:left; } #contactform #submit{ font-family:Kalinga;  font-size:14px;  color:White;  background: #383838;  cursor: pointer;  border:1px solid blue;  margin-bottom:1px;  margin-top:2px;  padding-top:3px; } abbr{     color:red; }

ΝΑΙ…Είμαστε έτοιμοι,ένα βήμα πριν αρχίσουμε με την jQuery.Το παραπάνω CSS δεν θα το εξηγήσουμε καθότι είναι πολύ εύκολο.Για πάμε στο τελευταίο κομμάτι και στην εφαρμογή της jQuery.