Search jQuery

jQuery Forum

Screen name:
kAlvaro
About Me:
Álvaro González - Burgos, Spain

kAlvaro's Profile

12 Posts

132 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Datepicker: faster storage
[2Replies]
- 23-Sep-2010 08:12 AM
- Forum: Using jQuery UI
I'm adapting Datepicker (latest stable version) to serve as GUI for a scheduler. I just want to display an inline calendar with all the required months and be able to select (or unselect) as many individual dates as I want.

In my first draft, I keep an array of selected dates. I add or remove dates in the onSelect callback. I toggle a custom class in the beforeShowDay callback so there's a visual hint if the date is selected.
1. jQuery(function($){
      $(".tipo-programacion").data("fechas", []).datepicker({
          hideIfNoPrevNext: true,
          dateFormat: "yy-mm-dd",
          gotoCurrent: true,
          numberOfMonths: [4, 3],
          minDate: new Date(2010, 1-1, 1),
          maxDate: new Date(2010, 12-1, 31),
          beforeShowDay: function(date){
              return [
                  true,
                  $.inArray($.datepicker.formatDate('yy-mm-dd', date), $(this).data("fechas"))===-1 ? "" : "seleccionado"
              ];
          },
          onSelect: function(dateText, inst){
              var arrayFechas = inst.input.data("fechas");
              var pos = $.inArray(dateText, arrayFechas);
              if( pos===-1 ){
                  arrayFechas.push(dateText);
              }else{
                  arrayFechas.splice(pos, 1);
              }
          }
      });
  });
So far so good but, of course, the beforeShowDay code makes it all very slow (in my computer, 1 second in Firefox and 3 seconds in IE).

I've figured out that doing 365 array searches every time I click on a date is one of the bottlenecks. It'd be nice if I could store information for each date inside the cell itself (for instance, the "selected" CSS class) and set it at onSelect. However, the only reference to the clicked cell inside onSelect seems to be a text representation of the date.

Any idea?

P.S. Cool, I cannot highlight words with Ctrl+Shift+Left or Ctrl+Shift+Right

Animate inline elements
[3Replies]
- 04-Mar-2010 07:29 AM
- Forum: Using jQuery
Apparently, the only builtin animation effects that work properly on inline elements are fadeIn() and fadeOut(). The rest seem to convert the item into a block element while the animation is running, thus ruining the effect. Am I missing something obvious or it's a known limitation of the jQuery engine?

Here's some sample code that demonstrates what I mean:
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. <html>
3. <head><title></title>
4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
5. <style type="text/css"></style>
18. <script type="text/javascript"></script>
34. </head>
35. <body>
36. <div>
37. <div></div>
38. <div></div>
39. </div>
40. <div>
41. <input type="text" value="Lorem ipsum">
42. <input type="text" value="Dolor sit amet">
43. </div>
44. </body>
45. </html>

Keep me signed in
[0Replies]
- 18-Feb-2010 06:18 AM
- Forum: About the jQuery Forum
Is the "Keep me signed in" feature supposed to work? I have to log in every time I restart Firefox :-?

Uncheck radio and checkbox buttons
[0Replies]
- 09-Feb-2010 08:25 AM
- Forum: Using jQuery
What's the cross-browser way to uncheck an <input type="radio"> and <input type="checkbox"> elements?
Whatever I do, it'll do nothing in IE6:
1. $theElement.attr("checked", false);
2. $theElement.removeAttr("checked");
3. $theElement.get().checked = false;
In IE7, checkboxes get unchecked with all these methods but none work for radio buttons. In all other browsers, they all work fine.

Move partially hidden object into full view
[0Replies]
- 20-Aug-2009 12:42 AM
- Forum: Using jQuery
I use JavaScript to inject a dynamic box (a <div>) in the document. The box is located in a relative position, starting from the link that trigger its creation:

+---------+ | Trigger | +---------+ +-----------------------+ | | | Box | | | +-----------------------+

So far so good.

The problem is that in triggers located to the right of the page there's not room enough to show the whole box. The box is partially hidden, scrollbars show up and the user must pick the mouse to scroll the box into view.

