23 Dec 2009

jQuery goodness - new Address, Format and Thead plugins

It has been almost half an year ago when we announced the jQuery Address plugin and it's great that we're now back with a new version and two other cool additions. We're releasing them at once because I hardly find the time to blog while the code has been available on GitHub for quite a long time. Here are some more details:

jQuery Address 1.1

I hope that all who tried it have enjoyed the clean API and feature set. There were some problems that may users reported but unfortunately until now there was no free time available for an official release. This new version works better with Internet Explorer, introduces news internalChange and externalChange events as well as various other small improvements.

jQuery Format 1.0

This plugin in based on some legacy code that I have successfully used in the past few years. It enables formatting and parsing of dates and numbers with a fair level of complexity and fits well in Java based applications that require internationalization. Parts of the code have been ported from scripts like date.js and probably from others that I don't even remember. I'm interested in adding support for time zones and ISO dates but that will probably happen only if I need them one day.

jQuery Thead 1.0

It's nice to have a sticky table header that is always visible when you scroll down in a long table. I experienced it while working with Drupal and I became eager to use in another project of mine. The enabling script was jQuery based but it wasn't a standalone plugin so I made it one. The original developer wasn't fine with me releasing the code in anything different than GPL so I had to change it completely in order to use the MIT license.

Happy Holidays to everyone! This is how we do it :)

« Previous Post | Next Post »


Left by Massim at Mon, 19 Apr 4:15 PM
I really like the jQuery Adress plugin!
I'm using it for a couple of projects but I would like to take it a step further as you do in the Wordpress example.
But my problem is the server-side code. I tried it via htaccess but I couldn't pull it off.
Can you tell my or provide me with some info/links about the way you did this?

Left by edwin swart at Mon, 19 Apr 4:15 PM
hello I think the history plugin does not work with jquery v1.4.2

there is a bug (check with firebug)

can you confirm that?
Left by Rostislav at Mon, 19 Apr 4:15 PM

This behavior is achieved with JavaScript and some server-side code. If you're familiar with the swfaddress-optimizer.js then check the plugin analogue available in the repository. I'm still not releasing it as an official part of the plugin because I'm waiting for a better solution by Google, but it works and you can use it right now. A work in progress that utilizes it can be seen at that Wordpress sample. Contact me directly if you need help with the server-side part.
Left by Rostislav at Mon, 19 Apr 4:15 PM
Can you please send us an email describing what exactly you want to achieve. The change event is not completely under your control because it can be also triggered by browser interactions.
Left by Jimbo at Mon, 19 Apr 4:15 PM
Hi Rostislav, been using your thead plugin and its great it was exactly what I was looking for!

Looking for a bit of your thoughts on a problem hitting with its implimentation on dynamic results if you wouldn't mind. It might be useful for others as well. The error first:

$(t).offset() is null
Line 31

Im trying to use the plugin on a table which gets updated upon form input changes by a user. Its fine when its the first static load but upon changes dynamically via for example $.ajax when you scroll the above occurs.

Basically its simple structure HTML wise. The table is wrapped in a DIV which gets a new table of results inserted upon an update. Simple HTML eg:

<div class="result">
<tfoot colspan="2"><tr><td>footer</td></tr></tfoot>
<tr><td colspan="2">Row 1</td></tr>
<tr><td colspan="2">Row 2</td></tr>
<tr><td colspan="2">Row 3</td></tr>
<tr><td colspan="2">Row 4</td></tr>

In fact it never gets to displaying the actual results now. I remove the plugin the results come back.

Any help would be greatly appreciated :-)
Left by Jimbo at Mon, 19 Apr 4:15 PM
@Rostislav thanks for the help. I have tried the new code but get a very similar error upon an ajax update on the table.

i(p).offset() is null
Line 11

Basically there is a <div class="results jquery-thead"></div> wrapping the table of results. Upon ajax update which returns rendered HTML of a full table it updates the HTML for the table but immediately after the above error fires up without any scroll. The initial static render load of the page the header works correctly its just after the table HTML is updated via an ajax request.

Greatly appreciate your advice with this and I will be making a donation :)
Left by Andrei at Mon, 19 Apr 4:15 PM
Hello guys. Sorry for multiple posts.

I was just wondering if someone could clear this for me.
I have seen people stating on several blogs that SWFAdress would help in ajax SEO.

Now - I have always thought that javascript generated content is not bot crawlable period.
So - SWFAdress looks like a great tool for links and bookmarking - but I don't understand how it
would help in indexing JavaScript generated content.

Am I missing something?
Do bots index ajax content?
Left by Sean at Mon, 19 Apr 4:15 PM
My mistake - my rule is:

