jquerytools / jquerytools

The missing UI library for the Web

jQuery Tools - The Missing UI library for the Web

jQuery Tools is a collection of the most important user-interface components for modern websites. Used by large sites all over the world.

##Contributing

Please issue pull requests to the dev branch.

This is where active development takes place, we then merge changes into master for releases. That will become v1.2.6. Most of the development goes to 2.0 which is currently a private repository.

jquerytools's Issues

[Dateinput] initial date via value attribute not picking up

The HTML code for the input is:

The JS is:

$().ready(function() {
    $('input[name="birth_date"]').dateinput({
        format: 'dd/mm/yyyy',
        firstDay: 1,
        speed: 'fast',
        selectors: false
    });
});

The expected outcome is that calendar would have 25/11/1981 as current, but it ignores the value attribute and has today as current date: http://grab.by/4kyi

Firefox 3.5.6

Validator 1.2.1: get radio button to support required attribute

Simple fix in [required] function to support radio buttons:
v.fn("[required]", "Please complete this mandatory field.", function(el, v) {
if (el.is(":checkbox")) { return el.is(":checked"); }
if (el.is(":radio")) {
return this.getForm().find(":checked[name=" + el.attr("name") + "]").length > 0;
}
return !!v;
});

But seems like it's a raw solution, because I think only one error message should be displayed for each radio button group. Please comment.

Expose postion problem

Link - http://flowplayer.org/tools/forum/45/25785

Issue - function getWidth() {
var w = $(window).width();
if ($.browser.mozilla) { return w; }
...

The above causes an issue as follows:

1. Using FF, go tohttp://flowplayer.org/tools/expose.html
2. Resize your browser to make the horizontal scroll bar appear
3. Click in the field to invoke the expose functionality
4. Use the horizontal scrollbar to scroll to the right
   You'll see that the expose ends abruptly rather than
   extending to the edge of the browser window.

Changing the above to the following fixes it for me:
if ($.browser.mozilla) { return $(document).width(); }

Will this cause problems elsewhere?
If no, can it be incorporated in your next release?

Thanks,
Ignac

Solution Link - http://flowplayer.org/tools/forum/55/33033

Solution - as the bug descript above.
I do some bugfix here
in expose.tools.js
find the function viewpoint() and replace with the code below:

function viewport() {
/*

• bug fixed by skysbird 2009-12-12
• test by ie 6,7,8,chrome safari,ff 2,3.5
  */
  var scrW, scrH;
  var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome')>-1;

if( window.innerHeight && window.scrollMaxY) {

// Mozilla
scrW = window.innerWidth + window.scrollMaxX;
scrH = window.innerHeight + window.scrollMaxY;
} else if(is_chrome ||document.body.scrollHeight > document.body.offsetHeight){
// all but IE Mac

scrW = document.body.scrollWidth;
scrH = document.body.scrollHeight;
} else if(document.body) { // IE Mac
scrW = document.body.offsetWidth;
scrH = document.body.offsetHeight;
}
return [scrW,scrH]
}

[scrollable] Arrow inssues with 2 scrollable items

Hi, Im from Brazil
If i use only 2 scrollable items the arrow didnt work properly.
I fixed this replacing
...!c.circular&&a.getSize()>2&&a.onBeforeSeek...

by
...!c.circular&&a.getSize()>=2&&a.onBeforeSeek...

I hope it helps =)

Scrollable do not use Speed configuration

Our workAround:
in scrollable.js:138 [function SeekTo]
if (time == null) time=conf.speed;

[rangeinput] Key control doesn't work in Chrome

http://flowplayer.org/tools/demos/rangeinput/index.html
When control has focus pressing keys (up, down etc.) doesn't move the slider in Chrome 6.0.401.1 dev.

jqT 1.2.2 - always-visiable dateinput loses keyboard navigation

The example setup for an always-visible dateinput in the jquery Tools documentation loses its keyboard navigation ability after a date is selected. It also permanently sets the .calfocus date.

Calling onShow inside of the change event rebinds the expected keyboard behavior.

change: function(e, date) {
  stuff_to_do;
  this.onShow();
}

Tested in ff 3.6.3, safari 4.0.5, and chrome 5.0.307.9

As a side note, thank you for the awesome library. I poked around a few UI libs, all of which offer approximately the same tool sets, and jqt was the clear winner. I appreciate the simplicity of the api, the clarity and depth of the documentation, the hands off my css, the cdn, and all of your hard work.

