Archive

Archive for August, 2008

The 6 most useful JQuery Plugins

August 26, 2008 1 comment

Lets get one thing out of the way before we go any further – I’m a jquery fanboi. I use it, I need it, I love it.

I’ve been using this wonderful library for almost 2 years now and I can only vaguely remember what it was like developing a site without it.

It’s kind of like trying to remember what life was like before getting your first cellphone. You managed somehow, but now you just can’t quite see yourself making it through the day without one.

I’ve just finished another project and was struck again by how much easier these libraries and their plugins make my life. To write javascript using old school methods is such a waste of time and in my opinion, just downright silly.

Before I start a new project, I spend quite a bit of time going through the various plugins available to see if there’s anything new that may help me in my work.The following list details my favorite and most frequently used plugins.

1. Thickbox – this plugin is what first convinced me to give jquery a go. I was looking for something along the same lines as the prototype / script.aculo.us Lightbox plugin. The fact that it handled content and not just images coupled with it’s lightweight footprint is what sold me. In my opinion, still the most useful jquery plugin out there.

2. Superfish Menus – I’ve tried many, m-a-n-y javascript based menu systems and I have to say that this is so far the easiest and most flexible implementation I’ve seen yet. I’m just sorry that I didn’t discover it sooner.

3. Datepicker – probably the easiest to use calendar popup script I’ve used to date. Powerful, flexible and unobtrusive, what more could you want?

4. JGrowl – only recently discovered, it’s a stylish way of notifying users of what’s going on in your application. I use it to display system messages in my admin panels. Definitely beats the standard window.alert approach. The only thing I don’t like is that you have to use the entire jquery.ui library (over 150K). I’ll be looking into this to see if there’s some way to cut down on the filesize.

5. clueTip – pretty handy when you need to display tooltips. Supports ajax and inline content and very easy to implement.

6. UI Tabs – makes creating tab based navigation on your website stupidly simple. The various options make this plugin a must have. I find it very useful for longer forms, admin panels and organising one’s interface.

There are of course hundreds of other plugins available that I haven’t even looked at yet. Then there are all the other javascript libraries available, with all of their hundreds of plugins. Which is what I love about the web – there’s always something new to play with.

Again, my heartfelt thanks to all of the selfless, hardworking hackers out there who publish their work for all and sundry to use. Without you guys, the web would simply cease to function.

Advertisements

Stylish yet simple Javascript / JQuery navigation/control panel

August 14, 2008 2 comments

Please note: A follow up post has been made here.

I’m currently working on a project which requires a “hideable” (for lack of a better word) control panel. Somewhere I can place links, forms etc for a user to access once they’ve logged into the site.

After having a look around I found the following jquery plugin : JKPanel. It works pretty well, but I needed additional functionality, such as loading new content inside the panel when clicking on a menu item or opening the panel from a separate button on the site.

It’s a quick hack, but someone out there may find it useful.

First, you need to get jquery here. Version 1.2.6 is recommended.

Next, you’ll need the panel button :

Now, include the following code inside your <head> tags (license notice left intact by request of original author) :

<script type="text/javascript" src="jkpanel.js">

/***********************************************
* Drop Down Panel script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/

</script>

Include the following styles, whether inside your head tags or inside an external css file :

#dropdownpanel{ /*Outermost Panel DIV*/
position: absolute;
width: 100%;
left: 0;
top: 0;
visibility:hidden;
}

#jkcontentdiv{ /*Div containing Ajax content*/
background: black;
color: white;
padding: 10px;
}

#jkcontrol{ /*Div containing panel button*/
border-top: 5px solid black;
color: white;
font-weight: bold;
text-align: center;
background: transparent url( "../images/panel.gif" ) center center no-repeat; /*change panel.gif to your own if desired*/
padding-bottom: 3px; /* 21px + 3px should equal height of "panel.gif" */
height: 21px; /* 21px + 3 px should equal height of "panel.gif" */
line-height: 21px; /* 21px + 3px should equal height of "panel.gif" */
}

These styles remain largely untouched except for the classnames : I just felt that they needed to be a little more unique, since I’ve seen quite a few templates using .control and .contentdiv. The only thing to look out for here is the panel.gif image used in the #jkcontrol style definition.

Now for the contents of the jkpanel.js file :

//Drop Down Panel script (March 29th, 08'): By JavaScript Kit: http://www.javascriptkit.com
// Modified August 14'th, 08' By Barry Roodt : https://calisza.wordpress.com
var jkpanel={
	controltext: 'Close Panel',
	$mainpanel: null, contentdivheight: 0,
	$contentdiv: null, $controldiv: null,

	openclose:function($, speed){
		this.$mainpanel.stop() //stop any animation
		if (this.$mainpanel.attr('openstate')=='closed'){
			this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'});
			this.$controldiv.show();
		} else {
			this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'});
// comment out the following line if you want the "control" button to remain visible
			this.$controldiv.hide();
		}
	},

	loadfile:function($, file, height, speed){
		jkpanel.$contentdiv.load(file, '', function($){
					var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px';
					jkpanel.$contentdiv.css({height: heightattr});
					jkpanel.contentdivheight=parseInt(jkpanel.$contentdiv.get(0).offsetHeight);
					jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'});
					jkpanel.$controldiv.css({cursor:'hand', cursor:'pointer'});
		})
	},

	init:function(file, height, speed){
		jQuery(document).ready(function($){
			jkpanel.$mainpanel=$('<div id="dropdownpanel"><div id="jkcontentdiv"></div><div id="jkcontrol">'+jkpanel.controltext+'</div></div>').prependTo('body');
			jkpanel.$contentdiv=jkpanel.$mainpanel.find('#jkcontentdiv');
			jkpanel.$controldiv=jkpanel.$mainpanel.find('#jkcontrol').css({cursor: 'wait', display: 'none'});
			jkpanel.loadfile($,file, height, speed);
			jkpanel.$mainpanel.attr('openstate', 'closed');
			$('#jkcontrol, .panelbutton').click(function(){jkpanel.openclose($, speed)});

		})
	}
}

