jQuery UI Modal Box plugin

Posted on March 11, 2011 by Spechal

I needed a modal box. You might too. You can have mine. I hope it helps. :)

The image in the HTML is the famfamfam cross.png from the silk icon set. See http://www.famfamfam.com

HTML

<div id="modal-window" class="ui-widget ui-corner-all">
  <div id="modal-window-title" class="ui-widget-header ui-corner-tr ui-corner-tl"><span id="modal-window-title-body"></span>
    <img id="modal-window-close" class="ui-icon" src="/img/cross.png" alt="Close" onclick="$().modalHide();" />
  </div>
<div id="modal-window-content" class="ui-widget-content"><p id="modal-window-content-body"></p></div></div>

CSS

div#modal-window {
	z-index:1000;
	display:none;
	width:50%;
}
div#modal-window > div {
	width:600px;
}
div#modal-window span {
	width:580px;
	line-height:25px;
	padding:3px 5px;
	font-weight:bold;
}
div#modal-window-title {
	height:25px;	
}
img#modal-window-close {
	float:right;
	margin:4px;
	cursor:pointer;
}
div#modal-window-content {
	overflow:auto;
}
p#modal-window-content-body {
	margin:5px;
	padding:0px;	
}

JS

jQuery.fn.modalCenter = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}
 
jQuery.fn.modalTitle = function(title){
	$('span#modal-window-title-body').html(title);
	return this;
}
 
jQuery.fn.modalContent = function(content){
	$('p#modal-window-content-body').html(content);
	return this;
}
 
jQuery.fn.modalShow = function(){
	$('div#modal-window').modalCenter().show();
	return this;
}
 
jQuery.fn.modalHide = function(){
	$('div#modal-window').hide();
	return this;
}
 
jQuery.fn.modalClose = function(){
	$('div#modal-window').hide().modalTitle('').modalContent('');
}
 
jQuery.fn.modalLoad = function(url, params, method){
	if(!method) method = 'POST';
	$.ajax(url, {
		data: params, 
		type: method, 
		dataType: 'json', 
		success: function(obj){
			$().modalTitle(obj['title']).modalContent(obj['content']).modalShow();
		}
	});
}

Usage

<input type="button" value="Click Me!" onclick="$().modalLoad('/some/url', {id:123});" />

Expected ajax return

{"title":"The title","content":"<p>The content</p>"}
Posted in Internet, JavaScript | Tagged , , | Leave a comment

Linux find string in files

Posted on March 9, 2011 by Spechal

find . | xargs grep ‘string_to_find’ -l

Posted in Linux | Leave a comment

jQuery wdCalendar Plugin: Adding double click action

Posted on March 9, 2011 by Spechal

You can add a double click by altering the event DIV in jquery.calendar.js

i.e.

var __SCOLLEVENTTEMP = "<DIV style=\"WIDTH:${width};top:${top};left:${left};\" title=\"${title}\" class=\"chip chip${i} ${drag}\"><div class=\"dhdV\" style=\"display:none\">${data}</div><DIV style=\"BORDER-BOTTOM-COLOR:${bdcolor}\" class=ct>&nbsp;</DIV><DL ondblclick=\"alert(1);\" style=\"BORDER-BOTTOM-COLOR:${bdcolor}; BACKGROUND-COLOR:${bgcolor1}; BORDER-TOP-COLOR: ${bdcolor}; HEIGHT: ${height}px; BORDER-RIGHT-COLOR:${bdcolor}; BORDER-LEFT-COLOR:${bdcolor}\"><DT style=\"BACKGROUND-COLOR:${bgcolor2}\">${starttime} - ${endtime} ${icon}</DT><DD><SPAN>${content}</SPAN></DD><DIV class='resizer' style='display:${redisplay}'><DIV class=rszr_icon>&nbsp;</DIV></DIV></DL><DIV style=\"BORDER-BOTTOM-COLOR:${bdcolor}; BACKGROUND-COLOR:${bgcolor1}; BORDER-TOP-COLOR: ${bdcolor}; BORDER-RIGHT-COLOR: ${bdcolor}; BORDER-LEFT-COLOR:${bdcolor}\" class=cb1>&nbsp;</DIV><DIV style=\"BORDER-BOTTOM-COLOR:${bdcolor}; BORDER-TOP-COLOR:${bdcolor}; BORDER-RIGHT-COLOR:${bdcolor}; BORDER-LEFT-COLOR:${bdcolor}\" class=cb2>&nbsp;</DIV></DIV>";
Posted in JavaScript, PHP | 2 Comments

