jQuery Forum

The datepicker function is awesome for selecting a single day, but I
need to build a date control that allows the selection of both single
and multiple days (contiguous and non-contiguous).
I found something along the lines: http://www.filamentgroup.com/examples/daterangepicker_v2/index3.php
I would prefer a simpler UI: One calendar. Click once to select a
single, control-click (or shift-click?) to select additional days. Is
this possible? Anyone have any suggestions?
...Rene

Assuming:
<select id="selector">
<option value="0" selected="selected">Both</option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<a id="prev">Prev</a>
<a id="next">Next</a>
Just wondering if someone has figured a simple jQuery function for
moving through the a select list (using the above type of controls).
The idea is that the Prev anchor would disappear if the first option
is selected, and that the Next ancor would disappear if/when the last
option is selected.
...Rene

I'm building a little UI control with 3 buttons that slide one of
three DIVs (corresponding to the UI control button pushed) that reside
inside a container DIV. Something like:
<a class="button red">Red</a>
<a class="button blue">Blue</a>
<a class="button green">Green</a>
<div class="container">
<div id="red">Red stuff here</div>
<div id="blue">Blue stuff here</div>
<div id="green">Green stuff here</div>
</div>
So... The container DIV is, say, 200px wide. Each internal DIV is also
200px wide. So only one is visible at any time. The user clicks <a
class="button green">Green</a>, and the container DIV smoothly scrolls
from left-to-right (red to blue). (I don't want scroll bars to appear
(overflow:hidden). I just want the view to slide left or right between
the red, green, blue DIVs.)
I found some plug-ins that do shuffling of photos (the Cycle plugin
looks very nice), but this is a single, simple feature, with no fancy
transitions (other than sliding), I'd like to do it with core jQuery.
Any suggestions on a basic implementation
$("a.button").live("click", function(){ ...
...Rene

There are so many to choose from, I'd like to hear some opinions.
1. Relatively lean and fast. 200+ KB seems, to me, ridiculously large.
2. Ridiculously good-looking.
3. Compatible. Firefox, IE 6/7, Safari, etc.
Opinions?
...Rene

I have some JSON that needs processing, e.g.:
items["1"] =
'101010111110010101020110111110100010101020101020101010101100110100";
items["2"] =
'000010101210101011100101101010000111111001010121010000111110001111";
... (x 1000)
I need to process ~1000 rows so that each 0, 1 or 2 appear as a small
coloured dot. (It's a visualization thing).
So here's what I have so far, which works:
for (i in items) {
html += process (items[i]);
}
function process (item) {
    var result = '<div>';
    for (var g=0; g<item.length; g++) {
        switch (item.substr(g,1)) {
            case "0":
                result += '<div class="grey">&nbsp;</div>';
                result;
            case "1":
                result += '<div class="blue">&nbsp;</div>';
                break;
            case "2":
                result += '<div class="red">&nbsp;</div>';
                break;
            }
        }
    result += '</div>';
    return result;
    }
My question is, is there a faster or more efficient way to iterate
through each items' "10101001010220211"? I realize this is not
strictly jQuery related, but it seems the smartest Javascript people
hang out here. :-)
Thanks
...Rene

I've been asked to add live web chat to a couple sites, in which
jQuery will no doubt play a big role.
However, I'd rather not re-invent the wheel if there's some free, open
source live web chat software worth recommending. Can anyone recommend
such a package, or am I better of writing my own?
...Rene

I have a dynamically generated a long list of items with events bound
to them. I was wondering, when I clear the list, or replace it, is it
necessary to unbind all their events before clearing its parent
container?
I know I can experiment to answer this question, but I wanted to know
if perhaps html('') on the parent container runs unbind() anyways?
...Rene

I sometimes use the title attribute in DIVs to store data. Normally,
it displays on mouseover. Just wondering what a best practice to
suppress that.
...Rene

Just wondering...
When you have a link within a link:
<a id="main" href="#">This is some long row of test and here is a
<input type="button" id="clickme" value="button" /> and some more
text</a>
...how do you override the parent click event?

(Disclaimer: Sorry for posting code -- It's as terse as I can make
it.)
I'm trying to enable sorting between tables -- drag a row within a
table to change its order, or drag a row to another table and it will
"snap" into place. In each case, after you drag-and-drop the row, the
table calls an update function. Now, if I set up the .sortable() for
each table manually, sorting works fine. Each table callsback to its
update function and reflects the current rows. E.g.,:
------------
<b>Table 1</b>
<table id="table1">
<tbody id="rows1">
<tr id="c_1" class="drag2"><td>The</td></tr>
<tr id="c_2" class="drag2"><td>quick</td></tr>
<tr id="c_3" class="drag2"><td>brown</td></tr>
<tr id="c_4" class="drag2"><td>fox</td></tr>
</tbody>
</table>
<b>Table 2</b>
<table id="table2">
<tbody id="rows2">
<tr id="d_1" class="drag2"><td>The</td></tr>
<tr id="d_2" class="drag2"><td>quick</td></tr>
<tr id="d_3" class="drag2"><td>brown</td></tr>
<tr id="d_4" class="drag2"><td>fox</td></tr>
</tbody>
</table>
<input id="make" type="button" value="Make Connectable" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jqueryui/1.5.2/jquery-ui.min.js"></script>
<script type="text/javascript">
connectable = ["#rows2","#rows1"];
$(document).ready(function() {
    $('#rows1').sortable({
            connectWith: [connectable.join(",")],
         update: function(e, ui) {
         $(this).sortable("refresh");
         items = $(this).sortable("toArray");
         var sort_order = items.join(',');
         $('#results').append(sort_order + "\n");
             },
        });
    $('#rows2').sortable({
            connectWith: [connectable.join(",")],
         update: function(e, ui) {
         $(this).sortable("refresh");
         items = $(this).sortable("toArray");
         var sort_order = items.join(',');
         $('#results').append(sort_order + "\n");
             },
        });
    });
</script>
<textarea id="results" rows="10" cols="40"></textarea>
-----------
But if I put the .sortable() bits inside a function (there's a reason
I want to do this), it doesn't work right. Whether I drag a row in the
first or second table, the update function only reflects the sort
order of the first table. I can't figure out why. E.g.:
-------------
<b>Table 1</b>
<table id="table1">
<tbody id="rows1">
<tr id="c_1" class="drag2"><td>The</td></tr>
<tr id="c_2" class="drag2"><td>quick</td></tr>
<tr id="c_3" class="drag2"><td>brown</td></tr>
<tr id="c_4" class="drag2"><td>fox</td></tr>
</tbody>
</table>
<br />
<b>Table 2</b>
<table id="table2">
<tbody id="rows2">
<tr id="d_1" class="drag2"><td>The</td></tr>
<tr id="d_2" class="drag2"><td>quick</td></tr>
<tr id="d_3" class="drag2"><td>brown</td></tr>
<tr id="d_4" class="drag2"><td>fox</td></tr>
</tbody>
</table>
<input id="make" type="button" value="Make Connectable" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jqueryui/1.5.2/jquery-ui.min.js"></script>
<script type="text/javascript">
connectable = ["#rows2","#rows1"];
$(document).ready(function() {
    $('#make').click(function(){
        for (t in connectable) {
            $(connectable[t]).sortable({
                connectWith: [connectable.join(",")],
             update: function(e, ui) {
                 console.log(connectable[t]);
             $(connectable[t]).sortable("refresh");
             items = $(connectable[t]).sortable("toArray");
             var sort_order = items.join(',');
             $('#results').append(sort_order + "\n");
                 }
                });
            }
        });
    });
</script>
<textarea id="results" rows="10" cols="40"></textarea>

I can drag and sort lists.
I can sort tables.
I can drag entire tables.
But I can't drag individual table rows. Anyone know how to do it?
Here's some sandbox code:
<ul id="list">
<li id="a_1" class="drag1">The</li>
<li id="a_2" class="drag1">slow</li>
<li id="a_3" class="drag1">green</li>
<li id="a_4" class="drag1">turtle</li>
</ul>
<table id="table">
<tbody id="rows">
<tr id="a_1" class="drag2"><td>The</td></tr>
<tr id="a_2" class="drag2"><td>quick</td></tr>
<tr id="a_3" class="drag2"><td>brown</td></tr>
<tr id="a_4" class="drag2"><td>fox</td></tr>
</tbody>
</table>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jqueryui/1.5.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.drag1').draggable();        // WORKS
//    $('#list').sortable();            // WORKS
//    $('#rows').sortable();            // WORKS
//    $('#table').draggable();        // WORKS
//    $('#rows').draggable();            // DOESN'T WORK -- ?
    $('.drag2').draggable();        // DOESN'T WORK -- ?
//    $('#a_1').draggable();            // DOESN'T WORK -- ?
    });
