Web Analytics Made Easy - StatCounter
FoulsCode

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

16 Νοεμβρίου 2017

Menu Toggle button with flat menu


Ένα αρκετά όμορφο menu για site.
Εξοικονομεί πολύ χορό και είναι πολύ εύχρηστο από όλες της συσκευές.

Μπορείτε να αλλάξετε τους συνδέσμους και τους τίτλους στο menu

Εμφάνιση αναρτήσεων με ετικέτα Menu. Εμφάνιση όλων των αναρτήσεων

HTML:


<a href="#menu" id="toggle"><span></span></a>

<div id="menu">
  <ul>
    <li><a href="URL">Home</a></li>
    <li><a href="URL">About</a></li>
    <li><a href="URL">Contact</a></li>
  </ul>
</div>


CSS:

/* Important styles */
/* FoulsCode.com */
#toggle {
  display: block;
  width: 28px;
  height: 30px;
  margin: 30px auto 10px;
}

#toggle span:after,
#toggle span:before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
}
#toggle span:after{
  top: 9px;
}
#toggle span {
  position: relative;
  display: block;
}

#toggle span,
#toggle span:after,
#toggle span:before {
  width: 100%;
  height: 5px;
  background-color: #888;
  transition: all 0.3s;
  backface-visibility: hidden;
  border-radius: 2px;
}

/* on activation */
#toggle.on span {
  background-color: transparent;
}
#toggle.on span:before {
  transform: rotate(45deg) translate(5px, 5px);
}
#toggle.on span:after {
  transform: rotate(-45deg) translate(7px, -8px);
}
#toggle.on + #menu {
  opacity: 1;
  visibility: visible;
}

/* menu appearance*/
#menu {
  position: relative;
  color: #999;
  width: 200px;
  padding: 10px;
  margin: auto;
  font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
  text-align: center;
  border-radius: 4px;
  background: white;
  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
  /* just for this demo */
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s;
}
#menu:after {
  position: absolute;
  top: -15px;
  left: 95px;
  content: "";
  display: block;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 20px solid white;
}
ul, li, li a {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
}
li a {
  padding: 5px;
  color: #888;
  text-decoration: none;
  transition: all .2s;
}
li a:hover,
li a:focus {
  background: #1ABC9C;
  color: #fff;
}