Cheers

Overlay position should be calculated right before it's opened

Try triggering from Tooltip and you'll see the bug

FORM fails to show popups on Mac Chrome

The demo overlay on the FORM page doesn't work, nor do any of the popups on the HTML5 FORM demo's. The overlay demo's however do work properly in Mac Chrome, just not the FORM popups.

Tooltip slide-effect

hi guys,
when i wanna use the tooltip slide effect the following error appears:

uncaught exception: Nonexistent effect "slide"

my code:

$("#contact").tooltip({ effect: 'slide', direction: 'down'});

Please help me...
David

demo area bug for IE7

http://flowplayer.org/tools/forum/25/36904

Validator 1.2.1: required check in the localize function

Good morning.
Today I noticed missed check in localize function (line 55). If v.messages[key] object inside of $.each is undefined the function fails. I fixed it in such way:
localize: function(lang, messages) {
$.each(messages, function(key, msg) {
v.messages[key] = v.messages[key] || {};
v.messages[key][lang] = msg;
});
},

Thanks.

Date Selectors do not work

I am trying to use the date selectors, but have found that they do not work, they also do not work on the demo page
http://flowplayer.org/tools/demos/dateinput/customize.html

IE gives this error

Message: Object doesn't support this property or method
Line: 238
Char: 6
Code: 0
URI: http://cdn.jquerytools.org/1.2.0/full/jquery.tools.min.js

Cross-fade does not work

This issue has been reported in the forum as well: http://flowplayer.org/tools/forum/25/36084

Issue is reproduceable in all common browsers (FF 3.5, 3.6, IE7, Safari).
Issue is the same for both versions 1.1.2 and 1.2.0.

I'm using the Slideshow plugin for Tabs containing images, but I can't get the cross-fade effect to work. It will fade in, or out, but it won't do both and the result is a sharp jump to the next image. In addition, the fade out does not work for the last image at all. In this case, the transitions is a direct jump to the first image.

Here the JS:

$("ul.headerTabs").tabs("div.headerPanes > div",{ 
     effect: 'fade',  
     fadeInSpeed: 3000, 
     fadeOutSpeed: 2000, 
     rotate: true 
 }).slideshow({ 
     autoplay: true, 
     interval: 7000 
     }); 

And this is the corresponding HTML:

Initial index on horizontal tab

Link - http://flowplayer.org/tools/forum/55/36326

Issue - Hi - setting initialIndex to 1 or 2 on this demo page:

http://flowplayer.org/tools/demos/tabs/accordion-horizontal.htm

creates strange load behaviour in IE8 and FF ?

Thanks,
Sean

http://www.pdgmedia.com/code/accordion.html

First pane

Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra.

Second pane

Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat.

Third pane

Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.

<script> $(function() { $("#accordion").tabs("#accordion div", { tabs: 'img', initialIndex: '1', effect: 'horizontal' }); }); </script>

lack of tracking whether offset has been changed.

http://twitter.com/arkitrave/status/9494682590

Manual tooltips not working

Hi, after upgrading to 1.2 the manual tooltips are no longer working. Instead I get the content of the first tooltip for every tooltip. Reverting to the older version solves the problem.

On that note, where can I download the older version? I don't want to send my copy out to other developers but I don't want them using the new version that is missing this feature.

Tab Wizard demo doesn't recognise "tab" key press

Link - http://flowplayer.org/tools/forum/55/34574

Issue - Hi, i just wanna let u know that in the wizard example, using jquery.tools 1.1.0, 1.1.2 or 1.2.0 if you press the tab button the wizard check doesn´t work, and you continue to the next page of the wizard.

It just work on Opera (Tested version: 10.50 pre-alpha).

Focus of input with more than 16 on page incorrectly triggers tooltip.

Link - http://flowplayer.org/tools/forum/55/34393

Issue - what i said is that when the elements that trigger tooltip are more than 16 in one single page, and these elements contains input element( absolutely...), and then once your cursor is over these input elements, the tooltip can automaticly float out!
it act just like the tooltip is triggered by the event of "mouseover", but it actually supposed to be called by "click" or "focus" event ... and if these elements is no more than 16, it performance well, which is, the tooltip can't appear when mouseover, except the click event and focus event, so why? I'm creating a large form and it's more than 16 element to use tooltips, want to have this to be solved,thanks.

