The shape of space: 2013

Wednesday, November 06, 2013

JS, CSS, HTML - Banner


<html>
  <head>
    <meta charset="utf-8"/>

    <style>
      .banner {
        width: 600px;
        height: 300px;
        border: #ccc 1px solid;
      }

      .div-table {
        display: table;
        width: 100%;
        height: 100%;
      }

      .div-cell {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }

      .banner_pages {
        width: 600px;
        border: #006699 1px solid;
      }
    </style>

    <script type="text/javascript">
      var Banner = {
        items: null,
        animationHandler: null,
        elementId: '',
        element: null,
        elementPagesId: '',
        currentItemIndex: 0,
        paused: false,
        defaultDelay: 5000
      };

      Banner.setElementId = function(elementId, elementPagesId) {
        this.elementId = elementId;

        this.elementPagesId = elementPagesId;

        if (document.getElementById(this.elementId)) {
          this.element = document.getElementById(this.elementId);
        }
      }

      Banner.setItems = function(items) {
        console.log('Banner.setItems()');

        this.items = items;

        var pagesText = '';

        pagesText += '<button onclick="Banner.start();">Start</button>';
        pagesText += ' <button onclick="Banner.pause();">Pause</button>';

        for (var i = 0; i < this.items.length; i++) {
          pagesText += ' <button onclick="Banner.setItem('+ i + ');">' + i + '</button>';
        }

        document.getElementById(this.elementPagesId).innerHTML = pagesText;
      }

      Banner.start = function() {
        console.log('Banner.start()');

        if (!this.paused) {
          this.stop();

          this.currentItemIndex = 0;
        }

        this.paused = false;

        this.run();
      };

      Banner.run = function() {
        console.log('Banner.run() item=' + this.currentItemIndex +
                    ', items=' + this.items.length +
                    ', timestamp=' + (new Date).getTime());

        if (!this.element) {
          console.log('Error. Banner elemenet is not defined.');

          return;
        }

        this.setItem(this.currentItemIndex);

        var delay = 0;

        if (this.items[this.currentItemIndex].delay !== undefined) {
          delay = this.items[this.currentItemIndex].delay;
        }
        else {
          delay = this.defaultDelay;
        }

        if (this.currentItemIndex < (this.items.length - 1))
          ++this.currentItemIndex;
        else
          this.currentItemIndex = 0;

        this.animationHandler = setTimeout(function() {
            Banner.run();
        }, delay);
      };

      Banner.stopAnimation = function() {
        if (this.animationHandler) {
          clearTimeout(this.animationHandler);

          this.animationHandler = null;
        }
      };

      Banner.stop = function() {
        console.log('Banner.stop()');

        this.stopAnimation();

        this.paused = false;
      };

      Banner.pause = function() {
        console.log('Banner.pause()');

        this.paused = true;

        this.stopAnimation();
      };

      Banner.setItem = function(i) {
        console.log('Banner.setItem(' + i + ')');

        if (this.currentItemIndex < 0 || this.currentItemIndex >= this.items.length) {
          console.log('Invalid item index.');

          return;
        }

        this.currentItemIndex = i;

        this.element.innerHTML = this.items[this.currentItemIndex].src;
      };

      var items = [
        {
          src: '<div class="div-table">' +
                 '<div class="div-cell" style="background-color: green; color: #fff;">' +
                   'X' +
                 '</div>' +
               '</div>'
        },
        {
          src: '<div class="div-table">' +
                 '<div class="div-cell" style="background-color: #006699; color: #fff;">' +
                   'Y' +
                 '</div>' +
               '</div>'
        },
        {
          src: '<div class="div-table">' +
                 '<div class="div-cell" style="background-color: #000; color: #fff;">' +
                   'Z' +
                 '</div>' +
               '</div>'
        }
      ];

      function onLoad() {
        console.log('onLoad()');

        Banner.setElementId('banner', 'banner_pages');
        Banner.setItems(items);
      }
    </script>
  </head>
  <body>
    <div id="banner" class="banner"></div>

    <div id="banner_pages" class="banner_pages"></div>

    <br/>

    <button onclick="Banner.stop();">Stop</button>
  </body>
</html>
<script type="text/javascript">
  if (window.addEventListener)
    window.addEventListener('load', onLoad, false);
  else if (window.attachEvent)
    window.attachEvent('onload', onLoad);
</script>

Tuesday, November 05, 2013

JS, CSS, HTML - Collapsible panel