/* FoulsCode.com */
/* demo styles */
body { margin-top: 3em; background: #eee; color: #555; font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif; }
p, p a { font-size: 12px;text-align: center; color: #888; }

JQUERY:


var theToggle = document.getElementById('toggle');

// based on Todd Motto functions
// https://toddmotto.com/labs/reusable-js/

// hasClass
function hasClass(elem, className) {
return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}
// addClass
function addClass(elem, className) {
    if (!hasClass(elem, className)) {
    elem.className += ' ' + className;
    }
}
// removeClass
function removeClass(elem, className) {
var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ') + ' ';
if (hasClass(elem, className)) {
        while (newClass.indexOf(' ' + className + ' ') &gt;= 0 ) {
            newClass = newClass.replace(' ' + className + ' ', ' ');
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    }
}
// toggleClass
function toggleClass(elem, className) {
var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, " " ) + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(" " + className + " ") &gt;= 0 ) {
            newClass = newClass.replace( " " + className + " " , " " );
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    } else {
        elem.className += ' ' + className;
    }
}

theToggle.onclick = function() {
   toggleClass(this, 'on');
   return false;
}


Εμφάνιση αναρτήσεων με ετικέτα Menu. Εμφάνιση όλων των αναρτήσεων
Διαβάστε Περισσότερα »

14 Νοεμβρίου 2017

Hamburger Menu - HTML, CSS & jQuery



Ένα αναδιπλωμένο menu που εξοικονομεί αρκετό χόρo στο site σας!

Ο κώδικας ακόλουθη παρακάτω εφόσον πρώτα κάνετε την σχετικές αλλαγές προσαρμογής!

Live Demo




HTML:

<header>
<span>Author : <a href="http://foulscode.com" target="_blank">Glenn Smith | FoulsCode.com</a></span>
  <button class="hamburger">&#9776;</button>
  <button class="cross">&#735;</button>
</header>

<div class="menu">
  <ul>
    <a href="URL"><li>LINK</li></a>
    <a href="URL"><li>LINK</li></a>
    <a href="URL"><li>LINK</li></a>
    <a href="URL"><li>LINK</li></a>
    <a href="URL"><li>LINK</li></a>
  </ul>
</div>

CSS:
/* foulscode.blogspot.gr */
body{
  font-family: 'Noto Sans', sans-serif;
margin:0;
width:100%;
height:100vh;
  background:#ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header{
width:100%; 
background:#ffffff; 
height:60px; 
line-height:60px;
border-bottom:1px solid #dddddd;
}
.hamburger{
  background:none;
  position:absolute;
  top:0;
  right:0;
  line-height:45px;
  padding:5px 15px 0px 15px;
  color:#999;
  border:0;
  font-size:1.4em;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.cross{
  background:none;
  position:absolute;
  top:0px;
  right:0;
  padding:7px 15px 0px 15px;
  color:#999;
  border:0;
  font-size:3em;
  line-height:65px;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#f1f1f1;  position:absolute; text-align:center; font-size:12px;}
.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.menu li {display: block;   padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu li:hover{display: block;    background:#ffffff; padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu ul li a { text-decoration:none;  margin: 0px; color:#666;}
.menu ul li a:hover {  color: #666; text-decoration:none;}
.menu a{text-decoration:none; color:#666;}
.menu a:hover{text-decoration:none; color:#666;}

.glyphicon-home{
  color:white; 
  font-size:1.5em; 
  margin-top:5px; 
  margin:0 auto;
}
header{display:inline-block; font-size:12px;}
span{padding-left:20px;}
a{color:#336699;}
/* foulscode.blogspot.gr */ jQuery:

$( document ).ready(function() {

$( ".cross" ).hide();
$( ".menu" ).hide();
$( ".hamburger" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".hamburger" ).hide();
$( ".cross" ).show();
});
});

$( ".cross" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".cross" ).hide();
$( ".hamburger" ).show();
});
});

});
Διαβάστε Περισσότερα »

2 Δεκεμβρίου 2013

Δημιουργώντας 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 αρχείο αυτό είναι κενό, ας τοποθετήσουμε μέσα τον βασικό κώδικα που πρέπει να έχει κάθε ιστοσελίδα μας.


<!DOCTYPE html>
<html>
<head>
meta charset = 'UTF-8'/>
<title>Html Tabs Tutorial</title>
</head>

<body>
The content of the document......
</body>

</html>


έτοιμο…Ας δούμε λίγο τώρα πριν ξεκινήσουμε τον κώδικα τι είναι αυτό που θέλουμε να φτιάξουμε, έστω στο περίπου.

Τι θέλουμε να φτιάξουμε; (εικόνα) 




Βλέποντας την εικόνα καταλαβαίνουμε απλά ότι μπορούμε να έχουμε ένα μικρό μενού με 2 links , tab1 και tab2 και όταν τα κλικάρουμε θα αλλάζει το περιεχόμενο από κάτω.Ας ξεκινήσουμε να το δημιουργούμε……



Δημιουργώντας το οριζόντιο μενού..

Σε αυτό το κομμάτι θα γράψουμε και Html και CSS κώδικα οπότε να είστε προσεχτικοί. Ξεκινώντας με HTML κώδικα στο αρχείο tabs.html γράφουμε μεταξύ των <body></body> το μενού μας, το οποίο θα αποτελείται από 2 links, το tab1 και το tab2. Ένα μενού στην HTML μπορεί και είναι καλό να γίνεται με την χρήση της unordered list tag.Ας το δούμε:

<!--Το μενού μας-->
<ul>
   <li><a href="#">Tab 1</li>
   <li><a href="#">Tab 2</li>
</ul>
Ας δούμε ένα στιγμιότυπο…



Όπως βλέπουμε δημιουργήσαμε το μενού μας, και στην συνέχεια θα του δώσουμε στυλ με CSS για να μοιάζει με αυτό στο σκίτσο…:)Ας το κάνουμε..Μέσα στα <head> ανοίγουμε μία ‘style’ tag και ξεκινάμε να γράφουμε το CSS… Δείτε σχόλια στον κώδικα για ότι δεν καταλαβαίνετε.. :) Επίσης έχω περιβάλλει το menu μας σε μία container div .Δείτε όλο τον κώδικα μέχρι στιγμής.