First item not active with navigator plugin

With Tools 1.2.1 navigator plugin doesn't apply active class to the first element of a menu when the page loads. It works with scrollable 1.1.2 and navigator 1.0.2

Proposal to clear validator on form's reset event

Hi, Tero.

In my application I have a dialog with form, that uses validator plugin to check user's input. If there are any error messages were displayed and user closed the dialog after that, previous messages continue to exist on the next pop-up while all form was cleaned. This is not correct.

I tried to find a method to reset validator's state, but with no success. Guess such method may be useful in some cases (e.g. to hide a error message on mouse click on it).

For fixing the issue I made a changes inside of validator function. It looks natural to clear all error messages when a form's 'reset' event is fired. Not sure if my code changes are fully correct, but it works for me. Here is the changed function (line 502):

$.fn.validator = function(conf) {   
    // check if empty
    if (!this.length) { return this; }

    // return existing instance
    if (this.data("validator")) { return this; } 

    // configuration
    conf = $.extend(true, {}, v.conf, conf);    

    // selector is a form       
    if (this.is("form")) {
        var eff = effects[conf.effect];

        if (!eff) { throw "Validator: cannot find effect \"" + conf.effect + "\""; }

        return this.each(function() {           
            var form = $(this), inputs = form.find(":input"),
                 validator = new Validator(inputs, form, conf);  
            form.data("validator", validator);
            form.bind("reset", function(e) {
                // call the effect
                eff[1].call(validator, inputs);

                e.type = "onSuccess";
                // trigger onSuccess
                form.add(validator).trigger(e, [inputs]);
            });
        });

    } else {
        var validator = new Validator(this, this.eq(0).closest("form"), conf);
        return this.data("validator", validator);
    }     

};   

Thanks.

Permission denied - Location.toString

Link - http://flowplayer.org/tools/forum/55/33625

Issue - Hi,

I get this when the overlay is in a parent window, and the contents of the overlay is an iframe that has a youtube video link in it.

Permission denied for <iframe url> to call method Location.toString on .
I found this link on the forums for flowplayer forums.
http://flowplayer.org/forum/8/12101
Save issue.

E-mail address validator is broken