<html>
  <head>
    <meta charset="utf-8"/>
    <style>
      html, body {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      table {
        empty-cells: hide;
        border-collapse: collapse;
        border-spacing: 0;
        border: 0;
      }
      tr, td, th {
        padding: 0;
        border: 0;
      }
      #page {
        background-color: blue;
        width: 100%;
        height: 100%;
      }
      #header {
        background-color: black;
        padding: 5px;
      }
      #menu {
        background-color: #ccc;
        width: 150px;
        height: 100%;
        padding: 10px;
        overflow: hidden;
      }
      #menu-text {
        color: #000;
        width: 150px;
      }
      #content {
        background-color: #555;
        height: 100%;
        padding: 10px;
        color: #fff;
      }
    </style>
    <script type="text/javascript">
      var menuVisible = true;
      var menuWidth = 0;
      var menuAnimationHandler = null;

      function stopMenu() {
        if (menuAnimationHandler)
          clearTimeout(menuAnimationHandler);
      }

      function hideMenu() {
        stopMenu();

        document.getElementById('btnMenu').innerHTML = 'Show menu';

        menuVisible = false;

        if (menuWidth <= 0) {
          document.getElementById('col_menu').style.visibility = 'hidden';
          document.getElementById('col_menu').style.display = 'none';

          return;
        }

        menuWidth -= 10;

        //alert(menuWidth);

        document.getElementById('menu').style.width = menuWidth + 'px';

        menuAnimationHandler = setTimeout(function() {
          hideMenu();
        }, 10);
      }

      function showMenu() {
        stopMenu();

        document.getElementById('btnMenu').innerHTML = 'Hide menu';

        menuVisible = true;

        document.getElementById('col_menu').style.visibility = 'visible';
        document.getElementById('col_menu').style.display = 'table-cell';

        if (menuWidth > 150) {
          return;
        }

        menuWidth += 10;

        document.getElementById('menu').style.width = menuWidth + 'px';

        menuAnimationHandler = setTimeout(function() {
          showMenu();
        }, 10);
      }

      function toogleMenu() {
        menuWidth = document.getElementById('menu').offsetWidth;

        if (menuVisible) {
          hideMenu();
        }
        else {
          showMenu();
        }
      }
    </script>
  </head>
  <body>
    <div id="header">
      <button id="btnMenu" onclick="toogleMenu();">Show Menu</button>
    </div>
    <table width="100%" height="100%">
      <tr>
        <td width="1" valign="top" id="col_menu">
          <div id="menu">
            <div id="menu-text">
              Menu item 01<br/>
              Menu item 02<br/>
              Menu item 03<br/>
              Menu item 04<br/>
              Menu item 05
            </div>
          </div>
        </td>
        <td valign="top">
          <div id="content">
            <div id="content-text">
              Test<br/>
              Testing 1 2 3...
            </div>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

Tuesday, October 22, 2013

JavaScript / Node.js / SQLite / CRUD

$ npm install sqlite3

File server.js:

var url = require("url");

console.log("Starting the server...");

var pathname = '';
var sqlite3 = null;
var db = null;

var Server = {};

Server.onCreate = function(request, response)
{
  console.log('Server.onCreate()');

  pathname = url.parse(request.url).pathname;

  console.log("Request for " + pathname + " received.");

  response.writeHead(200, {'Content-type': 'text/html'});

  response.write('Node DB test<br/>');

  response.write('<button onclick="location.href=\'/query\'">Query</button>');
  response.write(' ');
  response.write('<button onclick="location.href=\'/insert\'">Insert</button>');
  response.write(' ');
  response.write('<button onclick="location.href=\'/delete\'">Delete</button>');
  response.write('<br/>');

  // Database

  sqlite3 = require('sqlite3').verbose();

  db = new sqlite3.Database('issues.db');

  db.serialize(function() {
    response.write('Serializing database instructions.<br/>');

    response.write('Create table<br/>');

    db.run("CREATE TABLE IF NOT EXISTS issues (name TEXT)");
  });

  response.write('Handling route<br/>');

  switch (pathname) {
    case '/insert':
      response.write('/insert route<br/>');
      Server.insert(db, response);
      break;
    case '/delete':
      response.write('/delete route<br/>');
      Server.delete(db, response);
      break;
    default:
      response.write('/query route<br/>');
      Server.query(db, response);
      break;
  }
};

Server.query = function(db, response)
{
  db.serialize(function() {
    response.write('Query data:<br/>');

    db.all("SELECT rowid AS id, name FROM issues", {}, function(err, rows){
      if (err)
        throw err;

      for (var j = 0; j < rows.length; j++){
        response.write("Issue name: " + rows[j].name + '<br/>');
      };

      response.end();
    });
  });

  db.close();
};