<!DOCTYPE html>
<html>
<head>
<meta charset = 'UTF-8'/>
<title>Html Tabs Tutorial</title>
<style>
/*Εδώ κάνουμε ένα CSS reset εξαιρετικά απλό.
Μηδενίζουμε το margin και το padding σε όλα τα HTML ELEMENTS στην σελίδα.
*/
   *{
      margin:0;
      padding:0;
      }

/*To CSS για το container μας**/
   #container{
   width:700px;
   margin:100px auto; /*Εδώ κεντράρουμε την container div σε σχέση με τη σελίδα μας και της δίνουμε 100px απόσταση από την κορυφή.*/
   }

/*
Ας ρυθμίσουμε και το CSS για το μενού μας.
*/
   ul{
        height:30px;
       line-height:15px; /*Μεταφέρει το κείμενο του link Στη μέση του ύψους του height δηλαδή, στα 15px.*/
       overflow:hidden;

      }  
/*Δίνουμε στυλ σε κάθε li item*/    
     ul li{
         display:block;
         float:left; /*Βάζει τα links οριζόντια.*/
         background:#000;
         color:#fff;
         text-decoration:none;
         margin:0 3px 0 0; /*Πάνω-δεξιά-κάτω-αριστερά.*/
         padding:10px 50px 10px 50px;
         list-style-type:none;
         }  
   ul li a{
            color:#fff;
            text-decoration:none; /*Αφαιρεί την γραμμή υπογράμμισης του Link.*/
            }  
   ul li a:hover{
               text-decoration:underline; /*Όταν κάνουμε hover πάνω από το link τότε να εμφανίζεται η υπογράμμιση.*/        
               }        
   .clear {
            clear:both; //Καθαρίζει τα floats των link.
      }
   #contentContainer{

            height:400px;
            overflow:hidden;
            border:1px solid #000;
      }  

</style>

</head>

<body>
<!--Το μενού μας-->
<div id="container">
   <ul>
      <li><a href="#">Tab 1</a></li>
      <li><a href="#">Tab 2</a></li>
   </ul>
     <div class="clear"></div>
    <div id="contentContainer">
    bla bla.
    </div>
</div>

</body>

</html>

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



Δημιουργώντας το contentContainer
Δεν έχουμε τελειώσει με το μενού μας ακόμα αλλά τα υπόλοιπα θα τα κάνουμε όταν πλέον γράψουμε jQuery.Εδώ θα κάνουμε την δημιουργία του περιέκτη του περιεχομένου των tabs.Τι εννοώ; Ότι θα δημιουργήσουμε ένα container το οποίο θα περιέχει ουσιαστικά τα περιεχόμενα και των δύο tabs.Ας δούμε πώς θα το κάνουμε αυτό.
Δείτε τον κώδικα για σχόλια..
To HTML είναι :

<div id="contentContainer">
Tab contents.....
</div>

Και το css είναι:

#contentContainer{

height:200px;
overflow:hidden;/*Να μην είναι τα περιεχόμενα ψηλότερα από 400px.Στο πλάτος θα κοπούν και από το overflow:hidden του συνολικού container μας.*/
border:1px solid #000;
}

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



Δημιουργώντας τα tabs μέσα στο contentContainer.

Τα jQuery tabs θα είναι ουσιαστικά 2 divs με id το καθένα το όνομα της tab.Επίσης σε κάθε tab θα δώσουμε μία κλαση που θα την χρησιμοποιήσουμε μετά στο jQuery..
Ας δούμε λίγο τον κώδικα…Μέσα στο “contentContainer” γράφουμε….


<!--Tab 1 Contents-->      <div id="tab1" class="tabcontents">      <p>      The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.       </p>       </div>      <!--Tab 2 Contents -->      <div id="tab2" class="tabcontents">      <p>      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.      </p>       </div>


