Re: [jQuery] Same-site Restrictions on Ajax: Does $.getScript help?

[Michael Geary]

> I want to make a remote request to a different server than 
> the current page is hosted on, in order to get JSON data 
> (padded with a callback).
> 
> This is typically handled by inserting 

Re: [jQuery] json deserialization

[Michael Geary]

> This works for me:
> 
> $.ajax({
> url: 'email.pl',
> type: "post",
> data: {
> rm: 'deleteLetter',
> ID: myForm.letterSelect.value
> },
> dataType: 'json',
> success: function( ret ) {
> alert( ret.a );
> }
> });
> 
> I believe the order in which you pass the params to $.ajax matters.

There's only one argument being passed to $.ajax, a single object literal.

To illustrate, you could write the code like this:

 var args = {
 url: 'email.pl',
 type: "post",
 data: {
 rm: 'deleteLetter',
 ID: myForm.letterSelect.value
 },
 dataType: 'json',
 success: function( ret ) {
 alert( ret.a );
 }
 };

 $.ajax( args );

The order of properties in an object literal doesn't matter, except possibly
in a couple of pathological cases [1] [2] that don't apply here.

-Mike

[1] If a property name is used twice in the same object literal - which one
wins?
[2] If the receiving code does "for( name in argobject )" and assumes a
particular order of enumeration (which is undefined behavior anyway).


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] window.undefined = "undefinedundefined"?

[Michael Geary]

> I was poking around the DOM looking for incorrectly scoped 
> variables and I found the following node:
> 
> window.undefined = "undefinedundefined"
> 
> What is this for?

The window object has a property named "undefined" whose value is the
undefined value.

IOW, when you run code like this:

if( foo === undefined ) alert( 'foo is undefined' );

What you are really doing is the same as:

if( foo === window.undefined ) alert( 'foo is undefined' );

I don't know what tool you are using to view the DOM or why it says that
window.undefined has a value of "undefinedundefined". That sounds like a bug
in the DOM viewer, unless this code has been executed, which seems unlikely:

window.undefined = "undefinedundefined";

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Advantages of adding functions to jQuery

[Michael Geary]

> I'm having trouble seeing the advantage of adding static 
> functions to jQuery as in:
> 
> jQuery.log = {
>   error : function() { ... },
>   warning : function() { ... },
>   debug : function() { ... },
> };
> 
> as opposed to:
> 
> function log() { ... }
> log.prototype.error = function() { ... } 
> log.prototype.warning = function() { ... } 
> log.prototype.debug = function() { ... }
> 
> It seems the former opens up the door to unintended closures. 
> What are the benefits of doing it this way as opposed to the 
> traditional non-jQuery way?

I don't see any closures in that code. The jQuery.log = { ... } is not a
function and doesn't introduce a closure. This object literal is just a
handy way of creating some static functions.

IOW, these are identical:

 jQuery.log = {
   error : function() { ... },
   warning : function() { ... },
   debug : function() { ... },
 };

 jQuery.log = {};
 jQuery.log.error = function() { ... };
 jQuery.log.warning = function() { ... };
 jQuery.log.debug = function() { ... };

Your code with the log.prototype stuff is something different entirely.
You're creating a log() constructor and giving it some methods. (BTW, by
convention, you would usually call it Log() instead of log() because it's
used as a constructor.) So you would need to do this to use it:

var log = new Log;
log.debug( ... );

The use of static functions avoids the need to construct an object. You can
merely use:

jQuery.log.debug( ... );

Not sure if I answered your question, but those are a few thoughts on it
anyway... :-)

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Dynamically change Document title

[Michael Geary]

> Is there a way to change the title of a document after an 
> ajax Call. I'm using an ajax history system and I would like 
> to view specific document title in the back button list. 
> 
> I've try this but doesn't seem to work :  
> $("title").html("Dynamic Title");  
> 
> I can see the change in Bugzilla but the browser didn't refresh it. 

Try:

document.title = 'Dynamic title';

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] compare between display and visibility when hide anelement?

[Michael Geary]

Nothing to do with SEO. The display and visibility properties do two
different things:
 
http://www.w3.org/TR/CSS21/visuren.html#display-prop
 
http://www.w3.org/TR/CSS21/visufx.html#visibility
 
-Mike


  _  

From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Microtoby
Sent: Tuesday, March 06, 2007 9:59 AM
To: 'jQuery Discussion.'
Subject: [jQuery] compare between display and visibility when hide
anelement?



Hello, Guys,

I'm using jQuery for a while, and like jQuery much more,

But I have a question begin start using this library,

YUI and some other library using visibility to hide an element, jQuery using
the display css property.

Any one can tell me what the difference between display and visibility is?

For example, difference in SEO?

 

Best wishes,

Microtoby

2007-3-7

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] .next() bug?

[Michael Geary]

> Now, my mark-up is wrong.  I should have wrapped the nested 
>  in it's own , but I missed it.  Testing looked good 
> in FF 2, .next() was returning the nested , and I didn't 
> even notice the problem.  In IE6/7 however,
> .next() returned the next , and not the  which was in 
> fact next the next element.  Wrapping the  in it's own 
>  as it should be solved the discrepancy, but the 
> fact that there is a discrepancy in how the two browsers 
> interpret .next() makes me think perhaps there's a bug in there.
> 
> My understanding of sibling was the next element in line on 
> the same level, but in the case of the mark-up above IE seems 
> to interpret the next sibling as the next element in line on 
> the same level and of the same type.  Am I wrong in my 
> understanding of sibling?

When you have invalid markup, browsers take their best guess as to what you
meant, and different browsers may guess differently.

If you're interested in knowing exactly what happened here, use a DOM
inspector in each browser and compare the DOM trees. For Firefox, that would
be Firebug, and for IE, Microsoft's Developer Toolbar:

http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-
bb3e-2d5e1db91038

My guess is that there are differences in the DOM that explain the different
results.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] KICK-BUTT javascript based Zoom feature

[Michael Geary]

...and if I seem too much like a smart aleck today, my apologies! No offense
intended. I was just having some fun with the juxtaposition of "that URL is
busted" and "anyone know how to accomplish this in jQuery"... :-)


  _____  

From: Michael Geary
The actual code for the close-up effect would be different from that, but
the code I posted may help point toward the solution.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] KICK-BUTT javascript based Zoom feature

[Michael Geary]

The actual code for the close-up effect would be different from that, but
the code I posted may help point toward the solution.

  _  

From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Rick Faircloth
Sent: Saturday, February 24, 2007 11:20 AM
To: 'jQuery Discussion.'
Subject: Re: [jQuery] KICK-BUTT javascript based Zoom feature


Wow. that looks simple.
 
I guess the jQuery core has everything else needed to
produce the close-up effect?
 
Rick
 
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Michael Geary
Sent: Saturday, February 24, 2007 2:07 PM
To: 'jQuery Discussion.'
Subject: Re: [jQuery] KICK-BUTT javascript based Zoom feature
 
This is untested code, but it's one way you could do it with jQuery:
 
$(function() {
location = $('[EMAIL PROTECTED]')attr('href').replace( /_spam$/, '' );
});
 

  _  

From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Christopher Jordan
Sent: Saturday, February 24, 2007 10:32 AM
To: jQuery Discussion.
Subject: Re: [jQuery] KICK-BUTT javascript based Zoom feature
that url is busted.

Rick Faircloth wrote: 
Well. anyone know how to accomplish this in jQuery?
http://tinyurl.com/yubt54_spam
Rick
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Matt Stith
Sent: Monday, February 05, 2007 9:53 AM
To: jQuery Discussion.
Subject: Re: [jQuery] KICK-BUTT javascript based Zoom feature
Really all that is is a image of a grid that stays aligned with the mouse,
and a higher resolution image that scrolls depending on the mouse position.
It doesnt even use jQuery.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] KICK-BUTT javascript based Zoom feature

[Michael Geary]

This is untested code, but it's one way you could do it with jQuery:
 
$(function() {
location = $('[EMAIL PROTECTED]')attr('href').replace( /_spam$/, '' );
});


  _  

From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Christopher Jordan
Sent: Saturday, February 24, 2007 10:32 AM
To: jQuery Discussion.
Subject: Re: [jQuery] KICK-BUTT javascript based Zoom feature


that url is busted.

Rick Faircloth wrote: 

Well. anyone know how to accomplish this in jQuery?



http://tinyurl.com/yubt54_spam



Rick



From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Matt Stith
Sent: Monday, February 05, 2007 9:53 AM
To: jQuery Discussion.
Subject: Re: [jQuery] KICK-BUTT javascript based Zoom feature



Really all that is is a image of a grid that stays aligned with the mouse,
and a higher resolution image that scrolls depending on the mouse position.
It doesnt even use jQuery.


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Id of a textarea element

[Michael Geary]

> > You may use a period in an id still being valid XHTML, but in this 
> > case you cannot use the id as a (CSS) selector, because the 
> > period is a class selector.

> I'm not convinced it's not a bug in jQuery because it doesn't 
> make sense to specify a class on an Id. I'm not going to make 
> a fuss about it unless you also think it needs to be made a 
> fuss about.

There is a situation where it can be useful: If you want to select the
element with a certain ID, only if it also has a certain class.

Assuming that the ID 'foo' exists, then $('#foo.bar') returns a jQuery
object with a single element if the element has the class 'bar', but returns
an *empty* jQuery object if the element does not have that class.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] $.show() improvement

[Michael Geary]

It does that by having hide() remember the old element block vs. inline type
in "this.oldblock", and then show() uses that to decide what to do:
 
   hidden.each(function(){
this.style.display = this.oldblock ? this.oldblock : "";
if ( jQuery.css(this,"display") == "none" )
 this.style.display = "block";
   });

That is an odd little bit of code, but it looks like that is what it's
doing.
 
I think this would still fall apart in the case where you have an element
that is initially hidden (you never call hide() on it) and then show it. It
won't have this.oldblock to look at in that case.



  _  

From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Karl Swedberg
Sent: Wednesday, February 14, 2007 3:55 PM
To: jQuery Discussion.
Subject: Re: [jQuery] $.show() improvement



I just tested using .hide() and .show() in Firebug with  elements, and
.show() only makes them elem.style.display="block" when there is a speed
designated. Plain .show() returns them to inline. 

On Feb 14, 2007, at 5:37 PM, Michael Geary wrote:


The real problem here is that there is *no such thing* as "showing" an HTML
element. All you can do is set it to block or inline. This suggests that
show() is a mistake: you need separate showBlock() and showInline() methods.


I wonder, would it be possible to pass in another argument instead?
Something like .show('slow', 'inline') ? Or would that require too much code
rewriting? Would have to consider the callback function too. 


--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com





___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] $.show() improvement

[Michael Geary]

> What if I specify a div as display:inline in my css? Hiding 
> then showing this div using the above script would change 
> it's display to block.

Good point!

I was about to suggest making a list of the block level elements to avoid
having to create DOM elements to test, but either approach would fall down
here.

> Would be good if it remembered the original setting.

And if the element started out hidden? :-)

The real problem here is that there is *no such thing* as "showing" an HTML
element. All you can do is set it to block or inline. This suggests that
show() is a mistake: you need separate showBlock() and showInline() methods.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] how to simplify this

[Michael Geary]

There are several ways you could refactor that code. Here's one approach:
 
$('#normal, #standard, #profi').click( function() {
var idnums = { normal:1, standard:2, profi:3 };
$('#bereit').ScrollTo( 800 );
for( var id in idnums ) {
var n = idnums[id];
var method = 'removeClass', checked = '';
if( id == this.id ) method = 'addClass', checked = 'checked';
$( '#' + id + ' dd, #label_radiobutton_' + n )[method](
'ausgewaehlt' );
$( '#radiobutton_' + n ).attr( 'checked', checked );
}
});

-Mike


  _  

From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Dominik Hahn
Sent: Monday, February 12, 2007 9:14 AM
To: discuss@jquery.com
Subject: [jQuery] how to simplify this


Hello,

I am looking for a way to simplify this chunk of code:


$('li#normal').click(function() {
$('#bereit').ScrollTo(800);
$('li#normal dd').toggleClass('ausgewaehlt'); 
$('li#standard dd').removeClass('ausgewaehlt');
$('li#profi dd').removeClass('ausgewaehlt');

$('label#label_radiobutton_1').toggleClass('ausgewaehlt'); 
$('label#label_radiobutton_2').removeClass('ausgewaehlt');
$('label#label_radiobutton_3').removeClass('ausgewaehlt');

$('input#radiobutton_1').attr('checked','checked'); 
$('input#radiobutton_2').attr('checked','');
$('input#radiobutton_3').attr('checked','');
});
$('li#standard').click(function() { 
$('#bereit').ScrollTo(800);
$('li#normal dd').removeClass('ausgewaehlt');
$('li#standard dd').toggleClass('ausgewaehlt');
$('li#profi dd').removeClass('ausgewaehlt'); 

$('label#label_radiobutton_1').removeClass('ausgewaehlt');
$('label#label_radiobutton_2').toggleClass('ausgewaehlt');
$('label#label_radiobutton_3').removeClass('ausgewaehlt'); 

$('input#radiobutton_1').attr('checked','');
$('input#radiobutton_2').attr('checked','checked');
$('input#radiobutton_3').attr('checked',''); 
});
$('li#profi').click(function() {
$('#bereit').ScrollTo(800);
$('li#normal dd').removeClass('ausgewaehlt');
$('li#standard dd').removeClass('ausgewaehlt'); 
$('li#profi dd').toggleClass('ausgewaehlt');

$('label#label_radiobutton_1').removeClass('ausgewaehlt');
$('label#label_radiobutton_2').removeClass('ausgewaehlt'); 
$('label#label_radiobutton_3').toggleClass('ausgewaehlt');

$('input#radiobutton_1').attr('checked','');
$('input#radiobutton_2').attr('checked',''); 
$('input#radiobutton_3').attr('checked','checked');
});


