selector.js

Demo of various selector.js features

by Mark Entingh

HTML

<script src="https://cdn.jsdelivr.net/selectorjs/0.9.1/selector.min.js"></script>
<script src="https://cdn.jsdelivr.net/velocity/1.5.0/velocity.min.js"></script>
<div class="row pad">
    <h1>
      Selector.js
    </h1>
    <p>
    A micro javascript library used as a replacement for jQuery, weighing in at nearly 5KB. <br/>Below are a set of tests that will work in both jQuery and selector.js.
    </p>
  </div>
  <div class="header pad-width-lg pad-height">
  <div class="row buttons">
    <div class="col pad">
      <a href="javascript:" class="button hello-world">Hello World</a>
    </div>
    <div class="col pad">
      <a href="javascript:" class="button change-style">Stylize</a>
    </div>
  </div>
</div>

<div class="row pad">
  <input type="text" id="texter" placeholder="type things here..."/>
</div>
<div class="row pad">
  <div class="row pad result">mimic things here...</div>
</div>
<div class="row pad">
  <div class="row teleport">
    <div class="col pad-lg">
      <a href="javascript:" class="button">Teleport</a>
    </div>
    <div class="col beam pad-lg">...beam me up, Scotty.</div>
    <div class="col platform pad">
    </div>
    </div>
  </div>
</div>

CSS

*{box-sizing:border-box;}
body{font-family:Arial, Helvetica, sans-serif;}
.header{height:108px;}
.button{color:#fff; background:#56bf94; padding:7px 15px; border-radius:4px;box-shadow:3px 3px 0px rgba(0,0,0,0.15);}
.button:link{text-decoration:none;}
.button:hover{background:#1bcd84;}
.row{width:100%; box-sizing:border-box;}
.row:after{visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
.col{float:left; position:relative; display:inline-block;}
.pad{padding:15px;}
.pad-lg{padding:30px;}
.result{background-color:#b3d9ff;}
.teleport{background-color:#ffcce0; color:#e600ac;}
.teleport .button{background-color:#e600ac;}
.teleport .button:hover{background-color:#ff3399;}
/* input placeholder text color */
input[type=text]{padding:8px 15px; font-size:17px; width:90%;}
input[type=text]::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #ccc;}
input[type=text]::-moz-placeholder { /* Firefox 19+ */ color: #ccc;}
input[type=text]:-ms-input-placeholder { /* IE 10+ */ color: #ccc;}
input[type=text]:-moz-placeholder { /* Firefox 18- */ color: #ccc;}

JavaScript

// selector.js (under 5 KB minified gzipped)
// developed by Mark Entingh (www.markentingh.com)
// looks like jQuery, acts like jQuery, but isn't jQuery.

(function(){
  var hello = 0;
	var style = 0;
  
  $('.hello-world').on('click', function(e){
  	hello = hello >= 5 ? 0 : hello + 1;
    switch(hello){
    	case 0: $(this).html('Hello World'); break;
    	case 1: $(this).html('That tickles...'); break;
    	case 2: $(this).html('No more, please.'); break;
    	case 3: $(this).html('This is torture!'); break;
    	case 4: $(this).html('Okay, now I\'m angry.'); break;
    	case 5: $(this).html('Goodbye.'); break;
    }
  });

  $('.change-style').on('click', function(e){
  	style = style >= 5 ? 0 : style + 1;
    switch(style){
    	case 0:
      	$(this).css({'font-size':24, backgroundColor:'#0066ff', border:'2px solid #0033cc'});
        break;
    	case 1:
      	$(this).css({'font-size':10, backgroundColor:'#ace600', border:'1px solid #86b300'});
        break;
    	case 2:
      	$(this).css({'font-size':17, backgroundColor:'#ff9900', border:'3px solid #ff6600'});
        break;
    	case 3:
      	$(this).css({'font-size':40, backgroundColor:'#0099e6', border:'8px solid #0066cc'});
        break;
    	case 4:
      	$(this).css({'font-size':28, backgroundColor:'#ff6666', border:'4px solid #ff3333'});
        break;
    	case 5:
      	$(this).css({'font-size':14, backgroundColor:'#ffcc00', border:'2px solid #ffa64d'});
        break;
    }
    
  });

  $('#texter').on('keyup', function(e){
    $('.result').html($(this).val());
  });

  $('.teleport a').on('click', function(){
    var speed = 2000;
    if($(this).parents('.teleport').find('.hello-world').length > 0){
      //teleport back to original spot
      $('.teleport .buttons').animate({opacity:0}, speed);
      setTimeout(function(){
        $('.header').append($('.buttons'));
        $('.buttons, .beam').animate({opacity:1}, speed);
        $('.beam').show();
      }, speed);
    }else{
     ...