RewriteRule ^([^#].*) #/$1 [L]

and while it works in a handy rule-tester, it's not actually working in real life.
Apologies for the double post.
Left by Jimbo at Mon, 19 Apr 4:15 PM
One other thing might be worth me mentioning that I have spotted whilst messing about with it. When it errors I scroll the page there are 2 tables. Now I know it should be cloning the thead within a set of <table> tags but the actual rest of the table is exact as well. Thought might be worth mentioning but it might just be an after effect of the first issue.
Left by c.note at Mon, 19 Apr 4:15 PM
i am very curious about this plugin and its very clever but i dont understand why one would want to do deeplinking using jquery. i must be missing something, can you tell me the benefits of this approach. please advise - thanks
Left by Jimbo at Mon, 19 Apr 4:15 PM
Thanks for getting back to me Rostislav its greatly appreciated. I will take a look at that and see how its goes and report back - i'll have a fiddle on tomorrow when I am at the code. I had tried the various ways of initialising it though without any joy previously but I was using 1.0 so hopefully 1.1 will solve it :D Its a great plugin by the way.
Left by Rostislav at Mon, 19 Apr 4:15 PM
The sample uses the SEO technique that comes with SWFAddress. It degrades well but I wonder if it will make sense when Google make Ajax crawlable.
Left by José at Mon, 19 Apr 4:15 PM

First of all thanks for the brilliant plug-in, swfaddress was a god-send back in the day, and now I'm finding jquery address just as useful.

I was wondering if there is any way of passing extra parameters to the "$.address.change" function? Currently I'm passing the Href just fine, but I was wondering if I could pass more parameters drawn from the link's class?

Naturally I can do this by adding to the overall URL, but I was wondering without extending the URL's length?

Left by Sean at Mon, 19 Apr 4:15 PM
I'm a big fan of SWFAddress and more recently jQuery Address. Do you have any thoughts on how to get jQuery Address to mimic the SWFAddress ability to automatically insert the # if it's not entered by the link/user/spider?

I got close using mod_rewrite:

RewriteRule (!/#/)+(.*) /#/$1 [L]

This appears to work on the initial visit to the site from a link w/o the #, but it interferes when the user clicks their first link after loading the site.

Any ideas? Is mod_rewrite the way to go?

Left by Rostislav at Mon, 19 Apr 4:15 PM
How do you initialize the plugin? In this case you should assign the "jquery-thead" class to the DIV wrapper.
Can you also please try the development version of the plugin. In 1.0 there is a build-in interval which check for such Ajax powered changes but in 1.1 I replaced it with a $.thead.update() method. You can see it used in the second sample.

If the problem persist then put a sample online somewhere and send us a link.
Left by Brian at Tue, 10 Aug 6:48 PM
I don't see any examples on how to save the data to a hash/map so that when the user clicks the back button it simply pulls that data from the hash and then calls the function to reload the information into the page.
I don't want to re-query my webservice for data because it will be different for every search.
Left by Rostislav at Fri, 13 Aug 12:55 PM
Probably you should check the Form sample which handles de/serialization of values in a query friendly format.
Left by davidino at Thu, 25 Nov 2:12 PM
Hi, this is a tech question...
There is some way in jQuery.address to remove the # mark when i come back to curLink =='/' , or to remove it from the string ??
I've create a lightbox with your wonderful jq.address, but when i close it page scroll to top. I need to remove # from my url

thank you
Left by Rostislav at Thu, 25 Nov 3:57 PM

I'm afraid that this wasn't possible at least not in every major browser. Try using the wrap option which was exactly created for such scrolling scenarios.
Left by davidino at Thu, 25 Nov 6:52 PM

Thank you, i'm looking for. Any suggestion how to activate it?
Left by ifedi okonkwo at Sat, 27 Nov 12:55 PM
Thanks guys for a great tool.
Please, kindly give your thoughts on this issue I'm having:
I was able to successfully initialize jquery.address with the below:

$('a').address(function() {
return $(this).attr('href');

But I soon needed to exempt certain links (bearing the class "no-history") from the whole history management processing like so:

$('a').not('.no-history').address(function() {
return $(this).attr('href');

That was when everything STOPPED working.
I'd deeply appreciate your help with this issue.

Left by ifedi okonkwo at Sun, 28 Nov 6:33 PM
Hey all,
Thanks everyone for paying NO ATTENTION to my previous post (above)! Well, its only fair for folks to take a weekend off once in a while, right?
Anyhow, I was able to overcome the problem by doing this:

$('a:not(.no-history)').address(function() {
return $(this).attr('href');

I guess the snag was happening at the level of jQuery, though I still do not know why the first pattern would fail.
Does anyone?




Blog Search

Blog Categories

Blog posts

Recommended sites