It controls a list, when you click on one of the three items, it scrolls
down to a online form (first line), the item is highlighted (first three
lines), one of three radioboxes is checked (line 6-8) and the label for the
checked radiobox is also highlighted (last three lines). 


Can you help me?

Thanks,
Dominik


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Issues with non FF browsers

[Michael Geary]

> >   $.get("parser.php",
> >   {
> > type: type,
> > user: user,
> >   }, 

> trailing commas only work in firefox!
>  user: user,
> 
> has a trailing comma!

Great catch, Jake.

Here's a tip - use ActiveState Komodo for your JavaScript editing, and get
syntax checking as you edit. I loaded the code into Komodo, and it flagged
the "user: user," line with a green squiggly underline and this message:

Strict warning: trailing comma is not legal in ECMA-262 object initializers

And had I tried this before my first reply, I wouldn't have said it was
impossible to tell what was wrong from the JavaScript code alone... :-)

As of version 4.0, Komodo Edit (no debugger, but all the editor features) is
free - and it runs on Mac, Windows, and Linux.

By far my favorite editor for JavaScript, Ruby, Python, and PHP.

http://www.activestate.com/products/komodo_edit/

http://www.activestate.com/products/komodo_ide/

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Issues with non FF browsers

[Michael Geary]

> I'm trying to get some simple things to work using jquery, 
> and everything currently works the way I'd like it to in 
> Firefox.  However, in Opera, Safari, and Internet Explorer, 
> nothing works right -- and I haven't been able to figure out 
> where the hang up is.
> 
> My entire jquery code can be found here:
> http://www.moiph.com/javascript/index.js but a snippet is below...

There's no way to tell what's wrong from the JavaScript code alone. Do you
have an HTML page to try it in?

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] jQuery for President

[Michael Geary]

It is my privilege and honor to nominate Glen Lipka as our great state's
representative in the Selectoral College.



  _  

From: Glen Lipka
Subject: [jQuery] jQuery for President


Alot of new snazzy sites are being launched for candidates running for
president.
Only one candidate is clearly going after the jQuery community.

http://www.barackobama.com (jQuery!)
Although they are using 1.04.  Hello?  I was all on board until I saw they
haven't upgraded.  Wassup widdat?
Is the developer for this site on the list?

Other candidates and their library of choice:
http://www.hillaryclinton.com/ (Prototype)
http://joebiden.com (none)
http://johnedwards.com/ (none)
http://mittromney.com/ (mooTools)
http://www.brownback.com/   (none)

I dont know about the rest of you, but if a canidate uses jQuery then I have
to consider voting in that direction. ;)

in jQuery we trust.


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] iframe and designmode

[Michael Geary]

As you can see from your first (presumably working?) example, .contentWindow
is a property of an HTML element.
 
Therefore, the real question is, "How do I get the HTML Element?"
 
If you are inside an $('foo').each() callback function, then "this" is the
HTML element. So, you could use:
 
this.contentWindow.document.designMode = "on";

What messed things up was doing $(this). $(this) returns a new jQuery object
- but all you needed was "this" itself.
 
If there is only one IFRAME in question (obviously true because you are
accessing it by ID), then you can use this bit of information:
 
document.getElementById('foo') can be directly translated to $('#foo')[0].
This means you can skip the "each" loop and use:
 
$("#iframe_name")[0].contentWindow.document.designMode = "on" 

Obviously in this particular case there is little reason to prefer the
jQuery code over the straight DOM code.
 
Finally, a debugging tip. Instead of poking around trying things to see if
you get lucky, use a debugger to look at the values returned by various
functions. You would see, for example, that $(this) was not a DOM element
and did not have a .contentWindow property.
 
Why did some things you tried just not work and others triggered an error?
Well, this code would run without triggering an error, but it wouldn't do
anything useful:
 
$(this).designMode = "on";

That merely added a designMode property to the jQuery object. A perfectly
legal operation, but not useful.
 
$(this).contentWindow.document.designMode = "on";

That causes an error, which you would discover by breaking it down step by
step:
 
console.debug( $(this) );
console.debug( $(this).contentWindow );
console.debug( $(this).contentWindow.document );
 
The first console.debug call would show a jQuery object. The second would
show "undefined", because a jQuery object does not contain a .contentWindow
property. The third would throw an exception, because $(this).contentWindow
is undefined, and "undefined" of course does not have a .document property.
 
-Mike


I need to use the following command to activate designmode in an iFrame
(designmode is when you can use an iFrame like it was a text editor, think
Word or when you compose an email in Gmail):

document.getElementById("iframe_name").contentWindow.document.designMode =
"on" 

I've tried to jQuerify the sentence in a variety of manners but it never
works. Sometime the command wont work and other times they trigger an error.
So far I've tried with (I use the reserved word "each" cause I'm working
inside a plugin): 

$(this).contentWindow.document.designMode = "on";
$(this).document.designMode = "on";
$(this).designMode = "on";


and

$(this).attr("contentWindow.document.designMode", "on") 
$(this).attr("document.designMode", "on")
$(this).attr("designMode", "on")

nothing worked.
I wouldn't mind sticking to pure javascript for once, but the thing is that
this doesn't work either, wich is driving me crazy: 

document.getElementById($(this).attr("id")).contentWindow.document.designMod
e = "on"

Has anyone here used designMode for an iFrame with good results? Why doesn't
jQuery support it? 

Thanks.


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Finding parent iframe?

[Michael Geary]

> I was able to take what you sent me and simplify it down to this:
> 
>   var frameWindow = document.parentWindow || document.defaultView;
>   var outerDiv = $(frameWindow.frameElement.parentNode); 
>   cls = $('div.tb_close', outerDiv).get(0);
> 
> Because I actually want to operate on a child of the outer 
> div (which I didn't specify as it wasn't relevant). And I 
> figured out that I could use document because when I am 
> executing the javascript, I don't need the link, merely the 
> link's document, and document is what I need. Works in both 
> FF and IE as well.

It sounds like your code is actually running inside the IFRAME, is that
correct? It sounded like you only had a reference to an element inside the
iframe, thus the ownerDocument/parentWindow/defaultView stuff to find the
frame window.

But if your code is running in the IFRAME, then "window" is already the
frame window. So you can simplify even further:

 var outerDiv = $(frameElement.parentNode); 
 cls = $('div.tb_close', outerDiv).get(0);

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Finding parent iframe?

[Michael Geary]

> I have a quandary. I open an iframe with some arbitrary 
> content in it. I want to be able to click on something within 
> the iframe to cause the iframe (and the div tag that contains 
> the iframe) to go away. I am having trouble getting to the 
> iframe. I know it's possible as I've seen it elsewhere, I 
> just can't find the proper path to it.
> 
> I basically have this structure:
> 
> 
>   
>   
>   
>   
>   
>   
>   
>   
>   
>   
>   
> 
> 
> It's not exactly accurate but it gives a good idea what I'm 
> looking to do
> 
> I've tried:
> 
> // This should as far as I can get to the div tag which is 
> where I want to be $('#any tag').parents('html').parent().parent();
> 
> But when I alert the length of this, I get 0. I've also tried 
> a pure DOM way any_tag.ownerDocument.parent.parent.parent
> but again, I get nothing.

You're mixing up two different kinds of "parents" - parent *node/element*
and parent *window*.

Assuming that anyTag is a valid reference to your , then this code
should work (it's based on tested code that I use):

  var frameDoc = anyTag.ownerDocument;
  var frameWindow = frameDoc.parentWindow || frameDoc.defaultView;
  var frameElement = frameWindow.frameElement;
  var outerDiv = frameElement.parentNode;

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] jQuery and Object Notation... confused with "this"

[Michael Geary]

> Recently I've been trying to use ON with jQuery. I met with obstacle.
> I couldn't use "this" keyword in certain cases to get my main object
> reference...
> 
> var myObject = {
> 
>   layout: { 'align': '' },
>   start: function() {
>   $('form').bind('submit', this.buildLayout); //WORKS
>   },
> 
>   buildLayout: function() {
>   this.layout.align = $('#elem').attr('value');   //DOESN'T
WORK
>   }
> }
> 
> function initialize() {
>   myObject.start();
> }
> 
> $().ready(initialize);

Nate's solution is a good one, but personally I would probably do this:

$(function() {
var layout = { 'align': '' };

$('form').bind( 'submit', function() {
layout.align = $('#elem').attr( 'value' );
});
});

Of course, it's hard to tell from a stripped-down example whether that
approach would fit with the rest of the code in your application, but it's
always worth looking at a couple of different ways to tackle a problem.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] rewriting the browser address (without refresh)?

[Michael Geary]

If you change only the hash, it won't reload the page - but it won't create
a unique URL for search engines. If you change anything else in the URL, it
will reload the page.

Changing the hash does get you a URL get people can copy and bookmark. But
Google won't see the hash.

It really is a case of not being able to have your cake and eat it too.

> I'm wondering if there is a way to rewrite the url in the 
> browser bar without refreshing the page. I'm using 
> Jquery/ajax to do something but unless I can rewrite that url 
> I don't think we can do this. I could use an anchor (#...) 
> but the problem here is that they links need to be accessible 
> to Google. People need to be able to cut, paste, bookmark 
> whatever they are looking at.
> 
> I'm hoping this is somehow possible...OR...is there some 
> other logical solution that might be considered?


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Animate font weight

[Michael Geary]

> I'm trying to get animate() to fade font-weight but it's not working.
> I've tried the following:
> 
> $('a').mouseover(function() {
> $(this).animate({fontWeight: 'bold'}, 'slow'); });
> 
> But that doesn't work - I've also tried to put quotes around 
> the fontWeight and tried font-weight.
> I get the following error:
> 
> e[prop[p]] is not a function (line 1582)
> 
> Can anyone tell me if/how animating font-weight is possible?

What would it mean? Are you trying to have a font gradually change from
normal to bold?

Browsers don't generally support a range of font weights. They support
normal and bold, and for most fonts that is it.

Sorry!

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Custom borders

[Michael Geary]

> $.fn.border = function(prefix){
>var classNames = [ 'north', 'east', 'south', 'west', 'northeast',
'southeast', 'southwest', 'northwest'];
>return this.each(function(){
>   for (var index in classNames){
>  className = (prefix || '')+ classNames[index];
>  $(this).wrap("")
>   }
>})
> };

Danger warning! Don't use for..in on an array! Use a C-style loop instead.


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] I broke it - Why is it doing this?

[Michael Geary]

> Ok did you try:
> 
> http://imaptools.com/sm/index-003.html
> 
> it should work in FF2, this is what I'm using.

Should I see something happen when I click the GO text? Nothing happens. I
didn't try setting a breakpoint in the click handler, just tried clicking on
the GO text to see if something would happen on the screen.

I tried it in IE as well, but there are some JavaScript errors: console and
a trailing comma.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] I broke it - Why is it doing this?

[Michael Geary]

> > I see the word GO along with PREV/SAVE/NEXT, but none of them are 
> > buttons, just plain text.

> Right, they are aren't buttons yet, but they all have click 
> events on them so you can just click the text. I plan to 
> change them to buttons, I'm not sure why I did do that in the 
> first place. In fact the whole control, is a pseudo-form, 
> just text in cells. If I change it to a form I can probably 
> use the form plugin and simplify my code somewhat.
> 
> If you start with http://imaptools.com/sm/index-003.html it 
> actually works more or less so you can see how it should 
> interact. index-002.html was my 1st iteration on 
> restructuring and clean it up, but I ran into this weird problem.

Nothing seems to happen when I click the GO text on that page in Firefox 2.


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] I broke it - Why is it doing this?

[Michael Geary]

> I appreciate the correction. I was a little dumb founded by 
> the only explanation that I could come up with and decided 
> over dinner that I should test it out an verify it. I 
> probably should have done that before posting. All the good 
> thoughts seem to come after hitting Send!

Not to worry, Steve, you should have seen some of the bloopers I've posted!

I was going to try tracing through your code, but your earlier message said
to click the GO button:

> http://imaptools.com/sm/index-002.html - with named function 
> http://imaptools.com/sm/index-003.html - with anon function
>
> To test the page, load it can click the "GO" button, it should call
> action_go() and load an image and the select list, this work with the 
> anon function.

I see the word GO along with PREV/SAVE/NEXT, but none of them are buttons,
just plain text.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] I broke it - Why is it doing this?

[Michael Geary]

> When you create a named function is is basically a static 
> object stored in funcname of the scope it was defined in. 
> when you declare a var in a function it is also a static 
> object attached to the function object. As such mydata is a 
> single static object and effectively a single object in the 
> global space of objects. So repeated calls to funcname that 
> set mydata will result in the last calls values be stored into mydata.
> 
> With the anon function, you are actually creating multiple 
> functions each with its own mydata variable defined within 
> each anon function. The var statement DOES NOT work like it 
> does in C where the variable is created on the stack and is 
> unique to that function call at runtime.
> 
> Does this sound right?