jQuery wdCalendar Plugin: Expected ajax return

Posted on March 9, 2011 by Spechal

This plugin isn’t documented very well, so I figured I would post the bits and pieces I had issues with and hopefully help someone out.

First thing I needed to do was move all the functions into a class and refactor them, but first I wanted the data to still load in the calendar.

The data expected to be returned from the page listing the events is not defined on the wdCalendar project page, so here it is … in PHP.

$ret = array('events' => NULL);
$ret['events'][] = array('123456', // cal id
			  'Title', // event title
			  date('m/d/Y H:i', 
                                 strtotime('March 8 2011 12:00:00')), //start
			  date('m/d/Y H:i', 
                                 strtotime('March 8 2011 16:00:00')), // end
			  0, // all day event
			  0, // more than one day
			  0, // recurring
			  0, // color
			  1, // draggable
			  1, // editabble
			  'Address', // address
			  0 // mark as attending
			);
echo json_encode($ret);

Posted in JavaScript, PHP | Tagged , , | 8 Comments

jQuery UI Datepicker Timepicker

Posted on March 2, 2011 by Spechal

Very useful jQuery UI Timepicker add-on to the Datepicker.

http://trentrichardson.com/examples/timepicker/

Posted in JavaScript | Leave a comment

Linux : display file name for found string in files

Posted on December 31, 2010 by Spechal

grep 'something to find' -srl /path/to/files

-s : suppress error messages

-l : suppress normal output and show the file name

-r : search recursively into directories

Posted in Commands, Linux | Leave a comment

Even More Sharpy

Posted on December 24, 2010 by Spechal

I am adding a basic Blog app to the base of Sharpy to exemplify how to code using Sharpy … of course, it is just an example.  I fixed a few bugs in DataMapper and made one to one and one to many relationships easier by adding an ID property to DataMapper and including it in the SQL generator bit of DataMapper.  More to come.

Posted in Internet, Patterns, PHP | Leave a comment

More Sharpy

Posted on December 18, 2010 by Spechal

Since the last post I’ve added basic database support for MySQL and PostgreSQL.  In addition is a basic ACL and a DataMapper class to build models from.  I just finished up adding in the ability to execute methods before and after any action by using before_filter and after_filter.

Things are moving along.  Hopefully there will be something useful in the near future.

Posted in Internet, Patterns, PHP | Leave a comment

Sharpy

Posted on December 16, 2010 by Spechal

So I decided to start working on a rapid application development (RAD) framework for PHP the other day after a brief stint with Ruby on Rails.  I’ve decided to call the framework Sharpy.  The code is hosted by Google Code and can be found at http://code.google.com/p/sharpy/

I still need to add a database handler, internationalization, [lots more...] and refine the code comitted thus far, but it is a functional and small PHP MVC framework that supports templates.

Hopefully someone out there will find it useful.

Posted in Internet, Patterns, PHP | Leave a comment

Generate and validate UUID / GUID with PHP

Posted on October 18, 2010 by Spechal 
    function UUID(){
    	return sprintf('%04x%04x-%04x-%04x-%04x-%04x%04x%04x',
        mt_rand(0, 0xffff), mt_rand(0, 0xffff), mt_rand(0, 0xffff),
        mt_rand(0, 0x0fff) | 0x4000,
        mt_rand(0, 0x3fff) | 0x8000,
        mt_rand(0, 0xffff), mt_rand(0, 0xffff), mt_rand(0, 0xffff));
    }

    function validUUID($uuid){
    	return preg_match("#^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}$#", $uuid);
    }
Posted in PHP | Leave a comment