[jQuery] Re: Port Prototype Code to jQuery?

2009-09-01 Thread Josh Powell

can you send the html too?


[jQuery] Re: event-binding to dynamically created elements... (JSP vs JS problem......)

2009-08-30 Thread Josh Powell

sorry .up() is prototype... should be .parent() instead.

On Aug 30, 1:20 pm, Josh Powell  wrote:
> kali - here is a way to accomplish the same thing in less code, and
> lets you call the images anything you want instead of having to use
> numbers.  This is untested so there may be some slight errors, but the
> logic should be sound:
>
> $(function() {
>         var imageArray = ['foo', 'bar', 'baz'];
>
>         $(imageArray).each(function (item, i) {
>             $('#wrapper').append(' '"> alt="thumbnail' + i + '" width="80" height="80"/>');
>         });
>
>         $('img.thumbsBorder').hover(function () {
>             $(this).toggleClass('dim').up().toggleClass('roll');
>         });
>
> });


[jQuery] Re: event-binding to dynamically created elements... (JSP vs JS problem......)

2009-08-30 Thread Josh Powell

kali - here is a way to accomplish the same thing in less code, and
lets you call the images anything you want instead of having to use
numbers.  This is untested so there may be some slight errors, but the
logic should be sound:

$(function() {
var imageArray = ['foo', 'bar', 'baz'];

$(imageArray).each(function (item, i) {
$('#wrapper').append('');
});

$('img.thumbsBorder').hover(function () {
$(this).toggleClass('dim').up().toggleClass('roll');
});
});


[jQuery] Re: event-binding to dynamically created elements... (JSP vs JS problem......)

2009-08-30 Thread Josh Powell

Even simpler:

$('img.thumb').click(function () {
$(this).toggleClass('dim');
});


[jQuery] Re: event-binding to dynamically created elements... (JSP vs JS problem......)

2009-08-30 Thread Josh Powell

  for (i = 1; i < 5; i++) {
$('#thumb' + i).bind('mouseover',function(event) {
   $(this).addClass('dim');
});
  }

The 'i' you've called here is a global variable, in a for loop always
put a var in front of it to have local scope (to the function, not
block)

  for (var i = 1; i < 5; i++) {
$('#thumb' + i).bind('mouseover',function(event) {
   $(this).addClass('dim');
});
  }

but... more importantly, reframe your thoughts on javascript/jquery
programming to let the selectors do the iteration for you.

$('img[class="thumb"]).mouseover(function () {
 $(this).addClass('dim');
});


To your second question:

var elem<%=i%> = 'foo';

works because jsp is compiled server side and outputs the value of i
onto the page, so that if i is 1, then what the browser sees is

var elem1 = 'foo';

which is valid javascript.  But javascript is all done client side so

var elem + i = 'foo';

is not valid.  There are several ways to do what you want, none of
them good.  Use implicit iteration from the jquery selectors instead.
Stop using id's when you have an unknown or changing number of items
you are iterating through to do things.  IDs should only be used for
unique items.  When you have a list of similiar items doing the same
thing, give them all the same class or custom attribute and let jQuery
do the iterating for you.

Josh Powell


On Aug 30, 12:37 am, "Michael Geary"  wrote:
> Something I forgot to mention in my previous reply... To make sure it's
> clear what code is actually being run in the browser, never rely on looking
> at your JSP source to understand it. That's what threw you off here. The
> browser never sees your JSP source, only the HTML/JS/CSS/whatever files that
> your JSP generates.
>
> Do you have Fiddler? If not, go get it right now and get familiar with it:
>
> http://www.fiddler2.com/
>
> It looks like you're using Windows 2000; Fiddler is supposed to run OK there
> if you have the .NET Framework 2.0.
>
> Fiddler's inspectors are great for examining all of the actual data
> downloaded to your browser. You can of course use other tools such as the
> Web Developer Toolbar and even a View Source for the .html file. But Fiddler
> is terrific.
>
> The main thing is that when you're debugging anything in the browser, you
> have to forget about the JSP source and think only in terms of what the
> browser actually receives.
>
> -Mike
>
> > From: kali
>
> > this works in JSP:
>
> > <%  for (int i = 1; i < 5; i++) { %>
> >   $('#image<%=i%>').bind('mouseover',function(event) {
> >         $('#image<%=i%>').addClass('dim');
> >     });
> > <% } %>
>
> > but the same thing, in JavaScript, doesn't work:
>
> > for (i = 1; i < 5; i++) {
> >   $('#thumb' + i).bind('mouseover',function(event) {
> >      $('#thumb' + i).addClass('dim');
> >   });
> > }


[jQuery] Re: empty() is very slow

2009-08-28 Thread Josh Powell

Change the onclick event handler into a jQuery .live() event and
you'll be fine for sure.

On Aug 26, 1:57 pm, oleOhle  wrote:
> OK, thanks everybody! I think I understand.
>
> Actually my second attempt could easily be rewritten to match exactly
> what jQuery does. It really boils down to the remove() function, which
> does some magic to remove data and events related to the contained DOM
> elements. Since I only have one HTML onClick event handler defined on
> one of the elements and do not use the jQuery event system, I hope
> that I'm fine with using the suggestion of setting the innerHTML to ''.


[jQuery] Re: empty() is very slow

2009-08-26 Thread Josh Powell

.empty and .html looks in every node that it removes/replaces and
checks for and removes event bindings in order to prevent memory
leaks.  If you know you do not have bound events, first use plain old
javascript to set element.innerHTML = ''; and then remove/replace the
element using .empty()/.html()  Though in the case of .empty it could
be redundant.

On Aug 26, 12:01 pm, James  wrote:
> I've found something that worked a faster to empty something when I
> tested it.
>
> function replaceHtml(el, html) {
>         var oldEl = typeof el === "string" ? document.getElementById(el) :
> el;
>         if (oldEl == null) return null;
>         var newEl = oldEl.cloneNode(false);
>         newEl.innerHTML = html;
>         oldEl.parentNode.replaceChild(newEl, oldEl);
>         return newEl;
>
> };
>
> replaceHtml(Container_Id, '');
>
> On Aug 26, 8:54 am, MorningZ  wrote:
>
> > "What is jQuery doing to empty an element?"
>
> > That's so easy to see/find-out for yourself
>
> > open up the jquery.js file, search for "emtpy" and voila
>
> >  empty: function() {
> >             // Remove element nodes and prevent memory leaks
> >             jQuery(this).children().remove();
>
> >             // Remove any remaining nodes
> >             while (this.firstChild)
> >                 this.removeChild(this.firstChild);
> >         }
>
> > "2. Are there any rules when not to use jQuery for certain DOM tasks
> > but better to resort to direct DOM manipulation as in the example
> > above? "
>
> > One option that I've seen recommended a lot is to set the ".innerHTML"
> > of the DOM object to empty string.  i remember that it's fast, but
> > I can't remember if there were downsides to using that instead
>
> > On Aug 26, 2:32 pm, oleOhle  wrote:
>
> > > While writing my first jQuery application I encountered a performance
> > > issue whichs casts doubts on the suitability of jQuery for my purposes
> > > in general.
>
> > > The "issue": In my page I have a dynamically filled  which in the
> > > end contains about 10 elements, one of which is a table with 1000
> > > rows. Now when I try to clear that  with a simple function like
>
> > > function clearContainer() {
> > >     $('#' + Container_ID).empty();
>
> > > }
>
> > > this will take forever, i.e. one faster machine  a few seconds, on my
> > > netbook it even leads to javascript timeout errors.
>
> > > Rewriting the function to
>
> > > function clearContainer() {
> > >     var containerNode = document.getElementById(Container_ID);
> > >     while(containerNode.hasChildNodes()) {
> > >         containerNode.removeChild(containerNode.lastChild);
> > >     }
>
> > > }
>
> > > fixes the perfomance issue, the  is cleared almost immediately.
>
> > > Two questions remain:
> > > 1. How can the results be explained? What is jQuery doing to empty an
> > > element?
> > > 2. Are there any rules when not to use jQuery for certain DOM tasks
> > > but better to resort to direct DOM manipulation as in the example
> > > above?


[jQuery] Re: Live() event doesnot refresh the class of the event which was changed dynamically.

2009-07-05 Thread Josh Powell

Also, be very, very careful with using mouseover, mouseout, or
mousemove with live events.  The way live events work is to put an
event handler on the document and catch events as they bubble up and
check them against the selector.  So, when using mouseover live
events, you are executing a comparison against the selector every time
the mouse moves over an element on the page.  This can cause some
dramatic slowdowns, especially if you are using multiple live events
of these types.  It's often better to use regular events for
mouseover, mouseout, and mousemove.

Josh Powell

On Jul 5, 9:21 am, Nic Hubbard  wrote:
> Pretty sure that you have to create a new .live() event for your
> expected class.  So, you would need to do:
>
>  $(".newClass").live("mouseover", function(){
>     //clickable function here..
>     
>     });
>
> On Jul 5, 12:30 am, Sanam  wrote:
>
> > Hello,
> >      I got this problem with live() event.I have used it as  follows.
>
> >     $(".addressDiv span").live("mouseover", function(){
> >     //clickable function here..
> >     
> >     });
>
> > I have used the live() event to trigger the function on mouseover in
> > the dynamically added elements. But the problem i got is that once the
> > live event is called it takes the class of the element and stores. And
> > when the class of that particular element is changed dynamically the
> > live() event does not detect the new classed added dynamically,
> > instead it takes the former class. Live() event does not update the
> > class.  How can I solve this problem?
>
> > Sanam


[jQuery] Re: Array to JSON?

2009-06-22 Thread Josh Powell

That's okay, javascript doesn't have associative arrays, only arrays
with object properties.

On Jun 22, 2:45 pm, Ricardo  wrote:
> before someone complains: that function won't handle arrays (only
> objects)
>
> On Jun 22, 6:39 pm, Ricardo  wrote:
>
> > Usually you'll send out parameters in query strings, only receive data
> > in JSON, which is what jQuery is equipped to do. If you don't want the
> > weight of a plugin you could use something like this:
>
> > function toJSON(obj){
> >  var json = '({';
> > $.each(obj, function(k,v){
> >   var q = typeof v == 'string' ? ~v.indexOf("'") ? '"' : "'" : '';
> >   if (typeof v == 'object')
> >      v = toJSON(v).slice(0,-1).substr(1);
> >   json+= k + ':'+ q + v + q + ',';});
>
> >  return json.slice(0,-1)+'})';
>
> > };
>
> > On Jun 21, 11:23 pm, Nic Hubbard  wrote:
>
> > > I have been trying to figure out how I could go from an associative
> > > array to JSON.  Is there a function for this?


[jQuery] Re: Using Zend IDE with jquery

2009-06-12 Thread Josh Powell

zend with eclipse has some plugins.  I don't use them though, so I'm
not sure where to get them.

On Jun 12, 2:13 pm, Arun  wrote:
> Hi,
> Has anyone ever tried using the zend ide with jquery? Any comments on
> this would be appreciated.
>
> Arun


[jQuery] Re: Any way to make an anonymous function die?

2009-06-03 Thread Josh Powell

I think you are looking to namespace the event.

$(selector).live('click.ns');
$(selector).die('click.ns');

The die() will only remove the click that occurs with that namespace
and leave other click events alone.

On Jun 2, 12:07 pm, Laker Netman  wrote:
> On Jun 2, 1:59 pm, Laker Netman  wrote:
>
>
>
> > On Jun 2, 1:08 pm, Ricardo  wrote:
>
> > > Or add another class name:
>
> > > 
> > >    
> > > 
>
> > > 
> > >    
> > > 
>
> > > $('.myselects:not(.clicked)').live('click', function(){
> > >      $(this).addClass('clicked');
>
> > > });
>
> > > On Jun 2, 1:00 pm, Isaac Gonzalez  wrote:
>
> > > > I'm not sure if this is the best solution but you can always change  
> > > > the class name of the li after it's been click. Then add a conditional  
> > > > statement in your anonymous function filter list with the revised  
> > > > class name.
>
> > > > On Jun 2, 2009, at 8:55 AM, Laker Netman wrote:
>
> > > > > I am using .live() in jQuery 1.3.2 to assign a dynamic click event to
> > > > > multiple Select lists. When one of the lists is clicked on I would
> > > > > like to have that particular list to no longer be "clickable".
>
> > > > > Here's the issue. I currently assign the click function in .live()
> > > > > with an anonymous function, so the only thing I have been able to do
> > > > > so far is $(this).die('click') when a Select is clicked on. This, of
> > > > > course, kills the event for ALL my Selects.
>
> > > > > Does anyone know of a way to do this without creating a separate,
> > > > > named function for the die() function to use later?
>
> > > > > Thanks,
> > > > > Laker
>
> > Thanks for the suggestions Isaac.
>
> > Your second post got me thinking. Here's what I came up with for the
> > final solution:
> >         $(".selectList:not(.clicked)").live("mousedown",function(){
> >                 $(this).addClass('clicked');
> > ... additional processing occurs here 
> >         });
>
> > This is executed within $document.ready()
> > All of the Selects have the class "selectList" from the start and,
> > based on your suggestion, the "clicked" class is added when a
> > particular list is clicked on. The initial selector does the rest,
> > eliminating already clicked selects from future consideration. Very
> > nice!
>
> > Laker
>
> And Ricardo, too! Sorry didn't catch the second author! 8)


[jQuery] Re: performance of html(val)

2009-05-27 Thread Josh Powell

It's generally a good idea to post example code so we can see what you
are doing.  That said, this article I wrote will probably help you:

http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly

Josh Powell

On May 26, 8:29 pm, jonathan  wrote:
> I am constructing a large table on the fly and add it to the dom using
> html(val).  It takes about 6 seconds.  I am wondering if there's any
> practice that would speed up this process?
> thanks!


[jQuery] Re: What happen with jQuery? Is it slow?

2009-05-23 Thread Josh Powell

Yes, I partially agree.  I've been in conversation with the developer
about it.  Testing it this way tests the absolute speed of a method,
but does not take into account the patterns that this method allows.
Appending a node to the DOM 40 times is not the same as appending a
string to the DOM 40 times because there is no way to skip appending
the 40 nodes but the 40 strings can be appended at the same time.  So,
the absolute speed of the jQuery method can be drastically slower, but
because it enables the pattern of appending all the strings before DOM
insertion, ends up being the faster pattern.

Also, what is slower in the jQuery method is unknown... is it that $
('') is slower then document.createElement('ul') or that $
('body').append('string') is slower then document.appendChild(node);
both?  which method is being benchmarked?  If you are trying to test
the method, then the method should be pulled out and tested
individually, if you are trying to test the pattern then you should
test the most efficient patterns for each method.

On May 22, 10:35 pm, RobG  wrote:
> On May 23, 6:48 am, Josh Powell  wrote:
> [...]
>
> > Also, many of the jQuery examples are poorly constructed,
>
> Depending on your point of view.
>
>
>
> > take the
> > 'table' instance:
>
> > for (var i = 0; i < 40; i++) {
> >         $("").appendTo("body").html
> > ("first").find("tr").prepend("before");}
>
> > return $("tr td").length;
>
> > This should be:
> > var theTables = '';
> > for (var i = 0; i < 40; i++) {
> >     theTables += 'before > td>first';}
>
> > $(body).append(theTables);
> > return $('tr td').length;
>
> > and there are even quicker methods using array.join can speed it up
> > for example
>
> The point of the tests is to test the speed *of the library*, not to
> write optimised code for a particular task.  Adding 40 tables one at a
> time does that, adding them all in one go doesn't, it's effectively
> the same as adding one table.
>
> --
> Rob


[jQuery] Re: What happen with jQuery? Is it slow?

2009-05-22 Thread Josh Powell

One of the areas of the comparison where jQuery fares the worst is
"destroy."  jQuery checks every element it is removing to see if there
are events bound to it and removes those events because they can cause
memory leaks.  None of the other libraries do this.  I do wish that
jQuery provided a method to not check, and just do a quick remove.
This has tripped me up before and I had to use POJS (Plain Old Java
Script) to change the innerHTML to an empty string before doing
the .remove() when I knew there were no events on the elements.  In
fact, I think all of the calls to .html() are slowed down because of
this event check.

Also, many of the jQuery examples are poorly constructed, take the
'table' instance:

for (var i = 0; i < 40; i++) {
$("").appendTo("body").html
("first").find("tr").prepend("before");
}
return $("tr td").length;

This should be:
var theTables = '';
for (var i = 0; i < 40; i++) {
theTables += 'beforefirst';
}
$(body).append(theTables);
return $('tr td').length;

and there are even quicker methods using array.join can speed it up
for example

the 'make' instance:
   for (var i = 0; i < 250; i++) {
$("").append
("onetwothree").appendTo("body");
}
return $("ul.fromcode").length;

This is ridiculous code.  It should be:

var theUls = '';
   for (var i = 0; i < 250; i++) {
   theUls = 'onetwothree'");
}
$(body).append(theUls);
return $("ul.fromcode").length;

The 'append' instance:
for (var i = 0; i < 500; i++) {
$("body").append("test");
}
return $("[rel^='foo']").length;

again with the appending in a for loop.  Slow... slow... slow.  Should
be:

var divs = '';
for (var i = 0; i < 500; i++) {
divs += 'test';
}
$('body').append(divs);
return $('[rel^="foo"]').length

the 'bindattr' instance, I believe, is an artifiact of jQuery updating
how selectors work.  jQuery alone of the libraries changed it's
approach to selector and so this particular selector is slow in
jQuery, whereas other selectors would be slower in other libraries.
Shows you need to optimize your selectors for usage.

With these changes alone, you'll probably bring jQuery's time down to
1900 - 2000.  Less if jQuery didn't check for events bound to elements
before removing them.  This is a weakness for speed, and strength for
ease of use.

On May 22, 8:19 am, Ricardo  wrote:
> jQuery has a lot of overhead because of it's event handling, cross-
> browser normalization, etc, it's a good trade-off for most websites.
> And you can easily reduce those numbers a lot doing simple
> optimizations.
>
> On May 21, 11:25 pm, donb  wrote:
>
> > It has apparently sped up 50% with the latest release.
>
> > The time it takes to perform any of those test cases is not important
> > to me.  What is important is the application's perceived speed.  I
> > find jQuery to perform quite satisfactorily in that context.  In fact,
> > the real world involves great expanses of idleness sporadically
> > interrupted by meaningful work.  A few milliseconds here and there
> > don't really matter 99% of the time.
>
> > Besides, jQuery's greatest strength is the clean and elegant coding
> > model.  I don't think anyone will say speed was the objective of
> > jQuery - other than speed of learning/designing/coding with the
> > framework.
>
> > On May 21, 9:57 pm, Alexsandro_xpt  wrote:
>
> > > Make this testhttp://dante.dojotoolkit.org/taskspeed/


[jQuery] Re: jQuery, MooTools, and Prototype - A Comparison

2009-05-21 Thread Josh Powell

What do you want to use the library for?

Selecting DOM Elements
DOM Manipulation
Simplifying Events
Simplifying Ajax
Mimicking classical inheritance
Extending native objects with 'missing' capabilities
Cool Widgets

>From what I can tell, these are the main areas of focus of all the
major javascript libraries.  jQuery excels at Selecting DOM elements,
DOM manipulation, Simplifying events, and simplifying ajax.  It has
decent classical inheritance support via plugins.  It has a few
javascript object/array enhancement capabilities but does not add them
to the native objects.  jQuery UI has many cool widgets.

If you really want missing javascript object/array methods then
Prototype is a good option, but jQuery is as good or better at
everything else.  Prototype also has Class support in its core and
some neat effects in Scriptaculous.

If you want a full blown classical inheritance coding strategy,
mootools excels at this.  It also provides a ton of missing object/
array methods, but it more wordy then jQuery and doesn't provide the
shortcuts that jQuery does by default.  Mootools prides itself on its
extendability and can be extended to provide these shortcuts if you
want.

I've taken part in all of the communities surrounding these three
libraries, and jQuery has by far the most friendly and helpful
community.  Check out the number of members on this list vs. the
Prototype/Scriptaculous list.  Prototype developers are a silent lot,
popping up now and again to say something, but for the most part are
quiet.  John Resig, the creator of jQuery, is usually quite active on
the boards but I suspect has gone into a bit of seclusion lately to
finish up his next book.  Mootools community is the least helpful, and
is sometimes outright hostile.  The mootools library developers are
all very quiet and don't come out into the spotlight often, but Aaron
Newton has taken up being the public face of mootools.  He recently
wrote an article on jQuery vs Mootools with a somewhat mootoolish
bias, but its a great article:

http://jqueryvsmootools.com/




On May 21, 12:39 pm, kiusau  wrote:
> On May 21, 12:23 pm, David Meiser  wrote:
>
> > If you can't bear that thought, just *choose* one.  None of my friends were
> > using jQuery when I started using it (now I've converted all of them), but I
> > read an article saying that it was going to be included in ASP.NET MVC and
> > VS 2010.  So, I gave it a shot, liked it, so I continue using it.
>
> I am not sure that it makes a difference, but I am a dedicated Mac
> user.
>
> One other important issue that I forgot to mention is that for the
> moment I have no server-side capability, but will eventually move away
> from my client-side only constraint.
>
> Roddy


[jQuery] Re: Best book to learn jQuery?

2009-05-19 Thread Josh Powell

The Definitive Guide is a great reference book, and a terrible book to
learn javascript from.

Javascript: The Good Parts is a must read to understand the
prototypical nature of javascript, learn about jslint, and understand
== vs ===

I can't speak to Learning Javascript

On May 19, 6:15 pm, d3a1i0  wrote:
> What is a good book for learning JavaScript then? I have heard:
>
> JavaScript: The Definitive Guide
> by David Flanagan
>
> JavaScript: The Good Parts
> by Douglas Crockford
>
> Learning JavaScript
> by Shelley Powers
>
> I just want a basic understanding, for now, to help with the more
> advanced jQuery stuff like mentioned above.
>
> On May 19, 6:51 am, Ethan Mateja  wrote:
>
> > Kudos to the suggestions. I purchased both yesterday as a result. :D
>
> > On Mon, May 18, 2009 at 11:15 PM, Karl Swedberg 
> > wrote:
>
> > > On May 18, 2009, at 9:58 AM, Brandon Aaron wrote:
>
> > > On Mon, May 18, 2009 at 8:35 AM, Karl Swedberg 
> > > wrote:
>
> > > I've heard Learning jQuery 1.3 is a great read, too. ;-)
>
> > > HAHAHA... I think you forgot your disclaimer. :p  Karl is a co-author
> > > of Learning jQuery.
>
> > > Nonetheless, Learning jQuery 1.3 would be a great choice. :)
>
> > > --
> > > Brandon Aaron
>
> > > Busted! I figured he'd make the connection, but it's probably a good idea
> > > to add a disclaimer anyway. :)
>
> > > Alex, for what it's worth, I've read through jQuery in Action, and I think
> > > it's a terrific book, too.
>
> > > --Karl
>
> > > 
> > > Karl Swedberg
> > >www.englishrules.com
> > >www.learningjquery.com
>
> > --
> > Respectfully,
>
> > Ethan Mateja
>
> > +++
> > Packetforwardwww.packetforward.com


[jQuery] Re: question about getJSON, objects and/or scope - confused

2009-05-19 Thread Josh Powell
Well, one thing that will cause IE to error is the extra comma in the
object declaration:

var obj = {
  'foo': 'bar',
  'baz': 'boo',  <--- this comma creates an error in IE
}

The other problem is that you are doing the json call when the
document is finished loading, at that point the document.write() will
already have executed and thisStory.title won't exist yet.

Josh Powell

On May 19, 2:22 pm, illovich  wrote:
> Hi, I'm working on a page where graphics/content get loaded via server
> side stuff and decided to try to use JSON to send the data.
>
> But I'm having trouble with converting the JSON to a javascript object
> when I use an external file.
>
> This works:http://dev.illovich.com/storigraphi5.html
> ==
>
> script type="text/javascript">        // this tests the JSON object
>
>      var thisStory = {
>
>              "imgURL": "storigraphs/test1.jpg",
>                          "title" : "I (verbed) you",
>                          "author" : "The Author",
>              "imgHeight": 604,
>                          "imgHeight": 453,
>                          "frameTotal" : 4,
>              "frames": {
>                                 'frame1' : '-0px -0px',
>                                 'frame2'  : '-225px -0px',
>                                 'frame3'  : '-0px -302px',
>                                 'frame4'  : '-225px -302px'
>                 },
>                          "texts": {
>                                 'frame1' : 'I saw you',
>                                 'frame2' : 'I wanted you',
>                                 'frame3' : 'I craved you',
>                                 'frame4' : 'I knew you'
>                 },
>
>      }
> 
>
>          
>
>          $(document).ready(function(){
>
>                         $('.frame').click(function(){
>
>                                 var frameNum   =  $(this).attr("name");
>                                 var frameBgPos = thisStory.frames[frameNum];
>                             var frameTxt   = thisStory.texts[frameNum];
>
>                                  $('#story').animate({ opacity: 'hide'}, 
> 'fast').queue(function()
> {
>                                                                               
>                                                                               
>             $(this).css('background-position' , frameBgPos)
>                                                                               
>                                                                               
>             $(this).dequeue();
>                                                                               
>                                                                               
>     }).animate({ opacity: 'show'}, 'fast');
>                              $('#word1').animate({ opacity: 'hide'}, 
> 'fast').queue(function
> (){
>                                                                               
>                                                                               
>             $(this).text(frameTxt);
>                                                                               
>                                                                               
>             $(this).dequeue();
>                                                                               
>                                                                               
>     }).animate({ opacity: 'show'}, 'fast');
>                         });
>
>         });
>
>      
>
> ===
>
> But the below code doesn't - it definitely loads the external JSON
> file (javascript/test.js for now - it will be server generated later)
> because the alert function call in the thisStory = $.getJSON(blah
> blah) section works, but the var thisStory is either not getting
> filled with the data that is being loaded by the getJSON method (my
> suspicion) or the $('.frame').click(function(thisStory) function
> doesn't have access to the contents of the var thisStory because of
> scope.
>
> http://dev.illovich.com/storigraphi6.html
> ==JSON file=
> {
>              "imgURL": "storigraphs/test1.jpg",
>           

[jQuery] Re: Best book to learn jQuery?

2009-05-18 Thread Josh Powell

You can learn javascript as you learn jQuery. In fact, I would say it
is much, much easier to learn jQuery then do a deep dive into learning
javascript.  And learning javascript extremely well isn't actually a
requirement for getting started in web application development any
longer because of libraries like jQuery.  It makes things easier if
you know javascript, helps with debugging, and if you have a more
complicated app it becomes necessary.  But if just starting out,
learning jQuery first is a valid starting point, then in order to
learn more start diving into how jQuery abstracts browser issues away
and how it works to do things like selectors/inserting/events/ajax.

for example,

$('td .class').hide();

is much easier to learn then:

var allElements = document.getElementByTagName('*');
var arr = [];

for (var a = 0; a < allElements.length; a++) {
  if (allElements[a].className === 'class') {
allElements[a].setAttribute('display', 'none');
  }
}

Not to mention any cross browser issues that are created in rolling
your own way to do this.

Learning jQuery 1.3 is an excellent book for getting started in
jQuery, especially since it is up to date with the latest version of
jQuery.  But, I might be biased since I've written a couple of
articles for Karls site :)

Eventually, you'l want to get Douglas Crockfords excellent book,
Javascript: The Good Parts as well.  It isn't really a javascript
primer but there is lots of good stuff in there.
You can also start readign at: http://javascript.crockford.com/

Josh Powell



On May 18, 12:37 pm, alex  wrote:
> Ah. I'm sure this sounds dunce-y because 'jQuery does it for me', but
> is a solid grounding in Javascript necessary to a solid grounding in
> jQuery (or at least, being able to use jQuery), or just good
> practice?
>
> I would guess, as a complete novice, that just using what is already
> available may not require pure JS knowledge, but more advanced things
> like building plugins would? I assume then that 'Learning jQuery'
> would not be the first port of call for me?
>
> On May 18, 2:55 pm, mdk  wrote:
>
> > Yes, but because he has no JS he will like have a tough time.  I would
> > read a basic JS book first, then go for Learning jQuery 1.3.
>
> > Mike
>
> > On May 18, 8:35 am, Karl Swedberg  wrote:
>
> > > I've heard Learning jQuery 1.3 is a great read, too. ;-)
>
> > > --Karl
>
> > > 
> > > Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> > > On May 18, 2009, at 9:07 AM, MorningZ wrote:
>
> > > > I always recommend "jQuery in Action" it's a great read
>
> > > > On May 18, 3:19 am, alex  wrote:
> > > >> Just wondering what your opinions are on the best book out there, for
> > > >> a beginner, to learn jQuery? I know HTML and CSS well enough, but  
> > > >> have
> > > >> no javascript knowledge.
>
> > > >> Thanks


[jQuery] Re: I'll Donate $20USD to Jquery if you can teach me how to do this

2009-05-18 Thread Josh Powell

If you aren't forced to use XML, look at trying JSON instead.  It is a
MUCH friendlier format for passing information around.

On May 17, 11:09 pm, KrushRadio - Doc  wrote:
> Paypal Transaction ID: 8PY233604R986225R :D
>
> Thanks for your help.
>
> Actually, there were 2 parts that I didn't get.. one was the CSS
> selector syntax and how it needed to be formed inside of the initial
> grab..
>
> Thats the learning curve.  the way that 'day[name=Monday]show' didn't
> make any sense to me.  in xpath i'd have to use the /day
> [...@name='monday']/show  would have made more sense... The lack of
> quotes would have thrown me the most.  i probably would have chained
> the show at the end of it, in another each function.
>
> So, basically, the initial dataset definition can be in the first
> part, I don't have to chain the find(day and attribute).find(show,
> data).each(function(){ do stuff here}  which was the original track i
> was going down.
>
> Thanks so much again... this part has been haunting me.
>
> ~Doc
>
> On May 17, 8:20 pm, deltaf  wrote:
>
> > And now for the "teaching" part of the request...
>
> > KrushRadio, the crucial part that I believe you wanted to be taught
> > about is:
> >  $('day[name=Monday]>show', data)
>
> > If you're familiar with CSS selector syntax, that's a great head-
> > start.The full details can be found athttp://docs.jquery.com/Selectors
>
> > To break it down for you, the selector includes " elements that
> > are children of  elements with name attributes equal to
> > 'Monday'". All of the matched results are put into an array of
> > elements which are iterated with .each().
>
> > Hope we've helped earn jQuery that donation!
>
> >  - jb
>
> > On May 17, 8:43 pm, "comslash.com"  wrote:
>
> > > $(function(){
>
> > >                         $.ajax({
> > >                                 type: "GET",
> > >                                 url: "test.xml",
> > >                                 dataType: "xml",
> > >                                 success: function(data){
> > >                                  $('day[name=Monday]>show', 
> > > data).each(function(){
> > >                                                         time     = 
> > > $(this).find('time').text();
> > >                                                         dj               
> > > = $(this).find('dj').text();
> > >                                                         showname 
> > > =$(this).find('showname').text();
>
> > >                                                         
> > > $('body').append(time + '' + dj + '' + showname +
> > > '');
> > >                                          });
> > >                                 }
> > >                         });
>
> > >                 });- Hide quoted text -
>
> > - Show quoted text -


[jQuery] Re: The jQuery Object, Namespaces, and Program Modules -- Connecting the Dots Between jQuery and Javascript

2009-05-05 Thread Josh Powell

Try this:

http://www.learningjquery.com/category/levels/beginner?order=ascending



On May 5, 9:08 am, kiusau  wrote:
> On May 5, 8:24 am, Rey Bango  wrote:
>
> > Great advice Matt.
>
> But, no source!
>
> Roddy


[jQuery] Re: Jquery and Other Libraries Error

2009-04-26 Thread Josh Powell

are you using jQuery.noConflict();

http://docs.jquery.com/Core/jQuery.noConflict

If so, put the noConflict call immediately after including the jQuery
library is included.  If that doesn't work come back here with more
details about your issue and preferably a page where we can look at
your code.

Josh Powell



On Apr 26, 7:42 am, Sparky12  wrote:
> Problem is that I read 
> thehttp://docs.jquery.com/Using_jQuery_with_Other_Libraries
> - and i use "jQuery" now ? So not sure why its occurring?
>
> P.S - About code - i dont even use my own code. I just use this plugin
> and jquery - and it throws error ?


[jQuery] Re: Alternate $.load

2009-04-23 Thread Josh Powell

It would be much easier to generate a json response instead of html
and use .getJSON and then the DOM insertion functions to generate the
html you need on the page.

On Apr 23, 1:41 am, Colonel  wrote:
> This isn't entirely correct, and not quite what I had. For example I
> have a lots of divs in temp.php (after work with DB). And in the end
> of $.ajax I have msg. How I can manipulate with this and find divs and
> p and so on ?
>
> On 23 апр, 05:08, Shane Riley  wrote:
>
> > Typically you'd only echo the data back that you want instead of
> > having to weed through a string of HTML data to extract what you need.
> > From what it looks like, you're needing a specific element from
> > another page while still being able to access the other page
> > (temp.php) in its entirety. The easiest solution in this case would be
> > to send some data to temp.php letting it know that you're initializing
> > an asynchronous request, and then have the PHP return only what you're
> > looking for. A quick solution in this case would be something like
> > this:
>
> > $.ajax({url: 'temp.php',
> >             data: "ajax=true",
> >             cache: false,
> >             error:  function(msg) {alert("Error Saved: " + msg);},
> >             success: function(msg) {alert("Data Saved: " + msg);},
> >             complete: function() {$.unblockUI();}
> >            });
> > Then in temp.php, check for this flag, and if it's true, send the
> > header2 div only.
>
> >  > $header2 = 'Some text in header2 ...';
> > if ($_GET[ajax])
> > { ?>
> > 
> > 
> > 
> >  Test file
> >  
> > 
> > 
> >  Some text in div header
> >   >  $id = isset($_GET["ID"]) ? $_GET["ID"] : "";
> >  $number = isset($_GET["NUMBER"]) ? $_GET["LOT_NUMBER"] : "";
> >  echo "id =" . $id . "";
> >  echo "number = " . $number . "";
> > echo $header2;
> >  ?>
> > 
> > 
> > 
>
> > However ideally you'd use a separate PHP function or file altogether
> > to handle it.
>
> > On Apr 22, 8:21 pm, Colonel  wrote:
>
> > > I know it. But how I can get content from remote file by $.ajax?
> > > For example I have some file temp.php:
>
> > > 
> > > 
> > > 
> > >  Test file
> > >  
> > > 
> > > 
> > >  Some text in div header
> > >   > >  $id = isset($_GET["ID"]) ? $_GET["ID"] : "";
> > >  $number = isset($_GET["NUMBER"]) ? $_GET["LOT_NUMBER"] : "";
> > >  echo "id =" . $id . "";
> > >  echo "number = " . $number . "";
> > >  ?>
> > > Some text in header2 ...
> > > 
> > > 
>
> > > and Am using $.ajax:
>
> > > $.ajax({url: 'temp.php',
> > >             cache: false,
> > >             error:  function(msg) {alert("Error Saved: " + msg);},
> > >             success: function(msg) {alert("Data Saved: " + msg);},
> > >             complete: function() {$.unblockUI();}
> > >            });
>
> > > how I can get for example content only from div with id=header2 ?
>
> > > On 23 апр, 01:55, Shane Riley  wrote:
>
> > > > You can use a number of Ajax functions built in to JQuery depending on
> > > > your specific needs. Check them out athttp://docs.jquery.com/Ajax. If
> > > > all you're looking to do is insert one file into another, load is
> > > > normally the way to go, unless you're looking to place the loaded file
> > > > before, after, or in between elements rather than inside a placeholder
> > > > element.
>
> > > > On Apr 22, 5:50 pm, Colonel  wrote:
>
> > > > > Is there another way load HTML from a remote file and inject it into
> > > > > the DOM (instead of $.load)?


[jQuery] Re: jQuery Ajax Error in Firefox 3.0.8

2009-04-22 Thread Josh Powell

what does ajax.php return?

at what stage is the error, beforesend, error, success, complete?  Put
in a console.log and see if it is executed in each of the states.

Just a style suggest, but reverse your usage of quotes:
$('#searchresult').html('  ');

instead of

$('#searchresult').html("  ");


On Apr 22, 6:34 am, "Geo.."  wrote:
> Hi friends
> I tried to develop an ajax request using jQuery
> It works fine with IE and Even Chrome
> But I always getting same error in firefox "411 Length Required" On
> firebug
> error shows on jquery.js line no 19
>
> my code is given below
> $.ajax({
>                 type:'POST',
>                 url:'ajax.php',
>                 dataType:"html",
>                 cache:false,
>                 timeout:1,
>                 beforeSend:function(){
>                                 $('#searchresult').html(" valign='middle'
> style:'height:300px;position:fixed;'> />  ");
>
>                 },
>                 error:function(){
>                         $('#searchresult').text("Server Not Responding ,Try 
> again ").show
> ().fadeOut(2000);
>                 },
>                 success:function(data){
>                                 $('#searchresult').html(data);
>                 }
>
> });
>
> Is there any common error with jquery + firefox + ajax
>
> I tried versions of jquery 1.2.6 and 1.3.2
>
> expecting your help
>
> Geo ..


[jQuery] Re: Any benefit to using event.preventDefault() over "return false" to cancel out an href click?

2009-04-20 Thread Josh Powell

It sounds like John is saying that

e.preventDefault() will prevent the default event from occuring and
e.stopPropogation() will prevent the event from bubbling up and
return false will do both, so

If you only want to stop the default but allow propogation or vice
versa, then use the methods, otherwise use return false to do both.

On Apr 20, 1:01 pm, kgosser  wrote:
> Thanks, John.
>
> So is it advisable to use one form or another?
>
> I've used return false throughout my app, and I'm trying to decide if
> it's a best practice to change it to preventDefault() if it's wiser to
> do so.
>
> On Apr 20, 2:26 pm, John Resig  wrote:
>
> > return false does e.preventDefault() and e.stopPropagation().
>
> > --John
>
> > On Mon, Apr 20, 2009 at 3:20 PM, kgosser  wrote:
>
> > > Just curious if there is a best practice when choosing between
>
> > > $("a").click(function(){
> > >   // stuff
> > >   return false;
> > > });
>
> > > and
>
> > > $("a").click(function(){
> > >   // stuff
> > >   event.preventDefault();
> > > });
>
> > > to cancel out the href of an anchor when clicked.
>
> > > Thanks in advance for the help.


[jQuery] Re: jquery-1.2.6.min.js and mootools.v1.1.js not compatable

2009-04-20 Thread Josh Powell

http://docs.jquery.com/Core/jQuery.noConflict


On Apr 20, 12:54 pm, amanj  wrote:
> Hi All,
> i have a problem with web page, i have 2 js files for tow topic
> jquery-1.2.6.min.js
> mootools.v1.1.js
> those file are not compatable togeher, please if have any thing or any
> problem could you advice me how can i use it?
>
> Thanks


[jQuery] Re: Questions about $.live, Live Query and performance

2009-04-19 Thread Josh Powell

Geoff - Selectors do make some difference, they always do, but the way
I've heard that .live() works is to add an event handler on the
document root and when events bubble up to it, doing some javascript
mojo to detect what element that event happened on and seeing if it
matches the selector.  .live('click') events do not have a major
impact on performance and can even speed things up as you do not need
to bind a click event on every dynamically created link.  .live
('mouseover') and the like, however, would get executed far more often
and can easily degrade performance, so be careful with these.

On Apr 19, 9:16 am, Geoffrey  wrote:
> $.live and Live Query are both wonderful. I am hoping to put them to
> extensive use in my projects.
>
> I have a few questions about $.live and Live Query and their effect on
> performance.
>
> Background: If I recall correctly, the original release of Live Query
> could have some performance problems. I don't remember if things
> bogged down when the DOM had a lot of elements, when you added a large
> number of Live Query events, did a lot of updating or exactly what.
>
> Question 1:
> What were the specific concerns around performance with the 1.0.x
> releases of Live Query?
>
> Now with jquey 1.3, there is $.live. $.live does not do everything
> that Live Query does, but does do some of it.
>
> Question 2:
> Does $.live use a different technique for handling events than Live
> Query?
>
> Question 2a:
> If it is different, are there any performance concerns using $.live
> like there used to be with Live Query?
>
> Live Query 1.1.x requires jquery 1.3. I am guessing that the new
> version uses $.live internally.
>
> Question 3a:
> Is the performance of Live Query better in the 1.1.x version?
>
> Question 3b:
> Are there some selectors that have better performance than others? or
> to say it another way, do all of the selectors perform the same or,
> for example, does
> $('input').livequery('click', function() { });
> perform better than
> $('input').livequery('change', function() { });?
>
> Using $.live or Live Query.
> Question 4:
> Is there any difference in performce between using
> $('input').livequery('click', function() { });
> vs
> $("input").live("click", function(){ });?
>
> I am thinking of really diving in to using $.live and/or Live Query. I
> am trying to get a complete understanding of all of the issues that
> may arise.
>
> Thanks
> -Geoff


[jQuery] Re: Append before closing tag

2009-04-19 Thread Josh Powell

Below is the call and where the code passed into the call would place
the content.

$('#aP').before();

$('#aP').prepend();
lorem ipsim dolor sit amet...
$('#aP').append();

$('#aP').after();

On Apr 18, 11:49 pm, MauiMan2  wrote:
> Does jQuery provide a way to append an element immediately before the
> closing tag of another element? For instance, say I have the following
> paragraph element:
>
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
> adipiscing gravida leo. In hac habitasse platea dictumst. Phasellus
> auctor odio id ligula. Morbi in risus et nulla vehicula blandit.
> Quisque varius, enim eget interdum cursus, risus est auctor nisi, vel
> laoreet magna orci ac neque.
>
> But that I would like to add a link in right before the end to obtain
> this:
>
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
> adipiscing gravida leo. In hac habitasse platea dictumst. Phasellus
> auctor odio id ligula. Morbi in risus et nulla vehicula blandit.
> Quisque varius, enim eget interdum cursus, risus est auctor nisi, vel
> laoreet magna orci ac neque.http://www.hotbot.com";>Remember
> Me?
>
> Is there a way to do that? If not, is it possible to make a plugin for
> that?


[jQuery] Re: Creating custom attributes in html

2009-04-16 Thread Josh Powell

@all - thanks for all the comments.  Love the heated discussion.

@RobG - can you code up some example code as to how you would solve
the same problem I presented code for?

And while it is off topic...can you provide the code you used to run
the benchmarking?  I'm not challenging your results, just want to see
and fiddle with them.  For example, instead of just adding 10k span
nodes, make it 400 table rows with 5 tds and 5 links.  Have the table
rows and tds all have a class, the links a class and an href and text
and compare that against a string with the same.  I bet the creation,
attribute setting, and insertion will take a lot longer.

As for adding 10,000 elements to a page... I am adding up to 500 rows
to a table with 6 tds in each row and a link in 5 of those tds and
text in the other... so that is 500 * 6 * 6, or up to 18,000 nodes.

@Kean - Yes, join is faster... usually.  If speed is of the utmost
importance, then I test using it because I have had it end up being
slower.  Otherwise, I use += because it's more legible.  Even with the
18,000 node case I mentioned above, += finishes up in 486ms in FF
3.0.8 which more then meets our requirements.  I haven't even
benchmarked it with Chrome, but I would guess significantly less.

There are a lot of other things that can be done to speed up insertion
first that make a much larger impact.  See my aforementioned article,
it's a great discussion, I've just been involved in it several
times :).

Thanks all,
Josh

On Apr 16, 12:06 pm, Kean  wrote:
> @Josh Powell
> - string concatenation is plenty fast 99% of the time and a lot more
> readable.
> Yes string concatenation is more readable and 99% faster for normal
> usage. But looping and concatenate a huge chunk in this particular
> case is slower. Reason: every + between 2 strings returns a new string
> before concatenating with other strings. Array.prototype.join does not
> have that problem. You just need more than 6 string concatenation
> (subject to string length and debate) and it will be a good choice for
> Array.prototype.join to take over.
>
> - W3C DOM Node creation is much slower then inserting via innerHTML,
> especially as you add more nodes.  It doesn't matter how fast the
> nodes are created, it will always be slower to create, adjust, and
> insert 10,000 nodes then one string.
> That's old school thinking. Please refer to my original post, I am
> talking about Chrome's v8 engine and browser detection. You will be
> pleasantly surprised. See RobG's comment too.
>
> @RobG
> Thanks for benchmarking.


[jQuery] Re: Creating custom attributes in html

2009-04-16 Thread Josh Powell

@all - So far, the only reasons I've heard not to add custom
attributes are 1) Dogma, 2) May cause quirks mode.  In my mind, the
benefits gained by using custom attributes: less code, simplicity, and
clarity, far outweigh these two reasons not to do it.

@Jack K - Thanks for the links :).   I will consider adding 'data-' to
future custom attributes.  But, I actually don't really care if my
html code is a "valid" document.  Being a valid document has no
practical meaning, all browsers render it just fine regardless of if
it is "valid" or not.

@RobG -
I was being careless with my use of the words 'attribute' and
'properties', but did you really need to correct me 4 times, and then
correct my use of override to overload twice?  I guess you did.

The class attribute might not have the words 'presentation' and
'style' in the W3C definition, but if you tell me that the class
attribute is not meant primarily for styling DOM elements, I'm just
going to ignore everything else you say as you are just being
argumentative.

> So you've already got the data in an object, now you added it as
> custom HTML attributes, then suck it back out again using attr().  Can
> you see the silliness inherent in the system?

Actually, I think it is less silly then appending an id onto the end
of the attribute id and then parsing it to obtain the id of the object
I'm looking for, and then creating a custom object with get/set
methods to retrieve the appropriate object to get its properties.

> Why not make the media object a bit smarter than just an array, say with set 
> and get methods?
Because that is unnecessary code.  It's code I do not need to write if
I just add custom attributes.

@Kean -
http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly
To sum up:
  - string concatenation is plenty fast 99% of the time and a lot more
readable.
  - W3C DOM Node creation is much slower then inserting via innerHTML,
especially as you add more nodes.  It doesn't matter how fast the
nodes are created, it will always be slower to create, adjust, and
insert 10,000 nodes then one string.


[jQuery] Re: Calling a function from a non-jQuery .JS file

2009-04-15 Thread Josh Powell

> ...what is wrong with just having:-
> var todayEl = document.getElementById("today");
> todayEl.innerHTML = formatDate(new Date);

document.ElementById has a bug in ie6 and ie7 that will return an
element with a name attribute of the same value.  Use $('#today')
instead.

todayEl.innerHTML = "something" can cause memory leaks if events are
added to DOM objects inside of todayEl and then just written over
instead of being removed first.  Use $('#today').html(formatDate(new
Date)); instead if this could be a cause for concern.


On Apr 15, 5:16 pm, kiusau  wrote:
>  > If you want to format a local date, . . .
>
>
>
> > var todayEl = document.getElementById("today");
> > todayEl.innerHTML = formatDate(new Date); // [1]
> > [1]http://www.jibbering.com/faq/#formatDate
>
> This also worked, but produced a format very different from that
> required by the context in which the date must appear.  Then too, the
> code of the formatDate( ) function requires more knowledge of
> JavaScript than I currently possess.  This said, there are certainly
> other contexts where I can make good use of both the formatDate( )
> function and the innerHTML method.
>
> In the end, thank you for your input.  Even though it did not address
> my question directly, it has expanded my knowledge of JavaScript
>
> Roddy


[jQuery] Re: Creating custom attributes in html

2009-04-15 Thread Josh Powell

@all - thank you for your comments.  What I've learned is 1) custom
attributes are referred to as DOM Expandos, 2) they can cause IE to go
into strict mode,  3) Developers often override the class or id of an
element to store data instead of using a DOM Expando, and 4) There is
a bug in jQuery having to do with .live() and Expandos.  Are there any
other drawbacks?  Anyone else think they are beneficial?  I've only
heard from the naysayers so far.

@mkmanning - "You could also rethink your approach; there's really no
reason to
store the kind of data you are in the element... "

You are taking the example too literally.  I was illustrating how what
I was talking about worked, not giving a case where you would use it.

nifty time saving trick here, I'll look into it, thank you:
var tds = $('td.clickme').live('click', function() {
console.log('filter'+tds.index(this));
});

@JBeckton - are you saying that using custom attributes in a selector
for .live would not execute the function assigned to be executed when
the elements were clicked on?  Can you give me the url of the bug you
are talking about?

@Karl Swedburg - Right, there is a name for this.  DOM Expando. Sounds
like some sort of nerdy javascript superhero.

@RobG - I really don't like the idea of overriding 'class' to hold
data, and attr has never been so slow as to need refactoring for me.
Classes are meant for presentation and it blurs the lines between
presentation and logic too much for me.  It's also really non-obvious
when a class is used to hold data and when it is used to style the
element.  I generally don't use custom attributes for selectors
anyway, but to hold information I'll need in the live() call.  Here is
an actual example of where I might use DOM Expandos:

var media = [{
'name': 'The Three Musketeers',
'type': 'book',
'about': 'Swashbucklers'
},{
'name': 'Happy Feet',
'type': 'movie',
'about': 'Penguins'
}]; // would actually be from a returned ajax call returning json, but
here it is.

var html = '';
for (var a = 0; a < media.length; a++) {
html += '' + media[a].about + '';
}
$(selector).append(html);

$('a.foo').live('click', function () {
alert('This ' + $(this).attr('type') + ' is called ' +  $
(this).attr('name') + ' and is about ' +  $(this).text());
});


[jQuery] Re: Creating custom attributes in html

2009-04-14 Thread Josh Powell

I cannot use .data() as I do not have a node.  Creating a node for
every td creates impossibly excessive append time.  One one page I
shortened the time to append for 500 table rows from 29,000ms to
900ms.  Good to know about the potential for triggering quirks mode
though, thanks.

Josh Powell

On Apr 14, 3:34 pm, Ricardo  wrote:
> If you insert these attributes server-side, the page will not validate
> and might trigger quirks mode in the browser. If you are adding them
> after load, there's no harm in it, but I bet using data() would be
> faster for lots of elements.
>
> On Apr 14, 2:56 pm, seasoup  wrote:
>
> > I was wondering what jquery developers opinion of adding custom
> > attributes to html tags is, and what your basis is for these
> > opinions?  Why is it a good idea, or why is it a bad idea?  What I
> > mean is this:
>
> > content
>
> > where 'myType' isn't in any specifications.  I've run into developers
> > who think this is a good idea, and those who think this is a bad idea
> > and I'd like to get a better sense of both sides of the argument.
> > Personally, I use them all of the time.  They are a great way to
> > preserve information for use with .live() in jQuery, among other
> > things, and since I append a long string to the DOM instead of
> > creating lots of little DOM nodes, I generally cannot use .data() to
> > save information on the individual nodes.
>
> > Example of a usage:
>
> > click
> > ...
> > $('div[name=foo]').live('click', function () {
> >    console.log($(this).attr('myType'));
>
> > });
>
> > Example of why I cannot use .data():
>
> > var htmlString = '';
> > for (var a = 0; a < 100; a++) {
> >     htmlString += 'click';}
>
> > htmlString += '';
> > $('div[name=foo]').append(htmlString);
> > $('td[name=clickme]').live('click', function() {
> >     console.log($(this).attr('nodeId'));
>
> > });
>
> > To debate the merits of using this kind of append, please go 
> > to:http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-cor...
>
> > What I'm looking for instead is a discussion of using custom
> > attributes in html.
>
> > Thanks,
> > Josh Powell


[jQuery] Re: Difference between .bind() and .click()

2009-04-06 Thread Josh Powell

.bind enables you to pass variables into the callback function via the
e.data attribute in the event.

$(document).bind('click', {'foo': 'bar'}, function(e) {
   console.log(e.data.foo);
});

Can't do that with the .click shortcut.

Josh Powell

On Apr 6, 9:53 am, jQueryAddict  wrote:
> I want to do something based on the click event.  I was looking at
> examples and at the jQuery Docs.  Read them but so then a .blind() is
> adding an event handler where .click() is obviously an event handler
> but you could I guess use either or to handle for example a click
> event:
>
> .bind('click', function(){...
>
> or
>
> .click(function(){
>
> right? either will work on whatever element you're working with
> right?  just 2 different ways of doing the same thing in jQuery I
> assume.


[jQuery] Re: Need to get value of table cell

2009-03-25 Thread Josh Powell

What unique identifier do these cells have?

Do the cells have id's? $('#theid').  Do the rows have ids? $('#theid
> td').get(1) will get you the second cell of the row with an id of
'theid', does the table have an id? $('#tableid > tbody > tr' > td)
will return all of the tds in that table inside of trs that are inside
of the tbody.  Then, by saying value I think that you mean the text
inside of that cell since cells do not have a 'value' attribute, and
that would be obtained using

$('#tableid > tbody > tr' > td).each(
function () {
alert($(this).text()); // to get just the text
alert($(this).html());  // to get the full html inside instead
}
);

Find more on selectors at:
http://docs.jquery.com/Selectors

and more on the .text() & .html() at:
http://docs.jquery.com/Manipulation

and more on the .get(1) at:
http://docs.jquery.com/Core

Cheers,
Josh Powell


On Mar 25, 1:27 pm, "webspee...@gmail.com" 
wrote:
> Hey all.
>
> I have a table and I need to access the value of a particular cell in
> the selected row.  I've seen this type of code before but can't
> remember what to search on.
>
> Any clues?


[jQuery] Re: getJSON() response into a table

2009-03-21 Thread Josh Powell

> $.getJSON("url", function(json){
> $(json).each(function(){
>    row = $("#table").append("");
>    $(row).append("").html(json.cell1.value);
>    $(row).append("").html(json.cell2.value);
> });
> });
>
> something like this?

This is a very, very, very... very slow way to append

var html = ''
$(json).each(function(){
  html += '' + json.cell1.value + '' +
json.cell2.value + '';
});
html += '';
$('#table').append(html);

Is about 20 times faster.

You can bump it up another couple of times faster by sticking all of
the strings in an array and using .join before inserting them in the
html, but you lose so much legibility of code that I only do that when
doing thousands of string concatenations on large strings.

As for Maruicio's question...Looks like you solved it.  The link works
fine in FF.

A few other tips about the code:

1) do the .append outside of the loop by using the loop to create one
long string for about 10x speed increase.
2) stick the one long string into one DOM node like a tbody for about
a 6x speed increase.
3) instead of obj['name'] use obj.name  They both work, but the first
makes it look like a hash when you are really using properties of an
object.

Cheers,
Josh Powell


[jQuery] Re: How to call jQuery function inside a DOM

2009-03-21 Thread Josh Powell

While not what you were asking, remember that you can chain.

var name = $("#label");
var nameInfo = $("#nameInfo");

name.blur(validateName).keyup(validateName);
...
nameInfo.text("We want names with more than 3 letters!").addClass
("error");

Then:
$('#addPhoneExt').click(tb_remove);

sets an onclick event handler on what the selector returns.  I'm not
exactly sure what you are asking... is there a function attached to
the DOM node that you are trying to execute... are you trying to
execute the already set click event?  Are you trying to use a function
created by a plugin?

On Mar 21, 9:57 am, mdjamal  wrote:
> Hi,
>
> I am trying to call/execute a jQuery function inside of another jQuery
> function, the scenario is after validation of a input text field to
> check if its empty, if empty display a error message and if it has
> value then execute another function, the code as below, adapted from
> this link
>
> http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php...
>
> var name = $("#label");
> var nameInfo = $("#nameInfo");
>  //On blur
>  name.blur(validateName);
>  //On key press
>  name.keyup(validateName);
>  $("#addPhoneExt").click(validateName);
>  //On Submitting
>         //$("#addPhoneExt").click(function(){
>                 //if(validateName())
>                         //return true
>                 //else
>                         //return false;
>         //});
>
>         function validateName(){
>                 //if it's NOT valid
>                 if(name.val().length < 4){
>                         name.addClass("error");
>                         nameInfo.text("We want names with more than 3 
> letters!");
>                         nameInfo.addClass("error");
>                         return false;
>                 }
>                 //if it's valid
>                 else{
>                         $('#addPhoneExt').click(addPhoneExt);
>                         name.removeClass("error");
>                         nameInfo.text("What's your name?");
>                         nameInfo.removeClass("error");
>                         //$('#addPhoneExt').click(tb_remove);
>                         return true;
>                 }
>         }
>
> With the above code I am able to validate the input field but what I
> need is to execute or call the "addPhoneExt" "tb_remove" (function to
> close thickBox) function //if its valid.
>
> Appreciate your help.
>
> Thanks!


[jQuery] Re: jQuery and Prototype conflict

2009-03-20 Thread Josh Powell

In this:
  jQuery(document).ready(function($){
  $("#example").autocomplete(options);
});

this:
function($) {

})

is overwriting the $ for prototype.  It should be:

  jQuery(document).ready(function(){
  $("#example").autocomplete(options);
});

without passing the $ in the function.

On Mar 20, 3:34 pm, K3V  wrote:
> I am trying to use both jQuery and Prototype at the same time.
>
> I've spent hours and hours searching solutions to fix this problem.
> The most common method I found is 
> thishttp://docs.jquery.com/Using_jQuery_with_Other_Libraries.
> However, it didn't work no matter how I place the "jQuery.noConflict
> ()" code.
>
> Can anyone help me with this?
>
> Thanks in advance
>
> /* Here is my code */
>
> 
> 
> http://www.google-analytics.com/urchin.js"; type="text/
> javascript">
> 
>     _uacct = "UA-2351815-2";
>     urchinTracker();
> 
> 
> 
> 
>         jQuery.noConflict();
>         jQuery(document).ready(function($){
>           $("#example").autocomplete(options);
>         });
> 
> 
> 
> 
> 
> // Event.observe(window, 'load', function() {
>     var recommended_items = new RecommendedItems('recommended_items',
> );
>     recommended_items.setBaseURL('');
>
> 
>     recommended_items.setProduct();
> 
>     recommended_items.fetchItems();});
>
> //]]>
> 


[jQuery] Re: Preventing link clicks before document.ready();

2009-03-20 Thread Josh Powell

You could also put the .click events inside a document.ready().  Then
they can click away, but no results until the event handler is set
after document.ready.

On Mar 20, 12:30 pm, James  wrote:
> That's the default of how web browsers. You can work around it such as
> by setting the display of those  to hidden in your CSS, and use
> Javascript to show it upon page ready. Depending on how your website
> works, this may mean your page would not work properly if users do not
> have Javascript enabled.
>
> On Mar 20, 5:48 am, HippieX  wrote:
>
> > I have a problem I am sure others have encountered.  I have .click()
> > events attached to  links in my web page, but the user is clicking
> > the links before the document.ready(); fires causing unexpected
> > results.  Is there anyway to stop this from happening?
>
> > Thanks,
>
> > Jeff


[jQuery] Re: jQuery each problem

2009-03-15 Thread Josh Powell

Glad I could help.  That's an interesting thing you ran into, first, i
assume that instead of
$(this).val() = 'yes';

you meant

$(this).val() == 'yes' or $(this).val() === 'yes'

because the first one meant you are trying to store 'yes' in $
(this).val()... which wouldn't work anyway.  Actually before
theorizing any further, did you actually test the first or second
versions of that statement above?