No, not at all. (Sorry!)

The var statement DOES work just like a variable declaration in C. A
variable declared in a function is not attached to the function object. It
is created when the function is *called*, the same as in C, and free for
garbage collection when the function returns - unless there is an
outstanding reference to it as in the case of a closure. Even when there is
a closure, a variable is still specific to a single invocation of the
function in which it is declared.

Also, it makes no difference if a function is named or anonymous. The scope
rules are identical for either kind of function.

I'll go look at the original problem, but I just wanted to correct this
first.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] External or anonymous function - which is best?

[Michael Geary]

> $(document).ready(function(){
> 
>  function resizeDiv(that){
>   var x = $(that);
>   if(x.height() < 600){
>x.css("height","600px");
>   }
>  };
> 
>  $("#mydiv").each(function(){resizeDiv(this)});
> 
> });
> 
> My question: is it better to define this function as above 
> and pass "this" or to define an anonymous function within
> the .each statement? I read that the above method only
> has to compile the function once, as opposed to a re-compile
> each time the (anonymous) function runs.

Functions are compiled to bytecode once, not each time they are executed.
Maybe someone was talking about the Function constructor which takes a
string argument and does compile the function each time you execute the
constructor?

> What is the recommend way of doing this?

Well, there's certainly no reason to use *two* functions here. You could
write the code either with a single anonymous function or a single named
function, as shown in Jörn's two examples, whichever you prefer.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] OT: CSS Conditional Comments

[Michael Geary]

> > 

Re: [jQuery] OT: CSS Conditional Comments

[Michael Geary]

> }


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] JQuery in Google Maps Info Windows

[Michael Geary]

I'm not very familiar with InnerFade, but wouldn't you do this inside your
marker click handler, right after you call marker.openInfoWindowHtml? That's
when you have the list items available.

> I'm new to jQuery and am trying to figure this out, but was 
> wondering if anyone has had any luck embedding jQuery code 
> inside Google Maps info windows?  
> 
> I have an existing google map that parses coordinates and 
> descriptions for points from an xml file and have tried using 
> Innerfade ( http://medienfreunde.com/lab/innerfade/
> http://medienfreunde.com/lab/innerfade/ ) to rotate through a 
> list of images inside the info windows that appear when 
> points on the map are clicked.  
> 
> The points are created when the map is loaded (during page 
> loading) but I am unsure when/how to make the call to 
> innerfade?  Right now, I'm still calling the innerfade 
> function inside document.ready(), but I've tried placing that 
> code in various positions inside the load function.  Any ideas?  
> 
> Here is a link to my site... 
> http://www.derekandsarah.net/travel/chicago.php
> http://www.derekandsarah.net/travel/chicago.php 


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] make a div disappear after 2seconds?

[Michael Geary]

> > $(document).ready(function() {
> > setTimeout("divDisappear()", 2000); });
> >
> > function divDisappear() {
> > $('div#id').hide();
> > }

> Those should be equivalent:
> 
> $(function() {
> setTimeout("$('div#id').hide()", 2000); });
> 
> Or:
> 
> $(function() {
> setTimeout(divDisappear, 2000);
> });
> 
> function divDisappear() {
> $('div#id').hide();
> }

Or:

  $(function() {
  setTimeout( function () { $('div#id').hide(); }, 2000 );
  });

:-)

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] What tools should I use to troubleshoot jqueryproblems? (John Resig, jquery team, other gurus please share your tricks...)

[Michael Geary]

That's a nice trick, Jake - thanks for posting it!

Both approaches have their use. Your log plugin is great for console
logging, while breaking up the chain is great for interactive debugging
because you can set a breakpoint between lines.

-Mike

> Mike, I don't like breaking the chains... I just insert a 
> debug in the middle of the chain...
> 
> I use this for my debug:
> jQuery.fn.debug = function(message) {
>   return this.log('debug:' + (message || '')
> +"[").each(function(){jQuery.log(this);}).log("]");
> }
> jQuery.fn.log = jQuery.log = function(message) {
>   if (!message) message = 'UNDEFINED'
>   if (typeof message  == "object") message = jsO(message)
>   if(window.console && window.console.log) //safari
>   window.console.log(message)
>   else if(window.console && window.console.debug) //firebug
>   window.console.debug(message)
>   else
>   jQuery("body").prepend(message+ "")
>   return this
> }


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Trivial use

[Michael Geary]

The DOM updates immediately when you add new elements. But "updating the
DOM" does not mean "copying event handlers from deleted DOM elements to
newly added DOM elements". That appears to be the problem here: You need to
assign the click handler again after replacing the DOM element, because the
click handler was attached to a DOM element that you are deleting.

> If the DOM have been modified, the DOM should be refresh (or 
> the part of the modified DOM), it sound logical. How to force 
> jQuery to do it ?
> 
> let me illustrate :
> 
> If I update the content of my page using a jQuery method, I 
> can't access the new elements using jQuery. 
> document.getElementById works, document.getElementsByName 
> works, prototype' $() works, firebug list the new DOM 
> elements, but jQuery considers thoses elements does not exists...
> I can understand that jQuery needs the document to be ready 
> to trigger any event, but the event has already been declared 
> and the DOM is up-to-date so, the DOM as jQuery listed it is 
> supposed to be up to date too, isn't it ?
> Is there a reload DOM method I can call without having to 
> redeclare each handler I need ?
> 
> 2007/1/23, Joel Birch <[EMAIL PROTECTED]>:
> > What I said about the handler being attached more than once really 
> > only applied to the example we were working with. 
> Considering you are 
> > emptying the content now the previous .test will not exist 
> by the time 
> > you load the new one. Also, Jörn's advise about using 
> find() is good 
> > practice and will ensure that the handler is attached only to the 
> > .test elements it "finds" within the string you just appended.
> > You should be ok with something like:
> >
> > functiontestHandler() {
> > $(".test").change(function(){
> > alert(this.options[this.selectedIndex].text);
> > });
> > }
> >
> > $(document).ready(function(){
> > testHandler();
> > $(".trigger.fruits").click(function(){
> > $("#content").empty();
> > $("#content").append(' > class="test">apple > value="second">orange > value="third">peach')
> > .find(".test").each(testHandler);
> > return false;
> > });
> > $(".trigger.vegetables").click(function(){
> > $("#content").empty();
> > $("#content").append(' name="vegetables"
> > class="test">tomato > value="second">potatoe > value="third">carrot')
> > .find(".test").each(testHandler);
> > return false;
> > });
> > });
> >
> > I'm pretty sure that code can be optimised better than this though.
> > Also, about the parsing of the HTML - jQuery does do this 
> for you so 
> > don't worry about that.
> >
> > Good luck
> > Joel.
> >
> >
> > On 24/01/2007, at 12:34 AM, Laurent Goussard wrote:
> >
> > > If I well understood Joel and Jörn, I am suppose to 
> declare my event 
> > > handler each time I switch the #content's content, but this will 
> > > result to increment the alert() number each time the event is 
> > > declared... What a pity...
> > >
> > > I cannot really understand why jQuery does not add the 
> content newly 
> > > loaded to the existing DOM. I mean jQuery should parse and update 
> > > the DOM foreach .html method used (in append*, load, etc...), 
> > > shouldn't it ?
> > >
> > > I can't imagine I'm the only one who wanted to add jQuery 
> events on 
> > > html content loaded with jQuery. Am I ?


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] What tools should I use to troubleshoot jquery problems? (John Resig, jquery team, other gurus please share your tricks...)

[Michael Geary]

> Is there a way to just return the jquery object (so I could 
> see it in firebug's watch section) then pass it to another 
> jquery function then join them all up when I know
> everything works?
> 
>  $('#test :textarea').before('Current length: '+this.value.length+' characters').keypress(
function()
> { 
>  $('#'+this.id + '_len').css('color', ((this.value.length >
parseInt(this.id.split()[1]))?'red':'green')).html(this.value.length)
>  });

Yes, breaking up your chains is one of the first things do do when you're
having trouble. For example:

var $test = $('#test :textarea');
$test.before('Current length: '+this.value.length+' characters');
$test.keypress( function() { 
 var $len = $('#'+this.id + '_len');
 $len.css('color', ((this.value.length >
parseInt(this.id.split()[1]))?'red':'green'));
 $len.html(this.value.length);
 });

Now you'll find it easier to debug.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

[jQuery] Junior Programmers (RE: Proper OOP paradigm / please be friendly)

[Michael Geary]

> > From: Michael Geary
> > Just to clarify, my daughters don't actually read the 
> > jQuery list - yet. Their goal is to make an online
> > computer game for some of their friends to play.
> > Right now they're just learning about variables and 
> > loops and a bit of HTML and CSS. Hopefully they will
> > be among the youngest jQuery users soon.

> From: Mike Alsup
> Jeez Mike, way to make me feel even older. My eleven
> year olds haven't a clue what JavaScript is, but they're
> pretty good at linerider!  (http://www.linerider.com/)

Mike, not to worry, there are good odds that I'm older than you!

Never saw Linerider before, that is really cute. Will have to try it on the
tablet PC.

> From: Christopher Jordan
> How old are they Mike? I hope someday that I have kids
> who dig this stuff as much as I do. It'll be neat to see
> where they could take it. :o)

They're 10 and 11. We will see if they actually stick with it; they've only
done a little bit so far. What amazed me was that they actually took an
interest themselves. So far so good...

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Proper OOP paradigm / please be friendly

[Michael Geary]

> Guys, I don't appreciate the profanity. My 10 and 11 year old 
> daughters are learning JavaScript. I don't want them to be 
> subjected to language like that.

Just to clarify, my daughters don't actually read the jQuery list - yet.
Their goal is to make an online computer game for some of their friends to
play. Right now they're just learning about variables and loops and a bit of
HTML and CSS. Hopefully they will be among the youngest jQuery users soon.
:-)

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Proper OOP paradigm / please be friendly

[Michael Geary]

>   // this is .n much too complicated!

Guys, I don't appreciate the profanity. My 10 and 11 year old daughters are
learning JavaScript. I don't want them to be subjected to language like
that.

When you've offended some people already, offending more is probably not the
best way to fix it. :-)

Still friends, just please keep the language clean,

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] click and dblclick-problem

[Michael Geary]

> but i think that there should be a click or dblClick event 
> (depending on the doubleclick delay
> parameter) but *never* both. if i doubleclock to slow, the 
> this results in two clicks, but if i click fast enough then 
> this shold trigger a doubleClick event and no single click.

The only way for this to work would be if click events were automatically
delayed by the double-click interval. GUI designers tried this 20 years ago
and it didn't work then any better than it would now. It makes the
application feel too unresponsive. (Sorry!)

> does anyone know a system where a dblClick produces two 
> additional click events? i don't think so. So as to simultate 
> common behavior click and dblClick should not happen together.

Are you saying that a double-click is giving you *two* click events plus the
dblclick event? That shouldn't happen. You should get one click and one
dblclick. Can you post a sample page showing this behavior?

> > You can avoid doing the click action by using setTimeout in the 
> > click() handler for say 400ms, and only execute the click action
> > if the timer expires. Your double-click handler should cancel 
> > the timer and perform the double-click action. You cannot make
> > the click timeout shorter than the double-click time, which in
> > Windows is configurable by the user. So don't try to make the
> > click timeout short.

Don't do this! You don't know what the double-click interval is, so there is
no way you can do it reliably.

Instead, rethink your design. Proper GUI behavior is that if you handle
double clicks, then whatever action you take on a single click should not
interfere with the double-click action.

The classic example is in the Mac Finder and Windows Explorer with default
settings: A single click selects, and a double click opens. Selecting the
object on the single click does not interfere with opening it on the double
click.

If you *must* have a click event cause a destructive action, then you'll
need to do your own double-click processing completely. Don't use the
dblclick event at all; instead watch the time and mouse location of click
events to decide what is a double click.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] what's the difference betweendocument.getElementById('id') and $('#id') ?

[Michael Geary]

> Now that it is laid out in front of me it's pretty obvious, 
> but when you come into the thing cold, these things are not 
> obvious. I think it would be a good idea to explicitly state 
> what the object is, and that $ refers to it (I think that's 
> right ... now I mention it I'm not quite sure if $ is an 
> object reference or an operator ... ) - anyhow just a bit of 
> clarification of the basics.

It's neither of the above. :-)

$ is not an operator. In JavaScript, the $ character can be used in names in
the same way as a letter.

$ is also not a "jQuery object" or a reference to one. at all. It is a
*function* that returns a jQuery object.

A good way to think of the $ function is that it's just like a constructor
function (e.g. Date or Array), except you don't use the "new" operator with
it, you just call it.

Consider this code:

  // Give the $ function a more self-explanatory name
  var createQueryObject = $;

  // Create a query object for a specified query string
  var myQueryObject = createQueryObject('#test');

  // Call a method of the query object
  myQueryObject.hide();

That is the same as:

  $('#test').hide();

Note also that $ and jQuery (used as a name in JavaScript code) are the same
thing. So you could also write this code as:

  jQuery('#test').hide();

