Category Archives: Web

Web

Overriding methods in Javascript

js_override
To override any method in JS+jQuery, use:

$(function(){
  SomeObject.prototype.someMethodName = function() {
    alert('Is overriden !!!');
  }
});

Ex is http://code.google.com/p/primefaces/issues/detail?id=4291
https://gist.github.com/sgruhier/1086231

Web

Bind event to element in jQuery

ordjq
To bind any event to element (for ex. textarea) use next code:

$(document).ready(function() {
  var prevValue = $("#some_id").val();
  $("#some_id").bind('change click keyup', function(e){
    if($(this).val() != prevValue){
      alert(e.which);
    }
    prevValue = $(this).val();
  });
});
Web

Cross-platform css shadow

css-box-shadow
To use cross platform css shadow:

.shadow {
    -moz-box-shadow: 3px 3px 10px #000;
    -webkit-box-shadow: 3px 3px 10px #000;
    box-shadow: 3px 3px 10px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color='#000000');
}
Web

For loop through an associative array

assocarr
To go through an associative array or object, you could use:

<script type='text/javascript'>
/* <![CDATA[ */
var data = {};
data['var1'] = 'value1';
data['var2'] = 'value2';
data['var3'] = 'value3';
console.log(data);

for (var prop in data) {
  if (Object.prototype.hasOwnProperty.call(data, prop)) { 
    console.log("prop: " + prop + " value: " + data[prop])
  }
}
/* ]]> */
</script>
Web

CSS column layout

equal-height-columns-problem
Cannot pass out away from this article. Just great info saved my time!
Thanx to author, http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Web

JQuery ajax request

ajax
Next example demonstarates Login method:

var backEndpath = '/backend';

function unparam(p) {
  // http://stackoverflow.com/questions/1131630/javascript-jquery-param-inverse-function/4764403#4764403
  var ret = {}, seg = p.replace(/^.*\?/,'').split('&'), len = seg.length, i = 0, s;
  for (;i<len;i++) {
    if (!seg[i]) {
      continue;
    }
    s = seg[i].split('=');
    ret[s[0]] = s[1];
  }
  return ret;
}

function doLogin() {
  var data = unparam($.param( $('form input,textarea,select') ));
  data['operation_name'] = 'login';
  data['formatter'] = 'json';
  $.ajax({
      url: '/user',
      type: 'POST',
      data: data,
      success: function(data) {
        try {
          //alert(data);
          event = JSON.parse(data);
          if (event.is_error == 'true') {
            $('#login_result').html(event.message).show();
          }
          else {
            $(location).attr('href', backEndpath);
          }
        } catch(e) {
        alert(e);
        }
      },
      error: function(jqXHR, textStatus, errorThrown) {
        alert(textStatus + ': ' + errorThrown);
      }
  });
  return false;
}

Method unparam converts all form fields to array.

Web

Horizontal and vertical align in CSS

To effectively align elements use:

TYPE here!!!

Thanx to http://stackoverflow.com/questions/5421334/vertical-and-horizontal-align-middle-and-center-with-css
Also, http://www.gtalbot.org/NvuSection/NvuWebDesignTips/HorizontalAlignment.html