Archive for April, 2009

jQuery: (JQuery UI) Datepicker is shown or is showing hack.

Wednesday, April 29th, 2009

The jQuery UI Datepicker does not have a method to test if the datepicker is shown, but since it uses a singleton pattern, you can access the private flag directly with:

$.datepicker._datepickerShowing

Not super elegant, but it works. Also, the singleton approach means that only one date picker can be shown at a time.

CSS: Good article on Absolute, Relatative positioning

Wednesday, April 29th, 2009

Making the absolute, relative (from stopdesign.com). In short:

According to the CSS2 spec, an absolute-positioned element is positioned according to its containing block. Any element is considered “positioned” if it has a position value of relative, absolute, or fixed (anything other than static). “Static” is one of the possible values for the position property. It’s also the default value for any element if no other position is specified. Static basically means an element’s position is not modified, and the element will appear in the expected normal flow of the document in context with other sibling elements and containing blocks.

If an absolute-positioned element resides within no other containing block, (when no ancestor elements are positioned) it is placed relative to the page boundaries (called the initial containing block).

jQuery: Unbinding a DatePicker (JQuery UI)

Wednesday, April 29th, 2009
 $("#datepicker").datepicker("destroy"); 

jQuery: Get tagName from a Jquery Element

Tuesday, April 28th, 2009
alert( $('div')[0].tagName );

Pics: Ajax Loading Gif Generator

Tuesday, April 21st, 2009

Animated progress bar. Very cool loading gif generator http://www.ajaxload.info/

CSS: Remove gray border around links

Monday, April 20th, 2009
a{
outline:none;
}

Source: Flepstudio

jQuery: simpleBind, a simple way to bind DOM element values

Saturday, April 18th, 2009

SimpleBind Source on GitHub (License free: use as you want, attribute as you feel, modify as you can).

I did not find a data binding javascript library that fit my need, so, I created one. The idea is to easily bind Dom UI values together.

Usage:

$(selector).simpleBind(bindName);

$.fn.simpleBind.unbind(bindName); //to unbind all the elements for this bindName

Example:

Click on Test to start the binding, and then, type in the fields.
<ul>
	<li><input class="companyName" type="text" value="CompanyName"></li>
	<li class="companyName">Test (this will be erased with the
 first value on simpleBind)</li>
	<li class="companyName">Test2 (this too)</li>
	<li class="companyName"></li>
	<li><input class="companyName" type="text"></li>
	<li class="planName">plan 1</li>
	<li ><input class="planName" type="text" value=""></li>
	<li class="planName">plan 2</li>
</ul>
<input type="button" onclick="testSimple(event)" value="Test" />

And here the JavaScript code. Obviously, usually, you will bind onLoad, but it was to show how the system works.

<script type="application/javascript">
	function testSimple(event){
		$(".companyName").simpleBind("companyName");
		$(".planName").simpleBind("planName");
	}
</script>

HTML: Firebug Console Log

Saturday, April 18th, 2009
if (window.console && window.console.log)
   window.console.log('hilight selection count: ' + $obj.size());

jQuery: Plugin Tutorial

Saturday, April 18th, 2009

The code below comes from the following tutorial, read it, it is an exceptionally good tutorial: Learning Query: A Plugin Development Pattern

// create closure
(function($) {
  //
  // plugin definition
  //
  $.fn.hilight = function(options) {
      debug(this);
      // build main options before element iteration
      var opts = $.extend({}, $.fn.hilight.defaults, options);
      // iterate and reformat each matched element
      return this.each(function() {
           $this = $(this);
           // build element specific options
           var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
           // update element styles
          $this.css({
              backgroundColor: o.background,
              color: o.foreground
          });
         var markup = $this.html();
         // call our format function
         markup = $.fn.hilight.format(markup);
         $this.html(markup);

     }); // /return this.each(function()

   }; // /$.fn.hilight = function(options) {

  //
  // private function for debugging
  //
  function debug($obj) {
      if (window.console && window.console.log)
      window.console.log('hilight selection count: ' + $obj.size());
  };

  //
  // define and expose our format function
  //
  $.fn.hilight.format = function(txt) {
      return '<strong>' + txt + '</strong>';
  };

  //
  // plugin defaults
  //
  $.fn.hilight.defaults = {
     foreground: 'red',
     background: 'yellow'
  };
//
// end of closure
//
})(jQuery);

CSS: Rounded Border Corner (radius), Firefox, WebKit, Standard

Friday, April 17th, 2009

Most modern browsers support rounder borders, but they all have their own syntax (standard coming).

Here is the code for some “tabs” elements:

.tab{
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
}
.bubble{
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}