My first solution was this little snippet:
moveIntoView = function(obj){ var pageWidth = $("body").width(); var objectWidth = $(obj).outerWidth(); var objectLeft = $(obj).offset().left; if( objectLeft+objectWidth > pageWidth ){ $(obj).css({left: $(obj).offset().left + "px"}).animate({left: (pageWidth-objectWidth) + "px"}, "fast"); } };

It works as expected... unless the document already has horizontal scrollbars. In such case, the box is unnecessarily moved far away from its trigger.

All methods and properties I've tried provide me with the *visible* width of the page, not the *virtual* width. I've also tried to use the right CSS attribute but it happens to be negative for the rightmost boxes. According to Firebug, the <body> tag has the size of the window and everything to the right stretches outside the body.

Is there any way to move a DOM node that's partially hidden into full view?

Optimizing large dynamic <select>
[5Replies]
- 29-May-2009 01:19 AM
- Forum: Using jQuery
I'm building on-the-fly <select> lists from JSON data fetched from the server. Some of then include a large number of items (>20,000).

The SQL and HTML parts are working fine. The AJAX script fetches data fairly quickly (around 1 second) and large selects are not a problem once they're built (the browser handles them nicely, even IE). The bottleneck is in the process of picking the JSON data and building the <option> tags. That can take a full minute.

What's the recommended (i.e. fastest) method to generate a large <select> list?

My current approach is this:

// Fetch data (GET method allows me to use browser cache) $.get(url, get, function(jsonValues, txtStatus){ that.values = jsonValues; }, "json"); // Create <select> var select = document.createElement("select"); $(select).attr("disabled", "disabled"); $("<option>").attr("value", "").text("Loading...").appendTo(select); // Populate <select> $(that.values).each(function(i){ if(this.c!==null){ $("<option>").attr("value", this.c).text(this.v).appendTo(select); }else{ // Informative item, must not be selectable $("<option>").attr("value", "").text(this.v).attr("disabled", "disabled").appendTo(select); } }); $(select).removeAttr("disabled"); $(select).find("option:first-child").text("");

location.replace
[0Replies]
- 03-Feb-2009 10:58 PM
- Forum: Using jQuery
I have a page with a table. When I click on a row, I display the <div> that's associated with the row and I change the URL hash part so it's bookmarkable. This part works fine.

I don't want that clicking on rows generates a huge useless browser history so I'm using document.location.replace to change the hash. The hash is changed successfully but the no-history part only works in Firefox: all other browsers (IE6, IE7, Opera, Chrome...) add a new history entry on every click.

What's driving me crazy is that I know that document.location.replace does work in Internet Explorer. I have a simple test case that proves it:

<!DOCTYPE html> <title>location.replace should not create new history object</title> <p><button onclick="location.replace('#test');">Set #test hash</button> <p>#test should appear at the end of the URI but you should not be able to go to this page without #test as it should not create a new history object.

So... Why is this third-party snippet working fine and my code is not?

