Web Analytics Made Easy - StatCounter
FoulsCode

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

16 Νοεμβρίου 2017

CSS3/Javascript Pure Dropdown Menu


Ένα πολύ όμορφο menu αναδιπλωμένο με κυλήσει μονο όταν κανεις κλικ στο menu ανοίγουν προς τακάτω η υποκατηγορίες, που έχετε τοποθέτηση.

Μπορείτε να αλλάξετε τους συνδέσμους και τους τίτλους του menu και φυσικά να έχετε ανεβάσει τον κώδικα JavaScript στο χώρο και site σας



HTML:

<div class="container">
  <h1 class="title">Dropdown Menu</h1>
  <ul>
    <li class="dropdown">
      <a href="URL" data-toggle="dropdown">First Menu <i class="icon-arrow"></i></a>
      <ul class="dropdown-menu">
        <li><a href="URL">Home</a></li>
        <li><a href="URL">About Us</a></li>
        <li><a href="URL">Services</a></li>
        <li><a href="URL">Contact</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="URL" data-toggle="dropdown">Second Menu <i class="icon-arrow"></i></a>
      <ul class="dropdown-menu">
        <li><a href="URL">Home</a></li>
        <li><a href="URL">About Us</a></li>
        <li><a href="URL">Services</a></li>
        <li><a href="URL">Contact</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="URL" data-toggle="dropdown">Third Menu <i class="icon-arrow"></i></a>
      <ul class="dropdown-menu">
        <li><a href="URL">Home</a></li>
        <li><a href="URL">About Us</a></li>
        <li><a href="URL">Services</a></li>
        <li><a href="URL">Contact</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS3:

@import "compass/css3";

@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import url(https://fonts.googleapis.com/css?family=Pacifico);

body {
font-family: "Lato", Helvetica, Arial;
font-size: 16px;
}

.text-center {
  text-align: center;
}

*, *:before, *:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}
/* FOULSCODE.COM */
.container {
width: 350px;
margin: 50px auto;
  
  &amp; &gt; ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
  }
}

// =============================================================================
// foulscode.com
// =============================================================================

$blue: #2980B9;
$gray: #EEE;

@mixin ul-nostyle {
list-style: none;
padding: 0;
margin: 0;
}

@mixin double-shadow($color) {
@include box-shadow(0 1px 0 lighten($color, 10%) inset, 0 -1px 0 darken($color, 10%) inset);
}

@mixin hover-style($color) {
&amp;:hover {
background: lighten($color, 3%);
}
}

@mixin animation($content) {
  animation: $content;
  -moz-animation: $content;
  -webkit-animation: $content;
}

@mixin keyframes($name) {
  @keyframes #{$name} { @content; }
  @-moz-keyframes #{$name} { @content; }
  @-webkit-keyframes #{$name} { @content; }
}

// =============================================================================
// Classes
// =============================================================================

.title {
  font-family: 'Pacifico';
  font-weight: norma;
  font-size: 40px;
  text-align: center;
  line-height: 1.4;
  color: $blue;
}

.dropdown {
a {
text-decoration: none;
}

[data-toggle="dropdown"] {
position: relative;
display: block;
color: white;
background: $blue;
@include double-shadow($blue);
@include hover-style($blue);
@include text-shadow(0 -1px 0 rgba(0,0,0,0.3));
padding: 10px;

}
.icon-arrow {
position: absolute;
display: block;
font-size: 0.7em;
color: #fff;
top: 14px;
right: 10px;

&amp;.open {
@include transform(rotate(-180deg));
@include transition(transform .6s);
}
&amp;.close {
@include transform(rotate(0deg));
@include transition(transform .6s);
}

&amp;:before {
content: '\25BC';
}
}

.dropdown-menu {
max-height: 0;
overflow: hidden;
@include ul-nostyle;

li {
padding: 0;

a {
display: block;
color: darken($gray, 50%);
background: $gray;
@include double-shadow($gray);
@include hover-style($gray);
@include text-shadow(0 -1px 0 rgba(255,255,255,0.3));
padding: 10px 10px;
}
}
}

.show, .hide {
@include transform-origin(50%, 0%);
}

.show {
display: block;
max-height: 9999px;
@include transform(scaleY(1));
@include animation(showAnimation .5s ease-in-out);
@include transition(max-height 1s ease-in-out);
}

.hide {
max-height: 0;
@include transform(scaleY(0));
@include animation(hideAnimation .4s ease-out);
@include transition(max-height .6s ease-out);
}
}