Αν προσθέσουμε και ένα padding 10px:


.tabcontents{
      padding:10px;    
   }


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


Πριν την jQuery…
Υπάρχει κάτι που δεν έχουμε κάνει ακόμα…Το μενού μας έχει 2 links τα οποία και να τα πατάμε δεν κάνουν κάτι.Το οποίο είναι λογικό.Αυτό που θα κάνουμε είναι να δώσουμε στο κάθε link ένα “προορισμό” , ώστε όταν το πατάμε να βλέπουμε ποια tab θέλουμε να δούμε.Θα χρησιμοποιήσουμε λοιπόν μία anchor tag σε κάθε link..Θα μας χρησιμεύσει αυτό με την jQuery.Μην ξεχνάτε ότι πρέπει το script που θα γράψουμε να καταλαβαίνει ποια tab είναι ενεργή και αυτό θα το παίρνει από το link…Αυτό γίνεται ως εξής..

<ul>
   <li><a href="#tab1">Tab 1</a></li>
   <li><a href="#tab2">Tab 2</a></li>
</ul>


Ας δούμε στιγμιότυπο και να κλικάρουμε στο link της tab2.Αφού το κάνετε δείτε το url….



Εφαρμόζοντας jQuery στις tabs μας…
Έφτασε η ώρα της jQuery..Το πρώτο πράγμα που χρειάζεται είναι να ενσωματώσουμε την jQuery βιβλιοθήκη αυτή καθ εαυτή στην ιστοσελίδα μας.Αυτό μπορεί να γίνει με την χρήση των google libraries, και συγκεκριμένα μπορούμε να φέρουμε το επόμενο link στο head μας.Δείτε τον κώδικα…

<head>
<meta charset = 'UTF-8'/>
<title>Html Tabs Tutorial</title><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>......


Γράφοντας το jQuery script.

Το τελευταίο πράγμα που θα κάνουμε είναι η δημιουργία ενός πολύ απλού jQuery script που θα ελέγχει την εμφάνιση των tabs ανάλογα με το link που πατάμε..Θα το γράψουμε στο head μας μέσα σε ‘script’ tags.


<script type="text/javascript">
   jQuery(document).ready(function(){
 
   //Εδώ θα γράψουμε το script..
 
   });
</script>
//Προσοχή.Ο κώδικας του script μας θα είναι ανάμεσα στην document.ready function η οποία ουσιαστικά θα τον εκτελέσει αφού έχει φορτώσει πλήρως η σελίδα μας....


Εν συνεχεία γράφω το script.Προσέξτε τα σχόλια και θα το καταλάβετε.Αντί για το ‘$’ χρησιμοποιούμε το ‘jQuery’.


<script type="text/javascript">
   jQuery(document).ready(function(){
 
      jQuery('.tabcontents').hide(); //Κρύψε όλες τις divs με αυτήν την class.
      jQuery('.tabcontents:first').show(); //Δείξε την πρώτη div με την class tabcontents.
     
      jQuery("#container a").click(function(){
      var activeTab = jQuery(this).attr("href"); //Εδώ τοποθετούμε στην μεταβλητή activeTab την ενεργή tab.Παίρνουμε από το link που πατάμε
      //το href attribute δλδ αν πατήσουμε το tab 1 link θα πάρουμε "#tab1".
      jQuery(".tabcontents").hide(); // Κρύβουμε πάλι τα περιεχόμενα των tabs.
      jQuery(activeTab).fadeIn(); //Εδώ βρίσκει την div από την activeTab και την εμφανίζει .Βασικά αυτός είναι ο λόγος που στα Links
      //χρησιμοποιούμε #tab1 για την div με id=tab1..με το
   
      return false; //Αυτό το κάνουμε για να μην "κλωτσάει προς τα πάνω η οθόνη όταν πατάμε το link.
});
 
   });


</script>



LIVE DEMO


ΠΗΓΉ
Διαβάστε Περισσότερα »

28 Μαρτίου 2013

Προτεινόμενα 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;z-index:2;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Georgia,Times,"Times New Roman";left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin:5px 0 0}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:49.8%}
  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
