Pages

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

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>
Postado por Allann Jones às 7:43 AM 0 comentários

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