</script>

I've noticed that when using sortable(), when I click-and-drag an
item, it shifts left and up. Not sure what is causing this. Has anyone
found a way to keep draggable items from changing width and x-position
when dragging?
...Rene

Can someone tell me why serialize returns nothing?
<ul id="sort">
<li id="1">123</li>
<li id="2">abc </li>
<li id="3">456</li>
<li id="4">xyz</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jqueryui/1.5.2/jquery-ui.js"></script>
<script type="text/javascript">
$('#sort').sortable({
cursor: 'move',
axis: 'y',
update: function() {
sorted = $(this).sortable("serialize", 'id');
alert (sorted);
}
});
</script>

I'm trying to use the beforeSubmit callback of the jQuery form plugin
to check some values with the server before submitting the entire
form, which can include a large file upload (which would be annoying
to upload, and then fail due to other submitted values being invalid--
hence the pre-submit check).
For reference: http://malsup.com/jquery/form/#code-samples
The problem I'm having with running an Ajax request within
beforeSubmit, for example, is that it returns immediately (normally a
good thing). But beforeSubmit needs to wait for the value before
knowing whether it can return true or false.
Anyone run into this before? I guess, in a nutshell, what I'm trying
to do is validate part of the form data by submitting it to a
different URL, then, depending on the response, submitting (or not
submitting) the entire form to the primary URL.
...Rene

I have a simple accordian-style menu working well. Taking care to
enclose inner, padded elements in divs ensures that everything
animates smoothly.
However, I've run into a problem that I've read about here, but
apparently without a solution (
http://groups.google.com/group/jquery-en/browse_thread/thread/144a0442d5e5fa1c/4021595523934962?lnk=gst&q=float+animation+jumps#4021595523934962
).
Simply put, if you include an element in a list element with a
float:right... Then when that parent list element is expanded, it will
expand beyond the actual height of its contents (including the
float:right element), then abruptly snap back up to the actual height.
Has anyone found a way to solve this? (If it's hard to visualize, I'll
try to post an example, but presently all my working code is offline.)
...Rene

I'd like to bind both events to a div, such that:
When the div is clicked, Event A fires.
When the div is double-clicked, event B fires. But not event A.
The single-click event works fine. And the double-click works too,
except both events fire on double-click. That is, immediately after
the first click (of two), Event A fires.... Then on the second click
of the double-click, event B fires...
Is there a way I can separate the two events?
...Rene

Here's some markup:
<h2 class="drawer-handle"><div>Saved</div></h2>
<h2 class="drawer-handle" id="rides-button"><div>Rides</div></
h2>
<h2 class="drawer-handle" id="details-button"><div>Details</
div></h2>
I'm want to bind click events to the first and last <h2>s, but exclude
the #rides-button (because I have a different click event for it). Not
really sure how to do it, the docs on :not are pretty sparse (well,
that's my excuse today). This is what I started with, which of course
is not exclusive at all:
    $('h2.drawer-handle').click(function () { ... });
...Rene

I need to incorporate Quicktime movies into some web pages, and would
like to emulate the floating div effect that is common on Apple's web
site (click a link to an img or movie, and instead of loading a new
page, it displays a div with a nice shadow and the background dims).
From what I can tell, they're using prototype and scriptaculous. I'm
[of course] using jQuery everywhere else on the site, and I'd like to
[if possible] not resort to another library or non-jQuery plug-in if
possible. In fact, ideally I'd like to do this within jQuery core. Of
the media viewers I've looked at, Shadowbox looks great... Any
thoughts?
...Rene

New to jQuery, having fun with it. Is there a section in the docs
concerning accessing the URL string?
Reason I ask is, when a certain page loads from a URL such as "http://
www.site.com/page.html#section123" I want the page to scroll (smoothly
if possible with the core library) to that anchor-named section and
then briefly highlight the div beneath the anchor. Markup would be:
<a name="section123"></a>

This paragraph text would be highlighted

...Rene