Or:

  var myQueryObject = jQuery('#test');
  myQueryObject.hide();

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] what's the difference between document.getElementById('id') and $('#id') ?

[Michael Geary]

> (If there is a better way to look at the Object, please post here)

The very best way to understand what JavaScript code is going and explore
objects is to use any JavaScript debugger, such as Firebug or Venkman for
Firefox, or the Microsoft Script Editor for IE.

If you don't have a JavaScript debugger that you are comfortable with,
you're working too hard! :-)

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Testing for presence of ID

[Michael Geary]

> A jQuery object is an array of 1 or more objects.

Not exactly... A jQuery object is an array of *zero* or more objects. If no
elements match the selector, you'll get an empty array.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] IDs of all checked checkboxes

[Michael Geary]

> > > var a[];
> > > $(':checkbox').each(function() {
> > > if (this.id) a.push(this.id);
> > > });
> > > 
> > > 

> > I get this error:
> > missing ; before statement
> > var a[];
> > 
> > (curse my rudimentary javascript skills!)

> OK... It says there is a missing ; before the statement "var a[];".
> 
> What is before the "var a[];"?

Ah, forget my question. I wasn't paying attention! Should be "var a = [];",
of course.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] IDs of all checked checkboxes

[Michael Geary]

> > var a[];
> > $(':checkbox').each(function() {
> > if (this.id) a.push(this.id);
> > });
> > 
> > 
> 
> I get this error:
> missing ; before statement
> var a[]; 
> 
> (curse my rudimentary javascript skills!)

OK... It says there is a missing ; before the statement "var a[];".

What is before the "var a[];"?

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] How to get element when it's ID contains bank space.

[Michael Geary]

> > Scripting on top of an invalid HTML document won't make 
> > your life easier (obviously). I'd try to replace spaces given
> > by the user to "_" in the backend.

> > And then do what with underscores given by the user?

> Come on, that was just an idea. You can leave underscores the 
> way they are for example. Or you could also just remove the 
> blanks instead. But if you're able to change the backend 
> anyway, it would be better to simply not allow white-space 
> and validate the user input.

I like it when visitors put quote marks and angle brackets and stuff in
these ID fields. It makes for a much more interactive environment when they
can run their own code!

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] 1 Function, Multiple Events?

[Michael Geary]

> Thanks for the assistance. Yes, I was basically trying to 
> assign a click and dblclick to the same function (to prevent 
> users from double-clicking and firing the func twice).

Hmm... If you assigned both click and dblclick to the same function, then
the function *would* be called twice on each double click. Remember, a
journey of two clicks begins with a single click.

> However, after looking into it a bit more, i think that the 
> $("p").one("click", fun.is a better fit here.

Sure thing, if that's what you want to do: run on the first click inside any
p tag, and never again.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] List of jQuery-Powered Sites

[Michael Geary]

Forgot to add us to the list...

Zvents:
http://www.zvents.com/

This is a Rails site and we completely replaced prototype.js with jQuery and
our own code. We're using thickbox, a homegrown autocompleter, my DOM
plugin, and lots of custom code.

This also puts jQuery on our partner sites:

The Boston Globe:
http://calendar.boston.com/

The Denver Post:
http://denverpost.zvents.com/

Contra Costa Times:
http://contracostatimes.zvents.com/

San Jose Mercury News:
http://mercurynews.zvents.com/

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] 1 Function, Multiple Events?

[Michael Geary]

> if have some thing like this that is called by document.ready():
> 
> function init_top_level() {
>   $(".top_folder").click(function(i) {
>   // Do a ton of stuff here
>   });
> }
> 
> I not only want to assign the "click" event to my ".top_folder"
> elements, but assign "dblclick" as well. I know I could always
> break my "Do a ton of stuff here" out as a separate function
> and assign it from 2 separate $(".top_folder").click and
> $(".top_folder").dblclick. Is there an easier way to do this?
> Something like:
> 
> function init_top_level() {
>   $(".top_folder").click AND 
>   $(".top_folder").dblclick(function(i) {
>   // Do a ton of stuff here
>   });
> }

I don't understand what you want to do. Jörn's answer assigns the exact same
function to the click and dblclick events. Surely that is not what you want,
is it - having click and dblclick do the same thing? Keep in mind especially
that every dblclick event is preceded by a click event, so you'd be calling
the function twice.

So can you explain in a little more detail what you want to do here?

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Passing values to a custom function

[Michael Geary]

Do you want getPost to be called during the execution of initialiseForm, or
later in response to the 'submit' event? For the latter, use this (added
code in red):
 
function initialiseForm(formId) { 
 $(formId).bind('submit', function() { getPost(formId) } );
}

-Mike


  _  

From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Dan Eastwell
Sent: Monday, January 08, 2007 4:24 AM
To: jQuery Discussion.
Subject: [jQuery] Passing values to a custom function


Hi again,

following up my previous post where I was trying to bind a function to a
submit event, I'm now trying to pass values from the function that returns a
function to the bound submit event.

I've a number of forms on a page, that perform a variety of functions, some
similar. I'm trying to create a custom function that posts a checkbox
variable, but within the context of the function that returns a function, I
can't pass the variables across. 

If I put an alert(formName); etc, in the postCheckbox function, it confirms
the values are being passed across, but alert(document.formName.tagName); ,
for example, gives 'undefined'. 

Why does the function not abstract out in this case? 

Many thanks,

Dan.

$(document).ready(function(){
initialiseForm("#PollX");
initialiseForm("#PollY");
initialiseForm("#RateX");
});

function initialiseForm(formId) { 
 $(formId).bind('submit', getPost(formId));
}

function getPost(formId) {
 return function() {
 switch(formId){
case "#PollX":
postCheckbox("PollX", "PollXGroup", "div#PollXDiv", "
PollXresults.php?PollXRadio=")
return false;
break;
case "#PollY":
//do something else
return false;
break; 
case "#RateX":
// do more things
postCheckbox("RateX", "RateXGroup", "div#RateXDiv",
"RateXresults.php?RateXRadio=")
return false;
break;
default:
return false;
}
 };
}

function postCheckbox(formName, radioGroupName, replacementBlock, postURL){ 
for (var i=0; i < document.formName.radioGroupName.length; i++) {
if (document.formName.radioGroupName[i].checked){
var radioValue = document.formName.radioGroupName[i].value;
} 
}
if(radioValue){
$(replacementBlock).load(postURL + radioValue).fadeIn("slow");
}
}


-- 
Daniel Eastwell

Portfolio and articles:
http://www.thoughtballoon.co.uk

Blog:
http://www.thoughtballoon.co.uk/blog 

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] setting an attribute... I *thought* this was how to doit...

[Michael Geary]

Chris, it's like this... ;-)
 
$() returns a jQuery object, which is an array of DOM elements with jQuery
methods that apply either to the entire array or to the first element in the
array, depending on the method.
 
One of those methods is .each(), which loops through the DOM element array
and calls your function on each one, setting "this" to the individual DOM
element.
 
So, inside a $().each( ... ) function, "this" refers to a specific DOM
element. You can call DOM methods on that element and access its attributes
and properties using ordinary JavaScript.
 
You can wrap a DOM element with $(element) to get a jQuery object containing
that single DOM element. You can then call jQuery methods on that object.
 
In many cases, you can use either one interchangeably. Inside an each()
function, these would do the same thing:
 
   alert( this.innerHTML );
 
   alert( $(this).html() );
 
as would these:
 
   alert( this.id );
 
   alert( $(this).attr('id') );
 
Naturally, the first one of each of these pairs is faster and is recommended
in most cases.
 
-Mike



Mike, thanks so much for the advice! :o)

I guess I'm still fuzzy on when I can use 'this' as opposed to '$(this)'. I
would love to use this.myAttr, but didn't think I could. I really, really
appreciate you re-writing my code snippet to show me what you're talking
about. I know that the 'this' vs. '$(this)' discussion was had not too long
ago, but I didn't (or couldn't) pay too much attention at the time. If you'd
rehash it for me, or point me to the old thread, I'd appreciate that too!
:o)

Cheers,
Chris

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] setting an attribute... I *thought* this was how to doit...

[Michael Geary]

> $(function(){
> 
> $("div.OrderEntryListRow").not(".Selected").each(function(i){
> alert("before: " + $(this).attr("id"));
> $(this).attr("id", "Row_" + (i+1));
> $(this).html($(this).html() + ': ' + (i+1));
> alert("after: " + $(this).attr("id"));
> });
> 
> });

Any time you see that much repetition in a piece of code, you should think,
"That might be expensive - let's do it once instead of many times."

So the first response would be to call $(this) only once:

$("div.OrderEntryListRow").not(".Selected").each(function(i){
var $this = $(this);
alert( "before: " + $this.attr("id") );
$this.attr( "id", "Row_" + (i+1) );
$this.html( $this.html() + ': ' + (i+1) );
alert( "after: " + $this.attr("id") );
});

But we can do even better here. There's no reason to use .attr() and .html()
at all:

$("div.OrderEntryListRow").not(".Selected").each(function(i){
alert( "before: " + this.id );
this.id = "Row_" + (i+1);
this.innerHTML += ': ' + (i+1);
alert( "after: " + this.id );
});

That is both faster and much simpler.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Another simple question...

[Michael Geary]

this.id = 'NewValue';
alert( this.id );



I've got another simple question. Is this not how you set an element's
attribute? [from inside an .each()]

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] dynamic loading of jquery.js into my web page

[Michael Geary]

> > That looks really dodgy, sorry.
> >
> > What if the browser downloads script and script2 at the 
> > same time, and script2 finishes first?
> 
> It doesn't. script2 is not downloaded at all, it is like a 
> inline script.

Ah, I wasn't paying close enough attention to the code. :-)

> As you might know scripts are evaluated in the 
> order they are in the HTML code, that is that script will be 
> evaluated before script2 is.

Interesting - is that guaranteed even when the scripts are added
dynamically?

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Dynamically removing an inline script block

[Michael Geary]

That would remove all script tags, but it sounds like that won't help.

Removing a script tag is just a memory optimization - it may free up the
memory that the script's source code took. It won't unexecute the JavaScript
code that has already been run, and it won't undo any DOM changes that the
code made.

There are several ways to delete the DOM nodes that COOLjsTree inserted, of
course - I wouldn't know which to suggest without seeing the page. The real
question may be whether the COOLjsTree code will freak out if you remove its
DOM nodes behind its back.

Or I may have misunderstood the problem...

-Mike

> $('script').remove();
> 
> Should do the trick right? Assuming that you put that before 
> the call to Mike's function (which probably adds script tags). 

> > I'm seeking help in dynamically REMOVING an inline script 
> > block within the head tags.
> > 
> > My current application involves a case study editor, wherein 
> > users add/delete/edit branches to a decision tree. The visual 
> > representation of the tree is generated by COOLjsTree
> > (http://javascript.cooldev.com/) and is loaded into the page 
> > as an inline script inside the head tags.
> > 
> > I want to be able to dynamically delete the script block 
> > containing the "old" tree, and replace it with a "new" block 
> > immediately after a branch is added/deleted.
> 
> > I'm using Michael Geary's code
> >
(http://www.nabble.com/Dynamically-loading-scripts-tf1913101.html#a5237431)
> > to load the new script block as needed.  I'm stumped, 
> > however, as to how I can dynamically delete the existing 
> > ("old") script block.  (In a previous version of the 
> > application I used frames and the problem didn't exist - I 
> > just refreshed the frame page in which the tree resided - but 
> > I'm now using a frameless approach and that option isn't 
> > available now)


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] break in $.each

[Michael Geary]

> > Andreas, if I remember correctly, the following should work:
> >
> > $.each(object, function() {
> >
> >  return false;
> > });

> That isn't supported. The necessary code was removed due to 
> unsolved problems. Actually the stuff that Michael just 
> posted would help a lot to solve it, though I'm not sure if 
> it is even possible, due to the Function.apply usage.

The code I posted does solve this problem completely - simply use objectEach
instead of $.each, and change your callback function to take explicit
parameters instead of using "this".

Using "this" in an object iterator doesn't make much sense anyway. You need
two arguments (name and value) regardless, and the code is much more
understandable when they are both named parameters.

$.each should be regarded as a jQuery internal function only - there's no
reason to use it when it's so easy to write your own, more straightforward
iterator.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] dynamic loading of jquery.js into my web page

[Michael Geary]

 

> > I'm afraid that I simply don't take Safari users into 
> > account. Hardly a great thing, but I focus on three
> > browsers: Firefox and IE7, and then IE6.
> > In that order. The work I do is targetted at corporate
> > users who run Windows 2000 and Firefox, and all the
> > JS work I do is for those users.

> Then your solution is almost OK for you. Here is a usable
> version ;-)
> 
> (function() {
>   var addScriptCounter = 0;
> 
>   function addScript( url, callback ) {
> var script = document.createElement( 'script' );
> script.myLoadHandler = callback;
> script.id = 'dynamicallyLoadedScript_'+addScriptCounter;
> script.type = 'text/javascript';
> script.charset = 'utf-8';
> script.src = url;
> 
> var script2 = document.createElement( 'script' );
> script2.type = 'text/javascript';
> script2.charset = 'utf-8';
> script2.appendChild(
>   document.createTextNode(
> '(function(){'+
>   'document.getElementById(\'dynamicallyLoadedScript_'+
> addScriptCounter+'\').myLoadHandler();})()';
>   ));
> 
> var head = document.getElementsByTagName('head')[0];
> head.appendChild( script );
> head.appendChild( script2 );
> 
> addScriptCounter++;
>   }
> })()
> 
> Usage:
> 
> addScript('jquery.js', function() {
>   alert('horay, jQuery is available');
> });
> alert('jQuery is not necessarily available here');
> 
> The second script tag will be evaluated after the first one 
> has been loaded and evaluated. At least that works for all
> browsers I have tested with, except those Safari versions
> and very old browsers without a usable DOM implementation. 

