[jQuery] live() or click
hi on document load i have to attach the click event to certain
elements.
performance wise whats better to use?
LIVE()
$(#container ul li).live('click', function(e) {}
EVENT DELEGATION
$('#container ul li').click(function(e) {
if ($(e.target).is('li')) {...}
});
thanks pete
[jQuery] Re: jQuery Ajax SUCCESS: using 'THIS'?
hitch could do this.
http://higginsforpresident.net/js/jq.hitch.js
http://higginsforpresident.net/js/jq.hitch.min.js
...
'success': jQuery.hitch(this, function(msg){
alert($(this).attr('id'));
}),
...
Regards
On Fri, May 1, 2009 at 12:48 PM, phpdevmd phpde...@gmail.com wrote:
Hello, I have the following jquery ajax request:
html
head
script type=text/javascript src=jquery-1.3.2.min.js/script
/head
body
a href=# id=yt1Approve/a
script type=text/javascript
/*![CDATA[*/
jQuery(document).ready(function() {
jQuery('#yt1').click(function(){
$(this).replaceWith(iApproving.../i);
jQuery.ajax({
'type':'POST',
'data':'id=205',
'dataType':'text',
'success':function(msg){
alert($(this).attr(id));
},
'url':'/approve/article',
'cache':false
});
return false;
});
});
/*]]*/
/script
/body
/html
First replaceWith working fine, link changes to 'Approving', but alert
saying 'undefined' instead of 'yt1'...
Any ideas acessing this link in a script where I don't know exactly
what id does this link have?
I know that alert($(#yt1).attr(id)); would work, but 'yt1' is auto-
generated by my framework, so I need to access it without $(#_id_)
but using 'this' or any other appropriate method.
Thanks in advance.
Roman
[jQuery] Re: jQuery Ajax SUCCESS: using 'THIS'?
You need to copy the reference to your link to a variable like this:
jQuery('#yt1').click(function(){
$(this).replaceWith(iApproving.../i);
var aObj = $(this);
if you are going to suggest this, go ahead and teach a good practice
of not creating a new jq object unnecessarily:
.click(function(){
var aObj = $(this);
aObj.replaceWith(i.../i);
ajaxCrap(...);
});
Regards,
Peter
[jQuery] Re: Animate Variable Concatenate Help
$(this).animate({ width: mywidth + px });
think:
var newwidth = {
width: mywidth + px
}
Regards
On Thu, Apr 30, 2009 at 5:54 PM, paper_robots mresto...@gmail.com wrote:
I'm trying to get the width of an element, animate it bigger, then
shrink it back to normal size on hover. Here's my function:
$('a.slider').hover(function(){
var mywidth = $(this).width();
$(this).animate({width: 240px});
}, function(){
$(this).animate({width: +mywidth+px});
});
The line I'm having trouble with is:
$(this).animate({width: +mywidth+px});
I know its not concatenated right, but I tried a few ways and couldn't
get it to work. What am I doing wrong? Thanks in advanced!
[jQuery] Re: Cross server check if a pdf file exists
it's a regular url (www.somesite.com/somepdf.pdf) and it seems to be
adding that '?jsonp_callback=?' with the code i have above.
I'm trying to do it without server-side script.
Has anyone tried this?
On Apr 22, 4:49 pm, James james.gp@gmail.com wrote:
Oh, and to answer your question, I think when your results are not in
the format specified for jsonp, regardless of whether the file exists
or not it will still go to the error callback.
By the way, what is the 'url' that you're using? Are you adding the '?
callback=?' I've never tried this out, before though.
On Apr 22, 10:46 am, James james.gp@gmail.com wrote:
I personally suggest, instead, you set up a server-side script on your
own server that checks the remote file for you. Then you can use AJAX
to call that script to get the results.
On Apr 22, 10:30 am, switch13 peter.w...@gmail.com wrote:
I'm trying to see if a pdf file exists in a directory on another
server. If it does, do one thing, if not do another.
Here's what I tried:
$.ajax({
url: url,
type: 'GET',
dataType: 'jsonp',
jsonp:'jsonp_callback',
error: function () {
$('.Row').eq(i).children('td:eq(2)').append(file_unavail);
},
success: function(){
$('.Row').eq(i).children('td:eq(2)').append(file_avail);
}
});
I can get it to work on the same server by removing the dataType and
jsonp but I was search around and read that the jsonp would allow me
to get around the Access to restricted URI denied code: 1012
I'm I doing something wrong? Is it possible to do what I'm asking with
jQuery?
[jQuery] Re: Adding scope support to .bind()
I'm not sure what all is involved/required for calling .unbind() to be
honest. Wouldn't it just be this._input.unbind('change') ?
or are there additional parameters required? If it needs a fn
reference, that's what hitch() returns ...
var cb = $.hitch(this, _change);
this._input.bind('change', cb).ubind('change', cb);
Again, pardon my ignorance of the bind/unbind pattern.
Regards,
Peter
On Fri, Apr 10, 2009 at 5:52 AM, Azat Razetdinov razetdi...@gmail.com wrote:
this._input.bind('change', $.hitch(this, _onInputChange));
How do you unbind the ‘hitched’ method?
On Apr 8, 11:04 pm, pete higgins phigg...@gmail.com wrote:
My hitch() method does this kind of:
http://higginsforpresident.net/js/jq.hitch.js
It would look like:
this._input.bind('change', $.hitch(this, _onInputChange));
Regards,
Peter Higgins
On Wed, Apr 8, 2009 at 12:03 PM, gregory gregory.tomlin...@gmail.com wrote:
the only difficulty I am having with
Balazs Endresz's approach (which I have also
implemented in my environment) is if another developer passes a
function as 'data' param, the results become unpredictable. Though I
don't *think* anybody should be passing a function to access as
event.data, it currently does work to do so.
though changing the pattern to no longer have the handler as the last
param may cause minor confusion, it should not cause any backward
compatibility issues.
I have never bench marked the performance of 'return toString.call
(obj) === [object Function];' Is this faster than running typeof obj
=== function ?
very, very interested in seeing the core of jquery improved to include
a capability to apply correct scope to the handler function
thanks!
-gregory
On Mar 29, 3:26 am, Azat Razetdinov razetdi...@gmail.com wrote:
From the updated jQuery 1.4 Roadmap:
If you need a different object for the scope, why not use the data
argument to transport it?
In OOP-style applications the handler is often not an anonymous
function but a link to the current objects's prototype method:
this._input.bind('change', this._onInputChange, this);
And all prototype methods expect that 'this' points to the current
object. If one needs the jQuery object, he could happily use
event.currentTarget to reach it.
One would recommend binding all handlers with anonymous functions,
e.g.:
var that = this;
this._input.bind('change', function (event) { that._onInputChange
(event) });
1. It's more verbose. 2. There's no way to unbind this handler.
On Feb 23, 11:56 pm, Azat Razetdinov razetdi...@gmail.com wrote:
Passing handler after scope is not suitable for two reasons:
1. There's no way to determine whether data or scope is passed in a
three-argument method call.
2. Passing scope after handler is common pattern in JavaScript 1.6
methods like forEach.
On Dec 25 2008, 11:08 pm, Eduardo Lundgren
eduardolundg...@gmail.com wrote:
The isFunction is faster now but still has more coast that when you
don't
need to call it.
We should keep the handler as the last parameter to fit with the
jQuery API,
the change is compatible with it.
$('div').bind('click', {data: true}, scope,
*scope.internalHandler*);
Scoping events is a good addition to jQuery.
Ariel, Joern, John? Let me know if it make sense for you.
Thanks,
Eduardo Lundgren
On Thu, Dec 25, 2008 at 11:57 AM, Balazs Endresz
balazs.endr...@gmail.comwrote:
True, but the new isFunction is a couple of times faster than the
old
one, though it's still many times faster to directly call
Object.prototype.toString, which is far below 0.001ms. But as the
callback function is the last parameter everywhere in jQuery it
might
be confusing to change this pattern, it just looked more like
binding
the function with a native method for me.
On Dec 25, 7:06 pm, Eduardo Lundgren eduardolundg...@gmail.com
wrote:
Hi Balazs,
Thanks for give us your opinion.
When you use $.isFunction(data) on the bind method it is very
expensive
when
you have a lot of iterations.
Diff the file I attached with the original file (rev. 5996) I
made only a
small change on the bind() method, and it's compatible with data
and with
out API.
On Thu, Dec 25, 2008 at 3:05 AM, Balazs Endresz
balazs.endr...@gmail.comwrote:
Hi, I think this would be really useful! I've also modified
jQuery to
do this a while ago (1.2.6) but with the new scope being the
last
argument, so it works without the data object as well:
jQuery.fn.bind=function( type, data, fn, bind ) {
return type == unload ? this.one(type, data,
fn) :
this.each
(function(){
if( $.isFunction(data) )
jQuery.event.add
[jQuery] Re: Adding scope support to .bind()
My hitch() method does this kind of:
http://higginsforpresident.net/js/jq.hitch.js
It would look like:
this._input.bind('change', $.hitch(this, _onInputChange));
Regards,
Peter Higgins
On Wed, Apr 8, 2009 at 12:03 PM, gregory gregory.tomlin...@gmail.com wrote:
the only difficulty I am having with
Balazs Endresz's approach (which I have also
implemented in my environment) is if another developer passes a
function as 'data' param, the results become unpredictable. Though I
don't *think* anybody should be passing a function to access as
event.data, it currently does work to do so.
though changing the pattern to no longer have the handler as the last
param may cause minor confusion, it should not cause any backward
compatibility issues.
I have never bench marked the performance of 'return toString.call
(obj) === [object Function];' Is this faster than running typeof obj
=== function ?
very, very interested in seeing the core of jquery improved to include
a capability to apply correct scope to the handler function
thanks!
-gregory
On Mar 29, 3:26 am, Azat Razetdinov razetdi...@gmail.com wrote:
From the updated jQuery 1.4 Roadmap:
If you need a different object for the scope, why not use the data
argument to transport it?
In OOP-style applications the handler is often not an anonymous
function but a link to the current objects's prototype method:
this._input.bind('change', this._onInputChange, this);
And all prototype methods expect that 'this' points to the current
object. If one needs the jQuery object, he could happily use
event.currentTarget to reach it.
One would recommend binding all handlers with anonymous functions,
e.g.:
var that = this;
this._input.bind('change', function (event) { that._onInputChange
(event) });
1. It's more verbose. 2. There's no way to unbind this handler.
On Feb 23, 11:56 pm, Azat Razetdinov razetdi...@gmail.com wrote:
Passing handler after scope is not suitable for two reasons:
1. There's no way to determine whether data or scope is passed in a
three-argument method call.
2. Passing scope after handler is common pattern in JavaScript 1.6
methods like forEach.
On Dec 25 2008, 11:08 pm, Eduardo Lundgren
eduardolundg...@gmail.com wrote:
The isFunction is faster now but still has more coast that when you don't
need to call it.
We should keep the handler as the last parameter to fit with the jQuery
API,
the change is compatible with it.
$('div').bind('click', {data: true}, scope, *scope.internalHandler*);
Scoping events is a good addition to jQuery.
Ariel, Joern, John? Let me know if it make sense for you.
Thanks,
Eduardo Lundgren
On Thu, Dec 25, 2008 at 11:57 AM, Balazs Endresz
balazs.endr...@gmail.comwrote:
True, but the new isFunction is a couple of times faster than the old
one, though it's still many times faster to directly call
Object.prototype.toString, which is far below 0.001ms. But as the
callback function is the last parameter everywhere in jQuery it might
be confusing to change this pattern, it just looked more like binding
the function with a native method for me.
On Dec 25, 7:06 pm, Eduardo Lundgren eduardolundg...@gmail.com
wrote:
Hi Balazs,
Thanks for give us your opinion.
When you use $.isFunction(data) on the bind method it is very
expensive
when
you have a lot of iterations.
Diff the file I attached with the original file (rev. 5996) I made
only a
small change on the bind() method, and it's compatible with data and
with
out API.
On Thu, Dec 25, 2008 at 3:05 AM, Balazs Endresz
balazs.endr...@gmail.comwrote:
Hi, I think this would be really useful! I've also modified jQuery
to
do this a while ago (1.2.6) but with the new scope being the last
argument, so it works without the data object as well:
jQuery.fn.bind=function( type, data, fn, bind ) {
return type == unload ? this.one(type, data, fn) :
this.each
(function(){
if( $.isFunction(data) )
jQuery.event.add( this, type, data,
bind, fn
);
else
jQuery.event.add( this, type, fn,
data,
bind
);
});
}
jQuery.event = {
add: function(elem, types, handler, data, bind) {
if ( elem.nodeType == 3 || elem.nodeType == 8 )
return;
if( bind != undefined )
handler = jQuery.bind(handler, bind);
//change
scope
...
jQuery.each(
(blur,focus,load,resize,scroll,unload,click,dblclick, +
mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,
+
[jQuery] Re: A simple jQuery script that throws errors and fails in IE6-7. Thoughts?
.css({
'display': 'block',
'text-align': 'right',
})
stray comma, after 'right'
http://jslint.com
Regards,
Peter
[jQuery] Re: Objects Methods as event handlers.
Yet another opportunity to mention my hitch plugin (which is .bind in prototype)
http://higginsforpresident.net/js/jq.hitch.js
http://higginsforpresident.net/js/jq.hitch.min.js
Regards,
Peter
On Tue, Mar 3, 2009 at 8:51 PM, Karl Rudd karl.r...@gmail.com wrote:
First a solution for you. Try this plugin:
http://plugins.jquery.com/project/bind
Now a note about the way jQuery is biased (which you can skip if you
prefer).
jQuery is primarily focused on DOM elements. Everything else gets
attached to those elements. It's not a bad thing, it's just
different to what many expect. What I mean by this is if you instead
consider DOM elements to be views of internal objects then you'll
find your mindset clashing with the way jQuery is biased.
You've already come across the bias as you can see the bind() function
binds a function to a DOM element, and the this inside the handler
actually refers to the DOM element rather than some external object.
Karl Rudd
On Wed, Mar 4, 2009 at 10:30 AM, Michael dmgx.mich...@gmail.com wrote:
I've recently taken on a job where I have been required to use jQuery
instead of my usual framework of choice - prototype. I've handled the
transition well enough but one area of functionality has me befuddled
- using object methods to handle events. I've been working around the
problem but the workarounds are quite ugly.
An explanation. First I'll give the code as it would look in prototype
myClass = Class.create({
this.element: null,
this.initialize: function( element ) {
this.element = element;
element.observe('click',
this.onClick.bindAsEventListener(this));
},
this.onClick: function(e) {
// actions on click here.
}
});
Now I know how to build classes in javascript without prototype's
Class library. I also know how to use late binding and prototype
modifications to achieve what that library abstracts. The problem is
how am I supposed to replicate bindAsEventListener? I've tried...
myClass = function( element ) {
// element is an element somewhere in the dom that this class will
manage a behavior for.
// Assume for the purposes of this example that it's already
encapsulated in a jQuery object
this.element = element;
this.onClick = function() {
// on click actions.
}
this.element.bind('click', this.onClick );
}
If I run the code as above the meaning of 'this' is lost.
Unfortunately
this.element.bind('click', this.onClick ).apply(this); // more or less
what .bindAsEventListener actually does.
won't work - it causes jQuery to issue an error. So how is anyone
supposed to use object methods to handle events, a cornerstone of
object oriented programming?
If I'm to continue using this framework I need to find a solution to
this problem.
[jQuery] Re: What can we use in place of $.browser?
You would need to find whatever quirk it is you are targeting and create a function or otherwise create a scenario where that quirk is exposed, and use that to populate some identifier. eg: jQuery detects support.opacity by creating a div style=opacity:0.5 and then later testing the opacity value or lack thereof. I find it cumbersome, actually. My most recent example was position:fixed. I know only IE6 can't handle this in any way shape or form, but would have to some dom creation and calculation to find out if the current browser supports position:fixed. Fortunately, I know IE6 is the only one serving FAIL on position:fixed, so I just check the UA. On Wed, Feb 25, 2009 at 11:10 AM, Liam Potter radioactiv...@gmail.com wrote: ok, lets say I wanted to target IE6 only, how would I do that with support? Aaron Gundel wrote: http://docs.jquery.com/Utilities/jQuery.support jQuery now uses feature detection. There are some good links to explain in the post above. It is still possible to detect which browser is being used (plain old js) but jQuery support will probably be removed at some point in the future. On Wed, Feb 25, 2009 at 5:23 AM, Liam Potter radioactiv...@gmail.com wrote: I thought this as well, $.browser still works, as many plugins use it, but I'm interested in what we should be using. fambi wrote: Having just upgraded to 1.3.2, I've realised that the $.browser utility has been deprecated. Does this mean it is no longer possible to identify which browser is being used?
[jQuery] Re: Custom Callback not using jQuery object
I never miss an opportunity to mention my uberuseful tiny [and only]
jQuery plugin. hitch
http://higginsforpresident.net/js/jq.hitch.js
http://higginsforpresident.net/js/jq.hitch.min.js
Regards,
Peter
On Wed, Feb 25, 2009 at 4:58 PM, Nic Hubbard nnhubb...@gmail.com wrote:
Thank you. I appreciate the explanation, and for taking the time to
thoroughly explain it!
On Feb 25, 1:40 pm, Eric Garside gars...@gmail.com wrote:
Sure. Basically apply allows you to declare the scope of the function
you're calling, instead of letting that scope resolve normally. With
any function, it will take on the scope of whatever encloses it. So if
you declare a function without it being enclosed, this will resolve
to window in almost all cases.
function myFunc(){ alert(this); }
myFunc(); // [object Window]
If your function is enclosed in an object, say:
var obj = { name: 'myObject', myFunc: function(){ alert
(this.name); } };
obj.myFunc(); // myObject
then this will take on the scope of the object which encloses it.
Using apply, you can manually declare the scope the function will
have.
var obj1 = { name: 'obj1', myFunc: function(){ alert(this.name); }};
var obj2 = { name: 'obj2' };
obj1.myFunc.apply(obj2, []); // obj2
So the first argument of apply sets the scope, which is basically a
fancy way of saying, tells it what to make this inside the function.
The second argument of apply is an array, in which you can pass
parameters. So:
function myFunc(param1, param2, param3){
alert(this + ' is equal to ' + (param1 + param2 + param3));
}
myFunc.apply(12, [2,4,6]); // alerts 12 is equal to 12
I hope I answered your question, but I fear I may have just rambled at
you. :(
On Feb 25, 4:24 pm, Nic Hubbard nnhubb...@gmail.com wrote:
Ha! That worked perfectly! Thanks, I really appreciate that, I was
lost.
So, could you explain, just so I know, what this did:
defaults.onComplete.apply(obj, []); ?
On Feb 25, 1:07 pm, Eric Garside gars...@gmail.com wrote:
The problem is you're losing scope when calling onComplete. Try using
the .apply method. Instead of:
defaults.onComplete();
try:
defaults.onComplete.apply(obj.get(0), []);
That should get this back to what you're expecting it to be. You
could also skip a step and call:
defaults.onComplete.apply(obj, []);
---
onComplete: function(){ alert(this.attr('class')); }
I'm pretty sure that should work. IF not, let me know, and I'll play
around with it locally and actually test it out.
On Feb 25, 3:52 pm, Nic Hubbard nnhubb...@gmail.com wrote:
I was meaning when trying to call $(this) in the following
circumstance:
$('a.matrixStatus').matrixStatus({
urlSuffix: '?action=status_posting',
onComplete: function() {alert('Callback worked'); alert($
(this).attr('class'));}
});
When I am trying to pass things to the custom function, using $(this)
does not work.
On Feb 25, 12:28 pm, brian bally.z...@gmail.com wrote:
Something like this? (no pun intended)
obj.click(function() {
var self = $(this);
...
defaults.onComplete(self);
On Wed, Feb 25, 2009 at 3:11 PM, Nic Hubbard nnhubb...@gmail.com
wrote:
I have built a custom callback into my plugin, here is an example:
$.fn.matrixStatus = function(options) {
var defaults = {
urlSuffix: '?action=live',
onComplete: function() {}
};
var options = $.extend(defaults, options);
return this.each(function() {
var obj = $(this);
var itemDesc = obj.attr('rel');
var itemId = obj.attr('id');
var itemHref = obj.attr('href');
obj.click(function() {
if (!itemDesc == '') {
var question = confirm('Are you sure you want to
change the status
of '+itemDesc+'?');
} else {
var question = confirm('Are you sure you want to
change the
status?');
}
if (question) {
$.ajax({
type: 'POST',
url: itemHref + defaults.urlSuffix
});
// Run our custom callback
defaults.onComplete();
}
return false;
});
});
};
For some reason when I try to use that function for a custom
callback,
it won't allow me to get the jQuery object that the plugin is
targeting, so using $(this) within the onComplete function doesn't
work and give me errors. Any idea why this would be?
[jQuery] Re: jQuery / FF3 problem using show()
moving the link above the script will likely fix this. On Tue, Feb 10, 2009 at 12:21 PM, JohnnyCee jfcardi...@gmail.com wrote: I wrote a relatively simple jQuery script to pick a random item from a list and show it. The other items are hidden. The script works in FF2, IE7, and IE8 RC 2. It does not work properly in FF3. A simple show() call is used to show the UL element after one of the items is chosen. The evidence suggests that the show() method is not working as expected in the specific circumstances of the test. You can see the problem on this test page: http://www.johncardinal.com/tests/jqff3/index.htm The problem has some odd characteristics that are described on the test page. Does anyone have an idea what's going on, and how I can avoid the issue? Is there a bug in my script? Thanks! John
[jQuery] Re: How to save this context in callbacks
I still like the rescope function. :)
http://groups.google.com/group/jquery-en/browse_thread/thread/43644231b5764f12?q=rescope+jquery#ca1b1069580a3f25
On Sat, Feb 7, 2009 at 8:03 PM, Karl Rudd karl.r...@gmail.com wrote:
Assign this to a local variable.
function blah() {
var blahThis = this;
someExternalFunction( function() {
blahThis.doSomething();
}
}
Karl Rudd
On Sun, Feb 8, 2009 at 9:28 AM, Alexander kayuch...@gmail.com wrote:
Goodday!
Could anyone tell me how to save this context inside callback?
Here is simple example:
var myClass = jQuery.Class.create({
init: function(){
this.value = value;
// callback as argument:
someExternalFunction( function() {
this.setValue(); // PROBLEM: this is not
myClass pointer
anymore!
} );
},
setValue: function () {
this.title = new value;
}
});
[jQuery] Re: parallel inclusion dojo-storage+jquery
There are none. Dojo only takes a few globals for the namespace, and doesn't use $ for anything. There is no bad influence, other than the duplication in functionality between base dojo.js and jquery.js On Tue, Jan 6, 2009 at 10:27 AM, aldana ald...@gmx.de wrote: hi, we are using jquery but we need functionality of dojo-storage (jquery doesn't seem to provide yet). has somebody tested whether there are bad influences including both libraries at the same time? thanks
[jQuery] Re: setInterval(obj.method,200) problem: scoping?
I've always found this bit of code useful:
var rescope = function(scope, method){
if(!method){ method = scope; scope = null; }
if(typeof method == string){
scope = scope || window;
if(!scope[method]){ throw(['method not found']); }
return function(){ return scope[method].apply(scope, arguments
|| []); };
}
return !scope ? method : function(){ return method.apply(scope,
arguments || []); };
}
An example:
var myObj = {
interval: 1000,
count: 0,
start: function(){
if(this.timer){ return; }
this.timer = setInterval(rescope(this, update),
this.interval);
},
stop: function(){
clearInterval(this.timer);
delete this.timer;
},
update: function(){
console.log(++this.count);
}
};
myObj.start();
Regards,
Peter Higgins
On Fri, Jan 2, 2009 at 5:49 PM, Michael Geary m...@mg.to wrote:
Hi Alexandre,
Don't go adopting a coding practice just because of a single mailing list
message. :-)
There's nothing wrong with quoting property names in an object literal, but
the majority of experienced JavaScript programmers do not quote them except
when necessary. As an example, browse through the jQuery source code:
http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js
Most of the property names in the code are not quoted, except for those few
that are invalid identifiers or reserved words.
Regarding setTimeout and setInterval, a minor nitpick on terminology:
setTimeout and setInterval scope the called function to the window object.
Actually, the *scope* of the called function is determined by its position
in the source code. JavaScript uses lexical scoping, where a nested function
can directly refer to variables declared in outer functions or in the global
scope. That's why your setInterval callback is able to use your thisObj
variable, because the interpreter follows the scope chain from the inner
function up to the outer function and finds the variable there.
What you're talking about is the value of this in the setInterval
callback. setInterval and setTimeout call your callback function as a method
of the global object (which is the window object in a browser). Or another
way to put it is that they don't call the function as a method of any object
at all, and by default this is set to the global object.
In any case, terminology nitpicks aside, your code is the right way to solve
the problem! :-)
-Mike
From: Alexandre Plennevaux
hi donb, according to a lengthy discussion we had on this
mailinglist yesterday the quotes are good practice. see:
http://groups.google.com/group/jquery-en/msg/821f4eb134c51d3d
(is is just one message on a 31-long thread, if u have time
,read the whole thread it is interesting )
As for this issue after extensive googling i found out that
setTimeout and setInterval scope the called function to the
window object, not the object the setinterval is called in.
Therefore here is how to do it:
var datascape = {
'mouseX': 0,
'myInterval': 0,
'create': function(){
var thisObj = this; //-- store this object instance in a variable
$('#datascape').bind('mousemove', function(e)
{
this.mouseX = e.pageX;
}).bind(mouseover, function()
{
datascape.myInterval = setInterval(function() {
thisObj.move(); }, 1000); // -- use the vairable
referencing the instance
}).bind(mouseout, function()
{
clearInterval(datascape.myInterval);
});
},
'move': function(){
$.log('datascape.move : mouseX = ' + this.mouseX);
}
}
On Thu, Jan 1, 2009 at 3:46 PM, donb
falconwatc...@comcast.net wrote:
You should change 'move' to move (remove apostrophes).
On Jan 1, 9:01 am, Alexandre Plennevaux aplennev...@gmail.com
wrote:
Hello mates,
i have an object datascape which among other things, contains a
property storing the mouse position, and a function that uses that
property. Inside another method i
var datascape = {
'mouseX': 0,
'myInterval': 0,
'create': function(){
$('#datascape').bind('mousemove', function(e)
{
this.mouseX = e.pageX;
}).bind(mouseover, function()
{
this.myInterval = setInterval(this.move, 200);
}).bind(mouseout, function()
{
clearInterval(this.myInterval);
});
},
'move': function(){
$.log('datascape.move : mouseX = ' + this.mouseX);
}
}
Yet the script does not work:
firebug console points at the setInterval call, saying:
useless setInterval call (missing quotes around
argument?)http://localhost/prototype/_js/frontend/proto.03.js
Line 172
can someone help me / explain what i'm
[jQuery] Re: setInterval(obj.method,200) problem: scoping?
Here is your orig snippet rewritten to use the rescope function I pasted:
var datascape = {
'mouseX': 0,
'myInterval': 0,
'create': function(){
$('#datascape').bind('mousemove', rescope(this, function(e)
{
this.mouseX = e.pageX;
})).bind(mouseover, rescope(this, function()
{
this.myInterval = setInterval(rescope(this, move), 200);
})).bind(mouseout, rescope(this, function()
{
clearInterval(this.myInterval);
}));
},
'move': function(){
$.log('datascape.move : mouseX = ' + this.mouseX);
}
}
Though I didn't test it ...
You are calling window.datascape.move still in the window scope,
when you want the scope (this) to be retained throughout your function
calls. Saving a ref to it (var self = this) and accessing it in a
function is still the solution. rescope is just that wrapped in a
function for sugar (more or less). By passing 'this' to the rescope()
function, you are effectively doing the same as self = this;
function(){ self.foo(); } .. I find it much cleaner (the non-stripped
version of rescope() allows for passing an ambigious number of
parameters to the rescope'd function) and easier to work with when I'm
explicitly setting the execution scope.
Regards,
Peter Higgins
On Fri, Jan 2, 2009 at 8:06 PM, Alexandre Plennevaux
aplennev...@gmail.com wrote:
Michael, did you know that i 'm becoming a big fan of your explanations?
if i follow your explanation correctly, this should have worked, isn't it ?
datascape.myInterval = setInterval(window.datascape.move,400);
Yet it didn't. I guess i 'm kind of assimilating the javascript window
object to actionscript's _root object, and that assumption is probably
plain wrong :)
On Fri, Jan 2, 2009 at 11:49 PM, Michael Geary m...@mg.to wrote:
Hi Alexandre,
Don't go adopting a coding practice just because of a single mailing list
message. :-)
There's nothing wrong with quoting property names in an object literal, but
the majority of experienced JavaScript programmers do not quote them except
when necessary. As an example, browse through the jQuery source code:
http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js
Most of the property names in the code are not quoted, except for those few
that are invalid identifiers or reserved words.
Regarding setTimeout and setInterval, a minor nitpick on terminology:
setTimeout and setInterval scope the called function to the window object.
Actually, the *scope* of the called function is determined by its position
in the source code. JavaScript uses lexical scoping, where a nested function
can directly refer to variables declared in outer functions or in the global
scope. That's why your setInterval callback is able to use your thisObj
variable, because the interpreter follows the scope chain from the inner
function up to the outer function and finds the variable there.
What you're talking about is the value of this in the setInterval
callback. setInterval and setTimeout call your callback function as a method
of the global object (which is the window object in a browser). Or another
way to put it is that they don't call the function as a method of any object
at all, and by default this is set to the global object.
In any case, terminology nitpicks aside, your code is the right way to solve
the problem! :-)
-Mike
From: Alexandre Plennevaux
hi donb, according to a lengthy discussion we had on this
mailinglist yesterday the quotes are good practice. see:
http://groups.google.com/group/jquery-en/msg/821f4eb134c51d3d
(is is just one message on a 31-long thread, if u have time
,read the whole thread it is interesting )
As for this issue after extensive googling i found out that
setTimeout and setInterval scope the called function to the
window object, not the object the setinterval is called in.
Therefore here is how to do it:
var datascape = {
'mouseX': 0,
'myInterval': 0,
'create': function(){
var thisObj = this; //-- store this object instance in a variable
$('#datascape').bind('mousemove', function(e)
{
this.mouseX = e.pageX;
}).bind(mouseover, function()
{
datascape.myInterval = setInterval(function() {
thisObj.move(); }, 1000); // -- use the vairable
referencing the instance
}).bind(mouseout, function()
{
clearInterval(datascape.myInterval);
});
},
'move': function(){
$.log('datascape.move : mouseX = ' + this.mouseX);
}
}
On Thu, Jan 1, 2009 at 3:46 PM, donb
falconwatc...@comcast.net wrote:
You should change 'move' to move (remove apostrophes).
On Jan 1, 9:01 am, Alexandre Plennevaux aplennev...@gmail.com
wrote:
Hello mates,
i have an object datascape which among other things, contains a
property storing the mouse position, and a function that uses that
property. Inside
[jQuery] Re: setInterval(obj.method,200) problem: scoping?
Because I'm an advocate for licensing and was told I probably should mention: the 'rescope' function is a stripped down version of Dojo's dojo.hitch function. Infinitely useful in the real world, but technically if used [in production] should retain attribution. It is available under new BSD and AFL terms, (c) Dojo Foundation. Glad you liked it, and hope you can use it. It really is one of my favorite shorthand helpers there is. The cousin [dojo.partial] is useful as well, but not in this context. Regards, Peter Higgins On Fri, Jan 2, 2009 at 9:12 PM, Alexandre Plennevaux aplennev...@gmail.com wrote: nice example, now i think i get it. Indeed actionscript (v2 at least) is based on ecmascript, much like javascript if i'm not mistaken. I came to web design/dev from actionscript one and gradually made my way to jquery. Anyway, actionscript keeps you away from the internal cooking by using a metaphor, timeline: basically you work with objects and organise them on a main timeline, _root (or _level0). Each object has its own timeline, can be put inside another object, so you would address it as _root.myStepMother.face.hairyChin; I wrongly assumed javascript would allow me to do it for setInterval(). hehe, how boring would be the world without all these little variations, now wouldn't it :) ? That's pretty much the problem with using metaphors: it's nice to get you fast into a certain task, but you have to actually break it up to be able to master the technology behind. Thank you Mike and Peter for your excellent help ! On Sat, Jan 3, 2009 at 2:44 AM, Michael Geary m...@mg.to wrote: Thanks, Alexandre, it's kind of you to say that. About this code... datascape.myInterval = setInterval(window.datascape.move,400); Let's break it down a little. It's exactly the same as doing: var callback = window.datascape.move; datascape.myInterval = setInterval( callback, 400 ); As you can see from this code, JavaScript doesn't remember that the callback function was a property of the datascape object. When you get a reference to the function, that's all you get, a reference to the function itself, without any information about what object the function may have been a method of. So when setInterval calls the function later, it just calls it as a plain old function, and this is the global/window object. Doesn't ActionScript work the same way? It may have a different global object, but I thought most of the JavaScript semantics were similar except for the ActionScript extensions. I haven't worked with ActionScript so I don't know. -Mike From: Alexandre Plennevaux Michael, did you know that i 'm becoming a big fan of your explanations? if i follow your explanation correctly, this should have worked, isn't it ? datascape.myInterval = setInterval(window.datascape.move,400); Yet it didn't. I guess i 'm kind of assimilating the javascript window object to actionscript's _root object, and that assumption is probably plain wrong :) On Fri, Jan 2, 2009 at 11:49 PM, Michael Geary m...@mg.to wrote: Hi Alexandre, Don't go adopting a coding practice just because of a single mailing list message. :-) There's nothing wrong with quoting property names in an object literal, but the majority of experienced JavaScript programmers do not quote them except when necessary. As an example, browse through the jQuery source code: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js Most of the property names in the code are not quoted, except for those few that are invalid identifiers or reserved words. Regarding setTimeout and setInterval, a minor nitpick on terminology: setTimeout and setInterval scope the called function to the window object. Actually, the *scope* of the called function is determined by its position in the source code. JavaScript uses lexical scoping, where a nested function can directly refer to variables declared in outer functions or in the global scope. That's why your setInterval callback is able to use your thisObj variable, because the interpreter follows the scope chain from the inner function up to the outer function and finds the variable there. What you're talking about is the value of this in the setInterval callback. setInterval and setTimeout call your callback function as a method of the global object (which is the window object in a browser). Or another way to put it is that they don't call the function as a method of any object at all, and by default this is set to the global object. In any case, terminology nitpicks aside, your code is the right way to solve the problem! :-) -Mike From: Alexandre Plennevaux hi donb, according to a lengthy discussion we had on this mailinglist yesterday the quotes are good practice. see: http://groups.google.com/group/jquery-en/msg/821f4eb134c51d3d (is is just one message on a 31-long thread, if u have time ,read
[jQuery] Re: HELP: Screening questions for JavaScript developer candidates:
// YUI compressor won't compress if you have no quotes on keywords
float: function() {
alert(float);
},
int: function(){
alert(int);
}
}
a.float();
a.int();
int and float are reserved words as well. Technically, you are
supposed to quote all keys (JSON), but in reality you only need to
quote the reserved ones. default gets me every time.
Regards
[jQuery] Re: HELP: Screening questions for JavaScript developer candidates:
Karl,
I think you mean other than alpha or underscore (just to
nit/completeness ;) ) Always safer to go with fully quoted, though I
tend to avoid it myself unless necessary.
var foo = { 1bar : is valid, 2bar:is not, _iam:valid too,
this-is:valid also }
of course, we should mention accessing them too:
foo[1bar], foo[this-is] and foo._iam
Regards,
Peter Higgins
On Wed, Dec 31, 2008 at 9:34 AM, Karl Swedberg k...@englishrules.com wrote:
On Dec 31, 2008, at 7:51 AM, pete higgins wrote:
int and float are reserved words as well. Technically, you are
supposed to quote all keys (JSON), but in reality you only need to
quote the reserved ones. default gets me every time.
Hi Pete,
I know you already know this, but just for completeness I thought I should
mention that you need to quote not only reserved-word keys but also keys
that have a character other than alphanumeric or underscore.
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
[jQuery] Re: HELP: Screening questions for JavaScript developer candidates:
and, yeah, I usually put in bare keys (sans quotes) unless necessary, too.
Not sure why. I guess I just like the clean look.
Yah, they just seem to be wasted bytes, huh?
One thing to note, and the only reason I try to force myself to use
the quotes is for portability. If the data is really JSON and
expects to be consumed by languages not javascript, the quotes are
[likely] necessary, eg PHP. js and php can share a common json
fragment if they are quoted.
$d = json_decode(file(someFile.json));
foreach($d as $item = $val){ .. }
really its just a distinction between what js can do and JSON
this isn't JSON:
var foo = { bar:function(){ .. }, baz: new Date() };
(I know you know, too, btw)
About anything can be a key in JS. (DomNodes can't, though btw, but
functions objects etc)
var bar = { a:b, c:d };
var bar2 = [1,2,3,4];
var foo = {};
foo[bar] = baz;
foo[bar2] = baz2;
if(bar in foo){ console.log(foo[bar]); } // baz
if(bar2 in foo){ console.log(foo[bar2]); } // baz2
Fun. Thanks for the banter, Karl.
Regards,
Peter Higgins
[jQuery] Re: HELP: Screening questions for JavaScript developer candidates:
About anything can be a key in JS. (DomNodes can't, though
btw, but functions objects etc)
No, that isn't true, sorry.
No need to be sorry.
I stand corrected. My misunderstanding of this nuance stems from
having never noticed the toString function defined here ...
toString: function(){
return '[Widget ' + this.declaredClass + ', ' + (this.id || 'NO
ID')
+ ']'; // String
},
but now it makes absolute sense. (I've only even been using it to
store refs to instances of these thingers in objects and compare them
later.) Thanks for taking the time to clarify.
Regards,
Peter Higgins
Object keys in JavaScript are strings only, nothing else.
var bar = { a:b, c:d };
var bar2 = [1,2,3,4];
var foo = {};
foo[bar] = baz;
foo[bar2] = baz2;
if(bar in foo){ console.log(foo[bar]); } // baz
if(bar2 in foo){ console.log(foo[bar2]); } // baz2
What you're observing is that JS will convert any object to a string when
necessary, by calling that object's toString() method.
The reason your example works is that the two properties you're adding have
different string representations, because one is an object and the other is
an array. Let's look at it more closely:
var bar = { a:b, c:d };
var bar2 = [1,2,3,4];
var foo = {};
foo[bar] = baz;
foo[bar2] = baz2;
for( var key in foo ) { console.log( typeof key, key ); }
// string [object Object]
// string 1,2,3,4
Now try it with two different *object* keys instead of an object and an
array
var bar = { a:b, c:d };
var bar2 = { w:x, y:z };
var foo = {};
foo[bar] = baz;
foo[bar2] = baz2;
for( var key in foo ) { console.log( typeof key, key, foo[key] ); }
// string [object Object] baz2 (only one - oops!)
Because bar and bar2 have identical string representations - '[object
Object]' - only one property is added to the foo object.
DOM nodes do work the same way - because they also have string
representations. But you'll run into the same problem, because, for example,
every DIV has the same string representation '[object HTMLDivElement]'.
As another example, here's an object with a custom toString method. Note
that after adding the property, we can reference it using the name that
toString returned:
a = { toString:function() { return 'foo'; } };
b = {};
b[a] = 'test';
console.log( b.foo ); // 'test'
And one with *no* toString method:
a = { toString:null };
b = {};
b[a] = 'test'; // TypeError: can't convert a to string
All this is quite different from, say, Ruby, where any object *can* be used
as a hash key:
irb(main):001:0 a = { 'a' = 'b', 'c' = 'd' }
= {a=b, c=d}
irb(main):002:0 b = { 'a' = 'b', 'c' = 'd' }
= {a=b, c=d}
irb(main):003:0 c = { a = 'aaa', b = 'bbb' }
= {{a=b, c=d}=bbb, {a=b, c=d}=aaa}
irb(main):004:0 c[a]
= aaa
irb(main):005:0 c[b]
= bbb
Note that the a and b hashes are two distinct objects even though their
content is similar, and each one can be used as a separate hash key.
-Mike
From: pete higgins
About anything can be a key in JS. (DomNodes can't, though
btw, but functions objects etc)
var bar = { a:b, c:d };
var bar2 = [1,2,3,4];
var foo = {};
foo[bar] = baz;
foo[bar2] = baz2;
if(bar in foo){ console.log(foo[bar]); } // baz
if(bar2 in foo){ console.log(foo[bar2]); } // baz2
[jQuery] Objected Expected $ Conflict?
I'm trying to build a simple news carousel, click a tab and the
corresponding div shows. My Code works in FF, Chrome, Opera and Safari
but no luck in IE 6 or 7. I think it has something to do with $,
because IE7 is saying there is an Object Expected at that char
position.
Any help is appreciated, my code is below.
script src=js/jquery-1.2.6.min.js type=text/javascript/script
script type=text/javascript
!--
current = 1;
function showSlide(slideNum)
{
if (slideNum != current){
$('#carousel #item' + current).fadeOut(slow).addClass
(hidden);
$('#carousel #item' + slideNum).fadeIn(slow).removeClass
(hidden);
current = slideNum;
}
}
//--
/script
[jQuery] jQuery and VS.NET
Hi, I'm a little new to jQuery and C# .NET. I have been reading a lot about MS shipping .NET with jQuery, I have VS.NET Web Developer Pro 2008 and can get jQuery to work but only after changing the HTML manually as if I were writing a php page in notepad. I've searched high and low for a quick guide on how to get started with jQuery and .NET but I have so far had no luck. Can anyone recommend a good place to start? Will jQuery become more integrated in VS.NET as a inbuilt library with debugging and predictive functuion names or something like that? Thanks Pete
[jQuery] Underline stroke/height with Jquery css?
I'm looking for a way to adjust the height of an underline element.
Specifically I'm not looking to do a border-bottom CSS attribute and I
was wondering if there is some method in JQuery that could style a CSS
element that cannot accept values.
For example I could do the following:
h1 {font:bold 35px verdana;text-decoration:underline;}
but I want to give the underline a px value. This cannot be done in
CSS, but is there a JQuery method that can help achieve that?
[jQuery] Re: Underline stroke/height with Jquery css?
What's wrong is that I'm using sIFR to style the font. So using
border-bottom styles the block element across the page instead of
underlining just the text.
There is an underline method in the sIFR plugin that I'm using, but it
also does not allow for height.
On Nov 19, 10:29 am, Liam Potter [EMAIL PROTECTED] wrote:
no.
Whats wrong with using the border-bottom?
Pete wrote:
I'm looking for a way to adjust the height of an underline element.
Specifically I'm not looking to do a border-bottom CSS attribute and I
was wondering if there is some method in JQuery that could style a CSS
element that cannot accept values.
For example I could do the following:
h1 {font:bold 35px verdana;text-decoration:underline;}
but I want to give the underline a px value. This cannot be done in
CSS, but is there a JQuery method that can help achieve that?
[jQuery] Re: Jquery rounded corners
Unfortunately with that script (I think Methvin's?) it only takes the background color from the parent element when making the corners. The other solution out there (curvy corners) is extremely slow. I haven't personally found an ideal solution where the background needs to be an image or gradient. On Nov 13, 4:31 pm, ramiro77 [EMAIL PROTECTED] wrote: Is anyone using the rounded corners script ? If so, I am having some alias trouble. I have a background image set for my page ... it appears that the script gets the BG color of the Body tag and uses that for its aliasing ... is there anyway to set it to transparent ?
[jQuery] Re: Can't use selectors in reference to a named object?
zhaobing, you are a legend!
I followed your example and modified my code as follows:
$('form').each( function() {
var thisForm = $(this);
alert(thisForm.attr('id') + ' [' + $(':input.required',
thisForm).length
+ '/' + $(':input', thisForm).length + ']');
});
On Nov 10, 1:13 pm, 赵兵 [EMAIL PROTECTED] wrote:
try this:var f=$(form);
$(input,textarea,f).each(function(){
console.log($(this).attr(name)+'--'+$(this).val());
});
maybe this is what you want!
On Mon, Nov 10, 2008 at 8:09 PM, Pete [EMAIL PROTECTED] wrote:
The following doesn't work as expected and I don't understand why--can
someone explain, please?
$('form').each( function() {
var thisForm = $(this);
alert(thisForm.attr('id') + ' [' + $('thisForm
:input.required').length + '/' + $('thisForm *').length + ']');
)};
That I'm expecting the above to do is alert whenever a form is found
in the page, stating that form's ID value and how many of it's total
inputs are classed as 'required'. But all I get is e.g. login [0/0]
and I don't understand why.
Can jQuery not use my thisForm object in this way? If not, how can I
store a reference and then call selections based on that object?
Thanks in advance. I've been using jQuery for a little while now and
find it hugely useful, but stuff like this still utterly confuses me.
--
zhaobing
Mobile:13824354001
Email:[EMAIL PROTECTED] [EMAIL PROTECTED]
[jQuery] Finding an input's label
What's the easiest way to find an input's label? I'm trying to
evaluate this along the lines of the following, but this doesn't work:
$('label[for=this.attr(id)]').attr('class', 'error');
Any help appreciated.
[jQuery] Re: Finding an input's label
Thanks, MorningZ. Tidied up your quote nesting and it worked a treat. Bit of a braindead moment for me... I sometimes forget how painfully simple and elegant jQuery is. :)
[jQuery] Can't use selectors in reference to a named object?
The following doesn't work as expected and I don't understand why--can
someone explain, please?
$('form').each( function() {
var thisForm = $(this);
alert(thisForm.attr('id') + ' [' + $('thisForm
:input.required').length + '/' + $('thisForm *').length + ']');
)};
That I'm expecting the above to do is alert whenever a form is found
in the page, stating that form's ID value and how many of it's total
inputs are classed as 'required'. But all I get is e.g. login [0/0]
and I don't understand why.
Can jQuery not use my thisForm object in this way? If not, how can I
store a reference and then call selections based on that object?
Thanks in advance. I've been using jQuery for a little while now and
find it hugely useful, but stuff like this still utterly confuses me.
[jQuery] Re: How to create an infinite loop?
your onend callback is being executed immediately (with the ()'s). you
likely want:
$(...).animate({ props }, 2000, linear, function(){
scroll_list(h);
});
to pass an anonymous function that will execute later (2000ms).
Regards
Peter Higgins
On Mon, Oct 27, 2008 at 6:01 AM, gattu_marrudu [EMAIL PROTECTED] wrote:
Hi, I am new to jQuery and I would like to create a simple animation
of a div scrolling in an infinite loop. When the div scrolls to the
top, it is shifted to the bottom and starts over.
I based my function on one found on the jQuery API reference:
http://docs.jquery.com/Effects/queue
$(#show).click(function () {
var n = $(div).queue(fx);
$(span).text(Queue length is: + n.length);
});
function runIt() {
$(div).show(slow);
$(div).animate({left:'+=200'},2000);
$(div).slideToggle(1000);
$(div).slideToggle(fast);
$(div).animate({left:'-=200'},1500);
$(div).hide(slow);
$(div).show(1200);
$(div).slideUp(normal, runIt);
}
runIt();
My code is:
function scroll_list(h) {
$(#sl1).marginTop = 0;
$(#sl1).animate( {marginTop: -h}, 2, linear,
scroll_list(h));
}
h = $(#sl1).height();
scroll_list(h);
On firebug I get a Too much recursion error.
How come calling the same function as a callback works in the first
but not in the second case?
Thanks,
Stefano
[jQuery] Re: Setting the selected item in a combo box
Ricardo. Thanks very much!
I'll need to give this some thought then. The timing is an issue (I
kind of thought it would be given the asynchronous nature of Ajax.
Digging deeper, I realize that I am using a combo.js (selectCombo)
that was written by Shelane Enos. I need to do some examination of
that code. Perhaps it can be modified to so handle a passed selected
value so that the value shows selected when the combo is rendered.
It may do that already.
Thanks again. I learned quite a bit!
Pete
On Sep 30, 11:07 pm, ricardobeat [EMAIL PROTECTED] wrote:
'select' is the selector (:D) for the 'select' element, jQuery uses
CSS selector syntax:
div id=parent
select id=dropdownstuff
option value=goodGood/option
option value=badBad/option
option value=uglyUgly/option
/select
/div
$('#dropdownstuff').val(value);
or
$('#parent select').val(value);
or
$('#parent select').val(value);
all do the same.
now, a different issue is that you're using ajax to load data. You
need to execute this function only after the data has been loaded,
passing a callback function:
$('#blah').load('http://options.com',function(){
$('#blah select').val(value);
});
doing one after the other won't work, the val() function will run
before the ajax load is finished.
cheers
- ricardo
On Sep 30, 7:52 pm, Pete [EMAIL PROTECTED] wrote:
Ricardo,
I am a bit new at using jQuery so this could be an inane question:
Is the 'select' applied at the selector? If my control's id is
emplist would the correct syntax be:
$('#emplist select').val(empSelected);
empSelected, in this case, is a variable containing the value I want
to set the 'selected' attribute for.
This page is a template rendered by a server call and the server sets
the value of each of the fields of the form. But I want each field to
have the values that can be selected. The complete code is:
// Load the list using Ajax and Json:
$('#emplist').loadList(getEmpListURL, '#emplist');
// Then set the value of the selected option
$('#emplist select').val(empSelected);
The list is populated but the option value is not set to 'selected'
On Sep 29, 5:27 pm, ricardobeat [EMAIL PROTECTED] wrote:
$('select').val('value') should work (it needs to be applied to the
select, not the option
- ricardo
On Sep 29, 6:55 pm, Pete [EMAIL PROTECTED] wrote:
I have an element that I populate with an Ajax call and returns a list
of items for a combo box. In some cases the page containing the
element gets loaded with existing values and rendered and I'd like the
textbox to contain an item that was selected before the element is
rendered.
Is there a way to set that value? I have done some searching but
haven't found a solution as yet. I have looked at setting the
selected attribute but haven't found an example that works. I have
also tried setting the selected value with .val(myValue); but, again,
tried it and didn't get it to work.
It should be simple. But I can't seem to crack it. Suggestions?
Thanks,
Pete
[jQuery] Re: Setting the selected item in a combo box
And, as a follow up:
The code was originally found here:
http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/
I added the following to the combo.js:
// Add another settings option
var defaults = {hidetarget: true, indicator: false, pageload: false,
selectValue: false};
// Then when iterating through the JSON data I modified it to add
var selectValue = settings.selectValue;
if(selectValue!=null selectValue.length 0)
$('select').val(selectValue);
else
$(option:first, target).attr(selected,selected);
So if there is a 'selectValue' passed, then it will be used to set the
'selected' attribute. The call ended up looking like this:
$('#emplist').loadList(getEmpListURL, '#emplist',{selectValue:
empSelected});
The getEmpListURL is the JSON string and the empSelected is the value
passed to set the selected option to.
Again, thanks Ricardo. I learned enough to take care of the problem
and learned some more about jQuery
On Oct 1, 6:46 am, Pete [EMAIL PROTECTED] wrote:
Ricardo. Thanks very much!
I'll need to give this some thought then. The timing is an issue (I
kind of thought it would be given the asynchronous nature of Ajax.
Digging deeper, I realize that I am using a combo.js (selectCombo)
that was written by Shelane Enos. I need to do some examination of
that code. Perhaps it can be modified to so handle a passed selected
value so that the value shows selected when the combo is rendered.
It may do that already.
Thanks again. I learned quite a bit!
Pete
On Sep 30, 11:07 pm, ricardobeat [EMAIL PROTECTED] wrote:
'select' is the selector (:D) for the 'select' element, jQuery uses
CSS selector syntax:
div id=parent
select id=dropdownstuff
option value=goodGood/option
option value=badBad/option
option value=uglyUgly/option
/select
/div
$('#dropdownstuff').val(value);
or
$('#parent select').val(value);
or
$('#parent select').val(value);
all do the same.
now, a different issue is that you're using ajax to load data. You
need to execute this function only after the data has been loaded,
passing a callback function:
$('#blah').load('http://options.com',function(){
$('#blah select').val(value);
});
doing one after the other won't work, the val() function will run
before the ajax load is finished.
cheers
- ricardo
On Sep 30, 7:52 pm, Pete [EMAIL PROTECTED] wrote:
Ricardo,
I am a bit new at using jQuery so this could be an inane question:
Is the 'select' applied at the selector? If my control's id is
emplist would the correct syntax be:
$('#emplist select').val(empSelected);
empSelected, in this case, is a variable containing the value I want
to set the 'selected' attribute for.
This page is a template rendered by a server call and the server sets
the value of each of the fields of the form. But I want each field to
have the values that can be selected. The complete code is:
// Load the list using Ajax and Json:
$('#emplist').loadList(getEmpListURL, '#emplist');
// Then set the value of the selected option
$('#emplist select').val(empSelected);
The list is populated but the option value is not set to 'selected'
On Sep 29, 5:27 pm, ricardobeat [EMAIL PROTECTED] wrote:
$('select').val('value') should work (it needs to be applied to the
select, not the option
- ricardo
On Sep 29, 6:55 pm, Pete [EMAIL PROTECTED] wrote:
I have an element that I populate with an Ajax call and returns a list
of items for a combo box. In some cases the page containing the
element gets loaded with existing values and rendered and I'd like the
textbox to contain an item that was selected before the element is
rendered.
Is there a way to set that value? I have done some searching but
haven't found a solution as yet. I have looked at setting the
selected attribute but haven't found an example that works. I have
also tried setting the selected value with .val(myValue); but, again,
tried it and didn't get it to work.
It should be simple. But I can't seem to crack it. Suggestions?
Thanks,
Pete
[jQuery] Re: Setting the selected item in a combo box
Ricardo,
I am a bit new at using jQuery so this could be an inane question:
Is the 'select' applied at the selector? If my control's id is
emplist would the correct syntax be:
$('#emplist select').val(empSelected);
empSelected, in this case, is a variable containing the value I want
to set the 'selected' attribute for.
This page is a template rendered by a server call and the server sets
the value of each of the fields of the form. But I want each field to
have the values that can be selected. The complete code is:
// Load the list using Ajax and Json:
$('#emplist').loadList(getEmpListURL, '#emplist');
// Then set the value of the selected option
$('#emplist select').val(empSelected);
The list is populated but the option value is not set to 'selected'
On Sep 29, 5:27 pm, ricardobeat [EMAIL PROTECTED] wrote:
$('select').val('value') should work (it needs to be applied to the
select, not the option
- ricardo
On Sep 29, 6:55 pm, Pete [EMAIL PROTECTED] wrote:
I have an element that I populate with an Ajax call and returns a list
of items for a combo box. In some cases the page containing the
element gets loaded with existing values and rendered and I'd like the
textbox to contain an item that was selected before the element is
rendered.
Is there a way to set that value? I have done some searching but
haven't found a solution as yet. I have looked at setting the
selected attribute but haven't found an example that works. I have
also tried setting the selected value with .val(myValue); but, again,
tried it and didn't get it to work.
It should be simple. But I can't seem to crack it. Suggestions?
Thanks,
Pete
[jQuery] Re: Unable to get the number of items in a combobox
Yes! Thanks very much. That was what I was looking for. And, thanks
for the clarification of what $(#id) was actually doing. I
*assumed* it was a single element, not a collection although I should
have gathered that from seeing the [0] reference in Firebug.
On Sep 25, 6:22 pm, equallyunequal [EMAIL PROTECTED] wrote:
The length property in a jQuery object or $(#emplist).length refers
to the number of elements that the jQuery selector matched. So, if
your selector was div, $(div).length would be the number of div
elements in your document. $(#id) doesn't return a single DOM
element, it returns a jQuery collection, with one DOM element in it.
What WOULD work is: $(#emplist).get(0).length. .get(0) returns the
first (0th) DOM element which, since there is only one element, will
be your #emplist element.
On Sep 25, 2:15 pm, Pete [EMAIL PROTECTED] wrote:
I don't have a lot of experience with javascript and jquery so this
question may have an obvious answer that I missed.
I have a combo box in jquery that I need to get the number of list
items from. I used the following syntax to get the number of items in
the list (based on some searching I did):
$('#emplist').length
The length indicated is 1, even though I know there are many items in
the list.
So I tried the standard way:
document.getElementById(emplist).length
The value here is 62
If I use Firebug to examine the $('#emplist') object, I see that under
the $('#emplist') object is a length property that is '1' but if I
inspect the object in Firebug I also see a 0 object listed
immediately below the $('#emplist') object and it has a length = 62.
So my question is, given that this 0 object has the correct value,
how do I reference that in my jquery ? Somehow $('#emplist').length
is wrong but I can't seem to figure out how to reference the correct
value that is listed under 0 in firebug. Any ideas? What am I doing
wrong in getting the number of items in the combobox?
Thanks,
Pete
[jQuery] Setting the selected item in a combo box
I have an element that I populate with an Ajax call and returns a list of items for a combo box. In some cases the page containing the element gets loaded with existing values and rendered and I'd like the textbox to contain an item that was selected before the element is rendered. Is there a way to set that value? I have done some searching but haven't found a solution as yet. I have looked at setting the selected attribute but haven't found an example that works. I have also tried setting the selected value with .val(myValue); but, again, tried it and didn't get it to work. It should be simple. But I can't seem to crack it. Suggestions? Thanks, Pete
[jQuery] Unable to get the number of items in a combobox
I don't have a lot of experience with javascript and jquery so this
question may have an obvious answer that I missed.
I have a combo box in jquery that I need to get the number of list
items from. I used the following syntax to get the number of items in
the list (based on some searching I did):
$('#emplist').length
The length indicated is 1, even though I know there are many items in
the list.
So I tried the standard way:
document.getElementById(emplist).length
The value here is 62
If I use Firebug to examine the $('#emplist') object, I see that under
the $('#emplist') object is a length property that is '1' but if I
inspect the object in Firebug I also see a 0 object listed
immediately below the $('#emplist') object and it has a length = 62.
So my question is, given that this 0 object has the correct value,
how do I reference that in my jquery ? Somehow $('#emplist').length
is wrong but I can't seem to figure out how to reference the correct
value that is listed under 0 in firebug. Any ideas? What am I doing
wrong in getting the number of items in the combobox?
Thanks,
Pete
[jQuery] File Exists
Hi all-
Looking for a way to determine if a file exists before uploading. I'm
working in asp.net and jquery, essentially my idea was to capture the submit
of the form, and .get the file name to another page that would return
true/false if the file existed. If exists, confirm file overwrite, if not
just post it.
Problem is currently, it doesn't always catch that the file exists, and if I
do get the confirm it seems to be ignored and just posts anyhow.
Here's some of the code:
asp:FileUpload ID=FileUpload1 runat=server /
asp:Button ID=Button1 runat=server Text=Submit /
$(function(){
$(#form1).submit(function() {
return fileexists();
});
});
function fileexists()
{
$.get(Exists.aspx, { file: $(#FileUpload1).val() },
function(data){
if(data.toLowerCase() == true)
{
return confirm(Overwrite);
}
else
{
return true;
}
});
}
Any help is appreciated,
Pete
[jQuery] Looking for always vertically centered select box....
I'm not sure how to describe this any better than the headline. I'm at the last stage of a project so if this is available as a plugin it would save me the time to create it. Essentially, when clicking a select box with numerical or time values, instead of the available choices dropping down or up, the selected value/time would appear in the center of the box. Later times would appear in a selectable box above and earlier times would appear in a box below. Is there anything out there already like this? It doesn't seem to be the stuff of impossibility but I have been wrong before. Thanks
[jQuery] Re: Looking for always vertically centered select box....
Ok. Point taken. I didn't want to mess around with divs if a select box could be manipulated beyond styling. Why recreate the wheel when select boxes work just fine for some tasks? On Jul 21, 2:24 pm, jquertil [EMAIL PROTECTED] wrote: can't use a select box (i.e html SELECT tag) because that is all O/S based. you would have to custom-build your popup as divs, position them based on the element you clicked on and have some conditional statement that decides whether to pop it at top or bottom of the clicked-on element. your questions sounds like you're not too familiar with these details and I doubt there is a plugin for it. most Select-replacement plugins simply try to recreate the standard popup behavior. HTH
[jQuery] getBoxObjectFor() is deprecated
I keep seeing this error message from time to time on a site that I'm working on. *Use of getBoxObjectFor() is deprecated. Try to use element.getBoundingClientRect() if possible.* The site still seems to work fine, it's just an annoying error. I have a feeling it has something to do with the jquery flash plugin I'm using, but I can't find an answer for it. Anyone have any ideas? Thanks, -pete
[jQuery] Re: Using jQuery on imported content
I want the index page to manage the links on the page that's loaded into the
div via ajax.
So in the index page, I'll try to attach the click event handler like :
$('a#myanchor').click(function(){//dosomething});
in the imported page, the anchor looks like: a href=url
id=myanchorlink/a
On Mon, Jul 14, 2008 at 2:36 PM, Brian J. Fink [EMAIL PROTECTED]
wrote:
What syntax are you using for the anchors themselves?
On Jul 14, 2:00 pm, Peter Benoit [EMAIL PROTECTED] wrote:
Hi all,
I have an index page with a div, that I $
('#mydiv).load('mypage.html') into.
The problem I'm having is, I have anchors on mypage that I would
like to effect with the click event on the index page. Trying to
access these loaded anchors via $('a#anchorid').click(...), isn't
working. Can someone show me how to handle this?
Thanks!
-pete
[jQuery] Selecting part of table structure
Assuming I have table tbody tr id=first td1/td /tr tr td2/td /tr /tbody /table is there a way with jQuery to select (and then clone) the following (i.e. the table structure, but with just the first tr table tbody tr id=first td1/td /tr /tbody /table Thanks for your help. Pete.
[jQuery] Selecting and cloning part of table structure
[Sorry if this is a dup, first one didn't seem to post.] Assuming I have table tbody tr id=first td1/td /tr tr td2/td /tr /tbody /table is there a way with jQuery to select and then clone the following (i.e. the table structure, but with just the first tr table tbody tr id=first td1/td /tr /tbody /table Thanks for your help Pete.
[jQuery] Re: Selecting and cloning part of table structure
Thanks, that's perfect.
On Apr 3, 9:10 am, Qutoz [EMAIL PROTECTED] wrote:
Hi Pete,
I made an example, please review it and tell me if it doesn't match
your needs:
html
head
script src=jquery.js/script
script
$(document).ready(function() {
var newtable = $(#mytable).clone(true);
newtable.attr(id,mytable2);
newtable.insertAfter(#mytable);
$(#mytable2 tbody tr:not(#first)).remove();});
/script
/head
body
table id=mytable border=1
tbody
tr id=first
td1/td
/tr
tr
td2/td
/tr
/tbody
/table
/body
/html
Thanks.
Qutoz,
On Apr 3, 5:52 am, Pete Kruckenberg [EMAIL PROTECTED]
wrote:
[Sorry if this is a dup, first one didn't seem to post.]
Assuming I have
table
tbody
tr id=first
td1/td
/tr
tr
td2/td
/tr
/tbody
/table
is there a way with jQuery to select and then clone the following
(i.e. the table structure, but with just the first tr
table
tbody
tr id=first
td1/td
/tr
/tbody
/table
Thanks for your help
Pete.
[jQuery] Re: Chm version of the jQuery api browser
Hi, Charles, question 2: it might be useful to integrate some update logic (a simple indication that a new version is available on the CHM splash page maybe?) A chm is just a compressed HTML pages with table of contents and index. So I don't think it can do such thing :-D. Have a look at the following article for a fairly simple way to alert users when a new version of the .chm file is available. http://www.writersua.com/mixingonlinechm.htm Pete
[jQuery] Post to Preloaded AJAX Page?
I would like to post data to a page that is loaded into the DOM and
refresh it, but I'm not sure how to do it.
Lets say I'm starting on on default.asp.
So when I click on a.openContact it properly loads somepage.asp into
#contactSection
---
$('a.openContact').click( function() {
$('#contactSection').load('somepage.asp');
});
---
Then I want to post some data to that page/div and have it refresh the
data. So when I click a.module:
---
$('a.module').click( function() {
$.post('somepage.asp', {
module: 'AP'
}, function() {
document.write(module));
});
return false;
});
---
I know this won't work because there's no refresh component. Should I
post it to default.asp#contactSection?
[jQuery] Re: Post to Preloaded AJAX Page?
That makes sense but I'm still not sure where/how to post it.
The main page is 'default.asp'. 'somepage.asp' is loaded into a div
(#contactSection). So can I post to default.asp#contactSection or
#contactSection somepage.asp or do I need additional parameters?
On Feb 1, 12:45 pm, andrea varnier [EMAIL PROTECTED] wrote:
On Feb 1, 8:28 pm, Pete [EMAIL PROTECTED] wrote:
$('a.module').click( function() {
$.post('somepage.asp', {
module: 'AP'
}, function() {
document.write(module));
});
return false;
});
Hi :)
you need to modify the $.post request.
the callback function needs some data to work on, you pass them just
like this:
$.post('somepage.asp', { module: AP }, function(data) { var module =
data; document.write(module); });
hope it helps
[jQuery] Re: Scrollable image in a div
Not offhand. In theory, mouse down triggers the bind(mousemove) and mouse up unbind's it, so you should not be seeing that behavior. There is a small typo in the args/invert checking above, i randomly added after pasting my test page into the email. var invert = (args ? (args.invert || false) : false); but that shouldn't affect this. But my jquery foo is admittedly sub-par, so please feel free modify my snippet and repost if enhanced. I did identical jquery/dojo ones last night upon reading the grandparent post (link). The only difference between them is i'm calling dojo.setSelectable(false|true) on drag start to prevent text from being selected. Not sure if jq has one of those. probably. And to be completely honest, I only tested the dragpane thing in FF. on that same note, I did another jquery thing someone mind find useul, or other enhance for the community's sake: http://dojotoolkit.org/~dante/magnify/MagnifyDemo.html to make it NOT take 100% of CPU, move the .coords() call to the _show() function. I've not updated that on that page, but it seems to work. I should have known better than to call dom calculation functions inside a mousemove event. (sorry in advance for loading jquery, dojo, and prototype on the same page) Regards, Peter Higgins On Jan 25, 2008 5:05 AM, Dave Stewart [EMAIL PROTECTED] wrote: Pete, Great little plugin there! I've done teh same using vanilla JavaScript; have yet to convert it to jQuery but this is a nice insight. One problem (bug) is that you seem to have to click (then it freezes) then release to move around, then re-click to cancel. Do you know why the mouse handlers are not responding as they in theory should? Cheers, Dave
[jQuery] Re: Scrollable image in a div
here's a stab.
use it the same as the link wrt the html/css, and then
$(#mydiv).DragPane({}); or
$(#mydiv).DragPane({ invert: true }); if the backwardness of it is
annoying to you.
leaving off the scrollbars would be a matter of styling the #myDiv
node overflow:hidden
jQuery.fn.DragPane = function(args){
return this.each(function(){
var invert = (args ? (args.invert || false) : false;
var mod = invert ? -1 : 1;
var m = {
_down:function(e){
$(this).css(cursor,move);
m._x = e.pageX;
m._y = e.pageY;
var t = this;
if ((m._x t.offsetLeft + t.clientWidth)
(m._y t.offsetTop + t.clientHeight)) {
$(this).bind(mousemove,m._move);
}
},
_up: function(e){
$(this).css(cursor,pointer);
$(this).unbind(mousemove,m._move);
},
_move: function(e){
this.scrollTop += (m._y - e.pageY) * mod;
this.scrollLeft += (m._x - e.pageX) * mod;
m._x = e.pageX;
m._y = e.pageY;
}
};
$(this).mousedown(m._down);
$(this).mouseup(m._up);
});
};
Regards,
Peter Higgins
On Jan 24, 2008 9:52 AM, bradrice [EMAIL PROTECTED] wrote:
Is there a plug-in or some jQuery code I can use to make a draggable
scroll image, similar to the scriptaculous effect of this:
http://wiki.script.aculo.us/scriptaculous/show/DragScrollable?
Brad
[jQuery] Re: Fading a background image
One way would be to put two block elements in a third that has
position:relative and the children each have position:absolute; top:0;
left:0; and the one with text has a higher zIndex. Fade out the underlay,
leaving the content?
On Dec 4, 2007 5:25 PM, jonhobbs [EMAIL PROTECTED] wrote:
HI Guys,
I'm trying to fadeIn the background image of an A tag (which is set to
display:blovk so effectively a div) when you roll over it. The A tags
form the main menu of a site I am designing.
I haven't managed to find any way of changing the Background Image
opacity using css so can't use the normal animate method.
I came up with one idea which was to wrap a coupld of block elements
inside each other. Each A tag would have the background image applied
and over the top of that there would be another block element with a
white background which I would fade out when I wanted the background
image to be visible.
The problem I have found is that when I fade the div with the white
background it also fades the contents, including the text of the menu
item.
Here is my Jquery.
$(.MyMenu a).hover(
function () {
$(this).children(.Fade).fadeOut(fast);
},
function () {
$(this).children(.Fade).fadeIn(fast);
}
);
Here is my CSS...
.MyMenu{}
.MyMenu a{display:block; background:url(MenuBack.gif) no-repeat right
center; text-align:right;}
.MyMenu a .Fade{display:block; background-color:White;}
.MyMenu a .Text{display:block; padding:4px 28px 5px 0;}
And here is the HTML..
div class=MyMenu
a href=#span class=Fadespan class=TextSummary/
span/span/a
a href=#span class=Fadespan class=TextFull
Description/span/span/a
a href=#span class=Fadespan class=TextCompare
Specs/span/span/a
a href=#span class=Fadespan class=TextImages amp;
Video/span/span/a
a href=#span class=Fadespan class=TextUser
Reviews/span/span/a
/div
Can anyone htink of an easier way to do this, or a better way
altogether ?
Jon
[jQuery] WAI-ARIA support in jQuery?
Hi! Is anyone working on implementing the appropriate WAI-ARIA roles, states and properties [1] where relevant in jQuery? [1]: http://www.w3.org/TR/aria-roadmap/ Regards, Peter Krantz
[jQuery] (Mis)Behaviour of not() ?
I've come across some behavior of not() that doesn't match the docs,
or I'm not understanding the docs.
Given the following form:
form
input type=hidden name=a
input type=hidden name=b
/form
I'd expect $('form :input:not(:hidden[name=a])') to return [input
type=hidden name=b],
since $('form :hidden[name=a]') returns [input type=hidden
name=a] and
and not(selector) should Filters out all elements matching the given
selector.
However, $('form :input:not(:hidden[name=a])') instead returns
[ ] (empty array), acting more like
$('form :input:not(:hidden):not([name=a])') or $
('form :input:not(:hidden,[name=a])') (i.e. oring the selector
parameters instead of anding them).
$('form :input').not(':hidden[name=a])') produces the same results
(empty array). I'd expect it to be the inverse of $
('form :input').filter(':hidden[name=a])') (which returns [input
type=hidden name=a].
Am I misunderstanding the docs, or is this a bug with not()?
I get the same results in both 1.2.1 and 1.1.4. Tested on FF2.0.0.8/
Win.
Thanks.
Pete.
[jQuery] Re: jQuery for Floating Div
Karl --
Thanks for the link. That is similar to what I'm looking for; thanks!
Unfortunately, I don't know nearly enough about jQuery -- or JS -- to modify
the script.
And, also, it looks like Amazon launched a new design tonight, eliminating
the menu. Grrr.
I slightly modified the script and it sort of works, although I don't
imagine I'm using very good programming practices:
$(document).ready(function(){
$(#link).mouseover(function(){
$('#popup_menu').show();
return false;
});
$(#popup_menu).mouseover(function() {
$('#popup_menu').show();
return false;
});
$(#popup_menu).mouseout(function() {
$('#popup_menu').hide();
});
});
Maybe you could help guide me with some of the issues I'm trying to resolve:
* It disappears great, so long as you go into the box and then leave the
box. This isn't exactly usable in a menu, though -- if people roll over the
tab/link and then roll off it, I think they'd expect the box to disappear.
* Just as a test, I quickly grabbed a CSS menu off of dynamicdrive.com -- if
you rollover tools, you'll see the div. However, when you move your cursor
to the div, the hover color goes away. Any idea how to fix this?
(New sample URL: http://www.keuka.edu/pete/popover)
Also, abs positioning is giving me a hard time ... looks fine on FF, but not
so great on IE. I'm assuming this is a CSS thing, though.
On 9/24/07, Karl Swedberg [EMAIL PROTECTED] wrote:
Hey Glen,
That's actually a pretty old version of the plugin. A new(er) and improved
version can be found here:
http://plugins.learningjquery.com/cluetip/demo/
Pete,
Check out that URL above and click on the Examples link at the top of the
page. Then hover over the link that says sort of like amazon.com? under
the Custom (temporary) section. Maybe that's something close to what
you're looking for?
One of these days when I'm not swamped with freelance work, I'd like to
write a stripped-down plugin that just does that amazon.com thing. A bunch
of people have already asked for it.
Cheers,
--Karl
On Sep 24, 2007, at 6:36 PM, Glen Lipka wrote:
That's a nice effect. I have been trying to do something like that too.
Microsoft does a very similar thing.
Some helpful plugins to check out:
1. Hoverintent. Slows down the interaction to make sure the user intended
to mouseover.http://cherne.net/brian/resources/jquery.hoverIntent.html
2. ClueTip. Shows one example of popup hovers like that.
http://examples.learningjquery.com/62/demo/
There may be other plugins that help. I am interested in this if you nail
it.
Glen
On 9/24/07, Pete [EMAIL PROTECTED] wrote:
Hi all,
I'm trying to construct a popover menu that resembles the one on
Amazon.com (put your mouse over see all 43 product categories). I'm
not too familiar with jQuery/JavaScript, but I thought I would be able
to do something like this:
$(document).ready(function(){
$(#link).mouseover(function(){
$(#popup_menu).show();
return false;
});
$(#popup_menu).mouseout(function(){
$(this).hide();
return false;
});
});
The problem is, as soon as you move your mouse off the link to go into
the div, it collapses. Could someone please offer some examples/
insight?
If you'd like to see the page, here's a link:
http://www.keuka.edu/pete/jquery_float.html
Thanks!
[jQuery] Re: jQuery for Floating Div
Glen --
That's really slick! I don't think I'll be able to use it on this project
though, but I think it's great for a quicklinks feature. It just pulled up
Intuit -- what a slick site!
On 9/24/07, Glen Lipka [EMAIL PROTECTED] wrote:
Sorry Karl. I just grabbed the one that came up first in google. :)
Yeah, that amazon effect is really useful.
I tried to do that with Intuit, but couldn't figure it out, so I ended up
with the slideLinks instead.
These did very well in usability studies. Unexpected wow.
http://www.commadot.com/jquery/slideMenu.php (click links at top)
Pete, even though its not what you asked for, it might be a good choice.
Glen
On 9/24/07, Karl Swedberg [EMAIL PROTECTED] wrote:
Hey Glen,
That's actually a pretty old version of the plugin. A new(er) and
improved version can be found here:
http://plugins.learningjquery.com/cluetip/demo/
Pete,
Check out that URL above and click on the Examples link at the top of
the page. Then hover over the link that says sort of like amazon.com?
under the Custom (temporary) section. Maybe that's something close to what
you're looking for?
One of these days when I'm not swamped with freelance work, I'd like to
write a stripped-down plugin that just does that amazon.com thing. A
bunch of people have already asked for it.
Cheers,
--Karl
On Sep 24, 2007, at 6:36 PM, Glen Lipka wrote:
That's a nice effect. I have been trying to do something like that
too. Microsoft does a very similar thing.
Some helpful plugins to check out:
1. Hoverintent. Slows down the interaction to make sure the user
intended to
mouseover.http://cherne.net/brian/resources/jquery.hoverIntent.html
2. ClueTip. Shows one example of popup hovers like that.
http://examples.learningjquery.com/62/demo/
There may be other plugins that help. I am interested in this if you
nail it.
Glen
On 9/24/07, Pete [EMAIL PROTECTED] wrote:
Hi all,
I'm trying to construct a popover menu that resembles the one on
Amazon.com (put your mouse over see all 43 product categories). I'm
not too familiar with jQuery/JavaScript, but I thought I would be able
to do something like this:
$(document).ready(function(){
$(#link).mouseover(function(){
$(#popup_menu).show();
return false;
});
$(#popup_menu).mouseout(function(){
$(this).hide();
return false;
});
});
The problem is, as soon as you move your mouse off the link to go into
the div, it collapses. Could someone please offer some examples/
insight?
If you'd like to see the page, here's a link:
http://www.keuka.edu/pete/jquery_float.html
Thanks!
[jQuery] Re: jQuery for Floating Div
Actually, Amazon looks the same again. I wonder what they're up to over
there
On 9/25/07, Glen Lipka [EMAIL PROTECTED] wrote:
If amazon took theirs down, you can still see a similar example on
Microsoft. Wow, microsoft just changed their site pretty heavily.
Try here http://msdn2.microsoft.com/en-us/default.aspx
They optimize for IE7 of course. Top right link.
Glen
On 9/24/07, Pete Bekisz [EMAIL PROTECTED] wrote:
Glen --
That's really slick! I don't think I'll be able to use it on this
project though, but I think it's great for a quicklinks feature. It just
pulled up Intuit -- what a slick site!
On 9/24/07, Glen Lipka [EMAIL PROTECTED] wrote:
Sorry Karl. I just grabbed the one that came up first in google. :)
Yeah, that amazon effect is really useful.
I tried to do that with Intuit, but couldn't figure it out, so I ended
up with the slideLinks instead.
These did very well in usability studies. Unexpected wow.
http://www.commadot.com/jquery/slideMenu.php (click links at top)
Pete, even though its not what you asked for, it might be a good
choice.
Glen
On 9/24/07, Karl Swedberg [EMAIL PROTECTED] wrote:
Hey Glen,
That's actually a pretty old version of the plugin. A new(er) and
improved version can be found here:
http://plugins.learningjquery.com/cluetip/demo/
Pete,
Check out that URL above and click on the Examples link at the top
of the page. Then hover over the link that says sort of like
amazon.com? under the Custom (temporary) section. Maybe that's
something close to what you're looking for?
One of these days when I'm not swamped with freelance work, I'd like
to write a stripped-down plugin that just does that amazon.comthing. A
bunch of people have already asked for it.
Cheers,
--Karl
On Sep 24, 2007, at 6:36 PM, Glen Lipka wrote:
That's a nice effect. I have been trying to do something like that
too. Microsoft does a very similar thing.
Some helpful plugins to check out:
1. Hoverintent. Slows down the interaction to make sure the user
intended to
mouseover.http://cherne.net/brian/resources/jquery.hoverIntent.html
2. ClueTip. Shows one example of popup hovers like that.
http://examples.learningjquery.com/62/demo/
There may be other plugins that help. I am interested in this if
you nail it.
Glen
On 9/24/07, Pete [EMAIL PROTECTED] wrote:
Hi all,
I'm trying to construct a popover menu that resembles the one on
Amazon.com (put your mouse over see all 43 product categories).
I'm
not too familiar with jQuery/JavaScript, but I thought I would be
able
to do something like this:
$(document).ready(function(){
$(#link).mouseover(function(){
$(#popup_menu).show();
return false;
});
$(#popup_menu).mouseout(function(){
$(this).hide();
return false;
});
});
The problem is, as soon as you move your mouse off the link to go
into
the div, it collapses. Could someone please offer some examples/
insight?
If you'd like to see the page, here's a link:
http://www.keuka.edu/pete/jquery_float.html
Thanks!
[jQuery] jQuery for Floating Div
Hi all,
I'm trying to construct a popover menu that resembles the one on
Amazon.com (put your mouse over see all 43 product categories). I'm
not too familiar with jQuery/JavaScript, but I thought I would be able
to do something like this:
$(document).ready(function(){
$(#link).mouseover(function(){
$(#popup_menu).show();
return false;
});
$(#popup_menu).mouseout(function(){
$(this).hide();
return false;
});
});
The problem is, as soon as you move your mouse off the link to go into
the div, it collapses. Could someone please offer some examples/
insight?
If you'd like to see the page, here's a link:
http://www.keuka.edu/pete/jquery_float.html
Thanks!
[jQuery] AJAX GET error if file does not exist?
I'm creating a client side application using JQuery. It's wildly inefficient but unfortunately it's the cards I've been dealt on this one. I'm looking to get a page using either $AJAX or $GET. I'm able to get pages just fine if the file exists. If the file does not exist I get a permission denied error in IE. Is there anyway to get around that IE message if a file does not exist? I tried using ajaxError but that still threw the IE error. Thanks.
[jQuery] AJAX GET from an higher directory. FF Yes IE No
I don't even know if this is possible but I'm looking to get a page in
an upper directory via an AJAX call. The following works in FireFox,
but Internet Explorer throws a Permission Denied.
$(this).find('a').click(function(){
$.get(../ajaxtest-content.html,
function(data){
alert(I am here and I exist);
});
});
Is there any rhyme or reason to this or is it just impossible to load
a file from a different directory in IE?
[jQuery] AJAX GET from an higher directory. FF Yes IE No
I'm wondering if this is even possible. Essentially I'm looking to
see if a file in an higher directory exists:
$(this).find('a').click(function(){
$.get(../ajaxtest-content.html, function(data){
alert(I am here and I exist);
});
});
With FireFox, this works perfectly, but I keep getting a generic
Permission Denied error from IE.
[jQuery] Re: OT: No form submit without JavaScript?
Ok. That makes perfect sense. Thank you. On Sep 7, 3:35 am, Klaus Hartl [EMAIL PROTECTED] wrote: Pete wrote: I have some forms that I perform validation on using the Validation plugin for jQuery. My sole purpose for this, is that I'd like to reduce spam (and my company gets quite a bit). I understand the NOSCRIPT tag, but is there a way to prevent form submission if a user does not have Javascript? I know alert boxes and things like that are not possible without JavaScript but a simple bold, red message in NOSCRIPT should do. I just can't figure it out. I apologize if this is way off topic. Some ideas: * generate the whole form using JavaScript or load it into the page via Ajax * let the form's action point to some spam bucket url and you'll change the attribute via JavaScript * disable *all* form controls (not only the submit button because you can still submit the form hitting enter). That way it's hard to submit the form at all, although there might be a way to focus it and hit enter. enable all the fields with javascript... --Klaus
[jQuery] OT: No form submit without JavaScript?
I have some forms that I perform validation on using the Validation plugin for jQuery. My sole purpose for this, is that I'd like to reduce spam (and my company gets quite a bit). I understand the NOSCRIPT tag, but is there a way to prevent form submission if a user does not have Javascript? I know alert boxes and things like that are not possible without JavaScript but a simple bold, red message in NOSCRIPT should do. I just can't figure it out. I apologize if this is way off topic.
[jQuery] Re: Ajax call within ajax called page: IE error?
I'm making a reply to my own post because I figured it out (several
other posts are running into the same thing). Hopefully if someone
runs across this it will save a headache.
In my example, it worked in FireFox but not in I:
$(this).find('a.version').click(function(){
$('#CYMA_Version').load(this.id + '.asp');
return false;
});
The key is that you also have to use $.getScript to load ANY scripts
in your load statement:
$(this).find('a.version').click(function(){
$('#CYMA_Version').load(this.id + '.asp',
function() {
$('a.tab').click(function(){
$('#UpdateCenter_Request').load(this.id + '.asp', function()
{
$.getScript(../../js/zebra_table.js);
$.getScript(../../js/thickbox.js, function(){
alert(Script
loaded and executed.);
});
});
});
Apparently Jquery does not have to be loaded Don't ask me why but
it doesn't. Hope this helps anyone who searches for this later on.
On Aug 10, 3:35 pm, Pete [EMAIL PROTECTED] wrote:
I'm running into a problem with a simple Ajax call within an ajax
called page in IE. I did a forum search and it didn't really clue me
into what's going on.
In the page:
http://www.cyma.com/NEWCYMA/support/updatecenter/ (Page 1)
Clicking on Version 9 loads a page with two god ugly tabs:
Downloads / Updates and Documents
Clicking on either tab loads the appropriate page.
In FireFox it loads the appropriate page, in IE7 nothing happens.
The page that is being loaded is:
http://www.cyma.com/NEWCYMA/support/updatecenter/v9.asp (Page 2)
This page does indeed work in IE7 and in FireFox.
The calls are similar. Is this a known issue?
-
(Page 1 Ajax call)
$(this).find('a.version').click(function(){
$('#CYMA_Version').load(this.id + '.asp');
return false;
});
-
(Page 2 Ajax call)
$(this).find('a.tab').click(function(){
$('#UpdateCenter_Request').load('v9/' + this.id + '.asp');
return false;
});
-
[jQuery] Ajax call within ajax called page: IE error?
I'm running into a problem with a simple Ajax call within an ajax
called page in IE. I did a forum search and it didn't really clue me
into what's going on.
In the page:
http://www.cyma.com/NEWCYMA/support/updatecenter/(Page 1)
Clicking on Version 9 loads a page with two god ugly tabs:
Downloads / Updates and Documents
Clicking on either tab loads the appropriate page.
In FireFox it loads the appropriate page, in IE7 nothing happens.
The page that is being loaded is:
http://www.cyma.com/NEWCYMA/support/updatecenter/v9.asp (Page 2)
This page does indeed work in IE7 and in FireFox.
The calls are similar. Is this a known issue?
-
(Page 1 Ajax call)
$(this).find('a.version').click(function(){
$('#CYMA_Version').load(this.id + '.asp');
return false;
});
-
(Page 2 Ajax call)
$(this).find('a.tab').click(function(){
$('#UpdateCenter_Request').load('v9/' + this.id + '.asp');
return false;
});
-
[jQuery] IS condition true like an if statement?
I'm trying to create a link that when clicked will produce an alert if
there are any visible divs (all .detail divs are hidden by default).
I have the following function but it doesn't seem I'm doing it
correctly; nothing happens regardless of the visibility status of the
divs.
$(a.saveConfig).click(function() {
$('div.detail').is(':visible'), (function () {
alert('Hey this works');
});
});
Is there a better way to do an if statement using JQuery selectors or
is there something I'm missing in my code?
[jQuery] Re: IS condition true like an if statement?
I guess I'm still not getting else out of this. I thought I had it
figured out
I think what's confusing to me as a n00b is that if does not seem to
be closed. How would I accomplish an else condition?
On Aug 3, 11:27 am, Klaus Hartl [EMAIL PROTECTED] wrote:
Pete wrote:
I'm trying to create a link that when clicked will produce an alert if
there are any visible divs (all .detail divs are hidden by default).
I have the following function but it doesn't seem I'm doing it
correctly; nothing happens regardless of the visibility status of the
divs.
$(a.saveConfig).click(function() {
$('div.detail').is(':visible'), (function () {
alert('Hey this works');
});
});
Is there a better way to do an if statement using JQuery selectors or
is there something I'm missing in my code?
The good thing about jQuery is that it has that if staterment kind of
built-in. If the selector doesn't match anything all the subsequently
chained functions are not executed. This only works with jQuery methods
of course but not with an alert like in your example:
$('div.detail:visible').append('I'm visible');
The string is appended only if div.detail is visible.
If you need to execute a non jQuery function you can still use the
each() method to avoid an if statement:
$('div.detail:visible').each(function() {
alert('Hey this works');
});
--Klaus
[jQuery] Re: IS condition true like an if statement?
Sorry... I figured it out fairly easily. Still learning over here.
Thanks for the help!
On Aug 3, 10:57 am, Ganeshji Marwaha [EMAIL PROTECTED] wrote:
Yes, is() method returns true/false. This is one of the few methods which
doesnt return a jquery object because it makes more sense to return boolean.
-GTG
On 8/3/07, spinnach [EMAIL PROTECTED] wrote:
try it like this, .is() returns true or false so you have to use it in
an if statement:
$(a.saveConfig).click(function() {
if ($('div.detail').is(':visible')) alert('Hey this works');
});
dennis.
Pete wrote:
I'm trying to create a link that when clicked will produce an alert if
there are any visible divs (all .detail divs are hidden by default).
I have the following function but it doesn't seem I'm doing it
correctly; nothing happens regardless of the visibility status of the
divs.
$(a.saveConfig).click(function() {
$('div.detail').is(':visible'), (function () {
alert('Hey this works');
});
});
Is there a better way to do an if statement using JQuery selectors or
is there something I'm missing in my code?
[jQuery] Re: IS condition true like an if statement?
I'm still confused about one thing though. How does the else portion
work? Sorry for being such a noob, but I haven't been able to find
the syntax using IS as an if statment through Jquery.
On Aug 3, 10:57 am, Ganeshji Marwaha [EMAIL PROTECTED] wrote:
Yes, is() method returns true/false. This is one of the few methods which
doesnt return a jquery object because it makes more sense to return boolean.
-GTG
On 8/3/07, spinnach [EMAIL PROTECTED] wrote:
try it like this, .is() returns true or false so you have to use it in
an if statement:
$(a.saveConfig).click(function() {
if ($('div.detail').is(':visible')) alert('Hey this works');
});
dennis.
Pete wrote:
I'm trying to create a link that when clicked will produce an alert if
there are any visible divs (all .detail divs are hidden by default).
I have the following function but it doesn't seem I'm doing it
correctly; nothing happens regardless of the visibility status of the
divs.
$(a.saveConfig).click(function() {
$('div.detail').is(':visible'), (function () {
alert('Hey this works');
});
});
Is there a better way to do an if statement using JQuery selectors or
is there something I'm missing in my code?
[jQuery] Re: IS condition true like an if statement?
PERFECT! That helps me out quite a bit since I didn't really know the
syntax on JQuery conditional statements.
On Aug 3, 10:26 am, spinnach [EMAIL PROTECTED] wrote:
try it like this, .is() returns true or false so you have to use it in
an if statement:
$(a.saveConfig).click(function() {
if ($('div.detail').is(':visible')) alert('Hey this works');
});
dennis.
Pete wrote:
I'm trying to create a link that when clicked will produce an alert if
there are any visible divs (all .detail divs are hidden by default).
I have the following function but it doesn't seem I'm doing it
correctly; nothing happens regardless of the visibility status of the
divs.
$(a.saveConfig).click(function() {
$('div.detail').is(':visible'), (function () {
alert('Hey this works');
});
});
Is there a better way to do an if statement using JQuery selectors or
is there something I'm missing in my code?
[jQuery] Google Maps like interface with JQuery
Hi All, Does anyone know of a Google Maps like interface implemented using JQuery? The only real requirement is that a user can zoom in/out. On zoom, a new image is properly loaded in terms of zoom and user expected location. If not, could you point me to a couple functions within JQuery that would be a good starting point for this type of project? Cheers, Pete
[jQuery] Slide-in/out: Toggle right panel example?
It seemed like forever when I was searching for anything jQuery, I kept coming up with a very nice example where a form button would toggle a dark gray panel to slide in from the right and then slide out on toggle. The panel takes up 100% of the page. I can't seem to find it now that I would actually like to see how it's implemented. Any help? THX Pete