Server.insert = function(db, response)
{
  db.serialize(function() {
    response.write('Insert data<br/>');

    var stmt = db.prepare("INSERT INTO issues VALUES (?)");

    var date = new Date();

    stmt.run("Issue " + date.getTime());

    stmt.finalize();
  });

  this.query(db, response);
};

Server.delete = function(db, response)
{
  db.serialize(function() {
    response.write('Delete data<br/>');

    var stmt = db.prepare("DELETE FROM issues");

    stmt.run();

    stmt.finalize();
  });

  this.query(db, response);
};

var http = require('http');

var server = http.createServer(Server.onCreate);

server.listen(8888);

Execute server:

$ node server.js

Now, try to access http://localhost:8888 on web browser.

Tuesday, October 15, 2013

JS / CSS / Triangle / Rotate

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>

    <style>
      #div01 {
        position: absolute;
        top: 200px;
        left: 200px;
        border-color: #000;
        border-style: solid;
        border-width: 100px;
        border-top-width: 0;
        border-left-width: 60px;
        border-right-width: 60px;
        border-top-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;
        background-color: transparent;
        width: 0px;
        height: 0px;
      }
    </style>
  </head>
  <body>
    <div id="div01"></div>
  </body>
</html>
<script type="text/javascript">
  var degrees = 0;
  var delay = 50;

  function rotate() {
    if (degrees == 360)
      degrees = 0;

    var element = document.getElementById('div01');

    if (degrees == 0) {
      element.style['transform'] = 'none';
      element.style['-webkit-transform'] = 'none';
      element.style['-mozilla-transform'] = 'none';

      delay = 200;
    }
    else {
      element.style['transform'] = 'rotateY(' + degrees + 'deg) ' +
                                   'rotateX(' + degrees + 'deg)';
      element.style['-webkit-transform'] = 'rotateY(' + degrees + 'deg) ' +
                                           'rotateX(' + degrees + 'deg)';
      element.style['-mozilla-transform'] = 'rotateY(' + degrees + 'deg) ' +
                                            'rotateX(' + degrees + 'deg)';

      delay = 50;
    }

    degrees += 10;

    setTimeout(function() {
        rotate();
    }, delay);
  }

  rotate();
</script>

Thursday, September 19, 2013

JavaScript - Router using anchors

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <style>
      #log {
        border: #ccc 1px solid;
        background-color: #f1f1f1;
      }
    </style>

    <script type="text/javascript">
      // Router definition

      var Router = {
        urlCurrent: '',
        anchorNameCurrent: '',
        routeCallback: '',
        routeCallbackObj: null
      };

      Router.handle = function(param) {
        console.log('Router.handle()');

        console.log('param: ' + param);

        if (param !== undefined) {
          if (typeof param === 'string') {
            this.urlCurrent = param;
          }
          else if (typeof param === 'object') {
            console.log('nodeName: ' + param.nodeName);

            if (param.nodeName) {
              switch (param.nodeName) {
                case 'a':
                case 'A':
                  this.urlCurrent = param.href;
                  break;
              }
            }
            else {
              // If not set a router the router handler can be canceled
              this.urlCurrent = window.location.href;
            }
          }
        }
        else {
          // If not set a router the router handler can be canceled
          this.urlCurrent = window.location.href;
        }

        console.log('Router.urlCurrent: ' + this.urlCurrent);

        if (this.urlCurrent.indexOf("#") >= 0)
          this.anchorNameCurrent = this.urlCurrent.substring(this.urlCurrent.indexOf("#") + 1);
        else
          this.anchorNameCurrent = '';

        // No action was informed
        if (this.anchorNameCurrent == '')
          return;

        console.log('anchor = ' + this.anchorNameCurrent);

        // Callback

        if (typeof this.routeCallback === 'object' &&
            typeof this.routeCallbackObj == 'string' &&
            typeof this.routeCallbackObj[this.routeCallback] === 'function') {
          this.routeCallbackObj[this.routeCallback](this.anchorNameCurrent);
        }
        else if (typeof this.routeCallback == 'function') {
          this.routeCallback(this.anchorNameCurrent);
        }
      }

      Router.register = function(elementId, url) {
        console.log('Router.register(' + elementId + ', ' + url + ')');

        var element = document.getElementById(elementId);

        var nodeName = element.nodeName;

        console.log('nodeName: ' + nodeName);

        if (/select/i.test(nodeName)) {
          element.onchange = function() {
            var selectedIndex = element.selectedIndex;

            console.log(element.options[selectedIndex].value);

            Router.handle(element.options[selectedIndex].value);
          }
        }
        else {
          document.getElementById(elementId).onclick = function() {
            Router.handle(url);
          }
        }
      };

      Router.setRouteCallback = function(callback, obj) {
        console.log('Router.setRouteCallback()');
        if (typeof callback === 'object' && typeof obj == 'string' &&
            typeof obj[callback] === 'function') {
          this.routeCallback = callback;
          this.routeCallbackObj = obj;
        }
        else if (typeof callback == 'function') {
          this.routeCallback = callback;
          this.routeCallbackObj = null;
        }
      };

      // Callback to handle routing

      function handleRoute(anchor) {
        console.log('handleRoute(' + anchor + ')');

        document.getElementById('log').innerHTML = 'Route: ' + anchor;
      }

      Router.setRouteCallback(handleRoute);
    </script>
  </head>

  <body>
    <a href="#1" onclick="Router.handle(this);">Action 1</a> | 

    <a id="ahref2" href="#">Action 2</a> | 

    <button id="btn3">Action 3</button> | 

    <select id="select">
      <option value=""></option>
      <option value="#4">Action 4</option>
      <option value="#5">Action 5</option>
    </select>

    <script type="text/javascript">
      Router.register('ahref2', '#2');
      Router.register('btn3', '#3');
      Router.register('select');
    </script>

    <br/>
    <br/>

    <div id="log"></div>
  </body>

