Archive

Posts Tagged ‘navigation’

jQuery plugin : jqPageFlow – scrolling pagination made easy

January 18, 2009 26 comments

jqPageFlow

Simply put, this plugin makes the scrolling pagination found on sites like dzone.com and Google Reader easy to implement on your site.

A working demo is viewable here

This is of course all configurable, and intended to be used on an automatically generated page using a backend script (eg php).

Please note that this script is still currently in beta, so if you find any problems please post a bug submission to http://code.google.com/p/flexidev/issues/ with as much information as possible

Usage

  1. Download the latest source code from the repository : http://code.google.com/p/flexidev/downloads
  2. Include the jQuery library into your page header (this plugin supports both jQuery v1.2.6 and v1.3)
  3. Include the jquery.jqpageflow.js file into your page header
  4. Include the supplied css file in your page header : modify as you see fit
  5. View the source of this page: copy, paste and modify the javascript block as required. Use $(“body”).jqpageflow(); to use defaults.
  6. Create a php/.net/perl/python etc backend script to handle the serverside stuff – see the index.php file (this page) included in the download source for a basic example

Features

  • Compatable with jQuery v1.2.6 and 1.3
  • Chainable
  • Configurable options : including the url to call, current page, pager var, container element etc
  • Server side platform independant : tell it how to interact with your backend scripts
  • Cross browser compatability, tested in FF 2.5+, Safari 3+ (more browsers to come soon)
  • Skinnable loader with CSS and customizable image path

Options

  • url: Specify which url (relative or absolute) the plugin should submit the ajax request to. Defaults to current window.location
  • currentPage: Gets appended to url as a GET value to help your backend script keep track of which page of results the user is on. Defaults to 0 (first page)
  • pagerVar: Related to currentPage, gets appended to url as a GET var to help your backend script keep track of which page of results the user is on (e.g. index.php?page=2). Defaults to “p”
  • perPage: Used for calculation and display purposes, tell the plugin how many results are being displayed per page. Defaults to 50.
  • totalResults: Tells the plugin when it needs to stop trying to look for more results. Defaults to 100
  • container: Specify which html element contains the result items, can be any jQuery compatible selector (eg “#mycontainer”, “.results”, “body”).
    Any html returned to the ajax call gets appended to this element. Defaults to “body”
  • loaderImgPath: Tell the plugin where to find the loader img relative to the page calling the plugin. Defaults to “images/loader.gif”
  • debug: When set to 1, the plugin will print debugging information to the console (firebug). Defaults to 0

Changelog

  • 18 Jan 2009 : version 0.1b released

Credits

How to use jQuery to select a radio button from parent element

January 9, 2009 4 comments

A friend asked me for some help on doing the following :
1. You have an unordered list – within each list item you have a radio input.
2. When you click on the list item (i.e. the entire container), it must a) select the radio input and b) add a css classname of “selected” to the list item.

You can find a demo here.

First, the html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<!-- include our jquery scripts -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
    <script src="js/radio.js" type="text/javascript"></script>
    <style type="text/css">
    	li { color: #000; }
    	li.selected { color: #FF0000; }
    </style>
</head>
<body>
	<div>
		<ul>
			<li class="test">Test 1 <input type="radio" name="test" /></li>
			<li class="test">Test 2 <input type="radio" name="test" /></li>
			<li class="test">Test 3 <input type="radio" name="test" /></li>
			<li class="test">Test 4 <input type="radio" name="test" /></li>
			<li class="test">Test 5 <input type="radio" name="test" /></li>
		</ul>
	</div>
</body>
</html>

There is nothing out of the ordinary here – just a simple unordered list of radio inputs.

Next, the js (radio.js) :

$(document).ready(function(){
	$('li').click( function(){
		$('li.selected').removeClass('selected');
		$(this).addClass('selected');
		$(this).children("input[type=radio]").click();
	});
});

1. First – we tell jQuery to execute the following code once the document has finished loading, ensuring that the DOM has been registered successfully.
2. Next we bind a click event to all list item elements on the page – you can of course change this to all list items with a class of “myselection” for example ( $(“li.myselection”).click… )
3. When a list item is clicked – we first need to remove the “selected” class from all other list items.
4. Now we need to add the “selected” class to the list item which fired the event ( $(this) ).
5. Finally, we need to make sure that the radio button inside the list item is “clicked” : we do this by using the .children() selector and executing a click() event on the input.

The important bit is the $(this).children(“input[type=radio]”) selector. What we’re doing here is telling jQuery to find all inputs of type radio (i.e. all radio inputs) inside “this” list item (i.e. the list item which was clicked on). We then use .click() to..as you guessed it… execute a click event on the returned element (in this case the radio input).

And that’s all there is to it. You can read up some more on jQuery selectors here.
I would also highly recommend reading the following article : Improve your jQuery – 25 excellent tips.

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.