/* foulscode.blogspot.gr */
</style>
<div id="featuredpost"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://ivyth.googlecode.com/svn/js/featuredpost.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://foulscode.blogspot.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

DEMO


Και αφού βάλετε το δικό σας link είστε έτοιμη να κάνετε αποθήκευση.
Διαβάστε Περισσότερα »

6 Μαρτίου 2013

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





Ακόμα κι αν ο ήχος στις ιστοσελίδες κατά κύριο λόγο αγνοείτε και τις περισσότερες φορές τον μισούμε, υπάρχουν ιστοσελίδες όπου ο ήχος είναι απαραίτητος. Ξεκινώντας με ιστοσελίδες όπου οι άνθρωποι πηγαίνουν για να ακούσουν τραγούδια ή διάφορες ιστοσελίδες όπου ορισμένες ενέργειες ενεργοποιούν ένα μικρό αρχείο ήχου για να κάνουν την εμπειρία πιο ενδιαφέρουσα.
Πλέον δεν θα πρέπει να σκεφτόμαστε τις σελίδες όπως πριν από μια δεκαετία όπου τα αρχεία ήχου ήταν ενσωματωμένα με τη βοήθεια απλών HTML και ήταν πραγματικά ενοχλητικά. Οι καιροί έχουν αλλάξει και σήμερα, ο ήχος που χρησιμοποιείται στο διαδίκτυο, χρησιμοποιείται με τη βοήθεια jQuery plugins και ως επί το πλείστον μόνο σε εκείνες τις περιπτώσεις που είναι απολύτως απαραίτητος και ο επισκέπτης δεν θα ενοχληθεί  αλλά θα το βρει ενδιαφέρον.
Παρακάτω σας παρουσιάζουμε  τις jQuery βιβλιοθήκες ήχου που είναι αυτή τη στιγμή διαθέσιμες και μπορείτε να τις χρησιμοποιήσετε για τα έργα σας.

Buzz!: A Javascript HTML5 Audio library

Buzz!: A Javascript HTML5 Audio library

jPlayer: jQuery HTML5 Audio / Video Library

jPlayer: jQuery HTML5 Audio / Video Library

Audiolet

Audiolet

audiolib.js: a powerful toolkit for audio written in JS

audiolib.js: a powerful toolkit for audio written in JS

alac.js: An Apple Lossless decoder in the browser

alac.js: An Apple Lossless decoder in the browser

music.js

music.js

dynamicaudio.js

dynamicaudio.js

drPlayer: simple and free jQuery plugin for creating MP3 playlists

drPlayer: simple and free jQuery plugin for creating MP3 playlists

XAudioJS: A minimal cross-browser API for writing PCM audio samples

XAudioJS: A minimal cross-browser API for writing PCM audio samples

SoundManager 2

SoundManager 2

BeatDetektor

 BeatDetektor

SoundJS

SoundJS

AudioFX Javascript Library

AudioFX Javascript Library

jQuery Multimedia Portfolio

jQuery Multimedia Portfolio

AudioNode.js

AudioNode.js

jMedia

jMedia

Audio Data

Audio Data

Audia: a library for simplifying the Web Audio API

Audia: a library for simplifying the Web Audio API

jMP3

jMP3.

Simple Player – A very simple HTML5 audio player plugin for jQuer

Simple Player - A very simple HTML5 audio player plugin for jQuer


Διαβάστε Περισσότερα »

5 Μαρτίου 2013

Facebook Chat jQuery Plugin – Chat Pusher





Το Pusher Chat είναι ένα plugin όπως το Facebook jQuery chat που χρησιμοποιεί το API Pusher.
Χαρακτηριστικά
- εύκολο να το προσαρμόσετε με css
- διαχειριστείτε τη λίστα φίλων μέσω json
- χρησιμοποιεί API Pusher
- ανιχνεύει την πληκτρολόγηση μηνυμάτων
- ανίχνευση μηνυμάτων πληκτρολογώντας, ανίχνευση μηνυμάτων που λαμβάνετε
- υποστηρίζεται από όλα τα νέα του προγράμματος περιήγησης, IE8 και IE7 χρειάζονται κάποια επιδιόρθωση css
pusher_demo