All that’s left to do now is create your menu link :

<a href="#" class="panelbutton" onclick="javascript:javascript:jkpanel.loadfile($, 'path/to/content.php', '200px', 500, true);">Example Link</a>

Note the class=”panelbutton” – This is just to tell our script to open the panel when this link has been clicked.

And Bob’s your Aunty, you’re done.

The next step for me is to add a method to load new content inside the panel from within the panel itself (submitting a contact form and displaying the result for example). The applications are pretty endless to say the least – and it all looks pretty stylish.

Have fun and give me a shout if you’ve used it so that I can check it out.

Flex / PHP Gallery

August 6, 2008 Leave a comment

Just finished the conversion of a PHP / HTML based gallery module I wrote quite a while ago to a Flex based interface.

I used the Mate Flex Framework’s “Flickrbook” example as the basis and modified it to interact with my AMFPHP gateway script instead of the Flickr API.

I also modified some aspects of the user interface such as adding a category combobox to the search (populated from the database of course and includes sub-categories). I then converted the main image to the SuperImage component instead and added the photograph title and description to the main panel.

The biggest issue I had was setting the default selectedIndex for the thumbnail TileList as discussed in a previous post. That and learning how the Mate Framework functions, which I’m really impressed with.

All in all, it took me about 26 hours in total, including researching different examples, frameworks, installing the PHP gateway etc. Being pretty new to Flex I don’t think that’s too bad.

AMFPHP was dead easy though – if that took me more than 2 hours in total (including the writing of the gallery gateway class) it was plenty.

The next phase will be to convert the gallery’s admin interface to Flex as well. I’ve already done a file upload manager, so it should be a piece of cake.

You can view an example of the gallery here. Just click on the “View Gallery” link.

Categories: Flex, PHP Tags: , , , , ,

Django inspired SEF urls using PHP

August 4, 2008 3 comments

Update : Full code, including example usage can be downloaded here.

Over the last 5 years or so, I’ve been developing my own personal php CMS/Framework. Based loosely on Mambo / Joomla with bits and pieces thrown in whenever I found something interesting and inspiring.

After having worked with Django over the last few months I’ve made some significant changes to my framework – actually, I’ve pretty much re-written the entire core from the ground up. I love the way Django works so much, I just had to incorporate some of their ideas – something about mimicry being the ultimate flattery.

So anyway – one of the features I find most useful is the way urls are handled. Powerful, flexible but without sacrificing ease of use – what more could one ask for. I like the fact that it has a default method of handling the urls, but gives you the freedom to create your own conversion rules.

Ok so, mine doesn’t work in exactly the same manner, but the general idea is the same. I have a class file instantiated on every call to my gateway page (index.php). This class reads in the REQUEST_URI, and performs a regex match on an array of “url patterns”. Much like in Django – you have a url.php for each model in the framework which sets up the pattern array for that particular model. I also have a “failsafe” pattern array which gets used if the class cannot find the required url.php, or a match is not found.

Basically, the contents of one of these url.php files could look like the following :


$modelpattern = array(
array('@^/gallery/browse/(?P<category>\d+)[/]*$@', array("op"=>"browse")),
array('@^/gallery/browse[/]$@', array("op"=>"browse")),
array('@^/gallery/(?P.*)[/]*$@', "")
);

Each element of the array is a nested array containing two elements. The first element is the pattern to match while the second element is another array containing any additional parameters one would like to send to your model.

The other thing to note is the “(?P<category>\d+)” part in the example above. As you should probably know, preg_match allows you to read in parameters (the ?P bit) which you can use in your scripts.

So for instance, the url you’re trying to match is /gallery/browse/33 .

The following code loops through each element of $modelpattern and when a match is found, places any parameters we may have set into $matches.

foreach($modelpattern as $pattern){
    $matchFound = preg_match($pattern[0], $request, $matches);
    if ($matchFound) {
		foreach($matches as $key=>$value){
			if (is_string($key)){
				$_REQUEST[$key] = $value;
		       }
		}
		if (is_array($pattern[1])){
			foreach ($pattern[1] as $key=>$value){
			$_REQUEST[$key]=$value;
		}
	}
	return true;
    }
}

What happens is that /gallery/browse/33 is matched with one of our patterns and the value “33” gets placed into $matches[“category”]. The above code then loops through the $matches array and adds each element to the $_REQUEST superglobal therefore $_REQUEST[“category”] now has a value of “33”). It then also loops through the second element of the matching array and loads those parameters into $_REQUEST – in this instance setting $_REQUEST[“op”] to “browse”.

It’s all pretty simple, and I’m sure there are huge improvements that can be made, but it works really well for what I need done. I’ll post the full source up if anyone’s actually interested šŸ˜‰

Update : Full source code and example usage can be downloaded here.

Afrigator

Categories: PHP Tags: , , , ,