jQuery Forum

Hi all,
I had a hard time trying to fix an IE bug in my tabs plugin, just to
find out it's a trailing comma in the theme chooser:
$("body").themes({
"light":"Light",
"dark":"Dark",
^^
})
Just wanted to let you know to not let this happen again... :-)
--Klaus

Hi all,
I think I have nearly finished the tabs for UI.
Paul, I have a question regarding the callbacks, what's the prefered way
to do it?
Variant 1 (specify callback, currently implemented):
$('#tabs').addTab('#new', 'New', function(disabled) {
//do something
});
Variant 2 (general callback):
$('#tabs').tabs({
disabled: function(disabled) {
// do something
}
});
$('#tabs').addTab('#new', 'New');
I do already have the second approach for click, hide, show events.
Maybe I got a little confused.
Maybe supply even both approaches for maximum flexibility?
Second question: John, I /think/ I read somewhere that documentation
should not go into the file any longer but directly into the wiki. Is
that correct? I can't find that mail...
I will work on documentation and demo and will try to get as much ready
as I can this weekend!
What's new you may wonder (all of it frequently requested features,
except for the last two):
* Adding, removing tabs on the fly
* Automatic type detection (Ajax, inline) - allows mixed tabs for example
* caching option for Ajax tabs (load once, but lazy)
* reload Ajax tabs programmatically, also the ability to set a new url
via $('#tabs').load(2, newUrl)
* much more flexible HTML, all that is required now is a <ul>/<ol> with
some links as a starting point (as in other tabs implementations) - no
more container required
* option to allow toggle visibility when clicking a currently selected tab
* option for starting with all tabs unselected
* removed autoheight option (it was ugly) - I think that can easily be
achieved with CSS alone and this option was often mistaken as being a
CSS substitute anyway.
* Class based, with the benefit of easier extensibility. Need your own
special tabs method? Easy, for example create a rotate function:
$.extend($.ui.tabs.prototype, {
rotate: function() {
console.log(this.$tabs);
console.log(this.$containers);
// let them rotate...
}
}
Yeah, that's just the pattern we're using in UI but for average Tabs
users that's new of course.
You could then do:
$('ul#tabs').each(function() {
var instance = $.ui.tabs.instances[this.jQueryTabsInstanceKey];
instance.rotate();
});
I really like that!
I should note that I have left away history support for now. The history
plugin does not work in Safari 3 currently and Opera also recently
introduced a bug that makes history fail as well (the location.hash
property doesn't change even if you change it by clicking on such a
link). That said, I'm planning a complete overhaul of the history plugin
to be released as part of UI (?) later.
--Klaus

Just read on Ajaxian that Minglets.com, a "social chat app" for the
iPhone uses jQuery and YShout...
http://ajaxian.com/archives/iphone-apps-facebook-and-minglets
http://minglets.com/
I don't have an iPhone, so I couldn't see for myself.
--Klaus

jQuerians and ColdFusionistas!
Andrea Campolonghi wrote me an email the other day:
"I played a bit with your plug-in ( very nice ) and I made up a
ColdFusion Custom Tag for an easy implemntation of your plg-in in CF. I
am a CF developer learning jQuery ( really impressed from the library)."
There's no blog yet so I'm just posting it here! I don't understand much
of ColdFusion, hope it is useful!
--Klaus

Hi all,
a few plugins use some kind of check for IE 6, I for example use:
$.browser.msie6 = $.browser.msie && ($.browser.version &&
$.browser.version < 7 || /6.0/.test(navigator.userAgent));
The second check is required for compatibility with jQuery 1.1.2 and
below, $.browser.version was introduced in jQuery 1.1.3.
Can somebody please confirm, that this check fails in Windows Vista (I
don't have Vista), as the userAgent contains "Windows 6.0" here?
In that case, it's better to use:
/MSIE 6.0/.test(navigator.userAgent)
Thank you, Klaus

All,
Tane suggested the other day, that instead of creating the next version,
e.g. 3, of my Tabs plugin, it should become part of jQuery UI as a
widget. I like that idea and wanted to know what you think about that?
I'd like to start with that the sooner the better as I need to tackle
some frequently requested features...
If everybody agrees, are there any special things I need to know?
Cheers, Klaus

All,
I've put very little work into the History plugin.
In detail, I have improved and documented the history() method and I've
added another intergration example to the demo page.
You can now do:
$('a.history').history(function {
// attach a click handler
});
Such a click handler will add to history...
http://stilbuero.de/jquery/history/
--Klaus

All,
I have the pleasure to announce that the jQuery powered plazes.com has
relaunched.
plazes.com is using Thickbox Reloaded, Tabs, jCarousel, rating and the
form plugin and a tiny bit of Interface so far... and standard jQuery of
course for unobtrusive DOM manipulation, effects and Ajax.
I went ahead and created a jQuery group you can join if you like:
http://www.plazes.com/groups/146?by=carhartl
Cheers,
--Klaus

The show method completely fails in Konqueror. Does anybody know if this
is fixed with later SVN versions? I'm using the official 1.1.2 release.
It worked before, so it should be fixable, and even if Konqueror is not
officially supported.
I need to resort to css('display', 'block') to make it work.
Cheers, Klaus

Hi all,
a few updates for the tabs plugin:
* CSS update: I made the tabs width/height flexible again, still having
a mininmal width... - because people didn't stop asking :-)
* I've added a method activeTab to retrieve the currently selected tab,
usage is: var index = $('#tabs').activeTab(); // => 1 for first tab...
* I've added a new option "spinner", with which you control if a loading
message is shown and what is shown in the tab title of a remote tab
while loading the content. To disable that behaviour simply pass an
empty string or null.
Have fun,
Klaus

Hi jQuerians and Interfacer users,
I just committed a little fix for the highlight effect. If you specify a
color to animate from, in IE that color is not removed after animation
is done. The reason is the order of the following two lines of code:
jQuery(this).css('backgroundColor', color);            
            
/* In IE, style is a object.. */
if(typeof this.oldStyleAttr == 'object') this.oldStyleAttr =
this.oldStyleAttr["cssText"];
The custom background color is then already in oldStyleAttr which it
shouldn't. I've changed the order...
-- Klaus

Hi there,
I wanted to use Interface's bounce effect for a fixed positioned element
- an element that gets moved into view from the top and than bounces a
little at the end (like it was falling down).
Unfortunately the effect is messed up for such fixed positioned element.
From a quick look it is because of the following line in ifxbounce.js:
if (z.oldStyle.position != 'relative' && z.oldStyle.position !=
'absolute') {
        z.el.css('position', 'relative');
    }
There's no check for "fixed", thus my element gets relative positioned
when applying the effect.
I could easily fix this, but I don't know which files else I have to
include? Can anybody help me?
In addition, I think this should go into Interface anyway.
John made a cool effect for a new download manager section that bounces
down exactly the way I need to have it. Does anybody know if this is
available somewhere?
Happy coding, in a hurry, Klaus

Hi jQuerians!
I was wondering if there is a mod for jCarousel out there, that allows
it to be flexible? I need the width of the list and its items to be
flexible (depending on the browser width).
I tried only a bit yet and tinkered with the windows resize event, to
adjust the width of .jcarousel-clip and the list elements, that works
fine, but the scroll amount needs to be adjusted as well and I think
changing that is not as easy...
Has somebody done that? If not, I'd like to request that feature,
respectively I will have to do that mod anyway... :-)
-- Klaus

David Dexter schrieb:

All,
I've just committed an update for Tabs. I've added a few requested
features and fixed some quirks.
* tabStruct option deprecated.
For a little more flexibility regarding the HTML structure required for
a tab interface you can now add certain classes to the unordered list
and the tab containers. If no classes are present, the default structure
is used.
Say you need a div wrapped around each the ul and the containers, just do:
<div id="container">
<div>
<ul class="tabs-nav">
...
</ul>
</div>
<div>
<div id="fragment-25" class="tabs-container">
...
</div>
<div id="fragment-26" class="tabs-container">
...
</div>
<div id="fragment-27" class="tabs-container">
...
</div>
</div>
</div>
That means, as long as you attach these classes to the proper elements,
you can go crazy with your HTML. The class names are configurable.
* Necessary classes are attached by the plugin if not present.
* Retrieve active tab from class in HTML
If for some reason you cannot specify the active tab in the
initialization, you can also simply add the class to the HTML, like:
<li class="tabs-selected">...</li>
Please note that a given hash in the URL will take precedence and the
class will be removed if the active tab doesn't match. So:
hash overrules class overrules argument initial
* Switching tabs is canceled if the onClick callback returns false
(useful if switching tabs requires form validation before). Thanks to
Brice Burgess for the help with that.
* Triggering/Enabling/Disabling tabs can also be done via id instead of
an index:
$('#tabs').triggerTab(1);
is the same as
$('#tabs').triggerTab('section-1');
* Fixed a bug occuring when multiple Ajax tabs containers are included
on the same page, e.g. duplicate ids. Remote tabs are now numbered
consecutively.
* New option hashPrefix for constructing the hash the link's href
attribute of a remote tab gets altered to, such as "#remote-tab-1".
* Finally they're looking better :-)
* Moved more stuff to SVN...
* Fixed a few IE quirks introduced with the Ajax support. Along with
that goes an update for the History plugin where I've fixed a similiar
quirk in IE and Safari.
I consider this the last maintenance release for the tabs. After I've
tackled Thickbox Reloaded I'm going to rewrite Tabs for Tabs 3, which
will allow mixed static/Ajax tabs, removing and creating tabs,
mouseover tabs...
As usual you can find it here as well:
http://stilbuero.de/jquery/tabs/
Ah, and if anybody knows a fix for IE's cleartype issue, please let me know!
-- Klaus
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Hi jQuerians,
I just committed what I would call Thickbox Reloaded alpha version. It
may look the same pretty much, but is a complete rewrite.
Here's what's new:
* Chainable method to bind Thickbox to links and forms (makes it easy
for content that gets loaded/created later on).
* Totally unobtrusive: no classes needed for links, no params in URL.
* Confirm type Thickbox, triggered automatically by binding Thickbox to
a form. If "yes" the form gets submitted unless a custom callback is
defined (for example for Ajax submitting)
* Automatic type detection depending on type of element, respectively on
type of link:
image: href is an image
content: href is a hash
ajax: href is internal and not image
iframe: href is external and not image
confirm: element is form
* Improved UI blocking (Thanks to Mike "Malsup" and the BlockUI plugin)
* Options for width/height are now passed in as settings object literal
or are stored as default values via $.thickbox.defaults({ width: 300,
height: 400 })
* Options top/left positioning (instead of centering), unit defaults to 'px'
* Easier skinning: The look is completely separated into an extra style
sheet
* Scrolling via mousewheel/touchpad is blocked
* Lets you define custom animations for showing the modal window via
settings
* Requires jQuery 1.1.1
Maybe I have forgotten something.
I thought of including the required style sheets dynamically, but you
would still have to include the path somehow.
You can also have a look here (besides repository):
http://stilbuero.de/jquery/thickbox_reloaded/
Please note that I haven't tested in other browsers than Firefox yet. I
just thought I'd like to request some feedback/code review first!
-- Klaus
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

We need that for jQuery!!!
http://www.bartelme.at/journal/archive/prototype_reference_widget/
Funny thing: I found the following in their sidebar (about Visual jQuery):
"A visual documentation of the jQuery JavaScript library. Would be nice
to have something similar for Prototype too."
-- Klaus
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Hi all,
sometimes there may be the need for having Flash movies being 100% wide
while keeping it's ratio. That means they should not only change the
width but also the height on window resize.
Because I needed it, I've created a simple plugin for that:
http://stilbuero.de/jquery/ratio/
Just put in your flash movie and put in the correct values for width and
height, like:
<div id="demo">
<object ... width="300" height="200"> ... </object>
</div>
$('#demo').keepRatio();
http://stilbuero.de/jquery/ratio/
This also works with an image that has a width and a height attribute.
I also wanted the plugin to fix the click-to-activate problem in IE,
thus that's what the container was needed for, but with the simple demo
that doesn't work anymore suddenly (which is why I love IE, because on
Plazes it works fine on a real page I'm working on). I have commented
that out for the time being.
Don't know if it's best name for it, I'm open for better ideas.
Have fun, Klaus
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

All.
I have just updated the Tabs plugin, which now supports loading tab
content via Ajax. As you would expect I did that in an unobtrusive manner.
The only thing you need to do is to build the following HTML with links
to existing ressources (from where the content gets loaded):
<div id="container">
<ul>
<li><a href="ahah_1.html">Content 1</a></li>
<li><a href="ahah_2.html">Content 2</a></li>
<li><a href="ahah_3.html">Content 3</a></li>
</ul>
</div>
And use the remote option:
$('#container').tabs({remote: true});
Obviously this will degrade gracefully, without JavaScript the content
will still be accessible.
All other options and history should be totally unaffected by that.
Because my MacBook is currently at the service provider I couldn't test
in Safari and a real (not a standalone) IE 7. Feedback appreciated.
There's another option: While the tab content is loading a little
spinner left to the tab title text gets shown (which you will hardly see
on the demo, because it's loading too fast). Just like in Firefox for
example. This is controlled by a CSS class, which you can change:
$('#container').tabs({remote: true, loadingClass: 'progress'});
If you don't want to show a spinner just remove
.anchors .tabs-selected .tabs-loading {
padding-left: 25px;
background-image: url(loading.gif);
background-position: 4px 50%;
background-repeat: no-repeat;
}
from CSS. Well, I just realized that I don't really need to put that
into the external style sheet.
So maybe I'm going to change this again, but let's see...:
$('#container').tabs({remote: true, spinner: 'loading.gif'});
$('#container').tabs({remote: true, spinner: false});
What do you think?
Demo as usual:
http://stilbuero.de/jquery/tabs/
I hope this fits your needs.
Cheers, Klaus
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

With jQuery 1.1, trigger does not execute a click event on a checkbox I
have attached before...
Is it just me?
-- Klaus
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

...why sticking to standards is good - microsoft is having the problems
they created:
http://blogs.msdn.com/iemobile/archive/2006/12/18/why-doesn-t-adobe-flash-always-render-for-ie-mobile.aspx
LOL, digg it!
http://digg.com/software/Microsoft_having_the_problems_they_created
Sorry for OT, I just had to post this...
-- Klaus
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Hi jQuerians,
just wanted to let you know, that I have checked in a little - but
regarding the comments on my blog still important - update.
It's now possible to hide all tab content *before* tab initialization so
to avoid a more or less annoying flash of content.
You could just put that into your CSS, but to make it gracefully
degrading I highly recommend to put in these JavaScript related styles
via document.write or by attaching a class, "js" for instance, to the
document's html element and then use
.js #tabs div {
display: none;
}
This ensures that the content is still accessible without JavaScript.
I also fixed a little bug in the history - if you went back on a tabs
page to an address without a hash in the Url the active tab wasn't set
correctly.
Next I will tackle fully accessible, gracefully degrading remote (ajax)
functionality for the tabs.
Have a nice weekend and a beer maybe...
-- Klaus
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Hi jQuerians,
I'm wondering what is the best way to concatenate (callback) functions.
The problem: I call a certain function several times passing in a
function reference that is used as a callback. All callbacks will be
used in one large callback in the end but I cannot build the callback at
once.
initialize(funcRef);
...
initialize(anotherFuncRef);
function initialize(callback) {
// concatenate callbacks from different calls
}
What would be the most elegant way to do this? I had the idea to store
the functions in a list and call them one after the other in a loop.
The other idea I had is this:
var myCallback;
function initialize(callback) {
if (myCallback) {
myCallback = function() {
myCallback();
callback();
}
} else {
myCallback = callback;
}
}
Hm, that doesn't convince me either. Both ideas make me think there is a
more elegant way to achieve this. Is there a better pattern from the
gurus out there?
Thanks!
-- Klaus
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

http://24ways.org/2006/a-scripting-carol by Derek Featherstone
...not a jquery centric example, more about unobtrusive scripting, but
still cool. And worth reading anyway.
-- Klaus
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

... of web developer's toolbar fame. I'm wondering if he is thinking of
incorporating that into the extension.
http://chrispederick.com/work/webdeveloper/
-- Klaus
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/