JSFiddle

  • hover image example #8 is the latest revision

    hover image example

    $(document).ready(function () {
        $( ".image" ).hover(
          function() {
              $(this).next('span').toggleClass('visible');
          }, function() {
              $(this).next('span').toggleClass('visible');
          }
        );
    });
  • star

    No-Library (pure JS), HTML, CSS, JavaScript

    <svg height="210" width="500">
      <polygon points="100,10 40,198 190,78 10,78 160,198"
      style="fill:green;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
    </svg>
  • hover menu #1 is the latest revision

    hover menu

    <div class="dropdownwrap">
        <div class="nav">
            <ul class="dropdown">
                <li><a href="#">Sustainability</a></li>
                <li><a href="#">Urbanisation</a></li>
                <li><a href="#">Water</a></li>
                <li><a href="#">Water resources management</a></li>
            </ul>
        </div>
    </div>
  • Zooming to Countries Map amCharts example #3 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    var map = AmCharts.makeChart("chartdiv", {
    
    	"type": "map",
        "theme": "dark",
        "pathToImages": "http://www.amcharts.com/lib/3/images/",
    
    	"dataProvider": {
         "map": "worldLow ...
  • vertical and horizontal menu

    No-Library (pure JS), HTML, CSS, JavaScript

    <ul class="vertical">
      <li><a href="#home">Home</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
    
    <br>
    
    <ul class="horizontal">
      <li><a href="#home">Home</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
    
    
  • jQuery fade animation

    jQuery 1.10.1, HTML, CSS, JavaScript

    $( document.body ).click(function() {
      $( "div:hidden:first" ).fadeIn( "slow" );
    });
    
  • angularJS todo app

    AngularJS 1.1.1, HTML, CSS, JavaScript

    function TodoCtrl($scope) {
      $scope.todos = [
        {text:'learn angular', done:true},
        {text:'build an angular app', done:false}];
    
      $scope.addTodo = function ...
  • backbone.js todo app #59 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    var todos = [
    		{text: "todo 1", done: true},
    		{text: "todo 2", done: false},
    		{text: "todo 3", done: false},
    ];
    
    var Todo = Backbone ...
  • RaphaelJs example 3

    Raphael 1.5.2 (min), HTML, CSS, JavaScript

    var paper = Raphael("paper1", 500,500);
    
    var rect1 = paper.rect(20,30,100,12).attr(
        {fill: "green"}
    );
    	
    paper.circle(100 ...
  • css scroll without scrollbar #8 is the latest revision

    css scroll without scrollbar

    <div class="parent">
        
        <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales cursus semper. Praesent rutrum justo ut odio adipiscing consectetur. Morbi ...</div></div>