That looks really dodgy, sorry.

What if the browser downloads script and script2 at the same time, and
script2 finishes first?

Instead, simply edit your copy of jquery.js and add one like of code at the
end of the file, to call a "ready" function that you've defined in your
already-running code. If you have jQuery plugins that your code depends on,
merge them all into jquery.js and add that function call at the very end.

Hmm... This would make a nice patch for jQuery itself - when it concatenates
all the files to make the various "dist" versions, add this line to the end
of the merged code:

window.jQuery_onload && jQuery_onload();

John et al, what do you think?

-Mike

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] break in $.each

[Michael Geary]

> Would you like an Array iterator that works the way you'd 
> expect? Here is a simple one:
> 
> Array.prototype.each = function( yields ) {
> for( var i = 0, n = this.length;  i < n;  i++ ) {
> if( yields( this[i], i ) === false )
> break;
> }
> };
> 
> Then you can code:
> 
> [ "one", 2, "three", new Date() ].each( function( value ) {
> if( value === 2 ) return false;
> console.debug( value );
> });
> 
> No "this", no monkey business with Object.
> 
> If you don't want to extend Array.prototype, you can code a 
> similar standalone function. It's really a very simple 
> function, so there's no real reason to compromise with one 
> that doesn't work the way you want.

Speaking of which, here are standalone functions with test cases for objects
and arrays:

function objectEach( obj, fn ) {
for( var name in obj )
if( fn( obj[name], name ) === false )
break;
}

function arrayEach( ary, fn ) {
for( var i = 0, n = ary.length;  i < n;  i++ )
if( fn( ary[i], i ) === false )
break;
}

objectEach(
{ a:'ay', b:'bee', c:'see' },
function( value, name ) {
return confirm( name + ': ' + value );
}
);

arrayEach(
[ 'ay', 'bee', 'see' ],
function( value, index ) {
return confirm( index + ': ' + value );
}
);

Click the Cancel button in any of the confirm() message boxes to return
false and stop the iteration.

Why are the callback function arguments in the order ( value, name/index )
instead of the seemingly more intuitive ( name/index, value )? It's because
in the case of an array, you often want only the array values, so you can
code the callback as function( value ) { ... }.

These functions use simple argument passing instead of apply() and "this",
which makes them easier to code and much easier to understand. That also
avoids the problem we saw earlier where "this" in the $.each callback is
converted to an Object, and it means they work in any version of JavaScript.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] break in $.each

[Michael Geary]

> Done a test (requires Firebug - or Firebug lite (which I presume would
> also work)).
> 
> var foo = ["one", 2, "three", new Date()];
> $.each(foo,
>   function()
>   {
>   if(this === 2) return false;
>   console.log(typeof this);
>   }
> )
> 
> This logs:
> 
> ["o", "n", "e"]
> 2
> ["t", "h", "r", "e", "e"]
> Thu Jan 04 2007 13:09:12 GMT+ (GMT Standard Time)
> 
> To the console, rather than just:
> 
> "one"
> 
> typeof(this) within $.each always returns 'object', so identity
> comparison doesn't work (you have to use == instead of ===)

$.each() uses Function.apply() to set "this" for the callback function.
Function.apply() converts its first argument to Object. That's why ===
doesn't work.

> Also, why does a string get returned as an array instead of a string?

It's not being passed as an array, it's being passed as an Object. Firebug
sees that the Object has a .length property and assumes it's an array. If
you use alert() instead of console.log() you'll see something closer to what
you expect.

Would you like an Array iterator that works the way you'd expect? Here is a
simple one:

Array.prototype.each = function( yields ) {
for( var i = 0, n = this.length;  i < n;  i++ ) {
if( yields( this[i], i ) === false )
break;
}
};

Then you can code:

[ "one", 2, "three", new Date() ].each( function( value ) {
if( value === 2 ) return false;
console.debug( value );
});

No "this", no monkey business with Object.

If you don't want to extend Array.prototype, you can code a similar
standalone function. It's really a very simple function, so there's no real
reason to compromise with one that doesn't work the way you want.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Having an issue accessing a node.

[Michael Geary]

> ...since the spec requires name and ID to be 
> identical, it's technically illegal to have a name with "[" 
> and an ID as well (since IDs cannot contain "["). 

Um, where does it say the name and id have to be the same?

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Having an issue accessing a node.

[Michael Geary]

> $('#blog[headline]').val('newvalue');
> 
>  value="" />
> 
> It seems i cant access the node for [] in the name breaks the 
> ability to access it unless i am doing something wrong?

[] are not valid characters in an id attribute:

http://www.w3.org/TR/html4/types.html#type-name

Browsers and jQuery don't necessarily enforce this, but there are no
guarantees that anything will work when there are invalid characters in an
id.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] dynamic plugin loading

[Michael Geary]

> From: Michael Geary
> 
> If you're just trying to load a stylesheet dynamically, all 
> you need to do is this...

Just to be clear, I wasn't disparaging jsPax!

It just depends on whether you need a full-featured package system or a
simple loading function.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] dynamic plugin loading

[Michael Geary]

If you're just trying to load a stylesheet dynamically, all you need to do
is this:

function addSheet( url, doc ) {
doc = doc || document;
var link = doc.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = url;
doc.getElementsByTagName('head')[0].appendChild(  link );
}

Similarly, you can load a script with:

function addScript( url, doc ) {
doc = doc || document;
var script = doc.createElement( 'script' );
script.type = 'text/javascript';
script.charset = 'utf-8';
script.src = url;
doc.getElementsByTagName('head')[0].appendChild( script );
}

-Mike

> > I'm trying to develope a small piece for dynamic loading in jquery, 
> > wich loads the .js and .css source files on the fly without any 
> > special markup in the html page.
> 
> For .js files you can use jspax (www.jspax.org). I use it to 
> load jQuery and plugins on demand (actually I made it for 
> that purpouse at the beginning). 
> For .css I just had that question from a friend of mine and 
> made a small set of jsPax-packages for him:
> 
> ---cssloader.js
> $using('xBrowser.simulateXMLHttpRequest',function() {
> $package('cssloader', {
> base: '/',
> load: function(css) {
>       var x = new XMLHttpRequest();
>       x.open('GET',cssloader.base+css+'.css');
>       
>   x.onload = function() {
> var e = document.createElement("style");
> e.type="text/css";
> 
> e.appendChild(document.createTextNode(x.responseText));
> document.getElementsByTagName("head")
> [0].appendChild(e);
>   };
>   x.send('');
> }
> });
> });
> ---
> 
> ---xBrowser/simulateXMLHttpRequest.js
> var impl = 'native';
> if( !window.XMLHttpRequest ) impl = 
> (window.ActiveX)?'activex':'iframe';
> $using('xBrowser.simulateXMLHttpRequest.'+impl,function() {});
> ---
> 
> ---xBrowser/simulateXMLHttpRequest/native.js:
> $package('xBrowser.simulateXMLHttpRequest.native',{});
> ---
> 
> ---xBrowser/simulateXMLHttpRequest/activex.js:
> var lib = /MSIE 5/.test(navigator.userAgent) ? "Microsoft" : 
> "Msxml2"; window.XMLHttpRequest = function() {
>   var rval = new ActiveXObject(lib + ".XMLHTTP");
>   rval.onreadystatechange = function() {
>     if(x.readystate == 4) rval.onload();
>   };
>   return rval;
> };
> $package('xBrowser.simulateXMLHttpRequest.activex',{});
> ---
> 
> use them like this:
> 
> $using('cssloader', function(){
> cssloader.base='https://www.example.com/styles/';
> cssloader.load('mywonderfull');
> ...
> });
> 
> I have not tested the code, but he did not complain up to now ;-)
> 
> > The problem is that it seems that the browser doesn't wait 
> until the 
> > script (the plugin) is finished loading
> 
> Yes, you are using assynchronous XMLHttpRequests. JsPax does 
> that as well, but it can cope with that by usein callback 
> functions. JSAN does use synchronous XMLHttpRequests to 
> circumvent that problem.


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] msie closures syntax

[Michael Geary]

"this" doesn't work like a local variable. Inside a nested function, "this"
is not the same as in the outer function. That's what is messing things up.

If I understand your code, you can write it more simply like this:

(function($) {
$.fn.Tooltip = function(settings) {
var $all = this;
settings = $.extend($.extend({}, arguments.callee.defaults),
settings || {});
$all.filter('[EMAIL PROTECTED]').bind( settings.event, onmouseover );
return this;

function onmouseover( event ) {
//...
setTimeout(
function() { 
on( $all.attr('id'), $all.attr('ttbody'),
event.pageX + settings.xoffset,
event.pageY + settings.yoffset
);
}, settings.ondelay );
//...
}

function on( mysrcid, body, x, y ) {
// do stuff...
}
};
})(jQuery);

But now that it's simple enough for me to understand, one question comes to
mind: Do you use this plugin only with a single element, e.g.
$('#foo').Tooltip(), or can it use multiple elements, e.g.
$('.foo').Tooltip()? The two attr() calls inside the setTimeout don't look
right for multple elements.

-Mike

> well, i need to pass some arguments to doStuff() that seem to 
> be out of scope when it fires.
> 
> to clarify, below is the relevant snippet of my real code 
> with your variant applied:
> 
> snip
> 
> (function($) {
> $.fn.Tooltip = function(settings) {
> settings = $.extend($.extend({}, arguments.callee.defaults),
settings || {});
> 
> $(this).filter('[EMAIL PROTECTED]')
> .each(function() {
> this.tSettings = settings;
> })
> .bind( settings.event, onmouseover );
> return this;
> };
> 
> //...
> 
> function onmouseover( event ) {
> //...
>  //
>  // firebug throws "this.tSettings has no properties" on the
next line
>  // (when the timeout fires)
>  //
>  setTimeout(
> function() { 
> on( $(this).attr('id'),
> $(this).attr('ttbody'),
> event.pageX + 
> this.tSettings.xoffset,event.pageY + this.tSettings.yoffset
>   );
>  }, this.tSettings.ondelay );
> //...
> }
> 
> function on( mysrcid, body, x, y ) {
> // do stuff...
> }
> 
> //...
> 
> })(jQuery);
> 
> snap
> 
> as you may have guessed i'm tampering with the tooltip plugin 
> and am probably missing something obvious...


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] msie closures syntax

[Michael Geary]

Not only not related to jQuery, but not related to closures either. :-)

The problem is that setTimeout doesn't accept the additional arguments you
are passing it.

Is there any reason you can't do this:

setTimeout( function() { doStuff( "stuff", 1, 2 ); }, 100 );

That would work in any browser.

-Mike

> i hope someone on this list can help me here, even tho
> my question is not directly related to jquery (duck).
> 
> i have trouble getting my closures to work in ie:
> 
> 
> --snip
> 
> //
> // A) this doesn't work in ie (ff & opera grok it)
> //
> setTimeout(  function( a,b,c ) { doStuff( a,b,c ) }, 100, 
> "stuff", 1, 2  );
> 
> 
> //
> // B) this works in IE
> //
> var fref = iehelper( "stuff", 1, 2 );
> setTimeout( fref, 100 );
> 
> function iehelper( a,b,c ) {
> return ( function() {
> doStuff( a,b,c );
> });
> }
> 
> --snap
> 
> 
> anyone know how to feed that to ie without
> the nasty helper function?


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] (no subject)

[Michael Geary]

Try this (untested):
 
$(function() {
   $('.y').html( (new Date).getFullYear() );
});
 
-Mike
 
p.s. Could we avoid profanity on the mailing list? Thanks.


  _  

From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Kristaps Ancans
Sent: Tuesday, December 19, 2006 12:44 AM
To: discuss@jquery.com
Subject: [jQuery] (no subject)


Ok i'm a newbie in jquery and i'm trying to write function that will replace
all  element's content with current year.
 
My function looks like this:
 
$(function(){
 $(".y").ready(function() {
  var today = new Date();
  var year = today.getFullYear();
  document.write(year);
 });
});

but when i run it - it replaces all the document with current year. In which
place my mistake is ? 
-- 
FYFI - for your fucking information 

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Remove from JSON

[Michael Geary]

Goodness, I didn't mean for the answer to shame or humble you! :-)

There was nothing wrong with the question, just wanted to show a way to
track down the answer.

-Mike

> Slightly ashamed.
> Very good answer, I'm humbled. Thank you.

> > Well, JSON is just a notation. Once you evaluate it, it's 
> > not JSON any more. It's a JavaScript object. It doesn't
> > matter whether the object started out as JSON notation,
> > or was built up using other JavaScript code, it works the
> > same either way.
> >
> > Those entries in the object are called properties. So that 
> > means the question is really, "How do I delete a property
> > from a JavaScript object." That leads to a useful search:
> >
> > 
> http://www.google.com/search?q=remove+property+from+javascript+object


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Remove from JSON