@include keyframes(showAnimation) {
0% {
@include transform(scaleY(0.1));
}
40% {
@include transform(scaleY(1.04));
}
60% {
@include transform(scaleY(0.98));
}
80% {
@include transform(scaleY(1.04));
}
100% {
@include transform(scaleY(0.98));
}
80% {
@include transform(scaleY(1.02));
}
100% {
@include transform(scaleY(1));
}
}

@include keyframes(hideAnimation) {
  0% {
  @include transform(scaleY(1));
  }
  60% {
  @include transform(scaleY(0.98));
  }
  80% {
  @include transform(scaleY(1.02));
  }
  100% {
  @include transform(scaleY(0));
  }
}

JAVASCRIPT:

// Dropdown Menu
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(function(el){
var button = el.querySelector('a[data-toggle="dropdown"]'),
menu = el.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');

button.onclick = function(event) {
if(!menu.hasClass('show')) {
menu.classList.add('show');
menu.classList.remove('hide');
arrow.classList.add('open');
arrow.classList.remove('close');
event.preventDefault();
}
else {
menu.classList.remove('show');
menu.classList.add('hide');
arrow.classList.remove('open');
arrow.classList.add('close');
event.preventDefault();
}
};
})

Element.prototype.hasClass = function(className) {
    return this.className &amp;&amp; new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};

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

14 Νοεμβρίου 2017

bootstrap dropdown hover menu



Είναι ένα menu που περιέχει html, css, java script και κάτι που το διακρίνει από πολλά αλλα είναι πως στην δεξιά μεριά έχεις ένα μενού dropdown το οποιο ανοίγει όταν τα βελάκι παραμείνει πάρο στην κατηγορια!

μπορείτε να βάλετε τα δικά σας στοιχεια και μετά να κάνετε save!

Μείνετε συντονισμένη.

Κατά την συνεχεια θα ανεβαίνουν συνεχεια διαφορα  για όλα τα site, forum, blog!!

HTML:


<div class="body-wrap">
  <div class="container">
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">FoulsCode.com</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
  </div>
</div>

CSS:

/* bootstrap dropdown hover menu*/
/* foulscode.com dropdown hover menu*/

body {
  font-family: 'PT Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #4f5d6e;
  position: relative;
  background: rgb(26, 49, 95);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 49, 95, 1)), color-stop(10%, rgba(26, 49, 95, 1)), color-stop(24%, rgba(29, 108, 141, 1)), color-stop(37%, rgba(41, 136, 151, 1)), color-stop(77%, rgba(39, 45, 100, 1)), color-stop(90%, rgba(26, 49, 95, 1)), color-stop(100%, rgba(26, 49, 95, 1)));
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1a315f', endColorstr='#1a315f', GradientType=0);
}

.body-wrap {
  min-height: 700px;
}

.body-wrap {
  position: relative;
  z-index: 0;
}
/* foulscode.com dropdown hover menu*/ .body-wrap:before,
.body-wrap:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 260px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 49, 95, 1)), color-stop(100%, rgba(26, 49, 95, 0)));
  background: linear-gradient(to bottom, rgba(26, 49, 95, 1) 0%, rgba(26, 49, 95, 0) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1a315f', endColorstr='#001a315f', GradientType=0);
}