window.previousRow = null; $("table#rows tbody tr[id^=row-]").click(function(){ var clickedRow = $(this); if( !clickedRow.data("id") ){ clickedRow.data("id", clickedRow.attr("id").match(/^row-(\d+)$/i)[1]); clickedRow.data("relatedData", $("div#relatedData-" + clickedRow.data("id"))); } if( window.previousRow==null || window.previousRow.attr("id")!="row-" + clickedRow.data("id") ){ clickedRow.addClass("res"); if( window.previousRow != null){ window.previousRow.removeClass("res"); window.previousRow.data("relatedData").fadeOut("normal", function(){ clickedRow.data("relatedData").fadeIn("normal"); }); }else{ clickedRow.data("relatedData").fadeIn("normal"); } window.previousRow = clickedRow; // ????? document.location.replace("#" + clickedRow.attr("id")); } });

There aren't any other document.location statements in the rest of the page scripts.

resize() for any element
[1Reply]
- 15-Jan-2009 04:03 AM
- Forum: Using jQuery
I've been trying the resize() method but, as docs suggest ("The resize event fires when a document view is resized") you can only attach it to the $(window) object.

I have a <div> element. I use scripting to replace part of its contents. When its width changes I need to call my custom repositionBox() function. Currently, I've placed a call to repositionBox() after all the parts of the code that may result in width change. I wonder if there's a trick to simplify this mess; something similar to:

$("div#foo").resize(repositionBox) // This does nothing

Prevent bubbling
[3Replies]
- 07-Jan-2009 08:01 PM
- Forum: Using jQuery
I have code that looks like this:

$("table tbody tr").click(function(){ // Do some stuff }); $("table tbody tr a.remove").click(function(){ return confirm("Do you want to remove this row?"); });

The problem is that when I click on a link both events get triggered: the table row onclick and the link onclick. I only need the first one when I click outside a link.

I've read the docs but I couldn't find a method to cancel bubbling from the second handler. What's the jQuery way to accomplish this?

Slide effects do not work in IE
[2Replies]
- 30-Dec-2008 02:56 AM
- Forum: Using jQuery
I have several <table> elements and I want to slideDown() and slideUp() on them so only one is visible at a time. It works as expected in all browsers except IE 6 and 7: tables show and hide properly but there isn't any animation.

A simple test case I wrote suggests that's related to tables not having assigned height:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script> <script type="text/javascript"></script> </head> <body> <p><input type="button" class="button" onclick="toggleTables()" value="Toggle Tables"></p> <table border> <tr> <td>I'm a table</td> </tr> </table> <table border> <tr> <td>I'm a table too</td> </tr> </table> <table border height="150"> <tr> <td>I'm a table with height attribute</td> </tr> </table> </body> </html>

Am I correct?

Anyway, I've tried to add such attribute with JS but nothing I try seems to work:

$(function(){ $("table").each(function(){ var h = $(this).height(); $(this).attr("height", h); $(this).css("height", h + "px"); $(this).height(h); }); });

Can you give me some advice?

IE loads the same file a hundred times per page
[2Replies]
- 17-Dec-2008 12:27 AM
- Forum: Using jQuery
I've written this code to assign a specific class to certain links:

$(function(){ $("a[href=javascript:;]").addClass("no-existe"); });

The CSS looks like this:
a.no-existe{ cursor: url(../img/no-existe.cur), default; }

I was happy with it until I looked at the web server's logs: IE is requesting the no-existe.cur file to the server for every matched link in the page!

127.0.0.3 - - [17/Dec/2008:14:17:35 +0100] "GET /img/no-existe.cur HTTP/1.1" 200 4286 "http://example.com/foo.php" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)" 127.0.0.3 - - [17/Dec/2008:14:17:35 +0100] "GET /img/no-existe.cur HTTP/1.1" 200 4286 "http://example.com/foo.php" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)" 127.0.0.3 - - [17/Dec/2008:14:17:35 +0100] "GET /img/no-existe.cur HTTP/1.1" 200 4286 "http://example.com/foo.php" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)" 127.0.0.3 - - [17/Dec/2008:14:17:35 +0100] "GET /img/no-existe.cur HTTP/1.1" 200 4286 "http://example.com/foo.php" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)" 127.0.0.3 - - [17/Dec/2008:14:17:35 +0100] "GET /img/no-existe.cur HTTP/1.1" 200 4286 "http://example.com/foo.php" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)" ...........

It doesn't do such nonsense if I remove the JavaScript and assign the class manually.

Is there a workaround?

jQuery basics
[3Replies]
- 25-Nov-2008 09:52 PM
- Forum: Using jQuery
I'm a first time jQuery user and I'd like to confirm that I understood correctly some of the basics. My assumptions:

* With the default settings and no other libraries around, jQuery() and $() are synonyms. I can freely swap them in code examples.

* The ready() event can't be assigned to anything else than jQuery(document). I cannot do something like jQuery("ul#menu").ready() to enable my drop-down menu as soon as it's loaded.

* jQuery(document).ready(myFunc) and jQuery(myFunc) are synonyms.

Is this okay?

One more question: it seems that wrong code will not trigger any error message in Firebug. What's the recommended way of debugging?

Thank you in advance,

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend