Μετάβαση στο κύριο περιεχόμενο

Αναρτήσεις

Εμφάνιση αναρτήσεων με την ετικέτα jQuery

Δημιουργώντας jQuery tabs με χρήση HTML και CSS.Ειδικά για αρχάριους..!

Demo του jQuery Tabs tutorial.
Ας δούμε ένα demo, για να δείτε τι θα φτιάξουμε σήμερα.Είναι πολύ απλό να δημιουργήσετε jQuery tabs με απλή HTML και λίγο CSS, όσο δεν φαντάζεστε.

Προαπαιτούμενη γνώση για το tutorial αυτό.
Οι γνώσεις που χρειάζονται για να παρακολουθήσετε το tutorial αυτό είναι πολύ απλή γνώση HTML-CSS και ελάχιστη γνώση jQuery.Ο κώδικας θα εξηγείται αναλυτικά στα σημεία που χρειάζεται.. :)

Ξεκινώντας το jQuery Tabs tutorial…
Πριν ξεκινήσουμε θα κάνουμε την εξής παρατήρηση. Όλο τον σημερινό κώδικα θα τον γράψουμε σε ένα αρχείο , το tabs.html. Αυτή η πρακτική ΔΕΝ ΣΥΝΙΣΤΑΤΑΙ σε κανονικά websites απλά εμείς θα το κάνουμε έτσι για λόγους παρουσίασης.Κανονικά πρέπει τα stylesheets, τα js αρχεία και το html να είναι σε ξεχωριστά αρχεία και να τα καλούμε όπου χρειαζόμαστε.Επίσης πολύ καλό είναι να το δημιουργήσετε και να το τρέξετε σε περιβάλλον WAMPserver.

Ξεκινάμε , δημιουργώντας στον αγαπημένο μας editor ένα κενό αρχείο και το σώζουμε με το όνομα :tabs.html. To αρχείο αυτό εί…

Προτεινόμενα Post από CSS, jQuery

Αντιγραφή επικόλληση τον κώδικα:


<style scoped="" type="text/css">
/* foulscode.blogspot.gr */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;…

jQuery Και Audio Στο Web – Audio Player Plugins

Ακόμα κι αν ο ήχος στις ιστοσελίδες κατά κύριο λόγο αγνοείτε και τις περισσότερες φορές τον μισούμε, υπάρχουν ιστοσελίδες όπου ο ήχος είναι απαραίτητος. Ξεκινώντας με ιστοσελίδες όπου οι άνθρωποι πηγαίνουν για να ακούσουν τραγούδια ή διάφορες ιστοσελίδες όπου ορισμένες ενέργειες ενεργοποιούν ένα μικρό αρχείο ήχου για να κάνουν την εμπειρία πιο ενδιαφέρουσα. Πλέον δεν θα πρέπει να σκεφτόμαστε τις σελίδες όπως πριν από μια δεκαετία όπου τα αρχεία ήχου ήταν ενσωματωμένα με τη βοήθεια απλών HTML και ήταν πραγματικά ενοχλητικά. Οι καιροί έχουν αλλάξει και σήμερα, ο ήχος που χρησιμοποιείται στο διαδίκτυο, χρησιμοποιείται με τη βοήθεια jQuery plugins και ως επί το πλείστον μόνο σε εκείνες τις περιπτώσεις που είναι απολύτως απαραίτητος και ο επισκέπτης δεν θα ενοχληθεί  αλλά θα το βρει ενδιαφέρον. Παρακάτω σας παρουσιάζουμε  τις jQuery βιβλιοθήκες ήχου που είναι αυτή τη στιγμή διαθέσιμες και μπορείτε να τις χρησιμοποιήσετε για τα έργα σας. Buzz!: A Javascript HTML5 Audio library jPlayer: jQuery H…

Facebook Chat jQuery Plugin – Chat Pusher

Το Pusher Chatείναι ένα plugin όπως το Facebook jQuery chat που χρησιμοποιεί το API Pusher. Χαρακτηριστικά - εύκολο να το προσαρμόσετε με css
- διαχειριστείτε τη λίστα φίλων μέσω json
- χρησιμοποιεί API Pusher
- ανιχνεύει την πληκτρολόγηση μηνυμάτων
- ανίχνευση μηνυμάτων πληκτρολογώντας, ανίχνευση μηνυμάτων που λαμβάνετε
- υποστηρίζεται από όλα τα νέα του προγράμματος περιήγησης, IE8 και IE7 χρειάζονται κάποια επιδιόρθωση css Απαιτήσεις: jQuery
Download: http://html5-ninja.com/item/Pusher-Chat-jQuery-plugin/7
Demo: http://html5-ninja.com/preview/index/7
ΠΗΓΗ

Fancy CSS3 και jQuery Μενού Lavalamp Για Blogger

Μετάβαση στο Blogger Template ταμπλό>
Κάντε κλικ στο Επεξεργασία HTML
Πατήστε Συνέχεια
Βρείτε παρακάτω κώδικα στο πρότυπό σας


</head>

Προσθέσετε παρακάτω κώδικα ακριβώς από πάνω.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script>


Τώρα βρείτε παρακάτω κώδικα,


]]></b:skin>

προσθέσετε παρακάτω κώδικα CSS αμέσως πριν,


/*LAVALAMP MENU BY http://www.foulscode.blogspot.gr/ START*/
.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,20…

Animations Κειμένου Με jQuery: Textillate

Οι κινήσεις κειμένου σε ιστοσελίδες παλαιότερα ήταν πολύ δημοφιλής όσο ακόμα το Flash ήταν ευρέως διαδεδομένο Υπάρχει ακόμα περιθώριο για τέτοιου είδους κινήσεις, με ένα jQuery plugin που ονομάζεται Textillate.jsκαι απλοποιεί τη διαδικασία  δημιουργία τους. Το plugin κάνει χρήση του Animate.css + Lettering.js και είναι ικανό να δημιουργήσει πολλά κινούμενα σχέδια όπως το flash, bounce, shake, pulse, fade, rotate, flip και πολλά άλλα. Απαιτήσεις: jQuery, Animate.css, Lettering.js
Website:http://jschr.github.com/textillate/
Download:https://github.com/jschr/textillate
ΠΗΓΗ

jQuery Plugins Που Θα Σας Βοηθήσουν Να Προσαρμόσετε Το Search Box

Το πλαίσιο αναζήτησης είναι ένα σημαντικό στοιχείο του χώρου και για ορισμένες ιστοσελίδες, είναι το πιο χρησιμοποιημένο.
Συχνά παραβλέπεται ακόμα κι αν αυτό είναι πραγματικά χρήσιμο για τον επισκέπτη. Όταν δεν το παραμελούμε μπορούμε να το προσαρμόσουμε στις ανάγκες του χώρου με οπτικά στοιχεία και πολύ καλή κωδικοποίηση. Μπορεί να είναι απλό μόνο προσαρμογές στο σχεδιασμό, αλλά με τη βοήθεια  jQuery plugins μπορεί να γίνει αρκετά πιο περίπλοκο και να προσφέρει πολλές επιπλέον λειτουργίες που κάνει την αναζήτηση ευκολότερη. Η Παράδοση αυτού που ψάχνει ο επισκέπτη σας, είναι πολύ σημαντικό και θα πρέπει να κάνετε αυτή τη λειτουργία ευκολότερη για αυτούς. Παρακάτω θα δούμε μερικά από τα καλύτερα jQuery Plugins για search box που θα μας βοηθήσουν να το προσαρμόσουμε βάση των αναγκών μας. Ajax AutoComplete for jQuery Το Ajax Autocomplete για jQuery σας επιτρέπει να δημιουργήσετε εύκολα autocomplete / autosuggest κουτιά για τα πεδία εισαγωγής κειμένου. Χτισμένο με έμφαση στην απόδοση – τα αποτ…