On Mar 15, 11:25 am, macgyver47  wrote:
> What works is
> var yes_or_no=jQuery(this).attr("value");
> if(yes_or_no=="yes"){
> do something}
>
> else
> {
> do something else}
>
> Thanks for helping all the way to a fine solution
>
> On 15 mar, 15:10, macgyver47  wrote:
>
> > Unfortunatly it doesn't work
> > if ($(this).val() = 'yes')
> > returns nothing
> > $(this).val() returns "on" no matter if you click on button Yes or
> > button No
> > I have been ckecking jquery doc the best I could and cannot find
> > answer to my question: how to I know if user clicked on button Yes or
> > button No
> > Any other ideas ???
> > Thanks in advance
> > Jean from France
> > On 14 mar, 17:54, Josh Powell  wrote:
>
> > > $(this).is("eq[0]")
>
> > > will not work because, is looks at the list of jquery objects that $
> > > (this) returns.  Which is just one object.
>
> > > try giving the input a value of yes or no and doing
>
> > > if ($(this).val() === 'yes')
>
> > > On Mar 14, 8:51 am, macgyver47  wrote:
>
> > > > One more question if this is not abusing your time
> > > > Structure of each question:
> > > >  > > > onclick='q1=1'>Yes
> > > > No
> > > > 
> > > > jQuery('.choix').click(function(e) {
> > > >   $(this).parent().hide();});
>
> > > > as expected your answer hides the content of the question as expected
> > > > How can I know if first (yes) or second (no) button was clicked
> > > > I tried introducing after $(this).parent().hide();    something like
> > > >  if (jQuery(this).is(":eq[0]")) {
> > > >    do something
> > > >     }
> > > > else
> > > > {
> > > > do something}
>
> > > > but it doesn't work !
> > > > Any ideas ?
> > > > Thanks for help
> > > > Jean from France
> > > > On Mar 14, 9:49 am, macgyver47  wrote:
>
> > > > > Thank you very much for a great answer  which nearly solved my
> > > > > question in a very elegant way, I have even discovered in studying
> > > > > selectors a little more thouroughly ( jquery doc)  that you can use
> > > > > jQuery('.choix').click(function(e) {
> > > > > $(this).parent().parent().hide();
> > > > > and it will go 2 levels up instead of one as described in you solution
> > > > > Thanks to great people like you Josh I am learning ( slowly)
> > > > > Many thanks
> > > > > Jean from France
>
> > > > > On 14 mar, 08:27, Josh Powell  wrote:
>
> > > > > > Yes, forget about using ID's in this way.  That's something you had 
> > > > > > to
> > > > > > do before using jQuery.  Think about how your HTML is structured and
> > > > > > things are named/classed and the order they are in.  Take advantage 
> > > > > > of
> > > > > > how easy it is to traverse the DOM with jQuery.  If yo uhave
>
> > > > > > 
> > > > > >   link 1
> > > > > >   Description
> > > > > > 
>
> > > > > > 
> > > > > >   link 2
> > > > > >   Description
> > > > > > 
>
> > > > > > 
> > > > > >   link 3
> > > > > >   Description
> > > > > > 
>
> > > > > > and do:
>
> > > > > > jQuery('.choix').click(function(e) {
> > > > > >   $(this).parent().hide();
>
> > > > > > });
>
> > > > > > Then jQuery will iterate through all of the elements on the page 
> > > > > > with
> > > > > > a class of 'choix' and attach a click event that hides that links
> > > > > > parent when clicked on.  This keeps your html/javascript much 
> > > > > > cle

[jQuery] Re: jquery each help

2009-03-15 Thread Josh Powell

read up on the .animate() jQuery effect, this might be what you are
looking for.

http://docs.jquery.com/Effects/animate

On Mar 15, 11:46 am, Tom  Shafer  wrote:
> I have articles in a group of divs
> 
>                          width="11"
> height="211"/>
>                         
>                                 POSTED: 15 MARCH 
> 2008 1400 HOURS
>                                  > SNEAK PREVIEW 
> OF NO CHILD... div>
>                                 Lorem ipsum 
> dolor sit am
>                                 >>  href="#">DOWNLOAD 10% DISCOUNT
> PASS
>                                 
>                         
> 
>                          width="11"
> height="211"/>
>                         
>                                 POSTED: 15 MARCH 
> 2008 1400 HOURS
>                                  > SNEAK PREVIEW 
> OF NO CHILD... div>
>                                 Lorem ipsum 
> dolor sit amet, conat
> nulla facilisis.
>                                 >>  href="#">DOWNLOAD 10% DISCOUNT
> PASS
>                         
>                         
>
> I am trying to loop through each class and display them one at a time,
> article one will display and each class inside article one will show
> (using the show()) function one at a time. This will happen with each
> with each article one after another for as many articles as there are.
> This could be 2 this could be 10. I know this is not a convenient way
> to load a page but this is what i am trying to do. I am also using a
> typewriter unction to display letters one at a time.
>
> I have this right now
> var arrayList = $.makeArray($('.art').get());
>
> $.each(arrayList,function() {
>                                         $(this).show();
>                                                 
> $('.postedDate').show().jTypeWriter({onComplete:function(){
>                                                                 
> $('.articleHeader').show().jTypeWriter({onComplete:function(){
>                                                                         
> $('.articleContent').show().jTypeWriter({onComplete:function()
> {
>                                                                         }});
>                                                                 }});
>                                                 }});
>                                         });
>
> it doesnt quite get it right.
>
> Here is the sample page
>
> http://pavlishgroup.com/projects/cpt-test/
>
> thanks in advance


[jQuery] Re: .getJSon

2009-03-14 Thread Josh Powell

What I don't like about that method is the loss of ease of updating
and reuse of code later on.  If you stick it in a table coming back,
and need the some data somewhere else you cannot reuse it.  Also,
changing things on server side requires recompiling in a java
environment, which is a drag for html development.  In a PHP
environment it wouldn't be as big of a deal though.

It's also a matter of separating the data from the layout.  I prefer
making an ajax request to retrieve data and do all of my layout/
styling and interactivity in javascript.  That way it never becomes
confusing where to go to update things.  If it's a data issue, you go
to the server, if it's a layout/styling issue then the problem is in
the javascript.  When you start breaking that line by putting html in
the server side code, things can get messy.

That said, what you are talking about is a perfectly valid way to
code.

On Mar 14, 2:10 pm, donb  wrote:
> Then I must be missing something:
>
> $("#placetoinsert").load("path/to/url");
>
> would do the same thing, with the tableHTML constructed on the server
> side.
>
> On Mar 14, 5:02 pm, Josh Powell  wrote:
>
> > Because it puts it in the javascript and lets you easily manipulate it
> > with javascript.  If you get html back from the server, it's more
> > difficult to manipulate.
>
> > $.getJson('path/to/url',  function(data) {
> >     var tableHTML = '';
> >     $.each(data.aaData, function() {
> >          tableHTML += '' + this[0] + '' + this[1] +
> > '';
> >     });
> >     tableHTML += '';
> >     $('#placeToInsert').append(tableHtml);
>
> > });
>
> > On Mar 14, 12:30 pm, donb  wrote:
>
> > > If that's all your going to do with it, why not return a table from
> > > the server and simply .load() it?  No transformation required in that
> > > case.
>
> > > On Mar 14, 9:23 am, finco  wrote:
>
> > > > Sorry if this is a duplicate post - doesn't look like the last one
> > > > went through.
>
> > > > I've seen several examples of how to process json data with .each when
> > > > the field names come over with json.  My data, howver, looks like the
> > > > following:
>
> > > > {"aaData": [
> > > > ["1001-00-1535.000","Tenant Improvements"],
> > > > ["1001-00-1558.000","Selling costs"],
> > > > ["1001-00-1560.000","Financing Fees"],
> > > > ["1001-00-1560.001","Financing Fees - Legal"],
> > > > ["1001-00-1565.000","Lease Costs"],
> > > > ["1001-00-1565.001","Lease Costs -Legal"],
> > > > ["1001-00-1565.002","Lease Costs - Brokerage"],
> > > > ["1001-00-1570.000","Legal Fees"]
> > > > ]}
>
> > > > How would I drop this data into a table?
>
> > > > Thanks in advance for your help.


[jQuery] Re: Very New To JavaScript\JQuery - Mouseover and Mouseout Question

2009-03-14 Thread Josh Powell

The problem is this:

 $(".block a").mouseover(function(){
  $(".block a").animate({

$('.block a') gets every instance of an a element with class block.
So when you do the .animate on it, you are animating every element.
Instead, you mean.


 $(".block a").mouseover(function(){
  $(this).animate({

On Mar 14, 11:33 am, DLee  wrote:
> Hi there,
>
> I am having trouble grasping the usage of mouseover and mouseout when
> dealing with a menu. I created a list of links and in testing, I've
> been able to hover over each link and they will animate, move over 10
> pixels. On mouse out, they will move back. That's great, except when I
> hover over them, every link in the list moves. I want each link to
> move over as I only hover over that particular link. Here's my markup:
>
> 
> 
>   http://code.jquery.com/jquery-latest.js";>
>
>   
>   $(document).ready(function(){
>
>     $(".block a").mouseover(function(){
>       $(".block a").animate({
>         marginLeft: "10px",
>       }, 1500 );
>     });
>
>     $(".block a").mouseout(function(){
>       $(".block a").animate({
>         marginLeft: "0px",
>       }, 1500 );
>     });
>
>   });
>   
>   
>   div {
>     background-color:#bca;
>     width:100px;
>     border:1px solid green;
>   }
>   
> 
> 
>         
>                 Link1
>                 Link2
>                 Link3
>                 Link4
>         
> 
> 
>
> Any help would be much appreciated. Thanks in advance!
> DLee


[jQuery] Re: .getJSon

2009-03-14 Thread Josh Powell

Because it puts it in the javascript and lets you easily manipulate it
with javascript.  If you get html back from the server, it's more
difficult to manipulate.

$.getJson('path/to/url',  function(data) {
var tableHTML = '';
$.each(data.aaData, function() {
 tableHTML += '' + this[0] + '' + this[1] +
'';
});
tableHTML += '';
$('#placeToInsert').append(tableHtml);
});



On Mar 14, 12:30 pm, donb  wrote:
> If that's all your going to do with it, why not return a table from
> the server and simply .load() it?  No transformation required in that
> case.
>
> On Mar 14, 9:23 am, finco  wrote:
>
> > Sorry if this is a duplicate post - doesn't look like the last one
> > went through.
>
> > I've seen several examples of how to process json data with .each when
> > the field names come over with json.  My data, howver, looks like the
> > following:
>
> > {"aaData": [
> > ["1001-00-1535.000","Tenant Improvements"],
> > ["1001-00-1558.000","Selling costs"],
> > ["1001-00-1560.000","Financing Fees"],
> > ["1001-00-1560.001","Financing Fees - Legal"],
> > ["1001-00-1565.000","Lease Costs"],
> > ["1001-00-1565.001","Lease Costs -Legal"],
> > ["1001-00-1565.002","Lease Costs - Brokerage"],
> > ["1001-00-1570.000","Legal Fees"]
> > ]}
>
> > How would I drop this data into a table?
>
> > Thanks in advance for your help.


[jQuery] Re: find among same elements using name

2009-03-14 Thread Josh Powell

[name=row]



On Mar 14, 10:58 am, Alain Roger  wrote:
> Hi,
>
> i have a table with checkboxes which allows user to select all row/records
> or none.
> they have all the same name : row
> i would like to know if there is an easy way to find them in my table ?
> i was thinking about something like :
> $("#grid").find('td:row').each(function(i)
> {
>  ...
>
> });
>
> when td:row would mean each  having name = row.
>
> is there something like that ?
>
> thx.
>
> A.


[jQuery] Re: jQuery each problem

2009-03-14 Thread Josh Powell

$(this).is("eq[0]")

will not work because, is looks at the list of jquery objects that $
(this) returns.  Which is just one object.

try giving the input a value of yes or no and doing

if ($(this).val() === 'yes')


On Mar 14, 8:51 am, macgyver47  wrote:
> One more question if this is not abusing your time
> Structure of each question:
>  onclick='q1=1'>Yes
> No
> 
> jQuery('.choix').click(function(e) {
>   $(this).parent().hide();});
>
> as expected your answer hides the content of the question as expected
> How can I know if first (yes) or second (no) button was clicked
> I tried introducing after $(this).parent().hide();    something like
>  if (jQuery(this).is(":eq[0]")) {
>    do something
>     }
> else
> {
> do something}
>
> but it doesn't work !
> Any ideas ?
> Thanks for help
> Jean from France
> On Mar 14, 9:49 am, macgyver47  wrote:
>
> > Thank you very much for a great answer  which nearly solved my
> > question in a very elegant way, I have even discovered in studying
> > selectors a little more thouroughly ( jquery doc)  that you can use
> > jQuery('.choix').click(function(e) {
> > $(this).parent().parent().hide();
> > and it will go 2 levels up instead of one as described in you solution
> > Thanks to great people like you Josh I am learning ( slowly)
> > Many thanks
> > Jean from France
>
> > On 14 mar, 08:27, Josh Powell  wrote:
>
> > > Yes, forget about using ID's in this way.  That's something you had to
> > > do before using jQuery.  Think about how your HTML is structured and
> > > things are named/classed and the order they are in.  Take advantage of
> > > how easy it is to traverse the DOM with jQuery.  If yo uhave
>
> > > 
> > >   link 1
> > >   Description
> > > 
>
> > > 
> > >   link 2
> > >   Description
> > > 
>
> > > 
> > >   link 3
> > >   Description
> > > 
>
> > > and do:
>
> > > jQuery('.choix').click(function(e) {
> > >   $(this).parent().hide();
>
> > > });
>
> > > Then jQuery will iterate through all of the elements on the page with
> > > a class of 'choix' and attach a click event that hides that links
> > > parent when clicked on.  This keeps your html/javascript much cleaner
> > > as you do not even need to worry about assigning incrementing id's to
> > > elements and keeping the numbers matched to another elements id to
> > > link them.
>
> > > This is not an exact solution for you, but it should point you in the
> > > right direction and way of thinking about how to use jQuery.
>
> > > Josh
>
> > > On Mar 13, 11:27 pm, macgyver47  wrote:
>
> > > > What it does:
> > > > jQuery('.choix1').click(function(){
> > > >  jQuery('#quest1').hide();
> > > > When you click on either button related to question 1 it just hides
> > > > the div id="quest1"
> > > > What I would like to do is something like:
> > > > for (i=1; i<=6; i++){
> > > >   $("choix " + i ).click function(){
> > > > $("#quest"+i).hide();
> > > >    }
> > > > So every time user clicks on any radio button with id="choix1" or
> > > > choix2 or choix3... it will hide the related div with id="quest1" or
> > > > quest 2...
> > > > Any ideas
> > > > Thanks for help
> > > > Jean from France
>
> > > > On 14 mar, 00:57, Josh Powell  wrote:
>
> > > > > What this is doing:
>
> > > > > jQuery('.choix1').click(function(){
> > > > >   jQuery('#quest1').hide();
>
> > > > > });
>
> > > > > is looping through every element on the page with a class of 'choix1',
> > > > > so you could either change all of the elements you want to loop though
> > > > > classes to choix and then do
>
> > > > >  jQuery('.choix').click(function(){
> > > > >    jQuery(this).parent().hide();
>
> > > > > });
>
> > > > > Which will loop through them all and then hide them when either yes or
> > > > > no is selected or find some other way of identifying every element
> > > > > that you want to act on.  Perhaps use the name field, or if they are
> > > > > the only radio buttons on the page you can do
>
> > > > > jQuery(':radio') as the selector.
>
> > > > > On Mar 13, 2:45 pm, macgyver47  wrote:
>
> > > > > > Hi
> > > > > > I am new to jQuery and learning slowly
> > > > > > Here is the problem
> > > > > > I have 6 questions each of them has 2 buttons ( yes or no radio
> > > > > > buttons)
> > > > > > When user clicks on 1 answer I would like to hide the entire 
> > > > > > question
> > > > > > I have achieved to do this for 1 question but no success looping
> > > > > > through all 6 questions !
> > > > > >  > > > > > onclick='q1=1'>Yes
> > > > > >  > > > > > onclick='q1=0'>No
> > > > > > 
> > > > > >  > > > > > onclick='q1=1'>Yes
> > > > > >  > > > > > onclick='q1=0'>No
> > > > > > 
> > > > > > ...
> > > > > >  jQuery('.choix1').click(function(){
> > > > > >      jQuery('#quest1').hide();
> > > > > >       });
> > > > > > This works for 1 item but how can I loop through all all of them
> > > > > > Thanks for help
> > > > > > Jean from France


[jQuery] Re: Please help me SPEED UP my dev. MySQL => PHP => JSON => AJAX => jQueryUI

2009-03-14 Thread Josh Powell

No, JSON is the correct route.  If you are using ajax to retrieve
json, then you can pull the json into a javascript object
immediately.  If you are using PHP to generate pages, then you can
print out the JSON object as a string directly into javascript and
create javascript objects that way.  jQuery has built in methods
to .getJSON that provides the basis of all my AJAX calls in the web
app I work on.

Another tip, standardize all the JSON responses into a format you
like, for example

{
  'header': {
 'type': String,
 'message': String
  },
  'payload': {
'data': []
  }
}

That way you can create one object that calls .getJSON and use that
object to do all of your ajax calls and have a standard set of
responses to being timed out, 404 errors, loading alert while the ajax
call is running, etc.

Good luck.

On Mar 14, 7:38 am, dani  wrote:
> Before taking on a challenging task, please give me some ideas to
> speed up my development!
>
> Just as the topic is saying, I will primarily be doing: MySQL => PHP
> => JSON => AJAX => jQueryUI
>
> I used to work with CakePHP but I have little experience with JSON.
> Any hints on your favourite tools and helpers (MVC frameworks, MySQL
> tools, JSON parsers, jQuery extensions etc.) are greatly appreciated.
>
> If you think I should modify my "route", for example XML instead of
> JSON, please put forward the pros and cons.
>
> Thanks.


[jQuery] Re: Using " " (or not!)

2009-03-14 Thread Josh Powell

$("#msgUnits").text( ); will definitely not work.   is not
the name of a javascript object.

On Mar 13, 9:46 pm, Swatchdog  wrote:
> This does not work:
>
> $("#msgUnits").text( );
>
> nor does this...
>
> $("#msgUnits").text(' ');
>
> I guess   is html only?
>
> Clues, anyone?


[jQuery] Re: jQuery each problem

2009-03-14 Thread Josh Powell

Yes, forget about using ID's in this way.  That's something you had to
do before using jQuery.  Think about how your HTML is structured and
things are named/classed and the order they are in.  Take advantage of
how easy it is to traverse the DOM with jQuery.  If yo uhave


  link 1
  Description



  link 2
  Description



  link 3
  Description


and do:

jQuery('.choix').click(function(e) {
  $(this).parent().hide();
});

Then jQuery will iterate through all of the elements on the page with
a class of 'choix' and attach a click event that hides that links
parent when clicked on.  This keeps your html/javascript much cleaner
as you do not even need to worry about assigning incrementing id's to
elements and keeping the numbers matched to another elements id to
link them.

This is not an exact solution for you, but it should point you in the
right direction and way of thinking about how to use jQuery.

Josh

On Mar 13, 11:27 pm, macgyver47  wrote:
> What it does:
> jQuery('.choix1').click(function(){
>  jQuery('#quest1').hide();
> When you click on either button related to question 1 it just hides
> the div id="quest1"
> What I would like to do is something like:
> for (i=1; i<=6; i++){
>   $("choix " + i ).click function(){
> $("#quest"+i).hide();
>    }
> So every time user clicks on any radio button with id="choix1" or
> choix2 or choix3... it will hide the related div with id="quest1" or
> quest 2...
> Any ideas
> Thanks for help
> Jean from France
>
> On 14 mar, 00:57, Josh Powell  wrote:
>
> > What this is doing:
>
> > jQuery('.choix1').click(function(){
> >   jQuery('#quest1').hide();
>
> > });
>
> > is looping through every element on the page with a class of 'choix1',
> > so you could either change all of the elements you want to loop though
> > classes to choix and then do
>
> >  jQuery('.choix').click(function(){
> >    jQuery(this).parent().hide();
>
> > });
>
> > Which will loop through them all and then hide them when either yes or
> > no is selected or find some other way of identifying every element
> > that you want to act on.  Perhaps use the name field, or if they are
> > the only radio buttons on the page you can do
>
> > jQuery(':radio') as the selector.
>
> > On Mar 13, 2:45 pm, macgyver47  wrote:
>
> > > Hi
> > > I am new to jQuery and learning slowly
> > > Here is the problem
> > > I have 6 questions each of them has 2 buttons ( yes or no radio
> > > buttons)
> > > When user clicks on 1 answer I would like to hide the entire question
> > > I have achieved to do this for 1 question but no success looping
> > > through all 6 questions !
> > >  > > onclick='q1=1'>Yes
> > > No
> > > 
> > >  > > onclick='q1=1'>Yes
> > > No
> > > 
> > > ...
> > >  jQuery('.choix1').click(function(){
> > >      jQuery('#quest1').hide();
> > >       });
> > > This works for 1 item but how can I loop through all all of them
> > > Thanks for help
> > > Jean from France


[jQuery] Re: jQuery each problem

2009-03-13 Thread Josh Powell

What this is doing:

jQuery('.choix1').click(function(){
  jQuery('#quest1').hide();
});

is looping through every element on the page with a class of 'choix1',
so you could either change all of the elements you want to loop though
classes to choix and then do

 jQuery('.choix').click(function(){
   jQuery(this).parent().hide();
});

Which will loop through them all and then hide them when either yes or
no is selected or find some other way of identifying every element
that you want to act on.  Perhaps use the name field, or if they are
the only radio buttons on the page you can do

jQuery(':radio') as the selector.

On Mar 13, 2:45 pm, macgyver47  wrote:
> Hi
> I am new to jQuery and learning slowly
> Here is the problem
> I have 6 questions each of them has 2 buttons ( yes or no radio
> buttons)
> When user clicks on 1 answer I would like to hide the entire question
> I have achieved to do this for 1 question but no success looping
> through all 6 questions !
>  onclick='q1=1'>Yes
> No
> 
>  onclick='q1=1'>Yes
> No
> 
> ...
>  jQuery('.choix1').click(function(){
>      jQuery('#quest1').hide();
>       });
> This works for 1 item but how can I loop through all all of them
> Thanks for help
> Jean from France


[jQuery] Re: Invalid Argument in IE7/8

2009-03-13 Thread Josh Powell

Where does this error come from?

[cycle] terminating; zero elements found by selector

You can see it when the page loads on the firebug console, but it
doesn't give a file name or line number.  it may be that since you
aren't getting any elements back, IE is messing up because you are
trying to use a method or attribute of those elements that are not
defined.

On Mar 13, 8:36 am, Nic Hubbard  wrote:
> My page is throwing an invalid argument error on line 23 of jQuery,
> version 1.2.6.  Is there any reason this should be happening?  It
> seems that because of this, the rest of my script is not running.
>
> I am using the cycle plugin as well as jScroll Panel.
>
> Example:http://67.207.148.241/home


[jQuery] Re: triggering events with selected

2009-03-13 Thread Josh Powell


1
2
3
4
5


content
content
content
content
content

$('.numberPages').change(function() {
$('p.foo').hide().eq($(this).find(':selected').text()-1).show();
});



[jQuery] Re: $(byName) <> $(byClass) in 1.3.2

2009-03-12 Thread Josh Powell

You can still use name, just change your selector to

$('[name=div1]')

Also, when writing out html in string, put them between single quotes
and the html in double quotes so you can do this:
var htmlText = 'Hola!!';

instead of

var htmlText = 'Hola!!';

Josh Powell


On Mar 12, 6:10 pm, Karl Rudd  wrote:
> Use id="whatever" rather than name="whatever". In CSS "#whatever"
> refers to an element with id="whatever".
>
> The "name" attribute is for form elements, not for general elements.
>
> Karl Rudd
>
> On Fri, Mar 13, 2009 at 10:02 AM, radioAM  wrote:
>
> > hello, i'm new at using jQuery and i'm trying to create dynamic
> > content.
> > the problem is thant i can't retrieve the
> > new content by name.
> > here is an example to reproduce what i'm saying.
>
> >  (function() {
>
> >    fn = function() {
> >        $('.widgetBar').append('');
> >        var acc = $('.acc1');
>
> >        //var htmlText = 'Hola!! > a>';
> >        var htmlText = 'Hola!! > a>';
>
> >        acc.append(htmlText);
>
> >        alert($('#div1').size()); // Returns 0
> >        alert($('.pp').size());   // Returns 1
> >    };
>
> >    $(fn);
>
> >    return;
> > })
> > ();
>
> > what i'm doing wrong ?
> > thanks.


[jQuery] Re: Very simple question...

2009-03-11 Thread Josh Powell

@7times9

I'm not sure what eq() stands for, come to think of it, but I always
read it in my heads as 'equals' as in the index equals 2.

> On Thu, Mar 12, 2009 at 10:04 AM, 7times9 <7tim...@googlemail.com> wrote:
>
> > ...what does eq as in .eq(2) stand for?
>
> > It helps me to read jQuery in my head if I know what abbreviations
> > really mean :-)
>
> > Thanks


[jQuery] Re: Order Items. Please help me. Thank You.

2009-03-11 Thread Josh Powell

@mkmanning

> An even more important performance gain can be had by
> not doing string concatenation (I put a caveat about this in the code
> comment's also), but build an array of your html and then join the
> array; it's siginficantly faster.

Funny that you mention this. In current browser versions it is ~2-4
times faster to do array.join instead of += and in the next gen
browsers the difference is close to none until you get to extremely
large loops and strings/arrays, around 100,000 or so, where is it
about 1.25 times faster in Chrome, 1.6 times in IE8, and twice as fast
in webkit.  See my recent article and tests for a more comprehensive
explanation:

http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly

To summarize, the most significant things you can do to impact append
performance:

1) Move the append out of the for loop, and append one long string
~9x-10x faster

2) Append one DOM node instead of a collection of DOM nodes. ~6x
faster
  appends much faster
then 
  much faster then 
 etc...

3) create a long html string instead of smaller nodes and then
appending to and adding attributes to them. ~3x faster
 $(selector).append('content');

instead of

  $(selector).append($('').append("something").addClass
('foo').attr('id','something'));


Doing those three generally speeds things up enough, and using += is
so much more legible then array.join that I cut my performance gains
off there unless I have really long arrays and speed seems to be an
actual problem instead of a hypothetical one.


[jQuery] Re: Get Textbox-value and write to table-cell ()

2009-03-11 Thread Josh Powell

*shrugs* up to you, brian means to use string.splice(a); where a =
number of characters before the index that is tacked on. so if the
name/id is foo_1, foo_2 then you'll do:

$('[id^=foo_]').change(function() {
$('[name=post-amount_' + $(this).attr('id').slice(3)  + ]').val($
(this).val());
});

I personally find this kind of string munging difficult to read and
maintain.  Could just be personal preference though.  Good luck.

Josh Powell

On Mar 10, 10:39 pm, Eric Gun  wrote:
> @mkmanning: Well done!! Your script works well. Thanks, and great
> job! :)
>
> @brian-263: Thanks for the idea. Yup, i'm using PHP as i said before.
> Therefore, i need those '[]'.
> Anyway, i'm still curious with what you mean by 'parse out the index
> from each of the IDs ...'. I'm not really sure how to do it. If you
> don't mind, can you give me an example script?
>
> @Josh Powell: Thanks for being the first one to reply my post :)
> I'm sorry, but i'm afraid i agree with brian-263 about better not
> making up new attribute instead of optimizing pre-defined ones.
>
> @all: Maybe i was wrong to explain my problem when i used the word
> 'instantly' (as this is my first post :) In fact, the 'deal-post'
> table is located in different tab panel with the 'deal-summary' one
> (i'm using JQuery UI plugin for tabs). So, i will drop the 'keyup'
> event and also forget about autocomplete plugins for now. I will use
> the 'change' event instead, as i think it's enough for me.
>
> Thanks guys!!!
>
> On Mar 10, 4:07 pm, Eric Gun  wrote:
>
> > Sorry guys, just had a couple days off.
> > I will look forward to your answers and reply back here soon.
>
> > Thanks for concerning,
>
> > Regards,
>
> > On Mar 8, 8:22 am, mkmanning  wrote:
>
> > > With the markup example in the OP, use this:
>
> > > var dp = $('#deal-post tbody tr');
> > > dp.find('input[name^=dealAmount]').keyup(function(){
> > >         var amount =  $(this);
> > >         $('#deal-summary tbody tr:eq('+dp.index(amount.closest('tr'))
> > > +')').find('td.inc-current').text(amount.val());
>
> > > });
>
> > > On Mar 7, 4:10 pm, brian  wrote:
>
> > > > On Sat, Mar 7, 2009 at 6:21 PM, Josh Powell  wrote:
>
> > > > > 6 of one... half dozen of another...
>
> > > > I don't buy that. I've suggested using an attribute whose purpose is
> > > > well defined. Making up attributes that aren't represented by the
> > > > DOCTYPE is a bad idea. Don't get me wrong--I've done it before. Though
> > > > always to store temporary info. Happily, we have data for that, now.
> > > > The OP's needs, though, are to identify table cells as being connected
> > > > to specific text inputs. That's what ID is for.


[jQuery] Re: Get Textbox-value and write to table-cell ()

2009-03-07 Thread Josh Powell

6 of one... half dozen of another...

On Mar 7, 12:04 pm, brian  wrote:
> On Sat, Mar 7, 2009 at 2:16 PM, Josh Powell  wrote:
>
> > Why do you have the [] characters in the name of the elements?  That
> > might screw up selectors.
>
> PHP, likely. But there's no need to use the name in the selector.
>
> > Another options is to give the dealAmount inputs a new attribute with
> > a value of an incrementing numbers, foo="0" say.  As long as the post
> > amounts are in the same order you could:
>
> Why create a new attribute out of thin air when an ID will work just
> as well? Bad practice, IMO. Yes, the index would have to be parsed out
> but how hard is that?


[jQuery] Re: Get Textbox-value and write to table-cell ()

2009-03-07 Thread Josh Powell

Why do you have the [] characters in the name of the elements?  That
might screw up selectors.

Another options is to give the dealAmount inputs a new attribute with
a value of an incrementing numbers, foo="0" say.  As long as the post
amounts are in the same order you could:

$('[name=dealAmount'].change(function() {
$('[name=post-amount]:eq(' + $(this).attr('foo') + )').val($
(this).val());
});

But this will only update when the input loses focus.  If you want it
to work with every key press, use the keyPress or keyDown events
instead of the click event.  No guarantees on that one though, I
haven't actually had a need for it yet.

On Mar 6, 10:41 pm, Eric Gun  wrote:
> Hi guys, let's get straight to the problem.
>
> First, I have this "deal-post" table (actually  content is
> generated dynamically from PHP code, but I omitted it here and make it
> static for simplicity sake):
>
> 
>         
>                 
>                         Posting
>                         Description
>                         Amount (Rp.)
>                         (%)
>                 
>         
>         
>                 
>                         Posting 1 name="hidPostCompId[]"/>
>
>                         
>                                  name="dealDesc[]"/>
>                         
>                          style="padding: 0pt 3px;">
>                                  name="dealAmount[]"/>
>                         
>                         
>                 
>                 
>                         Posting 2 name="hidPostCompId[]"/>
>
>                         
>                                  value="" name="dealDesc
> []"/>
>                         
>                          style="padding: 0pt 3px;">
>                                  name="dealAmount[]"/>
>                         
>                         
>                 
>                 
>                         Posting 3 name="hidPostCompId[]"/>
>
>                         
>                                  value="" name="dealDesc
> []"/>
>                         
>                          style="padding: 0pt 3px;">
>                                  name="dealAmount[]"/>
>                         
>                         
>                 
>                 
>                         Posting 4 name="hidPostCompId[]"/>
>
>                         
>                                  value="" name="dealDesc
> []"/>
>                         
>                          style="padding: 0pt 3px;">
>                                  name="dealAmount[]"/>
>                         
>                         
>                 
>         
>         
>                 
>                         
>                         Sell Price :
>                         
>                         
>                 
>         
> 
>
> I want to copy the textbox-value in [Amount] column (i give the 
> a class name="post-amount") to respective index in [Current] column (i
> give the  a class name="inc-current") as in "deal-summary" table
> below:
>
> 
>         
>                 
>                         Posting
>                         Total
>                         Current
>                 
>         
>         
>                 
>                         Posting 1
>                         
>                         
>                 
>                 
>                         Posting 2
>                         
>                         
>                 
>                 
>                         Posting 3
>                         
>                         
>                 
>                 
>                         Posting 4
>                         
>                         
>                 
>         
>         
>                 
>                         Sell Price :
>                         
>                         
>                 
>         
> 
>
> It should work like this: when I type the numeric-amount in "dealAmount
> []" textbox, the value will be showing up instantly in "inc-current"
> column in "deal-summary" table in the same row index with "deal-post"
> table.
>
> I am so desperate that I have been looking around across the internet,
> including this forum, but I just can't get the idea.
> Any help for me will be very appreciated.
>
> Thanks!
>
> Regards,


[jQuery] Re: display children using jQuery

2009-03-07 Thread Josh Powell

Long answer:
Check out the section on Traversing in the jquery documentation on the
site.  Lots of good examples and documentation on there.


Short answer:
console.log($(element).children()));


On Mar 7, 1:33 am, Alain Roger  wrote:
> Hi,
>
> i need to debug jQuery code and i would like to know if there is an easy way
> to display (as alert or into FFconsole) the children tags of a particular
> element ?
> thanks
>
> Al.


[jQuery] Re: can't get started

2009-03-05 Thread Josh Powell

Did you mean to:



 instead of



On Mar 5, 3:37 pm, dawnerd  wrote:
> Can you please post the html you were using?
>
> On Mar 5, 2:32 pm, Dr G  wrote:
>
> > Hello,
>
> > I've downloaded both the compressed & uncompressed versions and tried
> > both the initial example from the jquery site (http://docs.jquery.com/
> > Tutorials:How_jQuery_Works)  and  the step-by-step intro from the
> > tutorial videos (http://blog.themeforest.net/tutorials/jquery-for-
> > absolute-beginners-video-series/).  I have tried putting the jquery
> > download in the same directory as my html (e.g.          > src="jquery-1.2.3.js" type="text/javascript">... and I've
> > tried putting it in a separate directory and put the path to it in the
> > src parameter field.
>
> > In all cases I get the same result; nothing.  If I put other
> > JavaScript in my html file I can get it to do stuff (e.g. put up an
> > alert box) but nothing I've done has resulted in a detectable
> > invocation of  jQuery functions.  I'm doing this all under OS X, and
> > I've also opened a terminal window and chmod'd the jquery-1.3.2.js
> > file to 777, but that had no apparent effect either.
>
> > Would anyone be willing to let me know where I've gone wrong?  It is
> > frustrating not to be able to do the most basic step.
>
> > Thanks,
>
> > Michael


[jQuery] Re: How to create dom on the fly using jQuery????

2009-03-04 Thread Josh Powell

Simple answer:

DOM nodes are created by just writing the html in side of the jQuery

$('#divName').append('');

is equivalent to

divResult = document.getElementById("divName");
table = document.createElement("table");
tr = document.createElement("tr");
td = document.createElement("td");
tr.appendChild(tr);
table.appendChild(tr);
divResult.appendChild(table);

but is also cross browser compatible, optimized for speed, and handles
event registrations.

On Mar 3, 9:41 pm, SeeVik  wrote:
> Thanks for the reply Jack. the JST Template looks cool. I will surely
> look into it.
>
> Just for the record, if anybody can throw some light on the original
> question, it would be really helpful.
> I don't really want to be left clueless about this thing in jQuery.
>
> Thanks and Regards
> Vikram
>
> On Mar 4, 12:04 pm, Jack Killpatrick  wrote:
>
> > This isn't jquery-specific, but I've been using this for a couple years
> > now to generate html from json data:
>
> >http://code.google.com/p/trimpath/wiki/JavaScriptTemplates
>
> > works great.
>
> > - Jack
>
> > SeeVik wrote:
> > > Hello all,
>
> > > I am using Symfony with jQuery plugin. The thing is I am getting some
> > > data from database in JSON format and I want to use jQuery to display
> > > a table using that data on the fly. I was wondering is jQuery the best
> > > way to do this? Or will it be an overkill? Should I use simple DOM
> > > methods for this task like...
>
> > > divResult = document.getElementById("divName");
> > > table = document.createElement("table");
> > > tr = document.createElement("tr");
> > > td = document.createElement("td");
> > > tr.appendChild(tr);
> > > table.appendChild(tr);
> > > divResult.appendChild(table);
>
> > > If I should use jQuery, can somebody give me a hint which methods to
> > > use for the above jQuery code?
>
> > > Thanks and Regards
> > > Vikram


[jQuery] Re: Optimize large DOM inserts

2009-03-02 Thread Josh Powell

Hey guys,

This thread inspired me to write a blog article

http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly

I did some testing of the += and array.join methods of long string
concatenation.  Interesting stuff!

It turns out that += and array.join are browser dependent in their
execution time, although one method is quicker in a majority of
current and next gen browsers.



On Feb 8, 11:20 am, Kevin Dalman  wrote:
> Rick, based on what I've learned from testing, you have another option
> now...
>
> Here is a modified version of Mike's code - without generating the
> table.
>
>     function populateDutyTable(response) {
>
>         var currentDay = '';
>         var rows = response.QGETDUTYSCHEDULE.DATA;
>         var out = [], o = -1;
>
>         out[++o] = ''; // CHANGED
>
>         for( var row, i = -1;  row = rows[++i]; ) {
>
>             var day = row[1];
>             if( currentDay != day ) {
>                 currentDay = day;
>                 out[++o] = '';
>                 out[++o] = row[1];
>                 out[++o] = '';
>                 out[++o] = row[2];
>                 out[++o] = ' colspan="5"> ';
>             }
>
>             out[++o] = '  class="cell-blank-date"> ';
>             out[++o] = row[3];
>             out[++o] = '';
>             out[++o] = row[4];
>             out[++o] = 'Cell Content';
>         }
>
>         out[++o] = ''; // CHANGED
>
>         $('#scheduleBody').append( out.join('') ); // CHANGED
>     }
>
> A container around the table is no longer required because wrapping
> the rows in a tbody achieves the same performance as wrapping them in
> a table. Plus, you could now add rows without regenerating the entire
> table. This provides more options with no penalty. For example, now
> you could hard-code the table with column headers - for example...
>
> 
>    
>       
>          ID
>          Day
>          Date
>          Name
>       
>    
> 
>
> This is cleaner and faster than adding column headers inside your
> Javascript loop.
>
> I suggest you try both methods, Rick. Use a timer (like MIike's sample
> pages) to confirm whether both are equally fast. Based on my tests,
> you may find appending to the table even faster, with cleaner markup
> as a bonus.
>
> Ciao,
>
> /Kevin
>
> On Feb 7, 3:20 pm, "Rick Faircloth"  wrote:
>
> > Hey, thanks Michael for taking the time to provide the
> > explanation and the re-write.  I'll put this into place
> > and see how it performs.  I'm sure it'll be *much* better!
>
> > Rick


[jQuery] Re: $.getJSON

2009-03-02 Thread Josh Powell

Using console.log and firebug will show you what everything is.

console.log(data);
$.each(data.records, function(i,item){
   console.log(i);
   console.log(item);
   console.log(this);
});

On Mar 2, 1:54 am, Alain Roger  wrote:
> On Mon, Mar 2, 2009 at 10:52 AM, Matt Quackenbush wrote:
>
>
>
> > Yes.
>
> > On Mon, Mar 2, 2009 at 3:35 AM, Alain Roger wrote:
>
> >> Hi Wil,
>
> >> so if i understood well, having the following JSON:
>
> >>> {"records":[{"id":1,"abbreviation":"fre","description":"french"},{"id":2,"abbreviation":"eng","description"
> >>> :"english"},{"id":3,"abbreviation":"ger","description":"german"},{"id":4,"abbreviation":"svk","description"
>
> >>> :"slovak"},{"id":5,"abbreviation":"spa","description":"spanish"},{"id":6,"abbreviation":"usa","description"
> >>> :"american"},{"id":7,"abbreviation":"ita","description":"italian"},{"id":8,"abbreviation":"por","description"
>
> >>> :"portuguese"},{"id":9,"abbreviation":"cze","description":"czech"},{"id":10,"abbreviation":"rus","description"
> >>> :"russian"},null,null,null]}
>
> >>> i should write :
> >>    $.each(data.records, function(i,item){...});
>
> >> where "data.records" is the name of my JSON result...so records (in my
> >> JSON).
> >> am I right ?
>
> thanks Matt.


[jQuery] Re: I can't figure out how to implement JQuery into my website

2009-03-01 Thread Josh Powell

It's just a javascript file, put it wherever you put your javascript
files.

On Mar 1, 12:20 pm, Warfang  wrote:
> What code do I need to put in my HTML header? I have already
> downloaded the JQuery code from JQuery's homepage to my computer, but
> where exactly do I put that? I'm using Webs.com to host now, so do I
> upload the code to my directory there? From there, how do I add new
> code from plugins?
>
> Sorry for all the questions, but I'm really anxious to learn how to
> use this. Thanks.


[jQuery] Re: Help please with toggling a class

2009-02-27 Thread Josh Powell

oh, very nice.  I wasn't aware of toggleClass.

On Feb 27, 6:51 pm, Karl Swedberg  wrote:
> Hi Zac,
>
> You just need to add one line -- $(this).toggleClass('yourClass'); --  
> where "yourClass" is the class you want to toggle on and off.
>
> You should also add return false after that line so that the default  
> click behavior doesn't occur.
>
> jQuery.fn.fadeToggle = function(speed, easing, callback) {
>    return this.animate({opacity: 'toggle'}, speed, easing, callback);
>
> };
>
> $(function() {
>      $('a.aboutlink').click(function() {
>        $('.aboutbox').fadeToggle();
>        $(this).toggleClass('yourClass');
>        return false;
>      });
>
> });
>
> --Karl
>
> 
> Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> On Feb 27, 2009, at 9:09 PM, zac wrote:
>
>
>
> > Hi.. I am trying to have it so my navigation toggle hidden boxes on
> > the site.  I want it so the link toggles the box on and off, as well
> > as having the link itself have a class toggled on and off (a
> > background color).
>
> > So far I have the toggling box...
>
> > jQuery.fn.fadeToggle = function(speed, easing, callback) {
> >   return this.animate({opacity: 'toggle'}, speed, easing, callback);
> > };
> >   $(function() {
> >            $('a.aboutlink').click(function() {
> >                    $('.aboutbox').fadeToggle();
> >                    });
> >   });
>
> > .aboutbox {
> > background: #151515;
> > padding: 50px;
> > border: 2px solid #000;
> > display: none;
> > }
>
> > But I am not sure how I would also have the link itself (.aboutlink)
> > have a class toggled on and off. simultaneously.  Can someone please
> > help me write this?  I am very new and just learning so would really
> > appreciate some help.
>
> > Thanks,
>
> > Zac


[jQuery] Re: alternate color row starting from a point

2009-02-27 Thread Josh Powell

hmmm, tough one, it was fun.

$(function() {
var color = '';
$('#everyother tr').each(function() {
if( $(this).hasClass('className') ) {
color = 'red';
} else if (color === 'red') {
$(this).css({'background-color': 'red'});
color = '';
} else {
color = 'red';
}
});


className
1
1
className
1
1
1
className
1
1



On Feb 27, 9:03 am, Magritte  wrote:
> Ok, it work, but I another trouble.
>
> the code now become:
> $('tr:not(.className):odd').css({'background':'red'});
>
> because I would like to color row alternatively.
> The problem is that I would like that the alternativy start alway with
> red.(first '' after every '' red,
> then 'white', then red,)
>
> With this code it doesn't happen.
>
> Thanks
>
> On 27 Feb, 13:17, Thomas Jaggi  wrote:
>
> > This should do it:
> > $('tr:not(.className)').css({'background':'red'});


[jQuery] Re: Help please with toggling a class

2009-02-27 Thread Josh Powell

Without really understanding what your fadeToggle plugin is doing,
this will toggle adding and removing a class:

$(function() {
  $('a.aboutlink').toggle(
  function () {
 $(this).addClass('aboutBox');
  },
  function () {
 $(this).removeClass
('aboutBox');
  }
});

On Feb 27, 6:09 pm, zac  wrote:
> Hi.. I am trying to have it so my navigation toggle hidden boxes on
> the site.  I want it so the link toggles the box on and off, as well
> as having the link itself have a class toggled on and off (a
> background color).
>
> So far I have the toggling box...
>
> jQuery.fn.fadeToggle = function(speed, easing, callback) {
>    return this.animate({opacity: 'toggle'}, speed, easing, callback);};
>
>    $(function() {
>                 $('a.aboutlink').click(function() {
>                         $('.aboutbox').fadeToggle();
>                         });
>    });
>
> .aboutbox {
> background: #151515;
> padding: 50px;
> border: 2px solid #000;
> display: none;
>
> }
>
> But I am not sure how I would also have the link itself (.aboutlink)
> have a class toggled on and off. simultaneously.  Can someone please
> help me write this?  I am very new and just learning so would really
> appreciate some help.
>
> Thanks,
>
> Zac


[jQuery] Re: Multiple inclusions of jquery possible?!?

2009-02-27 Thread Josh Powell

http://groups.google.com/group/jquery-dev/browse_thread/thread/3efd1066b535234f



On Feb 27, 3:19 pm, ml1  wrote:
> Hi folks:
>
> We use jquery extensively in an application that suddenly needs to
> make use of an online ecommerce system that also happens to use
> jquery.
>
> This is causing things to break badly, not least because they use
> 1.2.6 but we have to use 1.3.2 to take advantage of a bugfix, and also
> because only some our pages will use the ecommerce includes so even if
> we got them to move to 1.3.2 the coding would become a nightmare since
> we can;t just assume their's will be there.
>
> As if that weren't bad enough we are also using a couple of jquery
> plugins which might have to be modified if we end up bulk-changing the
> jquery identifier.
>
> Is there a solution to this?
>
> Thanks!