Διαβάστε Περισσότερα »

16 Φεβρουαρίου 2013

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,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
 height: 18px;
        font-family: calibri;
}
.magenta {
 background : rgb(190,64,120);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 border: 1px solid #841144;

}
.cyan {
 background : rgb(64,181,197);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 border: 1px solid #2f8893;

}
.yellow {
 background : rgb(255,199,79);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 border: 1px solid #c08c1f;

}
.orange {
 background : rgb(255,133,64);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 border: 1px solid #c04f11;

}
.dark {
 background : rgb(89,89,89);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 border: 1px solid #272727;

}
.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.40);

}
.lavalamp a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}
.lavalamp ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}
.lavalamp ul li {
    list-style: none;
    float:left;
    text-align: center;
    }
.lavalamp ul li a {
    padding: 0 20px;
    text-align: center;
    }
.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}
/*LAVALAMP MENU BY http://www.foulscode.blogspot.gr/ END*/ 


Τώρα έρχονται στο Διάταξη σελίδας
Κάντε κλικ στο Προσθήκη Gadget
Επιλέξτε HTML / JavaScript
Αντιγράψτε και επικολλήστε τον παρακάτω κώδικα



<div class="lavalamp dark"> <ul>  <li class="active"><a href="">Home</a></li>  <li><a href="URL">About</a></li>  <li><a href="URL">Blog</a></li>  <li><a href="URL">Services</a></li>  <li><a href="URL">Portfolio</a></li>  <li><a href="URL">Contacts</a></li>  <li><a href="URL">Back to Article</a></li>  <li><<a href="URL">How it Works?</a></li> </ul> <div class="floatr"></div></div>


Αλλάξτε το <div class="lavalamp dark"> επιλέγοντας επο τα παρακάτω αυτό που σας ταιριάζει!

DEMO




<div class="lavalamp">
<div class="lavalamp magenta">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">
<div class="lavalamp dark">


Διαβάστε Περισσότερα »

7 Φεβρουαρίου 2013

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




Οι κινήσεις κειμένου σε ιστοσελίδες παλαιότερα ήταν πολύ δημοφιλής όσο ακόμα το Flash ήταν ευρέως διαδεδομένο
Υπάρχει ακόμα περιθώριο για τέτοιου είδους κινήσεις, με ένα jQuery plugin που ονομάζεται Textillate.js και απλοποιεί τη διαδικασία  δημιουργία τους.
play
Το 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

Διαβάστε Περισσότερα »

11 Ιανουαρίου 2013

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




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

Ajax AutoComplete for jQuery

Ajax AutoComplete for jQuery
Το Ajax Autocomplete για jQuery σας επιτρέπει να δημιουργήσετε εύκολα autocomplete / autosuggest κουτιά για τα πεδία εισαγωγής κειμένου. Χτισμένο με έμφαση στην απόδοση – τα αποτελέσματα για κάθε ερώτημα είναι cached και τραβιούνται από την τοπική μνήμη για το ίδιο repeating query. Εάν δεν υπάρχουν αποτελέσματα για το συγκεκριμένο ερώτημα,  η αποστολή αιτημάτων στο διακομιστή για άλλα ερωτήματα με την ίδια ρίζα, σταματάει.

Ένα fancy Apple.com-style search suggestion

A fancy Apple.com-style search jQuery plugin

Search Box με Filter και μεγάλο Drop Down Menu

Search Box with Filter and Large Drop Down Menu
Θα σας δείξει κάποια στοιχεία UI: ένα πλαίσιο αναζήτησης με φίλτρο και ένα μεγάλο drop down μενού. Θα χρησιμοποιήσουμε jQuery στα δύο στοιχεία για το αποτέλεσμα. Θα χρησιμοποιήσουμε επίσης την αφθονία των CSS3 ιδιοτήτων για να δημιουργήσουμε λεπτομέρειες.

Ajax-Driven JavaScript ComboBox with Autocomplete

