Pages

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>
Postado por Allann Jones às 4:19 PM 0 comentários

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>
Postado por Allann Jones às 12:53 PM 0 comentários

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>
Postado por Allann Jones às 11:02 AM 0 comentários
Subscribe to: Posts (Atom)