Archive

Posts Tagged ‘ajax’

Yet another list of ‘extremely useful’ jQuery plugins

January 8, 2010 6 comments

A while back, I posted an article listing the jQuery plugins I use most often in my projects. Thanks to a great developer community, new plugins are constantly being created and hence, my original list has changed somewhat.

Listed below, are those plugins I find most useful in that they’re easy to implement, and generally do what I need them to do, without much editing or interference from my side. Granted, you probably won’t find anything new here if you’ve already been around the block, but for those just starting out – this list may just save you a ton of time.

1. jQuery Form Plugin

If you need to submit forms and receive a response via AJAX, then look no further. With an accessible API already available, I’ve found this plugin to be extremely flexible and easy to use. What’s more is that the documentation provided is concise and to the point with good examples littered throughout.

2. Colorbox

We all know that by now there are a hundred and one different modal box plugins available for jQuery. I’ve played with most of them and I have to say that I’ve found Colorbox to be the most flexible and robust of the lot. What’s more is that it’s damn stylish to boot and pretty easy to customize.

3. jQuery UI Tabs

I really like jQuery UI. I love the theme roller, I love the fact that you can use only certain elements without having to resort to loading the entire library. As far as “Tabs” go, I haven’t found another plugin easier to use than this one. While the “tabs” plugin included with jQuery Tools is good as well, I just found it to be a little more rigid than that of jQuery UI.

4. jQuery UI Datepicker

Again, there are quite a few datepicker/calendar plugins out there, but few can compare to this particular script. Very easy to implement and with loads of configurable options, what’s not to like.

5. GalleryView

Like modal scripts there are about a million different gallery scripts available, some brilliant, others not so much. The trick is finding the right script for the situation. I’ve found though that in the majority of cases GalleryView fits the bill admirably. It’s stylish, easy to implement and clients are generally pleased with the flash like animation and functionality. Definitely worth a look.

6. jqPageFlow

Ok, so this is a bit of a shameless plug, but why else write your own plugin if you’re not going to use it often. I use this handy little script for almost every project where I need to display a list of records. It eliminates the headaches of pagination, though admittedly, it does take a little work to implement correctly.

7. jQuery Alert Dialogues

So yes, you can use a modal plugin to display informational dialogues, but I just find this plugin so much easier to implement. With callback support, styling customisation and various config options it’s really a pretty simple choice to make.

8. Superfish Menu

Almost every site lately requires a drop-down menu solution of some sort. Quite simply, Superfish has proven time and again to be the easiest and most customizable menu script I’ve ever worked with. Sure, it won’t suit every situation, but then you’re probably looking at writing a custom script anyway.

9. markItUp

I must admit that I’m not a big fan of WYSIWYG editors. Or more accurately, I’m not a fan of an editor in the hands of an end user who has no clue how markup actually works. When however you do have a more knowledgeable client, markItUp is brilliant. Not a WYSIWYG per se, but more of a markup editor with tons of options and customisation options.

There are of course quite a few more plugins I tend to use, depending on the project and situation at hand. Do you perhaps have suggestions for other plugins I should take a look at ? Drop a comment and let me know.

Stylish Javascript / Jquery panel navigation part two

September 16, 2008 1 comment

A little while ago, I posted an entry on the stylish jkpanel plugin for jquery. While useful, it didn’t quite meet my needs at the time and I made certain adjustments. I’ve since made further updates making the implementation of the script more unobtrusive and hopefully far simpler.

First, the modified script ( jkpanel.js ) :

//Drop Down Panel script (March 29th, 08'): By JavaScript Kit: http://www.javascriptkit.com
// Modified by Barry Roodt (September 08) : https://calisza.wordpress.com

var jkpanel={
	controltext: 'Close Panel',
	$mainpanel: null, contentdivheight: 0,
	$contentdiv: null, $controldiv: null,

	openclose:function($){
		this.$mainpanel.stop() //stop any animation
		if (this.$mainpanel.attr('openstate')=='closed'){
			this.$mainpanel.animate({top: 0}, 500).attr({openstate: 'open'});
			this.$controldiv.show();
		} else {
			this.$mainpanel.animate({top: -this.contentdivheight+'px'}, 500).attr({openstate: 'closed'});
			this.$controldiv.hide();
		}
	},
	
	loadfile:function($, file, height, openpanel){
		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'});
					if (openpanel){
						jkpanel.openclose($);
					}
					return true;
		})
		
		return false;
	},
	
	init:function(file, height){
		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, false);
			jkpanel.$mainpanel.attr('openstate', 'closed');
			$('#jkcontrol').click(function(){jkpanel.openclose($)});
			$('.panelbutton').click(function(){
				var pfile = this.href;
				var pheight = this.rel || false;
				jkpanel.loadfile($,pfile, pheight, true);
				return false;
			});
					
		})
	}
}

Next, the updated css ( jkpanel.css ):

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

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

#jkcontrol{ /*Div containing panel button*/
border-top: 5px solid #ECECEC;
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" */
}

And lastly, a usage example :

<html>
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jkpanel.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jkpanel.css" type="text/css" />
<script type="text/javascript">
  jkpanel.init('initialcontent.htm', '200px');
</script>
</head>
<body>
<p> Some text <a href="someothercontent.htm" rel="500px" class="panelbutton">my link</a></p>
</body>
</html>

You will need to take note of the following :

  • Use class=”panelbutton” to enable the jkpanel for your link
  • Tell jkpanel which content to load by specifying the path in the href attribute
  • Specify a height for the panel using the “rel” attribute. You can set this to rel=”auto” to tell the panel to automatically match the height of it’s contents
  • Make sure to read the terms of usage on jkpanel’s home page, you can also obtain the panel button from the same page

This is of course a simple example and I plan on posting a proper, working demo shortly.

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.

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.