[Michael Geary]

> > I suppose this touches on off topic, but ... is it possible 
> > to remove an entry completely from a JSON hash?
> >
> > say I have
> > {
> > firstString: 'first',
> > secondString: 'second'
> > }
> >
> > and evaluate this into a json object, and I want to remove 
> > firstString, could I do something like 
> > json.remove(json.firstString); 

> I think
> 
> json.firstString = null
> 
> or
> 
> delete json.firstString
> 
> work (although IIRC delete is not supported by IE 5.5 or earlier).

"json.firstString = null" does not delete the property. It merely sets its
value to null.

delete json.firstString actually deletes the property. It is supported by
every browser that jQuery supports.

For IE, the delete operator goes back to JScript 3.0, which was implemented
in IE 4.0.

Here is a handy chart that shows IE version support for JavaScript features:

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/ht
ml/440f4924-f7a9-48e0-873e-bd599a93b437.asp

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Remove from JSON

[Michael Geary]

> I suppose this touches on off topic, but ... is it possible 
> to remove an entry completely from a JSON hash?
> 
> say I have
> {
> firstString: 'first',
> secondString: 'second'
> }
> 
> and evaluate this into a json object, and I want to remove 
> firstString, could I do something like 
> json.remove(json.firstString); ?

Well, JSON is just a notation. Once you evaluate it, it's not JSON any more.
It's a JavaScript object. It doesn't matter whether the object started out
as JSON notation, or was built up using other JavaScript code, it works the
same either way.

Those entries in the object are called properties. So that means the
question is really, "How do I delete a property from a JavaScript object."
That leads to a useful search:

http://www.google.com/search?q=remove+property+from+javascript+object

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Dynamically added "click" registration always returns the last value added

[Michael Geary]

You're using the variable "j" to hold a reference to each element of the
jobs array as you go through the loop. After the loop finishes, "j" is a
reference to the last element of that array.

Later, when the click function gets called, "j" still refers to that last
element - regardless of which element triggers the event.

You need to keep track of each of those elements separately. The easiest way
to do that is with a closure.

Also, you don't want to use "for in" to iterate over an array. Use a C-style
loop instead. So, you could code this:

   for( var i = 0, n = json.jobs.length;  i < n;  i++ ) {
  (function( job ) {
 // ...
 $("#editJob" + job.jobID).click(function() {
alert(job.jobID);
 });
  })( json.jobs[i] );
   }

The inner function captures a separate "job" variable for each instance of
the loop, so when the click function gets called later, it will have the
correct reference. (I took the liberty of changing the name from j to job
just to make the example more clear - I always think of "j" as an index
variable like "i".)

Even better, jQuery has an iterator function you can use to simplify the
code:

   $.each( json.jobs, function( i, job ) {
  // ...
  $("#editJob" + job.jobID).click(function() {
 alert(job.jobID);
  });
   });

Again, each click function will use its own copy of the job variable - not
because of any jQuery magic, but simply because of the use of the inner
function. $.each just runs the loop for you.

-Mike

> The < a > tag that was in the "var div" line got rendered as 
> an actual link. 
> Here it is again with spaces to prevent it from being 
> rendered as a link:
> 
> var div = " style='display:inline;font-weight:normal'>" + j.companyName + 
> " | <  a href='#' id='editJob" + j.jobID + "'>edit<  /  a>";
> 
> > I'm parsing this JSON:
> > 
> > {"result":"success","successText":"Your changes have been saved 
> > 
> successfully.","errorText":"","memberID":"49","mode":"edit","jobs":[{"
> > 
> jobID":"1","companyName":"SAIC"},{"jobID":"2","companyName":"Aspentech
> > "},{"jobID":"3","companyName":"Cardinal
> > Health"}]}
> > 
> > ...with this Javascript:
> > 
> > $("#panelManageJobView").empty();
> > 
> > for (var i in json.jobs)
> > {
> > var j = json.jobs[i];
> > var div = " id='jobTitle" + j.jobID + "'
> > style='display:inline;font-weight:normal'>" + j.companyName + 
> > " |  # edit ";
> > div += " id='jobEdit" + 
> > j.jobID
> > + "'>";
> > if (i > 0)
> > {
> > div = " " + div;
> > }
> > $("#panelManageJobView").append(div);
> > 
> > //now register click event on edit link
> > $("#editJob" + j.jobID).click(function() {
> > alert(j.jobID);
> > });
> > }
> > 
> > Everything works fine, and is added to the page correctly.  I even 
> > viewed the generated HTML and confirmed that the ID's are 
> > correct on each div that gets appended.  However, when I click on
> > the "edit" link next to each item, the alert always shows the last
> > "jobID" that was received in the JSON - "3" in this example.  I'm
> > expecting to get "1" if I click the first edit link, "2" if I click the
> > second, and so on.
> > 
> > Any ideas what I'm doing wrong?


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] passing functions

[Michael Geary]

> I had to do something similar today, and I did something like
> 
> function myfunction(f){
>  $(element).click(function(){eval(f+"();");});
> }
> that was off the cuff, but that should work.

That would be the ticket if f is a string containing the name of a function.

But why not just pass a function reference around directly? Then you could
simply do:

  function myfunction(f){
  $(element).click(f);
  }

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Trouble with $(expr, context) and iframe documents

[Michael Geary]

> From: Adam Skinner
> 
> I'm trying to reference an element from within an iframe.
> 
> The following normal javascript code works:
> 
>   var iframeDoc = window.frames[iframeName].document;
>   var data = iframeDoc.getElementById(iframeElement);
> 
> I'm trying to jqueryize the "data" variable as follows (using 
> the actual element id name for the time being):
> 
>   var d2 = $("#inside_iframe_element",iframeDoc);
> 
> This just yields [], however.  How do I refer to an element 
> within the iframe?

Take a look at the code that handles the # selector in jQuery and you will
see why this doesn't work:

if ( m[1] == "#" ) {
// Ummm, should make this work in all XML docs
var oid = document.getElementById(m[2]);
r = ret = oid ? [oid] : [];
t = t.replace( re2, "" );
} else {

It's using a hard coded document.getElementById() instead of using the
document you provide.

The best way to work around this for the moment would be to continue to use
your own iframeDoc.getElementById() call but simply wrap the result in a
jQuery object:

var d2 = $( iframeDoc.getElementById(iframeElement) );

If you're doing a lot of these, of course it would make sense to wrap it up
in a function:

function $frame( doc, id ) {
return $( doc.getElementById(id) );
}

And then you could use:

var d2 = $frame( iframeDoc, iframeElement );

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Thickbox + ads + FF = broken..

[Michael Geary]

Try the svn version of jQuery. I had the same problem with 1.0.3 and the svn
version fixed it.

Let me know if that doesn't do it - next thing to check is the onload
handler.

> I'm having trouble with thickbox on pages that also have banner ads.. 
> I've made two examples:
> 
> http://dev.twokings.eu/dev/jquery/index.html (google ad) 
> http://dev.twokings.eu/dev/jquery/index2.html (tradedoubler ad)
> 
> These have jquery 1.0.3 (unpacked) and thickbox 2.1.
> 
> The pages give the following results:
> 
> Safari(mac): OK
> IE (win): OK
> FF (win/mac): b0rken
> Opera (win/mac): b0rken
> 
> In FF I get the following cryptic error message: "Permission 
> denied to get property Window.nodetype"
> In Opera I get: "security error: attempted to read protected variable"
> 
> Is this something i'm doing wrong, or is it a bug in Thickbox/jquery?
> 
> Best regards, Bob.
> 
> ps. In FF you might have to disable adblock, otherwise the 
> examples will work as expected.


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] [OT] Firefox 2.0 Annoying Errors

[Michael Geary]

> Thanks Mike and Jake. I will try the uninstall and reinstall. 
> Sounds like that might help. I had thought of doing just 
> that, but it seemed a little heavy handed but hey, if it 
> works that would be great.

On the contrary, the uninstall and reinstall is about the least heavy-handed
thing you can do. It takes all of two or three minutes and doesn't require
any detective work.

OK, back to jQuery... :-)

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] [OT] Firefox 2.0 Annoying Errors

[Michael Geary]

> > This has nothing to do with jQuery, but I'm hoping that some of you 
> > might have seen this and figured out how to make it go away. I have 
> > googled for it, but nothing helpful showed up.

> not jquery. I get a bunch of errors each time  I start up ff 
> 2... they don't recur. do yours?

Did you try this: Uninstall FF2, kill any remaining Firefox processes in
Task Manager, and reinstall FF2.

I had a bunch of problems when I upgraded and that fixed them. One of the
other problems I had was missing bookmarks, which led me to this page where
I found the reinstall tip:

http://kb.mozillazine.org/Lost_bookmarks

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] closure and name conflict

[Michael Geary]

> From: Michael Geary
> > Also, that comma after the } shouldn't be there. It looks like you 
> > picked up the use of the comma from object literals...

> From: Jörn Zaefferer
> Actually there is a single "var" at the top, therefore the 
> problem must be somewhere else... My fault, I should
> remove that stuff from the tooltip.

Ah! I missed that. So the whole thing is one long "var" statement.
Interesting approach, and it explains what really went wrong in epaulin's
code.

Note my other comment:

> Finally, you're missing a semicolon after "settings" in the 
> "var" list at the top. That won't affect anything unless you 
> try to run the code through a packer to compress it - then 
> you may have errors.

Here's a stripped down version of the entire plugin:

(function($) {

var
...
modalCloseBtn,
settings  /* missing semicolon, I thought */

plugin = $.fn.Modal = function(defaultSettings) {
...
},

modal_handle = function(event) {
...
},
modal_parse = function() {
...
},
...
modal_close = function(event) {
...
};

plugin.defaults = {
event: "",
after: null,
...
shadowOffset: 5
};

})(jQuery);

So what was *really* missing here was a comma, not a semicolon - because the
function definitions were all supposed to be part of that one "var"
statement.

Instead, the JavaScript interpeter sees that it can't parse the code as is,
and it inserts a semicolon after "settings" - thus cutting off the function
definitions from the "var" statement.

The code still runs, but all those assignments have become globals instead
of locals. Oops!

I think I would change it to this:

(function($) {

var
...
modalCloseBtn,
settings;

var plugin = $.fn.Modal = function(defaultSettings) {
...
};

function modal_handle(event) {
...
}

function modal_parse() {
...
}

...

function modal_close(event) {
...
}

plugin.defaults = {
event: "",
after: null,
...
shadowOffset: 5
};

})(jQuery);

Or maybe just:

(function($) {

var
...
modalCloseBtn,
settings;

$.fn.Modal = function(defaultSettings) {
...
};

function modal_handle(event) {
...
}

function modal_parse() {
...
}

...

function modal_close(event) {
...
}

$.fn.Modal.defaults = {
event: "",
after: null,
...
shadowOffset: 5
};

})(jQuery);

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] closure and name conflict

[Michael Geary]

> I really have no idea what is the correct name(I'm not a  
> javascript guru), handle is a function in function(or jQuery?) scope?
> You know , i just copy your code structure. xD
> 
> Demo page:
> http://61.191.26.228/jQuery/plugins/modal/test.html

Your functions named plugin, modal_handle, modal_parse, modal_display,
modal_load, modal_after_load, modal_error, modal_resize, parseQuery, and
modal_close are all defined like this:

   theName = function() {
  ...
   },

There are two mistakes there. The functions are globals, when you probably
want them to be local. The fact that they are global is what was causing one
to overwrite another with the same name.

Also, that comma after the } shouldn't be there. It looks like you picked up
the use of the comma from object literals such as:

   var foo = {
  oneFunction: function() { ... },
  anotherFunction: function() { ... },
  andAnother: function() { ... }
   };

These functions should be defined with either:

   var whatever = function() {
  ...
   };

Or:

   function whatever() {
  ...
   }

The latter is probably a better choice because it's simpler.

Finally, you're missing a semicolon after "settings" in the "var" list at
the top. That won't affect anything unless you try to run the code through a
packer to compress it - then you may have errors.

I didn't look at the code in any great detail other than that.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] getScript error

[Michael Geary]

> > Why not use document.createElement("script") !?

> Because we want jQuery to wait until the script is loaded and 
> evaluated, so it's possible to do something upon completion, 
> like continuing the normal flow of the program. This is 
> necessary for example for writing a require like the one in PHP.

You can't do that, and you wouldn't want to if you could. JavaScript doesn't
work that way. If you were successful in getting JavaScript to wait until a
script is loaded, the entire browser would be locked up in the meantime.

What you *could* do is something like this:

   require( script, completion );

e.g.

   require( 'test.js', function() {
  // This code runs when the script is loaded
   });

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] OT: fQuery

[Michael Geary]

> From: Steven Wittens
> ...
> Implementing a jQuery like query system has opened up a whole 
> new way of dealing with forms in Drupal. It's a really cool 
> technique. The best part is that it's relatively easy to 
> adapt the code to custom structures, as the parsing is 
> separate from the operators. It's easy to insert your own 
> tree structure and define custom operators (e.g.  
> filesystem queries where you use pathnames + filename meta data).
> 
> Has anyone else tried something like this? The jQuery 
> architecture is definitely useful beyond DOM. I'm thinking if 
> a bunch of people get together, we could make such custom 
> "xQuery" systems easy to develop and use. I guess XPath is 
> something similar, but I honestly don't know how much it's used ;).

Very nifty, Steven.

Here's another jQuery-inspired system: Why the Lucky Stiff has written an
HTML munger in Ruby called Hpricot, which uses a jQuery-like syntax to
manipulate the HTML element tree:

http://code.whytheluckystiff.net/hpricot/

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Off topic: which programming language for webdevelopment

[Michael Geary]

> Our company is looking for a way for 'quick' web-development. 
> Small webapps consisting of a few webpages with some minimal 
> database interaction.
> 
> We currently develop everything in Java (including webapps), 
> but I find the whole cycle of developing, compiling (java 
> class files, EJBs etc), deploying, JNDI setup, db resource 
> setup and recompilation (of the jsps) too heavy. 
> Additionally, for applications with a limited number of users 
> (50 would be a huge userbase in this case), I think that a 
> clustered multitier application server (our current 
> deployment platform) is w too complex.
> 
> I would like to propose a (any?) scripting language as alternative.

Since you're currently a Java shop, it may be helpful to read about what
some leading Java developers (Bruce Tate, David Geary, etc.) are doing.

http://www.google.com/search?num=100&q=java+ruby+rails+tate+geary

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Next generation WYSIWYG editor... maybe? am Imissing something?

[Michael Geary]

> I'm no expert for lincenses. But I remember that jQuery had 
> to be dual-licensed to allows the Drupal guys to integrate 
> jQuery into their core. Dunno why that was necessary or what 
> the idea is behind it.

Only GPL code is allowed in the Drupal repository. Don't ask why! It just
is. (There have been many long debates on drupal.org if you're
interested...)


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] jQuery 1.1 by the end of Nov

[Michael Geary]

> > But, I would be sad to see .click, .hover,  and .toggle go away, if 
> > they are among the "helper" functions you plan to put into a an 
> > external plugin. They just make so much more sense than "bind" to 
> > people new to programming/javascript/jQuery.

> I am not a fan of "bind" either, I'm sure it was inherited 
> from the other frameworks that use it. I would prefer .on() 
> and .un() (or perhaps .no()? ) because they're short and a 
> bit more intuitive.

.on() sounds like a winner to me. Not sure about .un(), but I don't have a
better idea - and .un() is certainly better than .no().

> To me, click is a verb and it's not intuitive to be setting a 
> click handler with the word click. 

Same here. Especially when the function is overloaded so that .click() [with
no args] *is* a verb, i.e. it triggers the click event. Nasty!

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] parsing JSON with $.each

[Michael Geary]

> From: Kevin Old
> 
> I'm parsing some json successfully below, but I'd like to be 
> able access the contents of the json object like 
> "this.["id"]" or "this.["name"]".
> 
> function processData(json) {
> $.each(json, function(i) {
> $("#names").append("ID: " + this[0] + " Name:
> " + this[1] + " Passwd: " + this[2] + " Url: " + this[3] + "" );
> }
> );
> }
> 
> Just wondering if anyone knows how to do it that way.

Well, you don't really "parse" JSON. By the time you look at it, it's just a
JavaScript object, so you have to access it using whatever JavaScript
corresponds to the way that object is structured.

It sounds like your json object is an array of arrays, e.g.

[
[
"my id",
"my name",
"my password",
"my url"
],
[
"your id",
"your name",
"your password",
"your url"
]
]

Is that correct?

To use it the way you want, it needs to be an array of objects instead:

[
{
"id": "my id",
"name": "my name",
"password": "my password",
"url": "my url"
},
{
"id": "your id",
"name": "your name",
"password": "your password",
"url": "your url"
}
]

Then your code could read:

function processData(json) {
$.each(json, function() {
$("#names").append(
"ID: " + this.id +
" Name: " + this.name +
" Passwd: " + this.password +
" Url: " + this.url +
"" );
});
}

Or, for better performance in most browsers:

function processData(json) {
$.each(json, function() {
$("#names").append( [
"ID:", this.id,
"Name:", this.name,
"Passwd:", this.password,
"Url:", this.url,
""
].join(' ') );
});
}

If you can't change the format of the JSON data you're receiving, but you
still want to use the more convenient this.id instead of this[0], you can
convert it to an array of objects yourself. Let me know if you'd like sample
code for that.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Object vs. Array looping

[Michael Geary]

> In the .css method an array is created by: 
> 
> d = ["Top","Bottom","Right","Left"];
> 
> Then it is looped through using object looping:
> 
> for ( var i in d ) { 
> 
> This probably isn't a problem for most people, but we have 
> added functions to the Array prototype, so whenever the .css 
> method is used it dumps the text of all those functions into 
> the CSS and bloats the code considerably.  I made the 
> following patch and tested it. It seems to work fine: 
> 
> Index: jquery.js
> ===
> --- jquery.js(revision 575)
> +++ jquery.js(working copy)
> @@ -1472,7 +1472,7 @@
>  if ( p == "height" || p == "width" ) { 
>  var old = {}, oHeight, oWidth, d =
["Top","Bottom","Right","Left"];
>  
> -for ( var i in d ) {
> +for ( var i = 0; i < d.length; i++ ) {
>  old["padding" + d[i]] = 0;
>  old["border" + d[i] + "Width"] = 0;
>  }

Yeah, I noticed that a while ago too. I was going to commit a fix but never
have had much luck with svn on jquery.com.

I like doing it this way, but either one would work the same:

if ( p == "height" || p == "width" ) { 
var old = {}, oHeight, oWidth, d = { Top:1, Bottom:1, Right:1,
Left:1 };

for ( var w in d ) {
 old["padding" + w] = 0;
 old["border" + w + "Width"] = 0;
 }

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Why won't this work?

[Michael Geary]

> So...the lesson is...the jquery.js file always has to be 
> included for the jQuery code to work and it has to be 
> referenced first...correct?

It doesn't have to be *first*, but it does have to be before any code that
uses jQuery.

Think about it this way... Would this code work:

   alert( x );
   var x = 1;

Probably not! :-)

Script files are loaded in the order they appear in the code, so just as
that example wouldn't work, trying to use jQuery functions before they are
loaded won't work either.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] How do I add a js array of jquery objects toajqueryobject?

[Michael Geary]

> > From: Michael Geary
> > Yeah, all that DOM creation will take a while - especially 
> > if you use a convenience plugin like mine.
> >
> > I get much better performance across browsers with
> > [].join('') and innerHTML.

> From: Dave Methvin
> There don't seem to be that many situations where DOM 
> creation is the performance bottleneck though. Probably the 
> one one where I've seen a real difference is using ajax to 
> fill a large table. Even in this case it turned out to be a 
> $(".class") selector in a loop and not DOM creation. One 
> trick I've used that speeds up DOM creation is to create an 
> element and then use .cloneNode on it rather than create a 
> new one each time.

Good point. The first thing to look for when optimizing jQuery code is $()
selectors being needlessly called in a loop. That is probably by far the
most common problem.

It was funny that in my whole discussion of building HTML strings and using
innerHTML, I mentioned "save a reference" and that turned out to be the
solution, completely unrelated to all the other stuff I was suggesting.

OTOH, in my own code, even after I optimized all the jQuery stuff, innerHTML
performed much better than DOM creation - it was several times faster for a
day picker widget with a lot of nested elements.

In my case, much of the overhead was actually my DOM creation plugin. When I
first experimented with innerHTML, I changed the DOM creation plugin to
generate HTML instead of DOM elements, and it was hardly any faster! Then I
went to straight HTML text with [].join('') and it was several times faster.

> Most of the comparisons between innerHTML and DOM are 
> inherently unfair because the innerHTML examples don't guard 
> against malformed HTML strings.
> If a user enters a special character like a quote, the string 
> doesn't parse properly. With innerHTML there's the risk of 
> cross-site scripting attacks as well if input is being 
> accepted from the user, the URL, or unfiltered database results. 

Ah! Good reminder! I'd better check over my code with a fine-tooth comb! :-)

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] How do I add a js array of jquery objects to a jqueryobject?

[Michael Geary]

> From: Andrea Ercolino
> 
> I have got an array of 50 urls templates, and want to make a 
> proper url out of each one, adding also a special click, and 
> then append all these urls to a div in a specific position. 
> All this should be done many times in a page, "many" could be 
> 50, just to say something that could be possible, but it's 
> really an unpredictable number of times. (well, less than a 
> 100 is a good guess)
> 
> I think the problem lies in the dom creation. 
> Each link is inside 4 nested divs, so this could mean 80 
> bytes each (adding structure and data).
> At only 3 divs ( x 50 = 150 appends ) I'm experimenting a 
> delay of a couple of seconds for reloading the page, and for 
> this test the page has no content other than those divs!

Yeah, all that DOM creation will take a while - especially if you use a
convenience plugin like mine.

I get much better performance across browsers with [].join('') and
innerHTML.

Here's a design pattern I use all the time. I threw in some arbitrary divs
and spans to show how the nesting works out.

// Return HTML rendering for an array of strings
function renderAll( array ) {
var inner = [];
for( var i = 0, len = array.length;  i < len;  i++ ) {
inner[inner.length] = renderOne( array[i], i );
}

return [
'',
'',
inner.join(''),
'',
''
].join('');
}

// Return HTML rendering for a string item
function renderOne( item, i ) {
return [
'',
'',
item,
'',
''
].join('');
}

A test call could be:

$('#testdiv').html( renderAll( [ 'one', 'two', 'three' ] ) );

This same basic pattern works for tables, or anything where you have nested
and repeated elements. It works in just about any browser - even very old
ones, thanks to the use of inner[inner.length] instead of inner.push(). And
it's very fast - much faster than the same DOM operations.

Obviously you could replace the [].join('') with ordinary string
concatenation, but the array join is faster on most browsers.

The one big drawback is that you don't automatically get references to the
objects you're creating. With DOM creation, you can save references to your
objects, making it very fast to get to those objects later. To make up for
this, you can assign unique IDs in the HTML code as the example does.

Obviously you could extend this all sorts of ways. In my actual code, the
"item" is usually an object and not a string, and the renderOne function
builds up HTML from that object's properties.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Elements aren't expanding when appending new children

[Michael Geary]

One more comment... As you probably figured out from looking at the
generated source, the culprit is likely to be the animation code, which sets
those unwanted attributes when it animates an item.

So one good test would be to remove all animation and see if it generates
better code.

It will also make the interface more usable. The animation that's there now
doesn't serve any purpose, and it's confusing. The elements shouldn't be
zooming down to a point and then re-expanding. When I move a physical object
it doesn't do that.

Instead, if you want some useful animation, show the element moving from its
old position to its new one, without any unnecessary size changes.

-Mike

In other words, the animation should help show what is actually happening,
> My problem is that, when moving elements right (iow creating 
> a new ul as a child to an existing li), the parent element is 
> not expanding, so the newly created ul is overlapping with 
> other elements.
> 
> Just look at my example page:  http://xcite-online.de/tests/jquery1/
> http://xcite-online.de/tests/jquery1/ .


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Elements aren't expanding when appending new children

[Michael Geary]

> I moved "Testnode" up and then moved it to the right, then 
> used FireBug's Inspect tool to reveal the generated HTML. 
> This is what I saw:

Actually I left out part of it by mistake. Here's the entire UL:




















"node2" is the one I moved up and then to the right.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Elements aren't expanding when appending new children

[Michael Geary]

When you have a problem like this, your first thought should be to look at
the generated HTML using Microsoft's DevToolBar in IE or either FireBug or
View Source Chart for Firefox.

I moved "Testnode" up and then moved it to the right, then used FireBug's
Inspect tool to reveal the generated HTML. This is what I saw:

 
 
 
 
 
 
 
 
 ...

Do you see what went wrong? :-)

-Mike

> My problem is that, when moving elements right (iow creating 
> a new ul as a child to an existing li), the parent element is 
> not expanding, so the newly created ul is overlapping with 
> other elements.
> 
> Just look at my example page:  http://xcite-online.de/tests/jquery1/
> http://xcite-online.de/tests/jquery1/ .
> 
> The code is  
> http://snipplr.com/view/1649/jquery-and-uls-on-the-flow/ here 
> , the important part is this:
> $("../..",this).next().append(" class='item'>foo");


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Element tagName

[Michael Geary]

> From: Truppe Steven
> 
> my view of the things is a big different. I think jquery 
> should stay as small as possible so adding functions for 
> basic dom attributes is a bit overhead i think ..

I agree. How do you decide which of the many DOM attributes to turn into
jQuery methods? All of them? Especially if they have different names than
the DOM attributes. That is just confusing, unless the idea is that someone
should be able to program only in jQuery and never have to touch the actual
DOM.

If you compare these:

$(foo).tag()

$(foo)[0].tagName

The first looks shorter, but if we make it fair and use the same name:

$(foo).tagName()

$(foo)[0].tagName

Then it's not much of a win.

Hmm... Using the same name makes it confusing. Do I use parens after tagName
or not? But using two different names makes it confusing too. Do I spell it
tag or tagName? Is tag the same as tagName, just a passthrough, or does it
do some actual processing ala .html()?

I just don't see the value here. (No offense to anyone who likes it!)

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] OO programming is confusing to old functional programmers

[Michael Geary]

I don't think this approach will work quite the way you'd like. In your
example:

> // I access my plugin via:
> $("#myMap").Map({  });
> 
> // later I can access a public function on this object like:
> $("#myMap").Map.recenter(x, y, dxy);

Those two $("#myMap") calls are going to result in different jQuery objects.
How does the recenter() method know it applies to the Map object you created
earlier?

OTOH, you could easily get this to work:

 // Create a map object for an element
 var map = $("#myMap").Map({  });
 // later I can access a public function on this object like:
 map.recenter(x, y, dxy);

But before I make any more specific suggestions, does your Map object always
relate to a single map as in your example, or could one Map object relate to
multiple maps, e.g.

 // Get a Map object that controls every map with class anyMap
 var maps = $('.anyMap').Map();
 // Recenter all the maps
 maps.recenter( x, y, dxy );

-Mike

> From: Stephen Woodbridge
> 
> OK, How much of this is right?
> 
> jQuery.Map = {
>  // this is a public global attribute?
>  // ie: global across all instances of jQuery.Map
>  whatever : null,
> 
>  // a public function
>  init : function(options)
>  {
>  // this is the jQuery search collection
>  // self is a private pointer to the collection
>  var self = this;
> 
>  // another private variable scoped to the function
>  var _maph = 0;
> 
>  // an public attribute, accessed via $("#map").Map._maph
>  this._maph= 0;
> 
>  // a method, accessed via $("#map").Map.recenter(x,y,dxy)
>  this.recenter = function(x, y, dxy)
>  {
>  console.log("calling recenter()");
> 
>  };
> 
>  return this.each(
>  function(options) {
> 
>  // this is each respective object in the collection
>  // this is a DOM object not a jQuery object
> 
>  // here I can modify the DOM, bind events, etc
> 
>  };
>  };
> 
> // This extends jQuery with my plugin
> jQuery.fn.extend(
>  {
>  Map : jQuery.Map.init
>  }
> );
> 
> // I access my plugin via:
> $("#myMap").Map({  });
> 
> // later I can access a public function on this object like:
> $("#myMap").Map.recenter(x, y, dxy);
> 
> Is this right? I probably have some terminology mixed up.
> 
> -Steve
> 
> ___
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/
> 


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Since updating to 1.0.3 & converting to getJSON

[Michael Geary]

> And to make it valid JSON, you have to quote all keys anyway 
> (using double quotes):
> 
> { "asJSON": 1, "class": "jlink", "id": htmlDoc }
> 
> http://json.org/

Naw, that wouldn't be valid JSON. JSON doesn't allow named references like
htmlDoc.

But this object doesn't need to be JSON anyway. It's just an object literal
being passed into a JavaScript function call. From the original message:

   $.getJSON(
  "./ajax/json.php",
  { asJSON: 1, class: "jlink", id: htmlDoc },
  function(json) {  });

Quote the "class" and it should be good.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Element tagName

[Michael Geary]

> > From: Laurent Yaish
> >
> > I couldn't find a way using jQuery to get the tagName of an element.
> >
> > Let's say I have this:
> >
> > test
> > $('span').parent().tag() would return 'div' 

> From: Brandon Aaron
> 
> You could do two things ... write yourself a plugin that 
> would look something like this:
> 
> jQuery.fn.tag = function() {
>   return this[0] ? this[0].tagName : null; };

That would certainly do the trick. I can't resist a little code
optimization... :-)

jQuery.fn.tag = function() { return this[0] && this[0].tagName; };

> or you could just do it like this:
> 
> $('span').parent().get(0).tagName

Or:

  $('span').parent()[0].tagName

Although here I can see where one might prefer the .get(0) for clarity - not
sure which I like better.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Plugin Release: Tooltip

[Michael Geary]

> > From: Michael Geary
> >
> >  (function($) {
> > // plugin code here
> >  })(jQuery);

> From: Sam Collett
>
> I've seen that used before, but can it have memory leak
> or other issues?

Sorry about the very slow reply, Sam.

That's a good point. The use of the closure could result in memory leaks
depending on what the rest of the code does. They should be fixable -
closures in and of themselves don't cause leaks, but they can result in
circular references to DOM objects in IE. It would be good to test this and
make sure it doesn't cause a leak.

> Does it work on all modern browsers (and not so 
> modern - IE 5), included those on PDA's etc (not
> that jQuery supports portable devices).

Yes, closures are standard JavaScript and work in every version of
JavaScript since 1.1 or 1.2, I forget which.

> What happens if 'jQuery' is undefined?

Then you'll get an error when it tries to call the closure function with the
jQuery argument. Of course, the same thing would occur if you coded a plugin
the traditional way:

   jQuery.fn.foobar = function() {};

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] return this.each