</html>

Monday, September 09, 2013

Draggable DIV

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style>
      .window-class {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 100px;
        height: 100px;
        background-color: green;
      }
    </style>

    <script type="text/javascript">
      var dragStarted = false;
      var deltaX = 0;
      var deltaY = 0;

      function dragBegin(e) {
        dragStarted = true;

        var x = 0;
        var y = 0;

        if (e.pageX) {
          x = e.pageX;
          y = e.pageY;
        }
        else {
          x = e.clientX;
          y = e.clientY;
        }

        deltaX = x - document.getElementById('window01').offsetLeft;
        deltaY = y - document.getElementById('window01').offsetTop;
      }

      function dragEnd(e) {
        dragStarted = false;
      }

      function drag(e) {
        if (!dragStarted) {
          return;
        }

        var x = 0;
        var y = 0;

        if (e.pageX) {
          x = e.pageX;
          y = e.pageY;
        }
        else {
          x = e.clientX;
          y = e.clientY;
        }

        document.getElementById('window01').style.top = (y - deltaY) + 'px';
        document.getElementById('window01').style.left = (x - deltaX) + 'px';
      }
    </script>
  </head>
  <body>
    <div id="window01" class="window-class"
              onmousedown="dragBegin(event);" 
              onmouseup="dragEnd(event);" 
              onmousemove="drag(event);" 
              onmouseout="dragEnd();"></div>
  </body>
</html>

Monday, August 19, 2013

JavaScript, HTML - Modal popup

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>

    <style>
      html, body {
        margin: 0;
        height: 100%;
      }

      .popupmodal {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(204, 204, 204, .5);
        visibility: hidden;
      }

      .popupmodal #popupContainer {
        vertical-align: middle;
        text-align: center;
        background-color: #000;
      }
    </style>

    <script type="text/javascript">
      var PopupModal = {
        element: null,
        marginSize: 100
      };

      PopupModal.open = function(width, height) {
        if (width == undefined) {
          if (document.clientWidth) {
            width = document.clientWidth - this.marginSize;
          }
          else if (document.documentElement && document.documentElement.clientWidth) {
            width = document.documentElement.clientWidth - this.marginSize;
          }
          else if (window.innerWidth) {
            width = window.innerWidth - this.marginSize;
          }
        }

        if (height == undefined) {
          if (document.clientHeight) {
            height = document.clientHeight - this.marginSize;
          }
          else if (document.documentElement && document.documentElement.clientHeight) {
           height = document.documentElement.clientHeight - this.marginSize;
          }
          else if (window.innerHeight) {
            height = window.innerHeight - this.marginSize;
          }
        }

        //console.log('popup width = ' + width + ', popup height = ' + height);

        this.element = document.createElement('div');

        this.element.className = 'popupmodal';

        document.getElementsByTagName('body')[0].appendChild(this.element);

        this.element.innerHTML = '<table width="100%" height="100%">' +
                                   '<tr>' +
                                     '<td valign="middle" align="center">' +
                                       '<div id="popupContainer" align="center">' +
                                         '<table width="100%" height="100%">' +
                                           '<tr>' +
                                             '<td valign="middle" align="center">' +
                                               '<button onclick="PopupModal.close();">' +
                                                 'Close modal popup' +
                                               '</button>' +
                                             '</td>' +
                                           '</tr>' +
                                         '</table>' +
                                       '</div>' +
                                     '</td>' +
                                   '</tr>' +
                                 '</table>';

        var popupContentElement = document.getElementById('popupContainer');

        popupContentElement.style.width = width + 'px';
        popupContentElement.style.height = height + 'px';

        this.element.style.visibility = 'visible';
      }

      PopupModal.close = function() {
        this.element.style.visibility = 'hidden';

        document.getElementsByTagName('body')[0].removeChild(this.element);
      }
    </script>
  </head>
  <body>
    Popup modal test

    <br/><br/>

    <button onclick="PopupModal.open();">Show modal popup</button>
  </body>
</html>

Wednesday, August 14, 2013

JavaScript - Simple parser for variables embedded on strings

Used for parsing variables embedded on strings. To get local variables defined inside constant strings as a way to put dynamic content like app name and version inside string translations.

Example:

Original string:
${owner} amount is ${currency} ${value}. Sharon has ${currency} ${value}. x.y = ${x.y}

Parsed string:
Sharon amount is US$ 12,345.00. Sharon has US$ 12,345.00. x.y = 5

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
  <script type="text/javascript">
    function Evaluator() {
    }

    Evaluator.prototype.matches = [];

    Evaluator.prototype.patterVarName = "[a-zA-Z_]+[_a-zA-Z0-9.]*";

    Evaluator.prototype.regex = new RegExp("\\${(" +
                                           Evaluator.prototype.patterVarName +
                                           ")}", "mg");

    Evaluator.prototype.reset = function() {
      for (var item in this.matches) {
        delete this.matches[item];
      }
    };

    Evaluator.prototype.collect = function(str) {
      this.reset();

      var match;

      while (match = this.regex.exec(str)) {
        try {
          this.matches[match[1]] = eval(match[1]);
        }
        catch (e) {
          console.log('Error: ' + e.message);
        }
      }
    };

    Evaluator.prototype.parse = function(str) {
      this.collect(str);

      for (var item in this.matches) {
        while (this.regex.test(str)) {
          str = str.replace('${' + item + '}', this.matches[item]);
        }
      }

      return str;
    };

    // Use

    var evaluator = new Evaluator();

    var owner = 'Sharon';
    var currency = 'US$';
    var value = '12,345.00';
    var x = {
      y: 5
    };

    var str = '${owner} amount is ${currency} ${value}. ' +
              'Sharon has ${currency} ${value} <br/>x.y = ${x.y}';

    document.write('<br/>Original string: <strong>' + str + '</strong><br/>');

    // Parse string

    str = evaluator.parse(str);

    document.write('Parsed string: <strong>' + str + '</strong><br/>');

    // Print variables in cache

    document.write('<br/>Variables:<br/>');

    for (var item in evaluator.matches) {
      document.write('- ' + item + ' = ' + evaluator.matches[item] + '<br/>');
    }
  </script>
</body>
</html>

Monday, August 05, 2013

Mobile / desktop cross layout - JavaScript, CSS, HTML

<!DOCTYPE html>
<html>
  <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta http-equiv="pragma" content="no-cache" />
 <meta http-equiv="Cache-Control" content="no-cache, no-store" />
 <meta http-equiv="expires" content="Mon, 01 Jan 1981 00:00:01 GMT" />
    
    <style>
      html, body {
        height: 100%;
      }
      body {
        background-color: #555;
        color: #fff;
      }
      #logger {
        border: #fff 1px solid;
        color: #fff;
      }
    </style>
    <script type="text/javascript">
      function init() {
        if (/Mobile/.test(navigator.userAgent)) {
          var metaElement = document.createElement('meta');

          metaElement.setAttribute('name', 'viewport');
          metaElement.setAttribute('content',
            'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes');

          document.getElementsByTagName('head')[0].appendChild(metaElement);
        }
      }

      init();

      function onload() {
        document.getElementById('logger').innerHTML = navigator.userAgent;

        if (!/Mobile/.test(navigator.userAgent)) {
          document.getElementById('logger').style.width = "200px";
        }
      }
    </script>
  </head>
  <body onload="onload()">
    <table width="100%" height="100%">
      <tr>
        <td valign="middle" align="center">
          <div id="logger"></div>
        </td>
      </tr>
    </table>
    </div>
  </body>
</html>

Wednesday, July 24, 2013

Dropdown menu - JS / HTML / CSS

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style>
      .menu {
        border: #ccc 1px solid;
        display: inline-block;
        width: 503px;
      }

      .menu-item {
        width: 125px;
        height: 50px;
        background-color: #f1f1f1;
        border-left: #ccc 1px solid;
        float: left;
      }

      .menu-item:first-child {
        border-left: 0;
      }

      .menu-item td {
        text-align: center;
        vertical-align: middle;
        font-size: 20px;
        font-weight: bold;
        color: #000;
        text-shadow: #ccc 1px 1px;
      }

      .menu-item:hover {
        background-color: #eee;
      }

      .menu-item:hover td {
        color: #000;
        text-shadow: #ccc 1px 1px;
      }

      .menu-sub-item {
        background-color: #f1f1f1;
        border-bottom: #ccc 1px solid;
        padding: 10px;
        color: #444;
        cursor: pointer;
      }

      .menu-sub-item * a, .menu-sub-item * a:link, .menu-sub-item * a:visited {
        text-decoration: none;
        color: #444;
      }

      .menu-sub-item * a:hover {
        text-decoration: none;
        color: #000;
      }

      .menu-sub-item:hover {
        background-color: #fff;
      }

      .menu-sub-item * {
        text-shadow: #fff 1px 1px;
      }

      .menu-clear {
        width: 0px;
        height: 0px;
        clear: both;
      }

      #menu-popup {
        position: absolute;
        width: 200px;
        /*height: 200px;*/
        border: 0;
        padding: 0;
        background-color: #f1f1f1;
        border: #ccc 1px solid;
        visibility: hidden;
        box-shadow: #ccc 1px 1px 2px;
      }
    </style>

    <script type="text/javascript">
      var Menu = {
        closePopupHandler: null,
        menuItemsClassName: '',
        popupElementId: '',
        items: null
      };

      Menu.onMouseOver = function() {
        //console.log('onmouseover menu item ' + i);

        var x = this.offsetLeft;
        var y = this.offsetTop;
        var width = this.offsetWidth;
        var height = this.offsetHeight;

        Menu.stopCloseMenuTimer();

        // Menu positioning

        document.getElementById(Menu.popupElementId).style.top = (y + height - 1) + 'px';
        document.getElementById(Menu.popupElementId).style.left = x + 'px';

        // Content

        //console.log('Menu items count: ' + Menu.items.length);
        //console.log('Menu items count: ' + Menu.items[this.index]);

        if (Menu.items[this.index] && Menu.items[this.index].length > 0) {
          var src = '';

          if (Menu.items[this.index].length > 1) {
            for (var itemIndex = 1; itemIndex < Menu.items[this.index].length; itemIndex++) {
              src += '<div ' +
                'class="' + Menu.menuSubItemClassName + '" '+
                'onclick="Menu.popupHide();location.href=\'' +
                            Menu.items[this.index][itemIndex][1] + '\'">';
              src += '<table width="100%" height="100%"><tr><td valign="middle">';
              src += '<a href="' + Menu.items[this.index][itemIndex][1] + '">';
              src += Menu.items[this.index][itemIndex][0];
              src += '</a>';
              src += '</td></tr></table>';
              src += '</div>';
            }
          }

          document.getElementById(Menu.popupElementId).innerHTML = src;

          Menu.popupShow();
        }
      };

      Menu.onMouseOut = function() {
        //console.log('onmouseout menu item');

        Menu.closeMenuTimer();
      };

      Menu.init = function(container,
                           items,
                           menuItemsClassName,
                           popupElementId,
                           menuSubItemClassName) {
        this.menuItemsClassName = menuItemsClassName;
        this.menuSubItemClassName = menuSubItemClassName;
        this.popupElementId = popupElementId;
        this.items = items;

        var src = '';

        if (Menu.items.length > 1) {
          for (var itemIndex = 0; itemIndex < Menu.items.length; itemIndex++) {
            //console.log(Menu.items[itemIndex][0][0] + ' = ' + Menu.items[itemIndex][0][1]);

            src += '<div class="menu-item">' +
                     '<table width="100%" height="100%">' +
                       '<tr>' +
                         '<td>' +
                           Menu.items[itemIndex][0][0] +
                         '</td>' +
                       '</tr>' +
                     '</table>' +
                   '</div>';
          }

          src += '<div class="menu-clear"></div>';
          src += '<div id="' + Menu.popupElementId + '"></div>';
        }

        container.innerHTML = src;

        for (var i = 0; i < document.getElementsByClassName(this.menuItemsClassName).length; i++) {
          var menuItemObj = document.getElementsByClassName(this.menuItemsClassName)[i];
          menuItemObj.index = i;

          menuItemObj.onmouseover = Menu.onMouseOver.bind(menuItemObj);

          menuItemObj.onmouseout = Menu.onMouseOut.bind(menuItemObj);

          document.getElementById(Menu.popupElementId).onmouseover = function() {
            //console.log('onmouseover menu popup');

            Menu.stopCloseMenuTimer();
          }

          document.getElementById(Menu.popupElementId).onmouseout = function() {
            //console.log('onmouseout menu popup');

            Menu.closeMenuTimer();
          }
        }
      };

      Menu.closeMenuTimer = function() {
        //console.log('Menu.closeMenuTimer');

        this.stopCloseMenuTimer();

        var obj = this;

        this.closePopupHandler = setTimeout(function() {
            //console.log('Closing menu popup');

            obj.popupHide();
        }, 500);
      };

      Menu.stopCloseMenuTimer = function() {
        //console.log('Menu.stopCloseMenuTimer');

        if (this.closePopupHandler)  {
          clearTimeout(this.closePopupHandler);

          this.closePopupHandler = null;
        }
      };

      Menu.popupShow = function() {
        document.getElementById(Menu.popupElementId).style.visibility = 'visible';

        document.getElementById(Menu.popupElementId).style.display = 'block';
      };

      Menu.popupHide = function() {
        document.getElementById(Menu.popupElementId).style.visibility = 'hidden';

        document.getElementById(Menu.popupElementId).style.display = 'none';
      };
    </script>
  </head>
  <body>
    <div id="menu" class="menu"></div>
  </body>
