jQuery Forum

This issue has already been reported in Trac[1], but I just wanted to
mention it here.
In IE8 (not using compatibility mode), the :hidden and :visible
selectors do not work on table cells. The Trac page has a couple test
pages, but in general, these selectors fail:
$('td:hidden') and $('td:visible'). Neither one filters the results
properly.
Have a nice Halloween/weekend!
[1] http://dev.jquery.com/ticket/5342
--

I found this strange issue and wanted to see if 1) anyone else had
stumbled upon it and 2) if there was a fix for it.
Using jQuery 1.2.6+ (I haven't tested with earlier versions), consider
these two statements:
$('<div></div>').appendTo('body').height();
$('<div></div>').appendTo('body').hide().height();
In Firefox, both report 0. In IE (6 & 7), the first reports 0, the
second, some value based on the font size. For example, on my site
(ericmmartin.com), with IE, I get 0 and 22.
Since it seems that jQuery sets display to none for hide(), it sounds
like an IE bug.

Found a couple of issues with $(window).height() reporting incorrect
values in Safari 3.0.x and Opera 9.2x.
Test page: http://www.ericmmartin.com/code/jquery/opera/
Created tickets:
http://dev.jquery.com/ticket/4335
http://dev.jquery.com/ticket/4336

In order to transition away from $.browser to $.support, people are
going to want/need something to help identify IE6.
After a bit of research, I found one property that seems to work:
elem.style.maxHeight. IE6 returns undefined.
I'm adding a patch to support.js - please let me know if you think
this would work. I tested in IE6 & 7, Firefox 2 & 3, Opera 9.5 & 9.6
and Safari 3.
Usage:
if (!$.support.maxHeight) {
    // do ie6 stuff
}
http://dev.jquery.com/ticket/3960
Thoughts?

A new version of SimpleModal has been released. It contains a few
improvements and fixes for browser related issues.
There are some new options and a few that have been deprecated, so
make sure to check out the project homepage for a list changes and
upgrade details.
Homepage:
http://www.ericmmartin.com/projects/simplemodal/
Demos:
http://www.ericmmartin.com/simplemodal/
Plugin Page:
http://plugins.jquery.com/project/SimpleModal
I've also updated the contact form demo to include a subject and cc
field, as well as utf-8 support. For those of you who use the SMCF
WordPress plugin, I'll be updating that shortly.
Thanks to everyone who has used SimpleModal and provided valuable
feedback!
-Eric

There are a few tickets already opened related to this issue:
http://dev.jquery.com/ticket/2845
http://dev.jquery.com/ticket/3142
http://dev.jquery.com/ticket/3289
If you try to clone an element that contains an <object/>, you'll get
an exception:
Object doesn't support this property or method
Code example: http://dev.jquery.com/ticket/2845#comment:2 contains
Along the same lines, the following crashes IE7:
$("<object/>").clone(true);
But the following doesn't (nor does it cause the "Object ..." error):
$('<div/>').append('<object/>').clone(true);
Thoughts?

I've been trying to optimize a page that inserts, replaces and removes
large amounts of data (> 2000 elements). The data is retrieved via
Ajax and inserted into a div using elem.html(data); Each inserted
element requires a click event to be bound.
I had been using LiveQuery to handle the "automatic" event binding,
but I found that by removing it (and manually handling binding/
unbinding) I was able to improve the speed of the initial insertion of
data. However, there was still a big lag when removing the data
(either through replacing, clearing, or leaving the page).
I think that I narrowed it down to the way jQuery handles removing
data. There are two things that I did that seem to make things much
faster:
1) Removing data: Manually unbind the click event and set the
innerHTML to "", as opposed to using the jQuery empty(); method. I
also did this when replacing data.
2) Leaving the page: Added an onbeforeunload event that manually
unbinds the click event. This significantly shortened the lag when
leaving the page.
A similar question[1] was asked on the jQuery mailing list and while I
responded with my findings, there weren't any other comments or
suggestions. I'd like to know what others have done and if the
workarounds that I used are "OK" or if they create any issues that I
am unaware of.
Here are some test pages that I created to demonstrate the issue and
what I did to speed things up:
http://www.ericmmartin.com/code/profile/
For this page, I'm considering adding the JavaScript inline...but was
hoping to avoid that ;)
Thanks,
Eric
[1] http://groups.google.com/group/jquery-en/browse_thread/thread/1ce305290c6874dc/e931887eb08e23ea

I'm *considering* adding a custom attribute for elements created in a
plugin and wanted to know what the general feeling is on this.
I'm guessing any opposition to the idea would be based on the fact
that it wouldn't validation (if someone were to extract the DOM and
run that through a validator), but does that really matter?
Since plugins are used by the community, I don't want to do anything
that would grossly offend anyone, so I thought I'd just see what the
reaction would be. =)

When using IE (6&7), the placeholder div appears over the item being
dragged.
See # 4:
http://dev.jquery.com/view/trunk/ui/demos/ui.sortable.html
Any suggestions for fixing this?

This question has been asked previously[1], but was not responded to.
I have a table that I am binding "row" clicks using livequery and I
have a situation where I want to trigger a "row" click event manually
and trigger() does not seem to work with events bound with livequery.
Is there a way that I can manually fire an event that is managed by
livequery?
[1]
http://groups.google.com/group/jquery-en/browse_thread/thread/1d7b8cd0d610e9ad/4fa9348e3952abcb?lnk=gst&q=livequery+trigger#4fa9348e3952abcb