[Michael Geary]

Sorry about the slow reply, guys. Been a busy week!

> From: Rexbard
> 
> Mike, I already knew the mechanics of this, but I got caught 
> up in your description and had to read your entire post.
> 
> Beautifully written, Mike. This has to be the clearest 
> description of the jQuery vs. DOM variables that I have seen. 
> I hope this gets put on the site's FAQs pages (although I 
> surprisingly don't see any FAQ page on jQuery right now. Any 
> plans for one?).
> 
> Again, great job, Mike!

Wow, thanks for the kind words, John.

> From: "Jörn Zaefferer"
>
> The jQuery wiki is as open as it can be, so please just go 
> ahead and add whatever you like! New content can be improved 
> by others, but nothing can't be improved.
> 
> It would be great to see more people writing stuff for the wiki.

> From: Brandon Aaron
> 
> This excellent explanation should probably be on learningjquery.com.

> From: Karl Swedberg
> 
> Any objections, Mike? If not, I'll post it for you.

I'm flattered! Actually, though, I would prefer to post it to my own blog.
I've been neglecting the blog lately, and I may as well post something I've
already written. :-)

Once that's done, feel free to follow up with some comments on
learningjquery.com if you like. I'll add a version of the writeup to the
wiki as well.

Thanks again, I'm glad to know that little writeup may help straighten out
some of the confusion around "this" and jQuery vs. DOM objects.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] this.name

[Michael Geary]

> why doesn't this work:
> 
> $('#text-field').val(this.name);

What is "this"? You haven't given it a value. So it depends on the context
of this code. If the code is not in an object method, then "this" is the
window object.

> when this does:
> 
> $('#text-field).click( function() { alert(this.name); } );
>   ? did i find a bug?
> 
> also: what does 'this' refer to? the jquery object, right?

Now your reference to "this" is inside a function, specifically an event
handler. jQuery follows the same practice as the native DOM: inside an event
handler, "this" is the DOM element associated with the event. That's why you
can do this.name.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] return this.each

[Michael Geary]

> From: Simon Corless
> Thanks for the help Mike, it's starting to come together. 
> I've been testing it just now.
> 
> If I do use return this.each() then how do I reference the 
> jQuery methods? without this.hover() etc? Obviously as this 
> is no longer what I am expecting this.hover (as you say) 
> fails. So do I use my 'self' variable or another way?

If you are calling each(), that means your plugin may operate on more than
one element, right? If you do "var self = this;" outside the each() call,
that is a reference to the entire jQuery object - an array of all the DOM
elements. The reason you would call each() is to operate on those elements
one by one. So in most cases that 'self' isn't what you want inside the
each() inner function.

In that inner function 'this' is the individual DOM element, so if you want
a jQuery object for that element, use $(this).

Let's try some more descriptive names instead of "self" and "this":

(function( $ ) {
$.fn.twiddle = function() {
var $all = this;
$all.each( function() {
var element = this, $element = $(element);
// Now we have:
//   $all - jQuery obect for all matching elements
//   $element - jQuery obect for a single element
//   element - a single element itself
});
};
})( jQuery );

Now you can write the entire plugin using meaningful names. In practice, I
tend to use shorter names like e and $e instead of element and $element, but
I used the longer ones here to make it more descriptive.

Remember that if the plugin doesn't need to work on the individual DOM
elements but only uses jQuery methods on the whole collection, then you
don't need an each() loop at all.

Contrast a plugin that sets all matching elements to the same random color:

(function( $ ) {
$.fn.twiddle = function() {
var $all = this;
$all.background( randomColor() );
};
})( jQuery );

vs. a plugin that sets each matching element to a different random color:

(function( $ ) {
$.fn.twiddle = function() {
$all.each( function() {
var element = this, $element = $(element);
$element.background( randomColor() );
});
};
})( jQuery );

Note the use of the $ prefix to indicate that a variable is a jQuery object,
and the use of matching names with and without the $ when you have both a
DOM element and a matching jQuery object for that element only. A similar
use of this pattern is:

var $foo = $('.foo'), foo = $foo[0];

This is for typical non-plugin code where you're starting with a query.
Instead of writing code like this:

$('.foo').zip();
// more code
$('.foo').zoom();
// more code
$('.foo').fly();

You'd write:

var $foo = $('.foo');
$foo.zip();
// more code
$foo.zoom();
// more code
$foo.fly();

In this case we're not using any DOM methods, so we only use $foo and not
foo.

> I thought I saw someone just using 
> .hover() (without any prefix) but this just fails.

You probably saw code like:

$('.foo')
.zip()
.zoom()
.fly();

That's a single line of code split into multiple lines. It's the same as:

$('.foo').zip().zoom().fly();

> I don't fully understand the difference, currently I don't 
> use any dom methods I just use jQuery (I partly thought
> that was the point of it? - Although I realise sometimes
> you need to go deeper).

jQuery doesn't try to provide its own equivalent of every possible DOM
property and method, so it's pretty handy to be able to mix and match when
you need to.

> Basically I have 3 internal functions defined in two ways as:
> 
> nextItem = function ()
> or
> function pause()
> 
> Am I right in thinking that nextItem() could be called 
> through a jQuery chain and that pause() can only be called 
> internally from my plugin? Or are they both the same just 
> written differently?

Those are just different ways of writing functions - they have little or
nothing to do with how a function can be used.

For example, these are essentially identical, creating functions in the
current scope:

   var foo = function(){};

   function foo(){}

If I left off the "var", the first one would create a global function:

   foo = function(){};

That is usually a mistake, as it is in your code - your nextItem should be
either:

   var nextItem = function()...

or:

   function nextItem()...

The latter would be more consistent with the rest of your code, so that's
what I'd use.

Another coding tip or two...

You have several places with code like this:

   settings['blank']

That's OK, but you can substitute the simpler:

   settings.blank

I would change this code:

if (items[i]['link']) {
self.html("" + items[i]['item'] + "");
} else {
self.html(items[i]['item']);
}

to:

var item = items[i];
if (item.l

Re: [jQuery] Plugin Release: Tooltip

[Michael Geary]

> From: Paul McLanahan
> 
> The only suggestion I have deals with displaying the tips 
> close to the right side of the screen.  You do an excellent 
> job of handling the width of the tip when it is close to the 
> right edge of the window, but if a word is too long inside of 
> the tip it will push outside of the viewable area and cause 
> the horizontal scroll bar to appear.  I would suggest that 
> you attempt to detect that situation and flip the tip so that 
> it shows to the left of the pointer when it is too wide to be 
> completely within the window.

Great idea, and it's not too hard to do, like on this page for example:

http://denverpost.zvents.com/venues/show/13197

When you hover over any of the map pins, a tooltip-like window appears. If
there isn't room on the right, it goes on the left instead. Similarly, if
there isn't enough room below the pin, the tip moves up. (But I just noticed
a bug - I meant to move the tip so that its bottom lines up with the bottom
of the little box around the pin, like the way the top of the tip lines up
with the top of the box normally - but it's badly misaligned. It works OK in
the horizontal direction.)

All I had to do to make this work was first generate the tip in its normal
bottom-right position and then see if it overflows the visible area of the
window. If it does, then I move it to the left or up. The tip window's
offsetHeight and offsetWidth are available at this point, and the browser
won't actually render the tip window until the JavaScript code stops
executing - so it does no harm to first generate it in one position and then
move it to another.

I use this code to get the viewport (visible rectangle of the window). I
think I saw similar code in one of the jQuery plugins:

viewport: function() {
var e = document.documentElement || {},
b = document.body || {},
w = window;

return {
x: w.pageXOffset || e.scrollLeft || b.scrollLeft || 0,
y: w.pageYOffset || e.scrollTop || b.scrollTop || 0,
cx: min( e.clientWidth, b.clientWidth, w.innerWidth ),
cy: min( e.clientHeight, b.clientHeight, w.innerHeight )
};

function min() {
var v = Infinity;
for( var i = 0;  i < arguments.length;  i++ ) {
var n = arguments[i];
if( n && n < v ) v = n;
}
return v;
}
}

In the returned viewport, cx and cy are the width and height (old habit of
using Windows naming conventions here!), and x and y are of course the left
and top. Then, after generating the popup window, I compare its offsetLeft,
offsetTop, offsetWidth, and offsetHeight against the viewport and move it as
needed.

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Plugin Release: Tooltip

[Michael Geary]

> > http://bassistance.de/index.php/jquery-plugins/jquery-plugin-tooltip/

> A suggestion - perhaps you should use 'jQuery' instead of '$' 
> as isn't that the convention for plugin authoring?

The code does use jQuery instead of $. Jörn used the trick I suggested a
while back to get the best of both worlds - convenient coding with $ but not
using the global $. Note the function wrapper:

 (function($) {
// plugin code here
 })(jQuery);

-Mike


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/