Ajax-Driven JavaScript ComboBox with Autocomplete Plugin
Το dhtmlxCombo είναι ένα cross-browser JavaScript combobox με autocomplete χαρακτηριστικά. Επεκτείνει τις βασικές λειτουργίες select box και παρέχει τη δυνατότητα να εμφανίζει τις προτάσεις, ενώ ένας χρήστης πληκτρολογεί στο πεδίο κειμένου.

AutoSuggest: An AJAX auto-complete text field

AutoSuggest: An AJAX auto-complete text field
Η AutoSuggest class προσθέτει ένα popdown μενού προτεινόμενων τιμών σε ένα πεδίο κειμένου. Ο χρήστης μπορεί είτε να κάνετε κλικ απευθείας σε μια πρόταση για να εισέλθει στο χώρο, ή να πλοηγηθεί στην λίστα χρησιμοποιώντας το πάνω και κάτω βέλος, επιλέγοντας μια τιμή χρησιμοποιώντας το πλήκτρο tab. Οι τιμές για το  suggestion list παρέχονται ως XML (από ένα PHP script, ή κάτι παρόμοιο).

Creating Next Level Search Form Using jQuery & CSS3

Creating Next Level Search Form Using jQuery & CSS3
Σε αυτό το tutorial θα δούμε πως να δημιουργήσουμε φόρμες αναζήτησης, χρησιμοποιώντας jQuery και CSS3.

jQuery Plugin for On-demand Search Box: SearchMeme

jQuery Plugin for On-demand Search Box: SearchMeme
SearchMeme – η ιδέα είναι να παρέχει ένα μικρό κουμπί αναζήτησης που μπορεί να τοποθετηθεί οπουδήποτε στην ιστοσελίδα (μπορεί να θέλετε να το βάλετε στο header σας). Κάνοντας κλικ στο κουμπί αναζήτησης επεκτείνεται για να δείξει ένα πλαίσιο κειμένου όπου μπορείτε να πληκτρολογήσετε τους όρους αναζήτησης.

AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL

AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL

jQuery Autocomplete

jQuery Autocomplete

jQuery Smooth Animated Search Field Freebie

jQuery Smooth Animated Search Field Freebie

jQuery Autocomplete Mod

jQuery Autocomplete Mod

Tipue Search, a jQuery site search engine

Tipue Search, a jQuery site search engine

AutoCompleter

AutoCompleter jQuery search plugin
Αυτό το  AutoCompleter script για MooTools παρέχει χαρακτηριστικά για text suggestion και completion. Διαθέτει διάφορες πηγές δεδομένων (τοπική, JSON ή XML), μια ποικιλία αλληλεπιδράσεων χρηστών, προσαρμοσμένη μορφοποίηση, πολλαπλή επιλογή, κινούμενα σχέδια και πολλά ακόμα.

FCBKcomplete

FCBKcomplete jQuery search plugin

jQuery JSON Suggest/Search Box: JSON powered auto suggest box implemented as a jQuery plugin

jQuery JSON Suggest/Search Box: A JSON powered auto suggest box implemented as a jQuery plugin

Smart Suggest — Advanced Auto-Complete

Smart Suggest — Advanced Auto-Complete jQuery Search Plugin
Το Smart Suggest είναι ένα εντυπωσιακό search suggestion plugin για jQuery (μοιάζει στο site search της Apple). Το Smart Suggest πηγαίνει το auto-complete ένα βήμα πιο πέρα.

SearchBox

Search Box jQuery plugin
Το SearchBox είναι ένα jQuery plugin που σας επιτρέπει να έχετε πλούσια αποτελέσματα αναζήτησης με filters στην σελίδα σας (παρόμοια με το GMail και το Google Docs).

Simple Content Search

Simple Content Search
Αυτό το plugin δημιουργεί ένα απλό ταξινομητή περιεχομένου. Το Simple Content Sorting παρέχει ένα καθαρό και εύκολο τρόπο για να ομορφύνει το περιβάλλον σας, παρέχοντας ένα μηχανισμό διαλογής. Δεν γίνεται φόρτωση της σελίδας, όταν γίνετε η διαλογή μιας και όλα γίνονται με javascript.

Διαβάστε Περισσότερα »
Related Posts Plugin for WordPress, Blogger...