.body-wrap:after {
  top: auto;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(26, 49, 95, 0) 0%, rgba(26, 49, 95, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#001a315f', endColorstr='#1a315f', GradientType=0);
}

nav {
  margin-top: 60px;
  box-shadow: 5px 4px 5px #000;
}

JS:

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
Διαβάστε Περισσότερα »

15 Ιουλίου 2017

Open eShop - Sell Your Digital Goods - PayPal, Credit Card, Bitcoin - Best Shop Scrip



Αυτήν η υπηρεσία open-eshop.com κοστολογείται γύρο στα 50 δολάρια!

                    Θα το βρείτε free στον παρακάτω σύνδεσμο!



Open eShop-Foulscode.com.rar 6.0 MB
Διαβάστε Περισσότερα »

2 Ιανουαρίου 2017

The Little Doctor



Little Docter is a JavaScript worm that can exfiltrate files, microphone, webcam, and other data; first demo'd at Kiwicon X.

Setup


Install docker, then edit the docker-compose.yml to your liking and execute docker-compose up or if you've broght your own server just drop the main.js file into any origin you can.


server                                Randomized cache buster                      2 months ago
.gitignore                          First cut of the working webrtc module 2 months ago
README.md                  Added pretty picture                               2 months ago
docker-compose.yml        Randomized cache buster                      2 months ago
little-doctor.png                Added pretty picture                              2 months ago






Clone with HTTPS: https://github.com/infosec-au/little-doctor.git


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

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

Αναγνώρισης Ομιλίας Με JavaScript – annyang



Η αναγνώριση ομιλίας υπάρχει πολύ καιρό, αλλά μέχρι να ενσωματωθεί σε κινητά (όπως το Siri) την συναντούσαμε σπάνια …

Η annyang είναι μια αυτόνομη βιβλιοθήκη JavaScript που φέρνει αυτή τη λειτουργικότητα σε ιστοσελίδες.

Η βιβλιοθήκη είναι 1kb και χρησιμοποιεί το Web Speech API (υποστηρίζεται από τον Chrome) στο backend.




Δεν είναι περίπλοκη και λειτουργεί με απλές, φιλικές προς το χρήστη λειτουργίες.

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

Απαιτήσεις: No Requirements
Συμβατότητα: Chrome



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

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

JavaScript Image Slider For Blogger

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




<style type="text/css"> /* JavaScript Image Slider By http://www.foulscode.blogspot.gr/ */ #mcis { display: none;} #sliderFrame { position: relative; width: 500px; margin: 0 auto; border:5px solid #000;} #ribbon { width: 111px; height: 111px; position: absolute; top: -4px; left: -4px; background: url(http://4.bp.blogspot.com/-2AdmLJaub9w/T_2NGQHAKfI/AAAAAAAACjk/ZHsOsqRyBEk/s1600/helperblogger.com-ribbon.png) no-repeat; z-index: 7;} #slider { width: 500px; height: 218px; background: #fff url(http://3.bp.blogspot.com/-5y0QxGG9wcM/T_2NFVukvgI/AAAAAAAACjg/lgnDtn_n-7w/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%; position: relative; margin: 0 auto; box-shadow: 0px 1px 5px #999999;} #slider img { position: absolute; border: none; display: none;} #slider a.imgLink { z-index: 2; display: none; position: absolute; top: 0px; left: 0px; border: 0; padding: 0; margin: 0; width: 100%; height: 100%;} div.mc-caption-bg, div.mc-caption-bg2 { position: absolute; width: 100%; height: auto; padding: 0; left: 0px; bottom: 0px; z-index: 3; overflow: hidden; font-size: 0;} div.mc-caption-bg { background-color: black;} div.mc-caption { font: bold 14px/20px Arial; color: #EEE; z-index: 4; padding: 10px 0; text-align: center;} div.mc-caption a { color: #FB0;} div.mc-caption a:hover { color: #DA0;} div.navBulletsWrapper { top: 250px; left: 190px; width: 150px; background: none; padding-left: 20px; position: relative; z-index: 5; cursor: pointer;} div.navBulletsWrapper div { width: 11px; height: 11px; background: transparent url(http://3.bp.blogspot.com/-G-iekYUr83U/T_2NEluoaDI/AAAAAAAACjY/TR1wfeuaO_k/s1600/helperblogger.com-bullet.png) no-repeat 0 0; float: left; overflow: hidden; vertical-align: middle; cursor: pointer; margin-right: 11px; _position: relative;} div.navBulletsWrapper div.active { background-position: 0 -11px;} #slider { transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);} </style> <script src="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script> <div id="sliderFrame"> <div id="ribbon"></div> <div id="slider"> <a href="URL"><img src="URL ΕΙΚΌΝΑ" alt="Image Slider By foulscode.blogspot.gr"/></a> <a href=" <a href="URL"><img src="URL ΕΙΚΌΝΑ" alt=""/></a>
<a href=" <a href="URL"><img src="URL ΕΙΚΌΝΑ" alt="The slide is a linking image"/></a> <a href=" <a href="URL"><img src="URL ΕΙΚΌΝΑ" alt="Pure Javascript. No jQuery. No flash."/></a> <a href=" <a href="URL"><img src="URL ΕΙΚΌΝΑ" alt="#htmlcaption"/></a> </div></div> </div></div>

DEMO


Αποθήκευση και είστε έτοιμη 
Διαβάστε Περισσότερα »
Related Posts Plugin for WordPress, Blogger...