The e-mail address validator is broken. It is non-compliant with RFC 5322. (http://tools.ietf.org/html/rfc5322)

For example, [email protected] is rejected as a valid address.

Date input previous button

The demo of the bug work on the official website : "http://flowplayer.org/tools/demos/dateinput/index.html"

When you go to 2011 with the next button, and after you try to use the previous button to go back in 2010, it's block on January 2011.

Thanks

Slideshow plugin for the Tabs and Google Chrome, Safari

The first pane is blank on the demo on page
http://flowplayer.org/tools/demos/tabs/slideshow.html
when the page is refreshed on webkit. This happens sometimes on load too.
Tested on Google Chrome (Mac,PC) and Safari (Mac)

Regards, and thanks for jQuery tools!!!

Empty object check in validator 1.2.1

Hi, Tero! Thanks for a nice scripts!

I found little bug in the validator function. It doesn't check now if 'this' variable is empty and as a result throws exception because of that. I suggest to put lines below on the top, they work for me:
...
$.fn.validator = function(conf) {
// check if empty
if (!this.length) { return this; }
...
}

Regards, maksimc.

Autoscroll autoplay issues

Link - http://flowplayer.org/tools/forum/55/32926

Issue - I've been having a few issues with two aspects of scrollable and autoscroll, I'm trying to get the autoscroll working on page load - but it's impossible to use the API to stop the autoscroll for the first item.

Scrollable can't click on photos in Safari browser

In the latest version of jQuery Tools you can no longer click on photos in the scrollable plugin. In previous versions the pane would slide if a photo was clicked so it would position in the center.
I work on a mac with Safari.

"function H is undefined" with Firebug 1.4.5 open

Link - http://flowplayer.org/tools/forum/55/31733

Issue - I am unable to get jquery-tools to work when firebug 1.4.5 is enabled.
It chokes on "function H is undefined" -- and stepping over that, it chokes on many more.

Site works fine w/o firebug console opened.
(this is FF 3.5.5 and mac osx 10.5.8)
Site:http://calq.us

Problem with Close button in IE 8 on customized Overlay effect page

Link - http://flowplayer.org/tools/forum/55/36410

Issue - On the customized Overlay effect page http://flowplayer.org/tools/demos/overlay/custom-effect.html), the Close button doesn't appear fully in IE 8. It doesn't extend beyond boundaries of the images that the overlays are showing.

Tabs - dotted border issue on active tabs using ie6-8 and Firefox

This is the standard "dotted border" focus issue in ie6-8 and Firefox, but on the following pages this issue is very annoying because it "breaks" the look and feel of the tabs.
http://flowplayer.org/tools/demos/tabs/index.htm
http://flowplayer.org/tools/demos/tabs/skins.html

I understand the need to navigate links using the tab key but Google is quite happy hiding the dotted lines and still allowing tabbing in Chrome.

To fix this in ie6-8 and Firefox I have used the script from David's post on http://haslayout.net/css-tuts/Removing-Dotted-Border-on-Clicked-Links#zofcms_comment_7

$('a').live('mousedown', function(e) {
e.target.blur();
e.target.hideFocus = true;
e.target.style.outline = 'none'
}).live('mouseout', function(e) {
e.target.blur();
e.target.hideFocus = false;
e.target.style.outline = null;
});

and it seems to works well - the question is can this fix be built into the jquerytools? Thanks Steve

Next command fails when i combine single big scrollable with a navigational thumbnail scrollable

The effect i want:
a single giant image scrollable with a behavior found here http://flowplayer.org/tools/demos/scrollable/multiple-scrollables.html

and a thumbnail paging gallery below it. like the one in http://flowplayer.org/tools/demos/scrollable/gallery.html

The exact behavior i want:

1. on page load, i see the first image with the corresponding first thumbnail highlighted.

2. i can immediately use left right key OR Mouse click on image to scroll through the large image. as i scrolled through, the highlighted image in the navigational gallery of thumbnails changes to the correct thumbnail.

3. each page of gallery has a fixed number of thumbnails. my one sets as 5. so when i use the left/right key OR mouse click, and i see the 6th image, for eg, the gallery of thumbnails will scroll to the corresponding page. and the corresponding thumbnail is highlighted.

4. if current image is the 2nd image and i use mouse click to click on the 5th image thumbnail, the 5th image thumbnail becomes highlighted and the main image changes to the 5th image.

5. i can still use my left /right key to scroll to the immediate left or right of the current image displayed in the main image AT ALL times.

6. i can still use mouse click on the main image to scroll to the immediate right of the current image displayed in the main image AT ALL times.

7. the left right keys for the navigational gallery thumbnails must be working and be visible at the right pages. Eg, first 5 images i should ONLY see the next key. for the last 5 only the prev key.
   anything else i should see both.

8. circular must be working for the main image. hence if i am at the last image, i can use right key or mouse click to go to the first image. at the first image, i can use left key to scroll to the last image. the gallery must display the right thumbnail pages and highlight the right thumbnail.

everything is working except for the features 5, 6 and 7.

Problem 1:
features 5, 6 have similar problems. when i use mouse click on the 2nd image thumbnail when i am at 1st image. and then subsequently i want to use either the keyboard or mouse click ON the main image, it fails. attempted remedies include changing the next to move(1) and seekTo(currentIndex + 1). All failed.

Problem 2:
feature 7, when i am at 2nd image, the gallery displayed the prev key even though it is not working.

To check what i said is accurate, please go to http://jsbin.com/iheci
and to see the code please go to http://jsbin.com/iheci/edit

i have added some alert messages to highlight the potential problem area.

should the fault lie with my code, i shall admit to it and apologise for any inconveniences caused.

The features stated above are crucial to me. much help appreciated.

Thank you.

Dynamic placement of tooltip has positioning bugs

Occurs on demonstration pages http://dev.flowplayer.org/tools/tooltip/index.html and http://dev.flowplayer.org/tools/tooltip/dynamic.html

To replicate resize the width of the browser window so that you can see the first three demo images and about 80% of the 4th, keeping the page scrolled to the left - if you hover over the 4th image the tooltip will appear partly obscured/clipped by the scrollbar.

If you then make the window even narrower so that just under half of the 4th image is visible then you hover over it (with the page scrolled to the left side), you'll see that the tooltip now appears in the same place as the tooltip for the 3rd image appears (try hovering over the 3rd and 4th images) which is surely completely wrong?

IE6, IE7 back and forward does not change link in browser address bar

On IE6 and IE7 back and forward does not change link in browser address bar, it stays "frozen" (for example it stays .../history.html#scripting_tab and does not change it to .../history.html#plugins_tab and .../history.html#scripting_tab etc.)

http://flowplayer.org/tools/demos/tabs/history.html
http://flowplayer.org/tools/demos/tabs/ajax-history.html

[Dateinput] Previous month

The calendar is setup as follows:

$().ready(function() {
    $('input[name="birth_date"]').dateinput({
        format: 'dd/mm/yyyy',
        lang: 'ru',
        firstDay: 1,
        speed: 'fast',
        selectors: false,
        yearRange: [-75, -10]
    });
});

Clicking previous month in Firefox 3.5.6 (also reproduced in Chrome 5 beta) works fine until January 2010, then clicking no longer moves to previous month and yields:

i.getYear is not a function
http://fhv2/static/javascript/jquery.tools.min.js
Line 48

Speed bug on Scrollable

Hello here, first of all i want to thank you for all your work. I'm really "fan" of it, and since I use them it's the first time i find a unsolvable bug.

The last version of Scrollable seems to doesn't support the folowing parameters :

• Speed

Many topic on the forum talk about this bug without a way to fix it.

Thanks for you help.
Best Regards

IE cant run JS files properly

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Win64; x64; Trident/4.0; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
Timestamp: Mon, 10 May 2010 17:14:57 UTC

Message: '1' is null or not an object
Line: 176
Char: 426
Code: 0
URI: http://cdn.jquerytools.org/1.2.0/full/jquery.tools.min.js

Message: Object doesn't support this property or method
Line: 467
Char: 1
Code: 0
URI: http://flowplayer.org/tools/release-notes/index.html

Message: Object doesn't support this property or method
Line: 2080
Char: 2
Code: 0
URI: http://flowplayer.org/js/global-0.50.js?v=01

Multiple gallery - next/last issues

Link - http://flowplayer.org/tools/forum/55/32611

Issue - As has been reported by a few people, if you have multiple galleries on a page then the next/last behavior can go a bit strange.

What is happening is that hidden overlays are getting the click event and so instead of just the visible one responding, many do. Which one wins depends on what clicks have happened before. My 'fix' below just checks whether the overlay has 'conf.activeClass' to filter out the noise. There may be a better way to fix this (hopefully involving only one handler having to fire), but this has got me going again.

Scrollable disables left/right arrow keys for all input fields

Link - http://flowplayer.org/tools/forum/55/30548

Issue - When the "keyboard" setting is enabled for scrollable, other input fields (ie. input, textarea) on the page loose the ability to move their text cursor with the left/right arrow keys.

To reproduce, instantiate a scrollable. "keyboard" is enabled by default. Then place an input field anywhere on the page.

Perhaps it would be best to disable scrollable's keyboard functionality when an input field has the focus? Or maybe disable "keyboard" setting by default?

The easy workaround/fix was to simply set the "keyboard" to false when instantiating scrollable.

IE8 issue with comments in demo

Link -

Issue - If you add 'autohide: false' to the gallery plugin located on the overlay gallery demo http://flowplayer.org/tools/demos/overlay/gallery.htm), the 'Previous' navigation link will remain hidden at all times when viewed in IE8.

This does not effect IE6, IE7, Chrome, Firefox, Safari or Opera.

---

I'm unsure if this is the same problem, but the effects were definately as you described.

As weird as this sounds, removing the comments within the overlay container immediately solved my issue.

Changed the markup to:

Not sure what the actual issue is and why it only affects IE8, but maybe this will help point someone in the right direction.

Dateinput generates an exception in Chrome. Disables JS.

When I use the dateinput in Chrome I get the following error:

Uncaught Error: INVALID_STATE_ERR: DOM Exception 11

This then makes no more JS run on the page. For example in the demos section where you have multiple dateinput field only the first one gets converted.

My setup is Mac OS X with Chrome version "5.0.375.29 dev"

Trigger Tooltip from area map

Link - http://flowplayer.org/tools/forum/30/32842

Issue - Is it possible to open tooltip from image map (hotspot)?

Effects List documentation missing

http://flowplayer.org/tools/overlay/index.html#effects_list does not exist. Where is the information for current effects?

Content flashes on load in Safari/webkit Overlay demo pages

Link - http://flowplayer.org/tools/forum/55/34150

Issue - With Safari & webkit the overlay demos flash the content of the overlay for a brief second when page loads. It happens on every refresh. It occurs on two platforms.

No return value

Hello,

This line does not return "this" -> in maybe difficult to chain:
form.data("validator", validator);

Thanks
Marcus

Relative tooltip in form validator

If the tooltip is relative to the parent, it should not be appended to document.body.
Here is a patch:

156c156,161

< msg = $(conf.message).addClass(conf.messageClass).appendTo(document.body);

                                          msg = $(conf.message).addClass(conf.messageClass);
                                          if( conf.relative ) {
                                                  msg.insertAfter(input);
                                          } else {
                                                  msg.appendTo(document.body);
                                          }

Error on Website: Vertical Scrollable Demo Page

Sorry if this the wrong place to put this, but there's an error on the website on the page http://flowplayer.org/tools/demos/scrollable/vertical.html.

In the HTML example, the next and previous links should have the classes "next" and "prev" respectively, not "nextPage" and "prevPage" as are written in the HTML code. This cost me about an hour of lost time, so I wanted to make sure it didn't do the same for others. ;)

on chrome, the scrollable displays the last image and not the first image.

see http://jsbin.com/iheci/4

The last image shows up even though the navigation gallery correctly shows the thumbnail highlighted.

even the getIndex correctly shows that the scrollable is at the right image.

I am sure the issue is not due to my code because i noticed the same effect at http://flowplayer.org/tools/demos/scrollable/multiple-scrollables.html

on page load, apparently all 4 scrollables display the last image even though their getIndex() is at the first image.

Please advise.

Thank you.

Scrollable autoscroll autoplay issues

Link - http://flowplayer.org/tools/forum/55/32926

Issue - I've been having a few issues with two aspects of scrollable and autoscroll, I'm trying to get the autoscroll working on page load - but it's impossible to use the API to stop the autoscroll for the first item.

First case (autoplay enabled)
var video_scroller = $(".scrollable").scrollable().autoscroll({api: true});

// In some other code:
video_scroller.stop();

In this case it's impossible to stop the scroller for the first item only in the scrollable. The autoplay code in scrollable.autoscroll uses setTimeout, so until the first item has moved off you can't use .stop().

Second case (autoplay disabled, use .play() to start)
var video_scroller = $(".scrollable").scrollable().autoscroll({autoplay: false, api: true});
video_scroller.play();

The scrollable immediately moves and then starts with the delay before the next move. In this case .stop() works properly. Is the initial move working as intended? Possibly, although in my opinion the functionality of autoplay should be identical to using .play(). If someone wants it to move immediately then they should use .move(x) then .play() afterwards.

Suggested changes:

api.play = function() {

// do not start additional timer if already exists
if (timer) { return; }

stopped = false;

// construct new timer
timer = setInterval(function() { 
    api.move(opts.steps);               
}, opts.interval);

// Remove this
//api.move(opts.steps);

};

// and...

if (opts.autoplay) {
api.play();
// Remove this
//setTimeout(api.play, opts.interval);
}

This would make autoplay identical to play(), although for some users it might be a change in the expected functionality.

Thoughts?

Leading # requred on rel="#overlay"

Link - http://flowplayer.org/tools/forum/55/36693

Issue - I am trying to use JQueryTools overlay with validated Xhtml.

currently OverLay throws a "Could not find Overlay:" exception if a '#' does not preceded the overlay target tag ID expressed via...

href="Included_Xhtml_2.xhtml" rel="#overlay"

...that is associated with each overlay link/button.

Unfortunately, validated Xhtml, does not permit this leading '#' to be used in the rel attribute value string.

The following patch to tools.overlay 1.1.2.js, is both backward
compatible, as well as permitting omission of this XHTML incomparable leading '#'..

// Modified by P.L., if required prepend jq with an "#"...
// ..this mod will permit validated xhtml compatibility.
// See: what was line#83
// was: overlay = ( jq ? $( jq ) : null ) || trigger;
// now: overlay = ( jq ? $( jq.charAt(0)=='#' ? jq : '#'+jq ) : null ) || trigger;
//
// leading '#' can now (optionally) be omitted from rel attribute value ( backward compatible )
// a href="Included_File.xhtml" rel="#overlay" overlay link tags.
//

This is one of two issues encountered while attempting to use JqT_Overlay with XHTML...
Also see: ".xhtml" file suffix compatibility issue with Firefox 3.6.