While investigating the various key events, I've run into some
interesting findings. I wanted to post them here to have others
confirm/deny my findings.
First off, I was working with the TAB key (keyCode: 9) and found out
quickly that IE does not fire the keypress event for the TAB key. PPK
has a good <a href='http://www.quirksmode.org/js/keys.html'>resource
page</a> about detecting keystrokes.
Once I switched to using keyup, all of the browsers I was testing with
fired on TAB, but with differing results:
<a href='http://www.ericmmartin.com/code/jquery/keyup.html'>http://
www.ericmmartin.com/code/jquery/keyup.html</a>
The results:
- Firefox 2 & 3: results mostly as expected. after 1 cycle, the tab
back into the content selects the body and returns an undefined
target, but still triggers a keyup event
- IE7 & 6: results not as expected. initial tab to the first element,
in this case the "text" input, does not trigger a keyup event
- Safari 2: results as expected
- Opera 9: results mostly as expected. unlike all other browsers,
tabbing does not cycle through the browser controls, only through the
elements on the page
I thought it was interesting how each of the browsers handled tabbing
differently. The lack of a keyup event in IE is frustrating...anyone
know of a workaround?

I have an app that concatenates all of my jQuery plugin files into one
file (using Ant concat). The order of concatenation is based on the
filename, and I ran into a problem where I was getting an error:
$.ui[module] has no properties
A quick search and I see that there is already a <a href='http://
dev.jquery.com/ticket/2115'>bug</a> submitted about this error.
In my case, the problem was due to ui.sortable.ext.js being added to
the file before ui.sortable.js because of the way the files were
concatenated.
To prevent this issue in an environment like mine, what are the
thoughts of changing the ext filenames to something like: ui.sortable-
ext.js? Any other ideas? I know I can make changes on my end to "fix"
the concatenation issue, but just wanted to find out what others
think.
-Eric

Is there a way to show a tab without triggering the click event for
that tab?
In more detail:
I'm using the 'select' event on the tabs to initialize a new form for
data entry. There is a summary list below it, that when clicked, will
populate the corresponding tab with existing data. So...when someone
clicks on the summary row, I'm issuing an Ajax call to get the data. I
then want to "show" the appropriate tab and then load the data I
received from my Ajax call.
I tried initially using the tabs to handle the Ajax calls, but because
of the way we are using them, I had to change.
Any suggestions?

This might be a dead horse, but wanted to re-ask the question:
Why does calling val() on a group of selected checkboxes (same name
attribute - if it matters) not return an array of values?
Example:
http://www.ericmmartin.com/code/jquery/checkbox.html
I see that there is code to handle a multiple select. Also, I know
that Mike's form plugin can return the array, but I'd think this
"feature" would be part of the core.
Thoughts?

Hello,
I've released a new version of SimpleModal. I added some new options
that allow direct CSS styling as well as moved the critical CSS
attributes from external stylesheets into the script.
Another big change is the way that the modal dialog data is handled.
Now, SimpleModal will, by default, clone the data and then re-insert
the cloned data into the DOM when the dialog is closed. There is a new
option, persist, which will allow you to have changes to the data
maintained across modal calls.
Project link:
http://plugins.jquery.com/project/SimpleModal
Homepage:
http://www.ericmmartin.com/projects/simplemodal/
In addition, I'm working on a contact form plugin for WordPress that
will be based on the "Contact Form" demo. You can see it in action on
my site.
I appreciate any feedback.
Thanks,
Eric

I want to be able to determine wheter a jQuery object was created from
an existing DOM element, or if it is new/created "on-the-fly".
Given the following examples:
Example 1:
HTML:
<html>
<body>
<div id='title'><h1>Title</h1></div>
</body>
</html>
JavaScript:
var elem = $('#title');
Example 2:
var elem = $('<div id='title'><h1>Title</h1></div>');
How can I tell if elem came from an existing DOM? I was assuming that
I could just check the parent() - expecting the result to be null for
Example 2. However, this is what I get:
$('#title')parent()[0].nodeName; // returns BODY
$('<div id='title'><h1>Title</h1></div>').parent()[0].nodeName; //
returns DIV
Any ideas?

I'm trying to write a app that watches for changed data, then if a
user clicks on something else, it warns them that they have unsaved
data with a modal dialog.
I'm calling e.preventDefault on the event initially and then trying to
make it so if they select yes, the event will be re-triggered.
It seems like a common enough thing, but I'm just going in circles.
What is the best approach for this?
// sudo code
var changed = false;
$(form).bind("change", function () {
changed = true;
});
$("a").click(function (e) {
e.preventDefault();
if (changed) {
$(modalContent).modal();
// bind yes
if (yes) {
// trigger event ??
}
}
});

I've been using jQuery for a couple months and recently had the need
for a modal dialog. I tried other existing modal plugins, but decided
to take a shot at creating my own plugin.
SimpleModal is a lightweight jQuery plugin that provides a simple,
cross-browser compatible interface to create a modal dialog.
The plugin is extremely flexible and was written to allow a developer
100% control of the style and functionality.
I would appreciate any feedback on the plugin, as it's my first one =)
Details:
http://www.ericmmartin.com/projects/simplemodal
Demo:
http://www.ericmmartin.com/simplemodal
Thanks,
Eric