</html>
<script type="text/javascript">
  var menuItems = [
    [
      ['Search', ''],
      ['Google', 'http://www.google.com'],
      ['Yahoo!', 'http://www.yahoo.com']
    ],
    [
      ['Papers', ''],
      ['D24AM', 'http://www.d24am.com'],
      ['A Crítica', 'http://acritica.uol.com.br']
    ],
    [
      ['Universities', ''],
      ['UEA', 'http://www.uea.edu.br'],
      ['UFAM', 'http://www.ufam.edu.br']
    ],
    [
      ['Tech', ''],
      ['Slashdot', 'http://www.slashdot.com'],
      ['The Verge', 'http://www.theverge.com']
    ]
  ];

  Menu.init(document.getElementById('menu'),
            menuItems,
            'menu-item',
            'menu-popup',
            'menu-sub-item');
</script>

Thursday, July 18, 2013

List - JS / HTML / CSS

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style>
      * {
        border: 0;
        padding: 0;
        font-family: Monaco, Arial;
      }
      body, td {
        font-size: 12px;
      }
      table.list {
        border: 0;
        border-spacing: 0;
        border-collapse: collapse;
      }
      table.list th {
        text-align: left;
        padding: 3px 10px 3px 10px;
        background-color: #f1f1f1;
        color: #777;
        text-shadow: #fff 1px 1px;
        border-bottom: #ccc 1px solid;
        background: -moz-linear-gradient(top, #fff, #f1f1f1);
        background: -webkit-linear-gradient(top #fff, #f1f1f1);
        background: -ms-linear-gradient(top, #fff, #f1f1f1);
        background: -o-linear-gradient(top, #fff, #f1f1f1);
      }
      table.list tr:nth-child(even) {
        background-color: #fafafa;
      }
      table.list td {
        border-top: #f1f1f1 1px solid;
        padding: 3px 10px 3px 10px;
      }
      .listcontainer {
        border-radius: 3px;
        border: 1px solid #ccc;
      }
    </style>

    <script type="text/javascript">
    </script>
  </head>
  <body>
    <div class="listcontainer">
      <table class="list" width="100%">
        <thead>
          <tr>
            <th>Weekday</th>
            <th>Date</th>
            <th>Manager</th>
            <th>Qty</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Mon</td>
            <td>09/11</td>
            <td>Jones</td>
            <td>639</td>
          </tr>
          <tr>
            <td>Tue</td>
            <td>09/12</td>
            <td>Megan Fox</td>
            <td>596</td>
          </tr>
          <tr>
            <td>Sun</td>
            <td>09/17</td>
            <td>Jennifer Aniston</td>
            <td>272</td>
          </tr>
          <tr>
            <td>Sun</td>
            <td>09/17</td>
            <td>ZYZ</td>
            <td>273</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
<script type="text/javascript">
  var lists = document.getElementsByClassName('list');

  for (var listIndex = 0; listIndex < lists.length; listIndex++) {
    var trs = lists[listIndex].getElementsByTagName('tr');

    for (var trIndex = 0; trIndex < trs.length; trIndex++)  {
      trs[trIndex].onmouseover = function() {
        this.originalColor = this.style.backgroundColor;
        this.style.backgroundColor = '#f1f1f1';
      }

      trs[trIndex].onmouseout = function() {
        this.style.backgroundColor = this.originalColor;
      }
    }
  }
</script>

Wednesday, July 17, 2013

Slide - JS / CSS / HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style>
      * {
        padding: 0;
        border: 0;
      }
      html {
        height: 100%;
      }
      body {
        margin: 0;
        height: 100%;
      }
      .table_main {
        background-color: #f1f1f1;
        border-spacing: 0;
        empty-cells: show;
      }
      .table_main td {
        color: #000;
        vertical-align: top;
      }
      .table_main tr > td.first-column {
        width: 30px;
        background-color: #000;
        color: #fff;
      }
      #panelSide {
        position: absolute;
        top: 0;
        left: -300px;
        width: 300px;
        height: 100%;
        background-color: green;
      }
    </style>
    <script type="text/javascript">
      var Slide = {
        handler: null
      };

      Slide.stop = function() {
        if (this.handler) {
          clearTimeout(this.handler);
        }
      };

      Slide.slideIn = function () {
        this.stop();

        this.runSlideIn();
      };

      Slide.runSlideIn = function() {
        console.log('runSlideIn()');

        var left = parseInt(document.getElementById('panelSide').offsetLeft);

        console.log('left = ' + left + ', ' + (left + 300));

        if (left < 0) {
          left += 20;

          if (left > 0) left = 0;

          document.getElementById('panelSide').style.left = left + 'px';

          this.handler = setTimeout(function() {
            Slide.runSlideIn();
          }, 10);
        }
      };

      Slide.slideOut = function () {
        this.stop();

        this.runSlideOut();
      };

      Slide.runSlideOut = function () {
        console.log('Slide.slideOut()');

        var left = parseInt(document.getElementById('panelSide').offsetLeft);

        console.log('left = ' + left + ', ' + (left + 300));

        if (left > -300) {
          left -= 20;

          if (left < -300) left = -300;

          document.getElementById('panelSide').style.left = left + 'px';

          this.handler = setTimeout(function() {
            Slide.slideOut();
          }, 10);
        }
      }
    </script>
  </head>
  <body>
    <table class="table_main" width="100%" height="100%">
      <tr>
        <td class="first-column" onmouseover="Slide.slideIn();">
        </td>
        <td>
          <b>A slide experiment.</b>
          <br/><br/>
          Put the mouse pointer over the black area.
        </td>
      </tr>
    </table>
    <div id="panelSide" onmouseout="Slide.slideOut();">
      Slide content. Put the mouse pointer out of this area.
    </div>
  </body>
</html>

The shape of space

Pages

Wednesday, November 06, 2013

JS, CSS, HTML - Banner

Tuesday, November 05, 2013

JS, CSS, HTML - Collapsible panel

Tuesday, October 22, 2013

JavaScript / Node.js / SQLite / CRUD

Tuesday, October 15, 2013

JS / CSS / Triangle / Rotate

Thursday, September 19, 2013

JavaScript - Router using anchors

Monday, September 09, 2013

Draggable DIV

Monday, August 19, 2013

JavaScript, HTML - Modal popup

Wednesday, August 14, 2013

JavaScript - Simple parser for variables embedded on strings

Monday, August 05, 2013

Mobile / desktop cross layout - JavaScript, CSS, HTML

Wednesday, July 24, 2013

Dropdown menu - JS / HTML / CSS

Thursday, July 18, 2013

List - JS / HTML / CSS

Wednesday, July 17, 2013

Slide - JS / CSS / HTML

Blog Archive

Links

Pages

Wednesday, November 06, 2013

Tuesday, November 05, 2013

Tuesday, October 22, 2013

Tuesday, October 15, 2013

Thursday, September 19, 2013

Monday, September 09, 2013

Monday, August 19, 2013

Wednesday, August 14, 2013

Monday, August 05, 2013

Wednesday, July 24, 2013

Thursday, July 18, 2013

Wednesday, July 17, 2013

Blog Archive

Links

Subscribe To