[jQuery] Re: Selector Efficiency?
Hi Josh,
it looks like $foo.find(:header) has a problem since there is no
single root element. Wrapping your data packet into div would help:
$foo = $(div+foo+/div);
but since you are after a speed optimization I would suggest:
layerType = $(queryTarget[0]).text();
This gets the text of your first element, which is your header.
One remark to the speed measurement:
Do you get each packet from a different source type or do they came in
streams from one source?
If you have to do the layer look up for every packet, you have to
account this time to your speed measurement as well.
If you are really after high speed, you could use a pure JavaScript
variant, which is about 25x faster than the original approach in IE.
For that you would have to remove white spaces between your nodes, to
avoid browser quirks.
var $foo = $(foo.replace(/\s+/g,));
see: http://jsbin.com/ukewu
But be warned, with this optimization you are hard coded to the
current data packet layout and may not even change a point in it!
This is a general remark: optimization goes against readability and
flexibility in most cases.
So you have to decide for every project and optimization step, what's
worth more, speed vs. flexibility / scalability vs. readability /
simplicity
by(e)
Stephan
2009/3/2 Josh Rosenthal maric...@gmail.com:
Hi Stephen,
My apologies for not getting back to you sooner. I've been sick and my
projects have gotten away from me.
We now return to the email I'd started writing before I lost track of
everything.
Thank you! Trebly so!
First, yes, the data is ordered based on a template in geoserver that
produces the KMLs. Unfortunately, I'd simplified the issue in order to ask
my question. There are actually two parcel sources, which each produce
different sets of fields. The snippet I included above is from the low
quality parcels. In the high quality parcels, MAP_ID becomes MAP_PAR_ID,
(hence my use of MAP_ as my search term). Similarly, the indices change
depending on the layer.
However, I can detect which layer i'm using (listed in the header), so in
theory I could detect and then use indices appropriate to the layer. Mind
you, on trying this, I can't get $foo.find(:header).text(); to work, so
I'm not quite sure how to get it to work. - http://jsbin.com/ujoco using
queryTarget for the second index attempt.
Given that the name of the fields change, I don't think I can use the hash
solution in any way other than the if layername == check that I was trying
before (which in any case requires a .find('header') to work).
Second, my thanks for the very cool site link. Definitely great for sample
snippets.
Thirdly, the sample speed measurement code - one reason for the question in
the first place was not knowing how to measure speed. The sample helps a
lot.
Thanks a lot, and sorry for the delay in responding,
Josh
On Thu, Feb 19, 2009 at 5:12 AM, Stephan Veigl stephan.ve...@gmail.com
wrote:
Hi Josh,
are your data ordered? (e.g. MAP_ID is the first li, SITE_ADDRESS
the second, ...)
If yes you can use a index based approach (from 4.8ms to 0.9ms on IE).
var $foo = $(foo);
var data = $foo.find(.atr-value);
var parcelOutput = 'Parcel ID: ' +
$(data[0]).text() +
'br' +
'Address: ' +
$(data[1]).text();
Otherwise you can build a hash table of your name - value attributes
and du a hash lookup (from 4.8ms to 2.7ms on IE)
var $foo = $(foo);
var names = $foo.find(.atr-name);
var data = $foo.find(.atr-value);
var hash = {};
for (var j=0; jnames.length; j++) {
hash[$(names[j]).text()] = $(data[j]).text();
}
var parcelOutput = 'Parcel ID: ' +
hash['MAP_ID'] +
'br' +
'Address: ' +
hash['SITE_ADDRESS'];
see my examples on the profiling test page:
http://jsbin.com/ifico/edit
by(e)
Stephan
2009/2/18 Josh Rosenthal maric...@gmail.com:
So... a question regarding selector efficiency.
The following snippet of HTML describes attributes associated with a
polygon
in an KML. Its basically a table of data, contained as spans in lis
in
a ul. Given this snippet, what would be the best (fastest) way to
return
the values of MAP_ID and SITE_ADDRESS
foo = h4GISDATA.ASSESSPARNC_POLY_PUBLIC/h4
ul class=textattributes
listrongspan class=atr-nameMAP_ID/span:/strong span
class=atr-value16-27/span/li
listrongspan class=atr-nameSITE_ADDRESS/span:/strong span
class=atr-value396 Main St/span/li
listrongspan class=atr-nameSITE_OTHER_FIELD/span:/strong
span
class=atr-valueGrat Data/span/li
listrongspan class=atr-nameUSE_CODE/span:/strong span
class=atr-value101/span/li
listrongspan class=atr-nameTOWN_ID/span:/strong span
class=atr-value116/span/li
listrongspan
class=atr-nameWARREN_GROUP_05_MAP_ID/span:/strong
span class=atr-valueM:0016 B: L:0027/span/li
listrongspan class=atr-nameACRES/span:/strong span
class=atr-value0.67102373655/span/li
/ul
[jQuery] Re: jQuery validation question: validating multiple email inputs
Hi,
you have the same error as above.
Having a return statement in a for loop will evaluate the first element only.
If you want to validate all emails that's a logical AND conjunction of
all single email validations. So you have to have some and function in
your code as well.
Try something like:
valid = true;
for(var i in emails) {
value = emails[i];
valid = valid jQuery.validator.methods.email.call(this, value,
element, param);
}
return valid;
by(e)
Stephan
2009/3/2 ml2009 mcl...@systemsview.biz:
Hello - wonder if you could help me. I tried another way to validate
multiple email addresses, but I still couldn't figure it out. on code
below, only the first email is validated. Any suggestions?
jQuery.validator.addMethod(multiemail, function(value, element,
param) {
if (this.optional(element)) // return true on optional element
return true;
var emails = value.split(',');
// for(var i = 0; i emails.length; i++) {
for(var i in emails) {
value = emails[i];
//alert(i);
return
jQuery.validator.methods.email.call(this, value, element,
param);
}
},
jQuery.validator.messages.email // use default message
);
[jQuery] Re: nested each - how to access parent's this??
Hi,
simply use a local variable:
return this.each(function() {
var parent = $(this);
$(selector).each(function() {
// do whatever you want with 'parent'
});
});
by(e)
Stephan
2009/2/26 mahakala mpy...@googlemail.com:
Hi all,
I'm new to jQuery and just got stuck on a problem where I'm having 2
nested $.each methods and need to access this of the parent each loop,
is this possible at all??
return this.each(function() {
$(selector).each(function() {
// how do i get reference to this in parent each?? :-(
});
});
any help appreciated
M
[jQuery] Re: Multiple JSON objects - using results from one JSON object within a $.each() parse of another JSON object
Hi,
first of all, AJAX is _asynchronous_, do you have any mechanism that
ensures that the stations callback is executed _before_ the
_dataloggers_ callback? (e.g. requesting datalogger once myStations
has been filled)
If you use myStations in both callbacks is should be a global
variable. (I know, global variables are no good programming practice.
So either put all your global variables into one global object to
reduce namespace pollution or have it global in the scope of the
callbacks).
Would the additional snet: TA variable hurt in myStations?
If not, simply link the json result to myStations:
var myStations = {} ;
$.getJSON(path/to/stations.js, function(stalist) {
$.each(stalist.stations, function(staname,stavalues){
var myStaTitle = stavalues.snet+_+staname ;
myStations[myStaTitle] = stavalues;
});
});
I also noticed that you have a return statement in your callback. For
whom this return should be? The callback is executed within jQuery on
success of your AJAX request. jQuery does not know of your return
value.
by(e)
Stephan
2009/2/27 tatlar robertlnew...@gmail.com:
Attempt to post again.
Hi All,
I have a JSON object (called 'dataloggers') that I am retrieving via
$.getJSON, and then creating a table dynamically with the results .
I can parse it just fine with $.each().
The structure looks like this:
{
dataloggers: {
TA_124A: {
values: {
one: wake,
two: up,
three: time,
four: to,
five: die
}
},
TA_109C: {
values: {
one: this,
two: is,
three: not,
four: a,
five: test
}
}
}
}
Here is the code I have for processing the 'dataloggers' JSON object:
$.getJSON(path/to/dataloggers.js, function(dlmon) {
$.each(dlmon.dataloggers, function(dlname,arr){
var tBodyRow = tr;
tBodyRow += 'td'+dlname+'/td' ;
$.each(arr.values, function(vKey,vVal){
tBodyRow += 'td'+vKey+': '+vVal+'/td' ;
});
tBodyRow += /tr ;
$(table#dataloggers tbody).append(tBodyRow);
});
});
This outputs a table:
table id=dataloggers
thead/thead
tfoot/tfoot
tbody
tr
tdTA_124A/td
tdone: wake/td
tdtwo: up/td
tdthree: time/td
tdfour: to/td
tdfive: die/td
/tr
tr
tdTA_109C/td
tdone: this/td
tdtwo: is/td
tdthree: not/td
tdfour: a/td
tdfive: test/td
/tr
/tbody
/table
I have another JSON object (called 'stations') that I am retrieving
via $.getJSON(), that has the following structure:
{
stations:{
124A:{
commtype:slink2orb,
provider:orb,
snet: TA
},
109C:{
commtype: vsat,
provider: Verizon,
snet: TA
}
}
}
What I need to do is process the 'stations' JSON object and add the
values returned to the processing of the 'dataloggers' object with the
$.each() function, so that the HTML table output now looks like
this:
table id=dataloggers
thead/thead
tfoot/tfoot
tbody
tr
tdTA_124A/td
tdone: wake/td
tdtwo: up/td
tdthree: time/td
tdfour: to/td
tdfive: die/td
tdcommtype: slink2orb/td
tdprovider: orb/td
/tr
tr
tdTA_109C/td
tdone: this/td
tdtwo: is/td
tdthree: not/td
tdfour: a/td
tdfive: test/td
tdcommtype: vsat/td
tdprovider: Verizon/td
/tr
/tbody
/table
You will notice that the 'stations' object has a key-val pair of
snet:TA, which makes it easy for me to match the 'dataloggers' key
by just concatenating the 'stations' key with the 'snet' value. So
what I *think* I need to do is process the 'stations' JSON object
first, and create a new jQuery object on the fly with all the values I
need, which I then pass into the $.each() processing of the
'dataloggers' object. I tried to do this:
$.getJSON(path/to/stations.js, function(stalist) {
var myStations = {} ;
$.each(stalist.stations, function(staname,stavalues){
var myStaTitle = stavalues.snet+_+staname ;
var myStaVals = { commtype: stavalues.commtype, provider:
stavalues.provider } ;
var staObj.push(myStaTitle) = myStaVals ; // could be very
wrong to use the push() array method??
});
return myStations ;
});
I would have thought that I could then pass this newly created jQuery
object ('myStations') to the processing of the 'dataloggers' JSON
object, using the 'myStaTitle' match with the 'dlname' key. But every
attempt I have made has failed. For whatever
[jQuery] Re: Exploding nested divs....
You could try something similar to $(#outerdiv).children().hide(explode); by(e) Stephan 2009/2/27 webspee...@gmail.com webspee...@gmail.com: Using the explode animation, where the div explodes into X pieces. On Feb 17, 8:30 pm, Ricardo Tomasi ricardob...@gmail.com wrote: What do you mean by explode? remove? On Feb 17, 4:50 pm, webspee...@gmail.com webspee...@gmail.com wrote: Hey all. Exploding a simple div is easy enough, but can you explode nested divs? I have a div container and inside it I have content generated from an AJAX call. When I explode the outer div, I don't get the pieces and the screen freezes up for a second. I don't know if the div is too large or if it is because of the inside div. Also, I would assume the inside div (the one returned via AJAX) would have to be re-binded, is this correct? If so, how do you bind on an explode? I can't simply write the statement, otherwise it would explode immediately on the return from the AJAX call. I was just curious about this is all. ...
[jQuery] Re: Hide/Show when Check Box is selected
Hi
the example is working on IDs (see the # in the selector).
If you send a HTML snippet of your page, maybe I better understand
what you mean.
by(e)
Stephan
2009/2/26 nubcake unniw...@gmail.com:
Hey!
Is there any simple way to rewrite that so it works on ID:s instead on
class?
I have several checkboxes/hidden divs, but I only want to unhide
the div that belongs to the clicked checkbox.
Best regards.
On Feb 18, 5:10 pm, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi Miguel,
you can use the click trigger of the checkbox:
form
show secret: input id=checkbox type=checkbox/
div id=div
secret field: input type=text /
/div
/from
$(#div).hide();
$(#checkbox).click(function(){
if ( this.checked ) {
$(#div).show();
} else {
$(#div).hide();
}
})
by(e)
Stephan
2009/2/18 shapper mdmo...@gmail.com:
Hello,
On a form how can I Show a fieldset when a checkbox is Selected and
Hide the same fieldset when the same checkbox is unselected?
Thanks,
Miguel
[jQuery] Re: Hide/Show when Check Box is selected
Hi,
1. Hide all your divs. Maybe you could add a distinguishable class to
your hidden divs, this would make the selection more readable and
precise.
$(.left div).hide();
2. Add a click handler to all your checkboxes.
Get the ID from the value attribute and hide / show the according div.
$(.left :checkbox).click(function(){
var id = #div+this.value;
if ( this.checked )
$(id).show();
else
$(id).hide();
});
by(e)
Stephan
2009/2/26 nubcake unniw...@gmail.com:
Hello again!
div class=container
h1GENERAL/h1
div class=left
input type=checkbox name=application[] value=101a
class=tooltip href=#App #1spanInfo/span/abr
div id=div101[SECRET FIELD FOR App #1]/div
input type=checkbox name=application[] value=100a
class=tooltip href=#App #2spanInfo/span/abr
div id=div100[SECRET FIELD FOR App #2]/div
.
/div
/div
I'd like to have it so when I click the checkbox for App #1 only the
secret field for App #1 becomes visable.
Thanks for your help!
Best regards
On Feb 26, 2:18 pm, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi
the example is working on IDs (see the # in the selector).
If you send a HTML snippet of your page, maybe I better understand
what you mean.
by(e)
Stephan
2009/2/26 nubcake unniw...@gmail.com:
Hey!
Is there any simple way to rewrite that so it works on ID:s instead on
class?
I have several checkboxes/hidden divs, but I only want to unhide
the div that belongs to the clicked checkbox.
Best regards.
On Feb 18, 5:10 pm, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi Miguel,
you can use the click trigger of the checkbox:
form
show secret: input id=checkbox type=checkbox/
div id=div
secret field: input type=text /
/div
/from
$(#div).hide();
$(#checkbox).click(function(){
if ( this.checked ) {
$(#div).show();
} else {
$(#div).hide();
}
})
by(e)
Stephan
2009/2/18 shapper mdmo...@gmail.com:
Hello,
On a form how can I Show a fieldset when a checkbox is Selected and
Hide the same fieldset when the same checkbox is unselected?
Thanks,
Miguel
[jQuery] Re: Clone Line and Increase Number by +1
Hi Stephen,
could you post some HTML snippets as well?
What should $(this).val() be? Should the ID be dependent of the
textarea input or should it simply be the row number?
by(e)
Stephan
2009/2/25 stephen skore...@gmail.com:
Hello, I relatively new to Javascript in general, but I've been
attempting to use jQuery for a while, I ran into a snag today and I
hope someone can help, here is what I have so far:
var id = $('#invoice_line_item_rows .item.description textarea').attr
(id)
$(#add_line).click(function() {
$(#invoice_line_item_rows).clone().appendTo
(#invoice_line_items).effect(highlight, {}, 600, function() {
$(id).replaceWith(invoice_lines_attributes_new_ + $(this).val()
+1 + _description);
});
});
I'm trying to clone #invoice_line_item_rows and append to
#invoice_line_items which works just fine, the problem I'm having is
with the id in the text area
#invoice_lines_attributes_new_1_description that's what it looks like.
I'm trying to grab the newly created row textarea and increase the
number by +1, I think I'm close, or I could be completely wrong, and
idea what I could do or change to get this working? Thanks for
anyone's time and help!
[jQuery] Re: Change image attribute based on variable
Hi,
instead of doing a complicate string handling you could simply use
window.location.hash:
$finalurl = window.location.hash;
For debugging I would do it step by step and not all in one line:
var el = $($finalurl+ :first);
var src = el.attr(src);
var src_split = src.split(.);
var new_src = src_split.join(_on.);
el.attr(src, new_src);
This way you can use firebug to step through your code and see which
statement produces the error.
by(e)
Stephan
2009/2/25 digital michael.digital.b...@googlemail.com:
Hi, pulling my hair out here.
When the page loads I'm collecting a variable from the url which
corresponds to the class of an image. I want to then change the image
source. I'm doing this because the page doesn't reload and the menu
needs to respond to the content if you get my meaning.
$url = location.href;
$hashtag = $url.search(/#/)
$url2 = $url.split(#, $hashtag);
$finalurl = $url2[1];
This is the code I use to get the class name. When I try to add
$finalurl to the attr (see below) it throws an error (undefined,
console.log shows it is defined within the if statement).
$($finalurl).attr(src, $($finalurl).attr(src).split(.).join
(_on.));
Full code:
$url = location.href;
$hashtag = $url.search(/#/)
$url2 = $url.split(#, $hashtag);
$finalurl = $url2[1];
counttemp = 0;
if (counttemp == 0) {
console.log($finalurl);
$($finalurl).attr(src, $($finalurl).attr(src).split(.).join
(_on.));
counttemp = countemp + 1;
}
Any help would be greatly appreciated.
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF and IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor up to 3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the top
down/left to right). The approach used in Sizzle (bottom up/right to
left) has both benefits and downsides - it can be much faster on large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100 are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
Or am I talking rubbish?
[jQuery] Re: Animate Delay Issue
Hi Wolf,
try to stop previous animations before adding a new one:
$(this).stop().animate({...});
by(e)
Stephan
2009/2/24 Wolf mscha...@gmail.com:
I have a strange delay issue.
I'm working on a menu animation. When a user moves their mouse to the
top, it will move the menu up and when they move their mouse to the
bottom, it moves it down. When I first move the mouse over the menu,
the animation fires. But there is a big delay (maybe 2 seconds)
before it will fire again, after I move my mouse back on it.
However, if I change the animation speed from 2000 milliseconds to 10
milliseconds, it will fire right away.
Any Suggestions? Thx.
Here is a simplified version of my code:
$(#menu).mousemove(function(e){
if (e.pageY 100) {
$(this).animate({
top: -200px
}, 2000 );
}
if (e.pageY 300) {
$(this).animate({
top: 0px
}, 2000 );
}
});
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
Hi Lima,
1) #foo is an ID and since IDs should be unique there has to bee only
one #foo element
2) $(p, $(#foo)) selects all p elements in the scope of the #foo element.
In other words, it selects every p element under #foo in the DOM tree.
by(e)
Stephan
2009/2/24 Liam Potter radioactiv...@gmail.com:
I've been following this discussion, but I need explaining why $(p,
$(#foo)) doesn't select all p tags and all #foo id's ?
Stephan Veigl wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF and IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor up to
3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the top
down/left to right). The approach used in Sizzle (bottom up/right to
left) has both benefits and downsides - it can be much faster on large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100 are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
Or am I talking rubbish?
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
Hi Lima,
taking a look at $(p, $(#foo)) you see that the second parameter
is a function: $(#foo).
This function is evaluated first and returns the jQuery object for #foo.
Then the surrounding $(p,...) function is called with the jQuery
object for #foo as second parameter.
The documentation of jQuery says, if $() is called with two
parameters, where the first one is a selector expression, than the
second parameter is the optional context the selector should be
executed in.
see http://docs.jquery.com/Core/jQuery#expressioncontext
by(e)
Stephan
2009/2/24 Liam Potter radioactiv...@gmail.com:
lol, but I'm interested in what jquery does with what I tell it.
jQuery Lover wrote:
That is how it works Liam !!! jQuery does not knows, it's told so...
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Tue, Feb 24, 2009 at 6:49 PM, Liam Potter radioactiv...@gmail.com
wrote:
ok, but what in jquery knows that $(p, $(#foo)) should look for the p
tags inside of #foo, why does it treat it like $(#foo p)?
jQuery Lover wrote:
Liam, you can use $(p, #foo). The second parameter must be a
jQuery object or dom element...
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Tue, Feb 24, 2009 at 6:44 PM, Liam Potter radioactiv...@gmail.com
wrote:
Hi Stehpan :p
I understand that, I'm just not sure why $(p, $(#foo)) is not the
same
as $(p, #foo)
- Liam
Stephan Veigl wrote:
Hi Lima,
1) #foo is an ID and since IDs should be unique there has to bee only
one #foo element
2) $(p, $(#foo)) selects all p elements in the scope of the #foo
element.
In other words, it selects every p element under #foo in the DOM
tree.
by(e)
Stephan
2009/2/24 Liam Potter radioactiv...@gmail.com:
I've been following this discussion, but I need explaining why $(p,
$(#foo)) doesn't select all p tags and all #foo id's ?
Stephan Veigl wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster
than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in
a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was
between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF
and
IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor
up
to
3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the
top
down/left to right). The approach used in Sizzle (bottom up/right
to
left) has both benefits and downsides - it can be much faster on
large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to
the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100
are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
Or am I talking rubbish?
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
Hi Karl,
$('#foo').find('p') and $('p', $('#foo')) are approximately of the same speed.
I've put the test code on JSBin, so everybody can play around with it
and try other combinations :-)
http://jsbin.com/ifemo
by(e)
Stephan
2009/2/24 Karl Swedberg k...@englishrules.com:
Hi Stephan,
Thanks for doing this testing! Would you mind profiling $('#foo').find('p')
as well? I suspect it will be roughly equivalent to $('p', $('#foo'))
Cheers,
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Feb 24, 2009, at 8:28 AM, Stephan Veigl wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF and IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor up to
3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the top
down/left to right). The approach used in Sizzle (bottom up/right to
left) has both benefits and downsides - it can be much faster on large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100 are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
Or am I talking rubbish?
[jQuery] Re: Input type radio events
Hi Bruno,
you need to define value attributes for your inputs
fieldset
pinput type=radio name=foo value=yes/yes/p
pinput type=radio name=foo value=no/no/p
filedset
pinput type=checkbox name=value value=val1/ Value 1 /p
pinput type=checkbox name=value value=val2/ Value 2 /p
/fieldset
input type=submit /
/form
/fieldset
than you can do the following
$(input[name='foo']).click(function() {
if ( $(input[name='foo']:checked).val() == no ) {
$(input[name='value']).attr(checked,);
}
});
by(e)
Stephan
2009/2/22 Bruno brunomend...@gmail.com:
Hi,
I'm newbie about javascript and jquery. I would like to know how can
I change values of all input type checkbox to unchecked when the user
changes the values to No answer of a input type radio.
The code can be the following
form
fieldset
pinput type=radio name=foo /yes/p
pinput type=radio name=foo /no/p
filedset
pinput type=ckeckbox name=value / Value 1 /p
pinput type=ckeckbox name=value / Value 2 /p
/fieldset
input type=submit /
/fieldset
/form
Thank you.
Regards,
Bruno.
[jQuery] Re: How to pass variables between jQuery plugins?
Hi Vic,
the global anArray works fine see:
http://jsbin.com/ukesa/edit
The problem is that you have to wait until the ASYNCHRONOUS callback
of your get() function has been called.
1) minor style remark
You could declare anArray outside of the ready function with a var
statement. This makes the code more readable IMHO, but it's just
personal style.
var anArray = [ ];
$(function () {...}
2) wait for the callback
Try the jsbin link.
The alerts
The first alert is empty, even it is called after the get functions.
The second alert is falled from a callback and has one payload data.
The third alert is falled from the other callback and has 2 data.
When you press the show button the current data of anArray are shown.
If you press it _before_ the callbacks are finished you will see that
the alert is empty. But for that you would have to be really fast. I
doubt that this is possible with a reasonable fast Internet connection
:-)
If you press the button _after_ the callbacks has been called, you
will see that anArray has some data.
3) wait for more than one callback
(again in the jsbin example)
Use a global counter that is increased in every callback. (For
simplicity, the example is for 2 callbacks - simply replace 2 by 3
for your problem.)
If the counter is 2, call your process (showGraph() ) function from
_every_ callback. Just remember the first A in AJAX - Asynchronous,
so you cannot say which callback is executed as first, second or last.
by(e)
Stephan
2009/2/20 Vic vics...@gmail.com:
Thanks Stephan for jumping in.
anArray near the end of the callback function within $.get() now has
the correct values I want from the csv file. I understand what you
said about doing everything from the callback function. But in my case
I have 3 csv files to open and I'd like to perform some graphing
functions (via jQuery plugin flot) after all 3 have been read.
What's unusual (at least to me anyway) is that the global variable
anArray never gets filled with the csv file values outside of the
callback function within $.get(). So I think I must be doing something
wrong.
Thanks again in advance,
Vic
On Feb 20, 5:33 am, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi Vic,
I guess the problem is that get is an asynchronous function. So
anArray exists outside of your get-callback function (since you use it
as global variable) but the value is not set when the get function
returns since your callback has not been executed yet.
So whenever you access anArray you have to take care that it's already
filled with the right values. The easiest way would be to do
everything in your callback function, or write a data handling
function you call from the callback function if you want to make your
code more readable and modular.
by(e)
Stephan
2009/2/20 Vic vics...@gmail.com:
Hopefully this won't sound too silly, although it probably is. I've
been scratching my head about how to get 2 jQuery plugins to be aware
of the same array variable.
Situation:
$(function () {
anArray = [ ];
// Instead of hardcoding the values in an array like below:
// anArray = [ [A,1], [B,2], [C,3] ];
// I want to read it from a csv file
usinghttp://plugins.jquery.com/project/csv.
So I put in:
$.get(a1b2c3.csv, function(data) {
anArray = $.csv() (data);
alert(anArray); // this works just fine. File
is read. anArray is set. Everything's great.
});
// but outside of the $.get function, anArray is undefined. And i
can't pass it out no matter what I try!
// ... passing anArray to jQuery flot plugin to plot a graph,
among other things ..
}
I'm sure I'll get a big duh! from someone on this mailing list. But
alas, I admit, I'm new to jQuery.
Thanks in advance,
Vic
[jQuery] Re: Stop effect
Hi
$(#y).stop().stop().stop()
.show().css({opacity: 1.0});
by(e)
Stephan
2009/2/20 adexcube alfonsoenci...@gmail.com:
Hi, how can I stop this effect?
$('#y').fadeOut('slow').animate({opacity: 1.0}, 3000).fadeIn('slow');
I've tried independently
$('#y').stop();
$('#y').stop(true);
$('#y').stop(true,true);
without any result
thanks
[jQuery] Re: How to pass variables between jQuery plugins?
Hi Vic,
I guess the problem is that get is an asynchronous function. So
anArray exists outside of your get-callback function (since you use it
as global variable) but the value is not set when the get function
returns since your callback has not been executed yet.
So whenever you access anArray you have to take care that it's already
filled with the right values. The easiest way would be to do
everything in your callback function, or write a data handling
function you call from the callback function if you want to make your
code more readable and modular.
by(e)
Stephan
2009/2/20 Vic vics...@gmail.com:
Hopefully this won't sound too silly, although it probably is. I've
been scratching my head about how to get 2 jQuery plugins to be aware
of the same array variable.
Situation:
$(function () {
anArray = [ ];
// Instead of hardcoding the values in an array like below:
// anArray = [ [A,1], [B,2], [C,3] ];
// I want to read it from a csv file using
http://plugins.jquery.com/project/csv.
So I put in:
$.get(a1b2c3.csv, function(data) {
anArray = $.csv() (data);
alert(anArray); // this works just fine. File
is read. anArray is set. Everything's great.
});
// but outside of the $.get function, anArray is undefined. And i
can't pass it out no matter what I try!
// ... passing anArray to jQuery flot plugin to plot a graph,
among other things ..
}
I'm sure I'll get a big duh! from someone on this mailing list. But
alas, I admit, I'm new to jQuery.
Thanks in advance,
Vic
[jQuery] Re: Selector Efficiency?
Hi Josh,
are your data ordered? (e.g. MAP_ID is the first li, SITE_ADDRESS
the second, ...)
If yes you can use a index based approach (from 4.8ms to 0.9ms on IE).
var $foo = $(foo);
var data = $foo.find(.atr-value);
var parcelOutput = 'Parcel ID: ' +
$(data[0]).text() +
'br' +
'Address: ' +
$(data[1]).text();
Otherwise you can build a hash table of your name - value attributes
and du a hash lookup (from 4.8ms to 2.7ms on IE)
var $foo = $(foo);
var names = $foo.find(.atr-name);
var data = $foo.find(.atr-value);
var hash = {};
for (var j=0; jnames.length; j++) {
hash[$(names[j]).text()] = $(data[j]).text();
}
var parcelOutput = 'Parcel ID: ' +
hash['MAP_ID'] +
'br' +
'Address: ' +
hash['SITE_ADDRESS'];
see my examples on the profiling test page:
http://jsbin.com/ifico/edit
by(e)
Stephan
2009/2/18 Josh Rosenthal maric...@gmail.com:
So... a question regarding selector efficiency.
The following snippet of HTML describes attributes associated with a polygon
in an KML. Its basically a table of data, contained as spans in lis in
a ul. Given this snippet, what would be the best (fastest) way to return
the values of MAP_ID and SITE_ADDRESS
foo = h4GISDATA.ASSESSPARNC_POLY_PUBLIC/h4
ul class=textattributes
listrongspan class=atr-nameMAP_ID/span:/strong span
class=atr-value16-27/span/li
listrongspan class=atr-nameSITE_ADDRESS/span:/strong span
class=atr-value396 Main St/span/li
listrongspan class=atr-nameSITE_OTHER_FIELD/span:/strong span
class=atr-valueGrat Data/span/li
listrongspan class=atr-nameUSE_CODE/span:/strong span
class=atr-value101/span/li
listrongspan class=atr-nameTOWN_ID/span:/strong span
class=atr-value116/span/li
listrongspan class=atr-nameWARREN_GROUP_05_MAP_ID/span:/strong
span class=atr-valueM:0016 B: L:0027/span/li
listrongspan class=atr-nameACRES/span:/strong span
class=atr-value0.67102373655/span/li
/ul
The following works
parcelOutput = 'Parcel ID: ' +
jQuery(foo).find('li:contains(MAP_)').not('li:contains(WARREN_GROUP)').children('.atr-value').text()
+ 'br' + 'Address: ' +
jQuery(foo).find('li:contains(SITE_ADDRESS)').children('.atr-value').text();
Is there a better/more efficient way to return these values?
Thanks!
[jQuery] Re: jQuery validation question: validating multiple email inputs
Hi,
Taking a second look on your code it's clear why only the first email
address is validated: you have a return statement in your for loop.
try something like:
email: function(value, element) {
if (this.optional(element)) // return true on optional element
(whatever this is for?)
return true;
var emails = value.split(,);
var valid = (value.length 0); // make sure that value is not empty
for(var emailAddress in emails)
{
valid = valid /.../i.test(emailAddress); // logical and of all
email validations
}
return valid;
}
by(e)
Stephan
2009/2/17 roryreiff roryre...@gmail.com:
Yeah, I actually have that fixed in the posted link, but thanks for
pointing that out. So, something else is at error now.
On Feb 17, 9:04 am, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi
is this just a copy paste error, or a real syntax error? You have to
quote the comma in your split command:
var emails = value.split(,);
by(e)
Stephan
2009/2/17roryreiffroryre...@gmail.com:
So far, I have adapted this:
email: function(value, element) {
return this.optional(element) ||
/^((([a-z]|\d|[!#\$%'\*\+\-\/=\?
\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\
$%'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)
*)|((\x22)\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c
\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF
\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-
\uFDCF\uFDF0-\uFFEF]*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?
(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-
z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|
[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF
\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF
\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-
z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|
[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(value);
},
into this:
email: function(value, element) {
var emails = value.split(,);
for(var emailAddress in emails)
{
return this.optional(element) ||
/^((([a-z]|\d|[!#\$%'\*\+\-\/=\?
\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\
$%'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)
*)|((\x22)\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c
\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF
\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-
\uFDCF\uFDF0-\uFFEF]*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?
(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-
z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|
[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF
\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF
\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-
z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|
[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(emailAddress);
}
},
any thoughts why this is not working? Thanks,
On Feb 13, 11:10 am, Ed Lerner emle...@gmail.com wrote:
I'm new to jQuery as well. In other languages, you would take the
string that holds all of the emails and do a 'split' on commas. This
should give you an array where each element is an individual email.
From there, just validate each element.
How to do this in jQuery, someone more experienced than I may be able
to help with.
On Feb 13, 11:28 am,roryreiffroryre...@gmail.com wrote:
Hi there,
I am using the Validation plugin to validate a form that emails the
current pages URL to the recipients entered in to the email to
field. I want to validate that field for multiple emails addressed
separated by commas...and ideas on how to do this? I'm a bit new to
jQuery so I am a little confused how to approach this. I was thinking
somehow altering the email function so that is parses the input and
does a for each on every email address. Is this correct thinking? Is
there an easier way to do this?
Thanks,
[jQuery] Re: Exploding nested divs....
Hi, how do you explode the outer div? Can you share your function with us? by(e) Stephan 2009/2/18 Ricardo Tomasi ricardob...@gmail.com: What do you mean by explode? remove? On Feb 17, 4:50 pm, webspee...@gmail.com webspee...@gmail.com wrote: Hey all. Exploding a simple div is easy enough, but can you explode nested divs? I have a div container and inside it I have content generated from an AJAX call. When I explode the outer div, I don't get the pieces and the screen freezes up for a second. I don't know if the div is too large or if it is because of the inside div. Also, I would assume the inside div (the one returned via AJAX) would have to be re-binded, is this correct? If so, how do you bind on an explode? I can't simply write the statement, otherwise it would explode immediately on the return from the AJAX call. I was just curious about this is all. ...
[jQuery] Re: Hide/Show when Check Box is selected
Hi Miguel,
you can use the click trigger of the checkbox:
form
show secret: input id=checkbox type=checkbox/
div id=div
secret field: input type=text /
/div
/from
$(#div).hide();
$(#checkbox).click(function(){
if ( this.checked ) {
$(#div).show();
} else {
$(#div).hide();
}
})
by(e)
Stephan
2009/2/18 shapper mdmo...@gmail.com:
Hello,
On a form how can I Show a fieldset when a checkbox is Selected and
Hide the same fieldset when the same checkbox is unselected?
Thanks,
Miguel
[jQuery] Re: jQuery validation question: validating multiple email inputs
Hi
is this just a copy paste error, or a real syntax error? You have to
quote the comma in your split command:
var emails = value.split(,);
by(e)
Stephan
2009/2/17 roryreiff roryre...@gmail.com:
So far, I have adapted this:
email: function(value, element) {
return this.optional(element) ||
/^((([a-z]|\d|[!#\$%'\*\+\-\/=\?
\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\
$%'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)
*)|((\x22)\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c
\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF
\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-
\uFDCF\uFDF0-\uFFEF]*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?
(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-
z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|
[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF
\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF
\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-
z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|
[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(value);
},
into this:
email: function(value, element) {
var emails = value.split(,);
for(var emailAddress in emails)
{
return this.optional(element) ||
/^((([a-z]|\d|[!#\$%'\*\+\-\/=\?
\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\
$%'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)
*)|((\x22)\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c
\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF
\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-
\uFDCF\uFDF0-\uFFEF]*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?
(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-
z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|
[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF
\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF
\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-
z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|
[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(emailAddress);
}
},
any thoughts why this is not working? Thanks,
On Feb 13, 11:10 am, Ed Lerner emle...@gmail.com wrote:
I'm new to jQuery as well. In other languages, you would take the
string that holds all of the emails and do a 'split' on commas. This
should give you an array where each element is an individual email.
From there, just validate each element.
How to do this in jQuery, someone more experienced than I may be able
to help with.
On Feb 13, 11:28 am,roryreiffroryre...@gmail.com wrote:
Hi there,
I am using the Validation plugin to validate a form that emails the
current pages URL to the recipients entered in to the email to
field. I want to validate that field for multiple emails addressed
separated by commas...and ideas on how to do this? I'm a bit new to
jQuery so I am a little confused how to approach this. I was thinking
somehow altering the email function so that is parses the input and
does a for each on every email address. Is this correct thinking? Is
there an easier way to do this?
Thanks,
[jQuery] Re: Hover vs Click, etc.
Hi,
I would add a close button (or link) to your links div and add something like:
closeBtn.click( function(){
$(this).parent().hide();
});
alternatively you can do:
$(#menuReg).click( function(){
$(this).hide();
return true;
});
Than your menu is closed whenever you click somewhere within your
menu. If you click on a link, the link will be followed (return true;)
by(e)
Stephan
2009/2/16 WebRanger david.blomst...@gmail.com:
The following script produces a box that opens on mouseover and closes
on mouseover.
$(\'#triggerReg\').hover(function(){
// do something on mouse over
$(\'#menuReg\').show();
},function(){
// do something on mouse out
$(\'#menuReg\').hide();
});
It works fine for displaying brief text messages. But if you display a
column of links, it closes as soon as you try to put the cursor over a
link.
Can someone show me how to modify this so that the menu stays open
until you manually close it again? I changed hover(function() to click
(function(), and it now opens when you click it - and it stays open.
But I can't figure out how to close it.
I've been searching for online references that list the various
options, but I haven't found one I can understand yet.
Thanks.
[jQuery] Re: Hover vs Click, etc.
Hi David,
a close button is quite simple, see:
http://jsbin.com/ocoyo/edit
for an example
1. Why do you escape the quotes in $(\'#triggerReg\')? Is this just a
copypaste error, or do you define your function in an HTML attribute?
2. The click handle does take only one callback function (in contrast
to hover, which takes two)
What exactly does not work? Do you get an error from the browser? Does
the menu not open / not close? ...
try this:
$(#triggerReg).click(function(){
$(#menuReg).show();
return false;
});
$(#menuReg).click( function(){
$(#menuReg).hide();
return true;
});
by(e)
Stephan
2009/2/16 David Blomstrom david.blomst...@gmail.com:
I haven't learned how to make a close button yet. I tried the second method,
but I'm doing something wrong. I combined the two scripts as follows, but it
doesn't work.
$(\'#triggerReg\').click(function(){
$(\'#menuReg\').show();
},function(){
$(#menuReg).click( function(){
$(this).hide();
return true;
});
Thanks!
* * * * *
On Mon, Feb 16, 2009 at 1:41 AM, Stephan Veigl stephan.ve...@gmail.com
wrote:
Hi,
I would add a close button (or link) to your links div and add something
like:
closeBtn.click( function(){
$(this).parent().hide();
});
alternatively you can do:
$(#menuReg).click( function(){
$(this).hide();
return true;
});
Than your menu is closed whenever you click somewhere within your
menu. If you click on a link, the link will be followed (return true;)
by(e)
Stephan
2009/2/16 WebRanger david.blomst...@gmail.com:
The following script produces a box that opens on mouseover and closes
on mouseover.
$(\'#triggerReg\').hover(function(){
// do something on mouse over
$(\'#menuReg\').show();
},function(){
// do something on mouse out
$(\'#menuReg\').hide();
});
It works fine for displaying brief text messages. But if you display a
column of links, it closes as soon as you try to put the cursor over a
link.
Can someone show me how to modify this so that the menu stays open
until you manually close it again? I changed hover(function() to click
(function(), and it now opens when you click it - and it stays open.
But I can't figure out how to close it.
I've been searching for online references that list the various
options, but I haven't found one I can understand yet.
Thanks.
--
David Blomstrom
Writer Web Designer (Mac, M$ Linux)
www.geobop.org
[jQuery] Re: Append images to div from JSON
Hi Mark,
there seems to be a problem with your json.php. Your output is
encapsulated in round bracket and there is a single squared and curly
bracket at the end of the output: ( {}{} ]})
your whole JSON output should be of the form:
[{},{},...{}]
by(e)
Stephan
2009/2/16 mark sionval...@gmail.com:
I am trying to append images to a div from a json file, but a don't
see the images. They look broken, but the references are ok. What is
wrong here?
body
script type=text/javascript src=http://www.sionvalais.com/v2/js/
jq.js/script
script type=text/javascript
$(document).ready(function(){
$.getJSON(http://www.sionvalais.com/social/json.php;,
function(data){
$.each(data.items, function(i,item){
$(img/).attr(src, item.cam).appendTo(#images);
if ( i == 3 ) return false;
});
});
});
/script
styleimg{ height: 100px; float: left; }
#images {
width:500px;
height:200px;
}
/style
div id=images
/div
[jQuery] Re: How to find the biggest value?
Hi David,
var max = null;
$(#box div).each(function() {
if ( !max || max.height() $(this).height() )
max = $(this);
});
// flash max div
max.fadeOut().fadeIn();
by(e)
Stephan
2009/2/12 David .Wu chan1...@gmail.com:
for example, how to find biggest div height under box.
div id=box
div./div
div./div
div./div
/div
[jQuery] Re: Delayed Checkboxes in IE
Hi Karl,
you are right.
I just tested it on IE, FF, Opera and Chrome. click works fine on all
4 browsers for both mouse and keyboard.
by(e)
Stephan
2009/2/10 Karl Swedberg k...@englishrules.com:
On Feb 10, 2009, at 9:45 AM, Stephan Veigl wrote:
change your
$(input:checkbox).change(function () {...
line to
$(input:checkbox).bind(change click keypress, function(){...
to catch the checkbox every time it has been clicked (either with
mouse or keyboard)
I'm not sure that keypress is necessary here. click should work for both
mouse and key interaction. actually, click would probably suffice without
change as well.
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
[jQuery] Re: Only show 5 list item, hide the rest?
Hi,
ok, in this case it would be, IMHO, the easiest way to split the list
in two uls and clue them together with CSS.
ul id=myList style=margin-bottom: 0px
liItem 1/li
liItem 2/li
liItem 3/li
liItem 4/li
liItem 5/li
/ul
ul id=myListExt style=margin-top: 0px
liItem 6/li
liItem 7/li
liItem 8/li
liItem 9/li
liItem 10/li
/ul
$(document).ready(function(){
var list = $('#myListExt');
list.hide();
$('a#myList-toggle').click(function() {
list.slideToggle(400);
return false;
});
});
Of course you can to the list splitting automatically as well.
by(e)
Stephan
2009/2/11 mofle mofl...@gmail.com:
Thanks, one problem though.
I slides each individual li item, i need it to slide it like if i
would slide the whole list, but only the rest of the list that is
hidden?
On Feb 10, 3:01 pm, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi,
try this one:
var list = $('#myList li:gt(4)');
list.hide();
$('a#myList-toggle').click(function() {
list.slideToggle(400);
return false;
});
by(e)
Stephan
2009/2/10 mofle mofl...@gmail.com:
Hi.
I have an unordered list like this one:
ul id=myList
liItem 1/li
liItem 2/li
liItem 3/li
liItem 4/li
liItem 5/li
liItem 6/li
liItem 7/li
liItem 8/li
liItem 9/li
liItem 10/li
/ul
I want to only show the 5 first items, and hide the rest.
I have a link to toggle the hidden elements on and off:
a href=# id=myList-toggleShow the rest/a
I use the slideToggle(400) to slide the rest of the list in.
Anyone?
This is what I have now, it just toggles the whole list.
script type=text/javascript
$(document).ready(function() {
$('#myList').hide();
$('a#myList-toggle').click(function() {
$('#myList').slideToggle(400);
return false;
});
});
/script
[jQuery] Re: Only show 5 list item, hide the rest?
Hi,
suppose you have everything in #myList, than you could use the
following lines to split the list:
// move overhang (index 5) to extended list and hide
$('#myListExt').append($('#myList li').slice(5))
.hide();
Use this function to add a new list item:
function addLog(txt) {
var li = $('#myList li');
// move last item to extended list
if ( li.length 4)
$('#myListExt').prepend(li.slice(4))
// add new item
$('#myList').prepend(li+txt+/li);
}
by(e)
Stephan
2009/2/11 mofle mofl...@gmail.com:
Hi, thank you for all your help ;)
How can I have the list splitted automatically?
Because the list is for a log, and the newest items are on the top,
and as new items are added, the old ones are pushed down, and hidden.
On Feb 11, 10:31 am, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi,
ok, in this case it would be, IMHO, the easiest way to split the list
in two uls and clue them together with CSS.
ul id=myList style=margin-bottom: 0px
liItem 1/li
liItem 2/li
liItem 3/li
liItem 4/li
liItem 5/li
/ul
ul id=myListExt style=margin-top: 0px
liItem 6/li
liItem 7/li
liItem 8/li
liItem 9/li
liItem 10/li
/ul
$(document).ready(function(){
var list = $('#myListExt');
list.hide();
$('a#myList-toggle').click(function() {
list.slideToggle(400);
return false;
});
});
Of course you can to the list splitting automatically as well.
by(e)
Stephan
2009/2/11 mofle mofl...@gmail.com:
Thanks, one problem though.
I slides each individual li item, i need it to slide it like if i
would slide the whole list, but only the rest of the list that is
hidden?
On Feb 10, 3:01 pm, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi,
try this one:
var list = $('#myList li:gt(4)');
list.hide();
$('a#myList-toggle').click(function() {
list.slideToggle(400);
return false;
});
by(e)
Stephan
2009/2/10 mofle mofl...@gmail.com:
Hi.
I have an unordered list like this one:
ul id=myList
liItem 1/li
liItem 2/li
liItem 3/li
liItem 4/li
liItem 5/li
liItem 6/li
liItem 7/li
liItem 8/li
liItem 9/li
liItem 10/li
/ul
I want to only show the 5 first items, and hide the rest.
I have a link to toggle the hidden elements on and off:
a href=# id=myList-toggleShow the rest/a
I use the slideToggle(400) to slide the rest of the list in.
Anyone?
This is what I have now, it just toggles the whole list.
script type=text/javascript
$(document).ready(function() {
$('#myList').hide();
$('a#myList-toggle').click(function() {
$('#myList').slideToggle(400);
return false;
});
});
/script
[jQuery] Re: $(element in other iframe)
Hi Ami,
you can bind the load event to your iframe, but I'm not sure if there
are any browser quirks
see also this plugin:
http://ideamill.synaptrixgroup.com/?p=6
by(e)
Stephan
2009/2/11 Ami aminad...@gmail.com:
Thank you.
You write that I need to wait until the iframe has been loaded.
So I can do this?
var frame=$(#iframe)[0].contentdocument;
$(frame).ready(function () {
alert('Iframe has been loaded!');
});
Am I right?
and Thank you again.
On Feb 8, 6:07 pm, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi Ami
you can access an iframe with:
var frame = window.frames[0].document;
-or-
var frame = $(#iframe)[0].contentDocument;
var div = $(div, frame);
just remember to wait until the iframe has been loaded.
by(e)
Stephan
2009/2/8 Ami aminad...@gmail.com:
Can I use jQuery to work with elements in other frames?
For Example:
html
iframe id=frame1/iframe
script
$(#frame1 document)
OR
$(document, $(#frame1))
/script
[jQuery] Re: catch-all clicks
Hi,
$().click( function() {...});
should work
by(e)
Stephan
2009/2/11 BrainBurner brainbur...@gmail.com:
Hello,
is there a way to catch-all click on the page?
I tried $(html).click(fn), but it doesn't work..
[jQuery] Re: Jquery seems to be sending two requests the first few times. . .
Hi Mark,
ad 1)
in Firebug I can see only one POST request.
Do you have any content in your config.html which is loaded
subsequently (e.g. images, js, ...)?
Just try it with an empty config.html and without the callback function.
ad 2)
no Problem, you can chain AJAX request within the callback as you like
by(e)
Stephan
2009/2/9 Mark Lacas markla...@gmail.com:
I have been tracing this one down for two days.
Has anyone else ever seen jquery making multiple request for a single
call?
Here is the call:
$(#configure_blocks).load(
config_templates/+config_template
+.html, { bust: new Date() }, function( data ){
var theform =
document.getElementById(basic_properties);
theform.reset();
});
Here are the lines from my apache2 log:
10.0.1.12 - - [09/Feb/2009:11:41:21 -0800] POST /config_templates/
led.html HTTP/1.1 200 3035 http://10.0.1.190/; Mozilla/5.0
(Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9) Gecko/2008061712
Firefox/3.0
10.0.1.12 - - [09/Feb/2009:11:41:21 -0800] GET /config_templates/
led.html HTTP/1.1 200 3035 - Mozilla/5.0 (Macintosh; U; Intel Mac
OS X 10.5; en-US; rv:1.9) Gecko/2008061712 Firefox/3.0
This has been driving me mad as I can't get a handle on why this is
happening.
As well, is it ok to make a second ajax call in the completion block
of a previous ajax call?
$(#configure_blocks).load(
config_templates/+config_template
+.html, { bust: new Date() }, function( data ){
var theform =
document.getElementById(basic_properties);
theform.reset();
$.get(/cgi-bin/socket.cgi, { socket:'led',
command:off, plain:
1 }, function( json ){
alert( dump( json );
}, json );
});
Thanks,
ml
[jQuery] Re: Numbering ... Could someone please help me out with this?
Hi Miguel,
another idea:
I guess you need the Themes[0].* construct to process the form submit
with a PHP script?
I'm not 100% sure with this PHP stuff, but can't you pass a list of
Themes[].*, Themes[].*, ... without an index between [] to PHP and PHP
will automatically create an array out of it?
by(e)
Stephan
2009/2/10 mkmanning michaell...@gmail.com:
You can just check the length of the child li elements of ul#Themes:
$('#AddTheme').bind('click', function(){
// Other code
var len = $('#Themes li').length;
$theme = $('li class=Themes/li').appendTo
('#Themes');
$theme.append('input type=hidden name=Themes['+len
+'].Subject
value = ' + $subject.val() + ' /');
$theme.append('input type=hidden name=Themes
['+len+'].LevelsCsv value = ' + levelsTypes.join(,) + ' /');
$theme.append('input type=hidden name=Themes
['+len+'].Description value = ' + description.val() + ' /');
});
On Feb 8, 8:13 am, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi Miguel,
you could use a global counter.
e.g.
var themesCounter = 0;
$('#AddTheme').bind('click', function(){
...
$theme.append('input type=hidden
name=Themes[themesCounter].Subject value = ' + $subject.val() + '
/');
...
themesCounter++;
});
by(e)
Stephan
2009/2/8 shapper mdmo...@gmail.com:
Hi,
I am adding list items to a list as follows:
$('#AddTheme').bind('click', function(){
// Other code
$theme = $('li class=Themes/li').appendTo
('#Themes');
$theme.append('input type=hidden name=Themes[0].Subject
value = ' + $subject.val() + ' /');
$theme.append('input type=hidden name=Themes
[0].LevelsCsv value = ' + levelsTypes.join(,) + ' /');
$theme.append('input type=hidden name=Themes
[0].Description value = ' + description.val() + ' /');
});
Basically, every time I add a new item I want to give the next number
to Themes[0], i.e., Themes[1].
If I add 3 themes I will have Themes[0], Themes[1], Themes[2]
Basically, I need to have at all times themes numbered as 0, 1, 2, ...
Could someone please help me out?
Thanks,
Miguel
Just in case, here is my entire code fully commented:
$('#Cancel').click(function() { location.href = '/Account/
List'; });
// Themes
// Define remove event
$('.Remove').livequery('click', function(event) {
$(this).parent().remove();
});
// Bind add button
$('#AddTheme').bind('click', function(){
// Define valid
var valid = new Boolean(true);
// Define fields
$description = $('#Description');
$levels = $('input[name=Levels]:checked + label');
$levelsTypes = $('input[name=Levels]:checked');
$subject = $('#Subject option:selected');
// Map levels
levels = $levels.map(function() { return $(this).text(); }).get
();
levelsTypes = $levelsTypes.map(function() { return $(this).val
(); }).get();
// Check subject
if (!$subject.val()) { valid = false; }
// Check levels
if (!levels.length) { valid = false; }
// Check boolean
if (valid) {
// Define theme
$theme = $('li class=Themes/li').appendTo
('#Themes');
// Add fields
$theme.append($subject.text()).append('br /');
$theme.append( Levels(levels) + 'br /' );
if ($description.val()) { $theme.append($description.val
()).append('br /'); }
// Add button
$theme.append('a href=#Remove class=RemoveRemover/
a');
// Add inputs
$theme.append('input type=hidden name=Themes[0].Subject
value = ' + $subject.val() + ' /');
$theme.append('input type=hidden name=Themes
[0].LevelsCsv value = ' + levelsTypes.join(,) + ' /');
$theme.append('input type=hidden name=Themes
[0].Description value = ' + description.val() + ' /');
// Add input
//$theme.append(' input type=hidden name=Themes value =
' + theme + ' /');
}
});
// Levels
function Levels(levels) {
// Check levels
if (levels.length 2) return levels.join('');
// Define first
var first = levels.slice(0, -1), last = levels.slice(-1);
// Define result
var result = first.join(', ');
// Check last
if (last) { result += ' and ' + last; }
// Return results
return result;
} // Levels
[jQuery] Re: Only show 5 list item, hide the rest?
Hi,
try this one:
var list = $('#myList li:gt(4)');
list.hide();
$('a#myList-toggle').click(function() {
list.slideToggle(400);
return false;
});
by(e)
Stephan
2009/2/10 mofle mofl...@gmail.com:
Hi.
I have an unordered list like this one:
ul id=myList
liItem 1/li
liItem 2/li
liItem 3/li
liItem 4/li
liItem 5/li
liItem 6/li
liItem 7/li
liItem 8/li
liItem 9/li
liItem 10/li
/ul
I want to only show the 5 first items, and hide the rest.
I have a link to toggle the hidden elements on and off:
a href=# id=myList-toggleShow the rest/a
I use the slideToggle(400) to slide the rest of the list in.
Anyone?
This is what I have now, it just toggles the whole list.
script type=text/javascript
$(document).ready(function() {
$('#myList').hide();
$('a#myList-toggle').click(function() {
$('#myList').slideToggle(400);
return false;
});
});
/script
[jQuery] Re: Get DOM elements under click
Hi Richard,
you can bind one single event trigger to the document (or a parent
element) and use the target property of the event.
see:
http://docs.jquery.com/Events/jQuery.Event
e.g.
$().click( function(ev) {
$(ev.target).fadeOut().fadeIn();
});
by(e)
Stephan
2009/2/10 Richard richar...@gmail.com:
hello,
I'm wondering how to access the elements under a mouse click.
At first I tried iterating through all the elements and checking each
one, but as you can guess it was too slow.
Then I tried binding mouse click events to all the elements but it got
messy.
Is there a way to get a list of elements that the mouse has clicked on
even if they don't have click events defined?
Richard
[jQuery] Re: Problems...
Hi,
1. How do you set up your first s,t,c?
2. Where does cod come from?
3. I suppose s and c should be strings. Then you would have to escape
the strings in the onClick function call:
a href='#' onClick='test(\+s+\, 0, \+c+\)'-/a
by(e)
Stephan
2009/2/10 Po01 diogoapa...@gmail.com:
Hi, i have a function like this:
function test(s, t, c)
{
var Ss = # + s;
var S = # + s + cod;
if(t == 1)
{
$(S).empty().html(a href='#' onClick='test(+s+, 0, +c+)'-/
a +s);
$(Ss).show();
}
else
{
$(S).empty().html(a href='#' onClick='test(+s+, 1, +c+)'+/
a +s);
$(Ss).hide();
}
}
Can you guys understand what im trying to do... I wanna generate the
HTML with the same function but with some changes, i can do all, but i
dont know why the +s+ doesnt work. theres no value, i tried to use
an alert for s and it says object, so the function only work first
time when i load the page, i think its something wrong with the
format:
$(S).empty().html(a href='#' onClick='test(+s+, 0, +c+)'-/
a +s);
$(S).empty().html(a href='#' onClick='test(+s+, 1, +c+)'+/
a +s);
[jQuery] Re: Delayed Checkboxes in IE
Hi John,
It looks like IE doesn't send a change event when the checkbox has
been clicked, only after the element has lost focus. You can test this
by adding a debug alert to your change function.
change your
$(input:checkbox).change(function () {...
line to
$(input:checkbox).bind(change click keypress, function(){...
to catch the checkbox every time it has been clicked (either with
mouse or keyboard)
by(e)
Stephan
2009/2/10 John C j.cashm...@wigan.gov.uk:
Has anyone any idea why the code below doesn't work correctly in IE.
Basically what is supposed to happen is when the parent checkbox is
checked the child ones are also supposed to be checked. This works
fine in FireFox and Safari, but not in Internet Explorer, the child
checkboxes only get checked when something else changes on the form,
for instance you check another item.
Any help would be great.
---
div id=navigation
ul
lia href=test.htmItem
/a
ul
lia
href=test.htmItem/a/li
lia href=test.htmItem
/a
ul
lia href=test.htmItem/a/li
lia href=test.htmItem/a/li
/ul
/li
/ul
/li
lia href=test.htmItem
/a
ul
lia href=test.htmItem
/a
ul
lia href=test.htmItem/a/li
lia href=test.htmItem
/a
ul
lia href=test.htmItem/a/li
lia href=test.htmItem/a/li
lia href=test.htmItem/a/li
lia href=test.htmItem/a/li
lia href=test.htmItem/a/li
/ul
/li
/ul
/li
lia
href=test.htmItem/a/li
/ul
/li
/ul
/div
script type=text/javascript src=http://ajax.googleapis.com/ajax/
libs/jquery/1.3.1/jquery.min.js/script
script type=text/javascript
$(document).ready(function() {
$(#navigationullia).each(function () {
$(this).before($(this).text());
$(this).remove();
});
var checknum = 0;
$(#navigation a).each( function () {
checknum = checknum +1;
newInput = document.createElement(input);
newInput.setAttribute(name,dchannel+checknum);
newInput.setAttribute(id,dchannel+checknum);
newInput.type = checkbox;
newInput.value = $(this).attr('href').replace(/'/ig, \');
$(newInput).insertBefore(this);
$(#dchannel+checknum).val($(#dchannel+checknum).val().replace
(http://boston;, ));
newLabel = document.createElement(label);
newLabel.setAttribute(for,dchannel+checknum);
newLabel.innerHTML = $(this).text();
$(newLabel).insertBefore(this);
$(this).remove();
});
$(input:checkbox).change(function () {
if($(this).attr(checked)) {
$(this).parents(li:first).find(input:checkbox).each(function () {
$(this).attr(checked, true);
});
} else {
$(this).parents(li:first).find(input:checkbox).each(function () {
$(this).attr(checked, false);
});
}
});
});
/script
--
[jQuery] Re: How to pass a date to DatePicker??
Hi André see: http://docs.jquery.com/UI/Datepicker - setDate by(e) Stephan 2009/2/10 AndreMiranda acymira...@gmail.com: Hi everyone!! How can I pass a date to DatePicker and it shows this date selected, highlighted etc? Thanks!! André
[jQuery] Re: what could be causing this isnull error ( realy weird )
Hi,
I got an error in line 267 because of the quote;s in the javascript
function. Try to replace it with single quotes.
input type=submit name=dnn$ctr579$Login$Login_DNN$cmdLogin
value=Inloggen onclick=javascript:WebForm_DoPostBackWithOptions(new
WebForm_PostBackOptions('dnn$ctr579$Login$Login_DNN$cmdLogin', '',
true, '', '', false, false)) id=dnn_ctr579_Login_Login_DNN_cmdLogin
class=StandardButton /
by(e)
Stephan
2009/2/9 Armand Datema nok...@gmail.com:
HI
Well it cant be more simple than this it just tries to get the element with
the class .grid-8 which is on the page for sure
On Mon, Feb 9, 2009 at 1:06 PM, Mohd.Tareq tareq.m...@gmail.com wrote:
Hi,
May be its not able get the value for ur function ($(.grid_8) );
declare it on top of ur method .
See this hope sol this will work
regards
Ragx
On Mon, Feb 9, 2009 at 5:30 PM, Armand Datema nok...@gmail.com wrote:
Hi
http://www.howardsplaza.nl
If you go to this page in firebug you see an isnull error.
the same goes if you click the test click link.
Why does this generate the isnull error. The fist one is indeed only on
page after user is logged in but that should not be an issue . But the text
click link tries to hide a few div with classes that are actually one the
page
any help would be appreciated since it appears i must be overlooking
somthing
--
---| Regard |---
Mohd.Tareque
--
Armand Datema
CTO SchwingSoft
[jQuery] Re: what could be causing this isnull error ( realy weird )
Hi,
with the Web version I got the null error as well.
So I made a local copy to see where it came from. Then Aptana
complaint about the quotes in the javascript call. I also replaced
jQuery with my local version (1.3.1) and removed your last script
(dnn.controls.toolbars...) because dnn was not defined in my local
copy.
With this little modifications the local copy has no error any more
(of course without CSS and actually doing anything, but at least no
null errors any more)
by(e)
Stephan
2009/2/9 Armand Datema nok...@gmail.com:
so you dont get the other errors?
i dont get this error i will look at it. All im interested in is why i get
the isnull errors because these just are not null they do excist and if they
dont excist that they should just be skipped. So there must be something
else generating the error and That I cannot find out
On Mon, Feb 9, 2009 at 1:34 PM, Stephan Veigl stephan.ve...@gmail.com
wrote:
Hi,
I got an error in line 267 because of the quote;s in the javascript
function. Try to replace it with single quotes.
input type=submit name=dnn$ctr579$Login$Login_DNN$cmdLogin
value=Inloggen onclick=javascript:WebForm_DoPostBackWithOptions(new
WebForm_PostBackOptions('dnn$ctr579$Login$Login_DNN$cmdLogin', '',
true, '', '', false, false)) id=dnn_ctr579_Login_Login_DNN_cmdLogin
class=StandardButton /
by(e)
Stephan
2009/2/9 Armand Datema nok...@gmail.com:
HI
Well it cant be more simple than this it just tries to get the element
with
the class .grid-8 which is on the page for sure
On Mon, Feb 9, 2009 at 1:06 PM, Mohd.Tareq tareq.m...@gmail.com wrote:
Hi,
May be its not able get the value for ur function ($(.grid_8) );
declare it on top of ur method .
See this hope sol this will work
regards
Ragx
On Mon, Feb 9, 2009 at 5:30 PM, Armand Datema nok...@gmail.com wrote:
Hi
http://www.howardsplaza.nl
If you go to this page in firebug you see an isnull error.
the same goes if you click the test click link.
Why does this generate the isnull error. The fist one is indeed only
on
page after user is logged in but that should not be an issue . But the
text
click link tries to hide a few div with classes that are actually one
the
page
any help would be appreciated since it appears i must be overlooking
somthing
--
---| Regard |---
Mohd.Tareque
--
Armand Datema
CTO SchwingSoft
--
Armand Datema
CTO SchwingSoft
[jQuery] Re: Next/Previous element in each loop
Hi Adrian,
as mkmanning already said, when you want to get the next / prev
element from the same selector, simply access the array.
In this case I prefer a for (var i=0; ips.length; i++) {...} loop
instead of the $.each for performance reasons and readability, but
that's personal taste.
by(e) :-)
Stephan
2009/2/9 mkmanning michaell...@gmail.com:
$(p) is an array, so you could just use the index:
var ps = $(p); //cache
ps.each(function(i,d) {
var prevP = i0?$(ps[i-1]):false; /* however you want to deal with
there not being a prev */
var nextP = ips.length-1?$(ps[i+1]):false; /* however you want to
deal with there not being a next */
if(prevP){
console.log($(prevP).html());
}
if(nextP){
console.log($(nextP).html());
}
//if you only want p's that have a prev AND next, you can do this
if(i0 ips.length-1){
console.log( $(ps[i-1]).html() + ', ' + $(ps[i+1]).html() );
}
});
On Feb 9, 8:55 am, Adrian Lynch adely...@googlemail.com wrote:
This explains better what I'm after:
$(p).each(function(i) {
var prevP = $(this).parent().prev().children(p);
var nextP = $(this).parent().next().children(p);
console.info(prevP.html());
console.info(nextP.html());
});
div
p1/p
div
spanThis is next/span
/div
/div
div
div
spanThis is previous/span
/div
p2/p
/div
div
p3/p
/div
I want to refer to the next p in the each() loop but $(this).next()/
prev() refers to the next sibling element in the DOM.
So in the example above I'm having to go out to the parent, then get
the next/previous, then come in to get the p I want.
Now I'm wondering if there's a generic way to do this...
By(e) - see!
Adrian
On Feb 9, 4:44 pm, Adrian Lynch adely...@googlemail.com wrote:
That's what I was hoping for, but next() and prev() act on the next
and previous elements in the DOM, not in the nodes you're looping
over. To demonstrate:
$(p).each(function(i) {
console.info($(this).next().html());
console.info($(this).prev().html());
});
form action=test.cfm method=post
div
p1/p
div
pThis is next/p
/div
/div
div
div
pThis is previous/p
/div
p2/p
/div
div
p3/p
/div
/form
Maybe I have to come out to the outer most divs before calling next()/
prev() on it.
Adrian
On Feb 4, 4:16 pm, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi,
there are prev() and next() functions doing exactly what you need:
$(div).each( function() {
var prev = $(this).prev();
var next = $(this).next();
alert( prev.text() + - + next.text() );
});
(I've skipped the extra code for the first and last element for
simplicity.)
by(e)
Stephan
2009/2/4AdrianLynchadely...@googlemail.com:
Hey all, I'm loop over some nodes witheach() and I need to look at
the next and previous elements for the current iteration.
script type=text/javascript
$(function() {
$(div).each(function(i) {
var prev = [SELECTOR FOR PREVIOUS DIV].text();
var next = [SELECTOR FOR NEXT DIV].text();
alert(prev + : + next);
});
});
/script
div1/div
div2/div
div3/div
Will I have to store a reference to the divs and access it with i in
the loop like this:
script type=text/javascript
$(function() {
var divs = $(div);
divs.each(function(i) {
var prev = ;
var next = ;
if (i 0)
prev = $(divs.get(i - 1)).text();
if (i divs.size() - 1)
next = $(divs.get(i + 1)).text();
alert(prev + - + next);
});
});
/script
div1/div
spanSpanner in the works/span
div2/div
spanDon't select me!/span
div3/div
Is next() the answer maybe?
[jQuery] Re: alignment IN IE6 ... with jquery..
Hi, I see the menu on top on both FF and IE and a box overlaying the menu if the mouse enters the image on the left. screenshot: http://www.iaeste.at/~stephan/test/chillenvillen.jpg by(e) Stephan 2009/2/8 shyhockey...@gmail.com shyhockey...@gmail.com: did you go to the home button??? and type username TEST all caps for both the user name and password? in the account I use jquery for the javascript. when you look at the page in IE7 and IE6 you will see the menu and other stuff all positioned in weird places and the menu is shown in a random place no fade in nor fade out. I couldn't see the screen shot you gave. I saw a error message in german or something. On Feb 6, 4:21 pm, Stephan Veigl stephan.ve...@gmail.com wrote: I've taken an additional look at your HTML CSS and it seems like you are positioning all your images absolute with left top position, so I don't see what should be different on IE. by(e) Stephan 2009/2/6 Stephan Veigl stephan.ve...@gmail.com: Hi I've tested the page and it looks similar in FF3 and IE7 for me. Here is a screenshot (http://www.bilderbeutel.de/pic_call_hires.php?tab=pic_upid=11), I'm not sure if this is how it should look like. by(e) Stephan 2009/2/6 shyhockey...@gmail.com shyhockey...@gmail.com: OK, My website is : www.chillenvillen.com on that site click the home button. It will take you to a login page use TEST for both user name and password. this takes you to a test account. This account page has jquery javascript. Use Firefox to see what it supposed to be doing and then look at it with IE7 or 6 and you will see what I am complaining about. hope this helps any. On Feb 5, 4:15 am, Stephan Veigl stephan.ve...@gmail.com wrote: Hi, can you post your code (e.g. at jsbin.com) or give us a link to it. Being standard compliant is always a good idea :-) by(e) Stephan 2009/2/5 shyhockey...@gmail.com shyhockey...@gmail.com: Hi, ok currently I just looked at my website using IE6 and IE7. I notice the pages I used jquery and javascript, would be randomly placed around the website and also the menus that needed to fade in and out when a mouse hover occurs over the user image. Well those menus show up as images and dosen't fade in or out but is randomly placed around the website. In firefox it works fine. I can see it fade in and out and many other stuff. So firefox is set to go. it's just that IE 7, and 6 is weird. It would randomly place the elements around the website. It would also show hidden elements meaning that they are hidden first and then fade in upon a certain condition. So is there anyway I can fix this??? I heard that I need to comply with WS3 . I heard their is a standard that I need to follow in order for my javascript or jquery to show properly. Any ideas?
[jQuery] Re: please help me for the performance
Hi David, use a reasonable speed e.g. 50ms = 20fps (instead of 1ms) should make the animation smoother and reduce computation time. you could also try to use background images instead of img, but that may be not suitable for your application. by(e) Stephan 2009/2/8 David .Wu chan1...@gmail.com: I think so, but it's the requirement, so maybe there is another way to achieve it, I still figure on it. On 2月7日, 下午3時23分, jQuery Lover ilovejqu...@gmail.com wrote: Removing image reflection might improve performance... Read jQuery HowTo Resource - http://jquery-howto.blogspot.com On Sat, Feb 7, 2009 at 2:58 AM, David .Wu chan1...@gmail.com wrote: url:http://chan.idv.tw:90/test/marquee/marquee.html rar:http://chan.idv.tw:90/test/marquee/marquee.rar Hi, this is a image marquee to display the product, I feel a little bit lag when mouse over the image from left to right at the same time, please help me to improve the performance.
[jQuery] Re: Initialize tabs href.
Hi Massimo,
you forgot the closing parenthesis of the ready function
$(document).ready(function() {
initLinks();
}); // --
by(e)
Stephan
2009/2/9 m.ugues m.ug...@gmail.com:
Hallo all.
I would like to initialize the tabs href on the document.ready.
http://pastie.org/384170
I tried like this
http://pastie.org/384232
But it doesn't work.
Any idea?
Kind regards
Massimo Ugues
[jQuery] Re: Does it hurt to call functions that don't do anything on the page?
Hi
I guess you have your $().ready() function in an external js file,
otherwise you could
customize it for the according html page.
Another construct similar to Ricardos one, but a bit more flexible:
Use a global variable in every html file to specify the init functions
you want to call for this page:
script type=text/javascript
myInitFxn = [ManageCategoriesClick, HideByDefault,
PrepareSplitForm,...];
/script
ready.js:
$().ready(function(){
for(var i in myInitFxn) {
myInitFxn[i](); // call init function
}
});
by(e)
Stephan
2009/2/8 brian bally.z...@gmail.com:
On Sat, Feb 7, 2009 at 11:21 PM, Ricardo Tomasi ricardob...@gmail.com wrote:
Alternatively you could add a different class to the body of each
page, then use this rather amusing construct:
$(document).ready((function(){
var is = function(v){ return ++document.body.className.indexOf(v) };
return(
is('categories')
? ManageCategoriesClick :
is('hidebydefault')
? HideByDefault :
is('form')
? PrepareSplitForm :
is('advert')
? SetUpAdvertPopup :
function(){} //nothing
);
})());
That is, indeed, amusing. And one for my toy chest. Thanks!
Who knew, back in '96, that javascript was going to turn out to be so much
fun?
[jQuery] Re: $(element in other iframe)
Hi Ami you can access an iframe with: var frame = window.frames[0].document; -or- var frame = $(#iframe)[0].contentDocument; var div = $(div, frame); just remember to wait until the iframe has been loaded. by(e) Stephan 2009/2/8 Ami aminad...@gmail.com: Can I use jQuery to work with elements in other frames? For Example: html iframe id=frame1/iframe script $(#frame1 document) OR $(document, $(#frame1)) /script
[jQuery] Re: Numbering ... Could someone please help me out with this?
Hi Miguel,
you could use a global counter.
e.g.
var themesCounter = 0;
$('#AddTheme').bind('click', function(){
...
$theme.append('input type=hidden
name=Themes[themesCounter].Subject value = ' + $subject.val() + '
/');
...
themesCounter++;
});
by(e)
Stephan
2009/2/8 shapper mdmo...@gmail.com:
Hi,
I am adding list items to a list as follows:
$('#AddTheme').bind('click', function(){
// Other code
$theme = $('li class=Themes/li').appendTo
('#Themes');
$theme.append('input type=hidden name=Themes[0].Subject
value = ' + $subject.val() + ' /');
$theme.append('input type=hidden name=Themes
[0].LevelsCsv value = ' + levelsTypes.join(,) + ' /');
$theme.append('input type=hidden name=Themes
[0].Description value = ' + description.val() + ' /');
});
Basically, every time I add a new item I want to give the next number
to Themes[0], i.e., Themes[1].
If I add 3 themes I will have Themes[0], Themes[1], Themes[2]
Basically, I need to have at all times themes numbered as 0, 1, 2, ...
Could someone please help me out?
Thanks,
Miguel
Just in case, here is my entire code fully commented:
$('#Cancel').click(function() { location.href = '/Account/
List'; });
// Themes
// Define remove event
$('.Remove').livequery('click', function(event) {
$(this).parent().remove();
});
// Bind add button
$('#AddTheme').bind('click', function(){
// Define valid
var valid = new Boolean(true);
// Define fields
$description = $('#Description');
$levels = $('input[name=Levels]:checked + label');
$levelsTypes = $('input[name=Levels]:checked');
$subject = $('#Subject option:selected');
// Map levels
levels = $levels.map(function() { return $(this).text(); }).get
();
levelsTypes = $levelsTypes.map(function() { return $(this).val
(); }).get();
// Check subject
if (!$subject.val()) { valid = false; }
// Check levels
if (!levels.length) { valid = false; }
// Check boolean
if (valid) {
// Define theme
$theme = $('li class=Themes/li').appendTo
('#Themes');
// Add fields
$theme.append($subject.text()).append('br /');
$theme.append( Levels(levels) + 'br /' );
if ($description.val()) { $theme.append($description.val
()).append('br /'); }
// Add button
$theme.append('a href=#Remove class=RemoveRemover/
a');
// Add inputs
$theme.append('input type=hidden name=Themes[0].Subject
value = ' + $subject.val() + ' /');
$theme.append('input type=hidden name=Themes
[0].LevelsCsv value = ' + levelsTypes.join(,) + ' /');
$theme.append('input type=hidden name=Themes
[0].Description value = ' + description.val() + ' /');
// Add input
//$theme.append(' input type=hidden name=Themes value =
' + theme + ' /');
}
});
// Levels
function Levels(levels) {
// Check levels
if (levels.length 2) return levels.join('');
// Define first
var first = levels.slice(0, -1), last = levels.slice(-1);
// Define result
var result = first.join(', ');
// Check last
if (last) { result += ' and ' + last; }
// Return results
return result;
} // Levels
[jQuery] Re: Select element based on a value of its child element
Hi,
according to another thread in this group
(http://groups.google.at/group/jquery-en/browse_thread/thread/2115a6c8c2069cd8)
there is already a ticket for this bug:
http://dev.jquery.com/ticket/3990
and it's already fixed in the trunk
by(e)
Stephan
2009/2/6 jQuery Lover ilovejqu...@gmail.com:
Most likely... you should submit a ticket: http://dev.jquery.com/
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Wed, Feb 4, 2009 at 9:24 PM, Stephan Veigl stephan.ve...@gmail.com wrote:
Good point.
I've just tested input[value=''] and got an error in jQuery.js. Just
tested it with other HTML attributes and got the same results.
Empty attributes are not selected with a element[attr] and doing a
element[attr=''] results in an error.
Is this a bug?
by(e)
Stephan
2009/2/4 Adrian Lynch adely...@googlemail.com:
Nice one! Should have spotted :has()...
I've asked this in another thread but I'll slip it in here too, does
the selector...
input[value='']
... work for any of you?
Adrian
On Feb 4, 12:11 pm, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi,
just a little remark: add a child selector '' before the 'input' or
you will select surrounding divs as well.
$(div:has(input[value='2']))
by(e)
Stephan
2009/2/4 Mauricio (Maujor) Samy Silva css.mau...@gmail.com:
$('div:has(input[value=2])')
Maurício
-Mensagem Original- De: Adrian Lynch adely...@googlemail.com
Para: jQuery (English) jquery-en@googlegroups.com
Enviada em: quarta-feira, 4 de fevereiro de 2009 09:22
Assunto: [jQuery] Select element based on a value of its child element
Hello all. I have the following...
div
input type=text value=1 /
/div
div
input type=text value=2 /
/div
div
input type=text value=3 /
/div
... and I want to select the second div because its child input has a
value of 2.
I know I could select the input then come back to the div with parents
(div). Just wondering if there's a way to do it in the selector
string.
More out of curiosity than need ;)
Thanks.
Adrian
[jQuery] Re: Optimize large DOM inserts
Hi,
thanks fort his little optimization tutorial :-)
One question, is there a difference between a loop with a running
variable (e.g. for (i=0; irows.length; i++) ) and a for-in loop (e.g.
for (var i in rows) )?
I've done some tests and couldn't find any performance difference
beside the normal variation between two different measurements.
Which variant should be preferred?
by(e)
Stephan
2009/2/6 jQuery Lover ilovejqu...@gmail.com:
That is true
I always suggest using built in for() loop with huge data sets... and
people keep ignoring me :)))
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Fri, Feb 6, 2009 at 8:25 AM, Michael Geary m...@mg.to wrote:
...there is not much room for improvement left.
You just know that when you say that, someone will come along with a 20x-40x
improvement. ;-)
http://mg.to/test/loop1.html
http://mg.to/test/loop2.html
Try them in IE, where the performance is the worst and matters the most.
On my test machine, the first one runs about 6.3 seconds and the second one
about 0.13 seconds.
-Mike
From: Ricardo Tomasi
Concatenating into a string is already much faster than
appending in each loop, there is not much room for
improvement left. What you can do improve user experience
though is split that into a recursive function over a
setTimeout, so that the browser doesn't freeze and you can
display a nice loading animation.
On Feb 5, 5:03 pm, James james.gp@gmail.com wrote:
I need tips on optimizing a large DOM insert to lessen the
freeze on
the browser.
Scenario:
I receive a large amount of JSON 'data' through AJAX from a
database
(sorted the way I want viewed), and loop through them to
add to a JS
string, and insert that chunk of string into a tbody of a
table. Then,
I run a plug-in that formats the table (with pagination, etc.).
Simplified sample code:
var html = '';
$.each(data, function(i, row) {
html += 'trtddata from json/td/tr';});
$(tbody).append(html);
$(table).formatTable();
formatTable() requires that the table has to be completed
before it
can be executed.
Is there any way I can optimize this better? I think I've read
somewhere that making a string too long is not good, but I've also
read that updating the DOM on each iteration is even worst.
Any advice would be appreciated!
[jQuery] Re: What is the best option to make this modal???
Hi André, have you tried the jQuery UI Dialog widget? by(e) Stephan 2009/2/6 AndreMiranda acymira...@gmail.com: Hi everyone!! Can you guys tell me the best way to do this? I have a page which lists several tasks of a person. And when you roll over one task, a popup/modal/tip will appear and dynamically will get all information about this task. What are the best plugins to make this? The best way... Thanks in advance!! André
[jQuery] Re: how to wait for image finished loading then display the page?
Hi Mark,
I would suggest that you wait on the load event of your images.
Something like:
var imgTotal = 10; // total number of images on your page
var imgCount = 0;
$(img).load(function(){
imCount++;
if (imgCount == imgTotal)
$(#skip).show();
}
There are plenty of discussions about image load on this list. Take a look at:
http://groups.google.at/group/jquery-en/browse_thread/thread/2cfdb0ad4101e49d/595665699c4885bc
http://groups.google.com/group/jquery-dev/browse_thread/thread/24b107e84adeaaee/
by(e)
Stephan
2009/2/6 gregory.pelletey ptitgr...@gmail.com:
Hello
What about this?
div id=skip style=display:none;margin:50px 0;font-size:36px
spanabout.php Get me out of here !/span
/div
// ..
//your code...
// ..
$(document).ready(function(){
$('#skip').find('span').hide().end().show('slow').end().find
('span').show('slow');
});
[jQuery] Re: alignment IN IE6 ... with jquery..
Hi I've tested the page and it looks similar in FF3 and IE7 for me. Here is a screenshot (http://www.bilderbeutel.de/pic_call_hires.php?tab=pic_upid=11), I'm not sure if this is how it should look like. by(e) Stephan 2009/2/6 shyhockey...@gmail.com shyhockey...@gmail.com: OK, My website is : www.chillenvillen.comon that site click the home button. It will take you to a login page use TEST for both user name and password. this takes you to a test account. This account page has jquery javascript. Use Firefox to see what it supposed to be doing and then look at it with IE7 or 6 and you will see what I am complaining about. hope this helps any. On Feb 5, 4:15 am, Stephan Veigl stephan.ve...@gmail.com wrote: Hi, can you post your code (e.g. at jsbin.com) or give us a link to it. Being standard compliant is always a good idea :-) by(e) Stephan 2009/2/5 shyhockey...@gmail.com shyhockey...@gmail.com: Hi, ok currently I just looked at my website using IE6 and IE7. I notice the pages I used jquery and javascript, would be randomly placed around the website and also the menus that needed to fade in and out when a mouse hover occurs over the user image. Well those menus show up as images and dosen't fade in or out but is randomly placed around the website. In firefox it works fine. I can see it fade in and out and many other stuff. So firefox is set to go. it's just that IE 7, and 6 is weird. It would randomly place the elements around the website. It would also show hidden elements meaning that they are hidden first and then fade in upon a certain condition. So is there anyway I can fix this??? I heard that I need to comply with WS3 . I heard their is a standard that I need to follow in order for my javascript or jquery to show properly. Any ideas?
[jQuery] Re: alignment IN IE6 ... with jquery..
I've taken an additional look at your HTML CSS and it seems like you are positioning all your images absolute with left top position, so I don't see what should be different on IE. by(e) Stephan 2009/2/6 Stephan Veigl stephan.ve...@gmail.com: Hi I've tested the page and it looks similar in FF3 and IE7 for me. Here is a screenshot (http://www.bilderbeutel.de/pic_call_hires.php?tab=pic_upid=11), I'm not sure if this is how it should look like. by(e) Stephan 2009/2/6 shyhockey...@gmail.com shyhockey...@gmail.com: OK, My website is : www.chillenvillen.comon that site click the home button. It will take you to a login page use TEST for both user name and password. this takes you to a test account. This account page has jquery javascript. Use Firefox to see what it supposed to be doing and then look at it with IE7 or 6 and you will see what I am complaining about. hope this helps any. On Feb 5, 4:15 am, Stephan Veigl stephan.ve...@gmail.com wrote: Hi, can you post your code (e.g. at jsbin.com) or give us a link to it. Being standard compliant is always a good idea :-) by(e) Stephan 2009/2/5 shyhockey...@gmail.com shyhockey...@gmail.com: Hi, ok currently I just looked at my website using IE6 and IE7. I notice the pages I used jquery and javascript, would be randomly placed around the website and also the menus that needed to fade in and out when a mouse hover occurs over the user image. Well those menus show up as images and dosen't fade in or out but is randomly placed around the website. In firefox it works fine. I can see it fade in and out and many other stuff. So firefox is set to go. it's just that IE 7, and 6 is weird. It would randomly place the elements around the website. It would also show hidden elements meaning that they are hidden first and then fade in upon a certain condition. So is there anyway I can fix this??? I heard that I need to comply with WS3 . I heard their is a standard that I need to follow in order for my javascript or jquery to show properly. Any ideas?
[jQuery] Re: All is well except in IE - links initially not clickable
Hi,
looks like you are running into racing-conditions.
Why are you creating your list elements and bind the click event
handler in two different and ASYNCHRONOUS functions initial_list() and
site_details() ?
Add you site_details() functionality to your initial_list() function
just before the scroll_pane() call. You can still encapsulate the
functionality in a function, just call it directly (in a
synchronously way).
e.g.
var initial_list=function(){
$.get('data.php.xml',function(data){
$(data).find('site').each(function(){
...
})
site_details(data);
scroll_pane()
return
})
return
}
var site_details=function(data){
$('#sites ul li').bind('click',function(){
var index=$('#sites ul li').index(this)
...
by(e)
Stephan
2009/2/6 precar pranshua...@gmail.com:
Thanks James.
I actually had semicolons placed properly but after I ran the code
through a JavaScript code cruncher online they were all removed. I
suppose I could try putting them back in, although like you said,
that's probably not the problem.
On Feb 6, 1:43 pm, James james.gp@gmail.com wrote:
This probably won't help much, but personally I think it's a good
habit to put semi-colon (;) at the end of your lines in your JS code.
It will help reduce possible errors.
On Feb 6, 8:33 am, precar pranshua...@gmail.com wrote:
I've tried using Firebug for debugging but since there's nothing
technically wrong in the script, I can't get much out of it. Is there
a way to use Firebug for debugging something that's not broken but
isn't functioning like you want it to?
On Feb 6, 11:27 am, precar pranshua...@gmail.com wrote:
Could I get some help on this please?
Thank you,
Precar.
On Jan 30, 8:52 am, precar pranshua...@gmail.com wrote:
Hi,
Yes, I'm using the bind() method with 'click'. Is that the correct
approach?
Precar.
On Jan 28, 9:47 am, amuhlou amysch...@gmail.com wrote:
It looks like it's not appending the selected class to the li
onClick in IE7. Are you using the bind() method to apply the click
functionality?
On Jan 28, 10:34 am, precar pranshua...@gmail.com wrote:
Hi,
My site (http://pthesis.com) works fine in Firefox/Opera/Safari,
but
inIE7 there is a small hitch. Sometimes when I click the portfolio
link and open it, the links to the sites in the left column aren't
clickable. If I close it and re-open it, they work, and if I do
Refine by category and then click, they work.
As I mentioned, this only happens inIE7. I've tested inIE8 beta 2
and it works fine.
Does anyone have any suggestions for a workaround? If it would be
helpful I'll post the page code here, or you may view it directly
from
the site.
Thanks for your help,
Precar.- Hide quoted text -
- Show quoted text -- Hide quoted text -
- Show quoted text -- Hide quoted text -
- Show quoted text -- Hide quoted text -
- Show quoted text -
[jQuery] Re: Optimize large DOM inserts
Hi James,
I run into a similar problem. Replacing parts of tables does not work with IE.
(see http://de.selfhtml.org/javascript/objekte/all.htm#inner_html,
sorry available in German only)
Now I simply replacing the whole table which is still much faster than
my previous version.
by(e)
Stephan
2009/2/7 James james.gp@gmail.com:
Wow! Wow! Wow! Using that replaceHTML function to empty out the
element took practically no time at all!
Though I wasn't able to get it to work properly in IE (tried only IE6)
as oldEl.innerHTML = html; kept bombing on me with unknown runtime
error. I've removed the IE-only part and let it run the rest. It's
still many times faster than using $(el).empty();
However, I wasn't able to get replaceHTML to work on inserting HTML
into the DOM though. Using the previous suggestions, it would become:
replaceHtml('myElementID', out.join(''));
but the inserted HTML in 'myElementID' had all of the HTML tags (tr,
td, etc.) stripped out for some reason.
On Feb 6, 11:48 am, Ricardo Tomasi ricardob...@gmail.com wrote:
Now I might have something useful to say! :)
I remember this being discussed long ago on the 'replaceHTML' subject.
Apparently using .innerHTML on an element that is not in the DOM is
much faster (except for IE which is already fast). See here:
http://blog.stevenlevithan.com/archives/faster-than-innerhtmlhttp://www.bigdumbdev.com/2007/09/replacehtml-remove-insert-put-back-...
cheers,
- ricardo
On Feb 6, 6:28 pm, James james.gp@gmail.com wrote:
Big thanks for the optimization!
It certainly did optimize the loop processing by several folds!
However, for my case, I found that the ultimate bottleneck was the
plug-in function that I was using that froze the browser the longest.
The actual insert to the DOM took a bit of time also and did freeze
the browser, but wasn't too bad even in IE6.
By the way, do you have any tips on emptying a large amount of content
in the DOM?
Such as emptying that whole chunk of HTML that was inserted. That also
freezes the browser also.
I'm currently using $(el).empty(); and not sure if there's a more
optimal solution.
Thanks!
On Feb 5, 5:25 pm, Michael Geary m...@mg.to wrote:
...there is not much room for improvement left.
You just know that when you say that, someone will come along with a
20x-40x
improvement. ;-)
http://mg.to/test/loop1.html
http://mg.to/test/loop2.html
Try them in IE, where the performance is the worst and matters the most.
On my test machine, the first one runs about 6.3 seconds and the second
one
about 0.13 seconds.
-Mike
From: Ricardo Tomasi
Concatenating into a string is already much faster than
appending in each loop, there is not much room for
improvement left. What you can do improve user experience
though is split that into a recursive function over a
setTimeout, so that the browser doesn't freeze and you can
display a nice loading animation.
On Feb 5, 5:03 pm, James james.gp@gmail.com wrote:
I need tips on optimizing a large DOM insert to lessen the
freeze on
the browser.
Scenario:
I receive a large amount of JSON 'data' through AJAX from a
database
(sorted the way I want viewed), and loop through them to
add to a JS
string, and insert that chunk of string into a tbody of a
table. Then,
I run a plug-in that formats the table (with pagination, etc.).
Simplified sample code:
var html = '';
$.each(data, function(i, row) {
html += 'trtddata from json/td/tr';});
$(tbody).append(html);
$(table).formatTable();
formatTable() requires that the table has to be completed
before it
can be executed.
Is there any way I can optimize this better? I think I've read
somewhere that making a string too long is not good, but I've also
read that updating the DOM on each iteration is even worst.
Any advice would be appreciated!
[jQuery] Re: alignment IN IE6 ... with jquery..
Hi, can you post your code (e.g. at jsbin.com) or give us a link to it. Being standard compliant is always a good idea :-) by(e) Stephan 2009/2/5 shyhockey...@gmail.com shyhockey...@gmail.com: Hi, ok currently I just looked at my website using IE6 and IE7. I notice the pages I used jquery and javascript, would be randomly placed around the website and also the menus that needed to fade in and out when a mouse hover occurs over the user image. Well those menus show up as images and dosen't fade in or out but is randomly placed around the website. In firefox it works fine. I can see it fade in and out and many other stuff. So firefox is set to go. it's just that IE 7, and 6 is weird. It would randomly place the elements around the website. It would also show hidden elements meaning that they are hidden first and then fade in upon a certain condition. So is there anyway I can fix this??? I heard that I need to comply with WS3 . I heard their is a standard that I need to follow in order for my javascript or jquery to show properly. Any ideas?
[jQuery] Re: Can i use selector to reach slice in jQuery 1.3?
Hi
that selector works just as it should. If you get other results in
JQuery 1.2.6, then there was a bug in 1.2.6.
What you ask for is:
1. give me every element of class = button {'.button'} == button1,...5
2. give me the element with index 1 = second element {:eq(1)} == button2
3. give me only the first 3 elements in the remaining selection
{:lt(3)} == button2
what you described would be
jQuery('.button:gt(1):lt(3)')
by(e)
Stephan
2009/2/5 Jackal jum...@gmail.com:
I remember i can use the statement jQuery('.button:eq(1):lt(3)'); in
jQuery 1.2.6.
example:
html
body
a href=# class=buttonbutton1/a
a href=# class=buttonbutton2/a
a href=# class=buttonbutton3/a
a href=# class=buttonbutton4/a
a href=# class=buttonbutton5/a
/body
html
It returned matched button results from button2 to button4.
But now it only returned button2 element in jQuery 1.3.
So the selector statement like this can't chain filters??
[jQuery] Re: Deep $.extend() doesn't work with Date objects
Hi,
this is because jQuery creates anonymous objects for the clones and
copies the object properties. For the Date object there are no public
properties, so only the empty object hull is created.
But you are right, not copying Dates correctly is a bit strange.
If you disable the copy deep flag, your date will be in the clone, but
in this case it's no clone, but a reference to the original date
object.
by(e)
Stephan
2009/2/5 Tin michael.leib...@gmail.com:
Hi guys,
I'm trying to create a deep copy of an object with $.extend(true, {},
obj), but I've noticed that all of the dates get copied as a simple
Object with no properties. Here's a sample code that demonstrates it:
var clone = $.extend(true, {}, {myDate:new Date()});
// clone.myDate returns {}
// clone.myDate.toString() - [object Object]
Any ideas on why this is happening?
[jQuery] Re: $('#xxx').html() changing xhtml to html
Hi, you could use RegExp to replace br with br/ and img .. with img ... /, but tis ir really just a workaround since you would need a single RegExp for every non closed tag in HTML. by(e) Stephan 2009/2/5 dantan hattin...@gmail.com: I am trying to parse the html out of a specific div to save it with php into a SQL-database. Working good so far. The html is valid xhtml, but html() makes br instead of br / and img.. instead of img./ Is there a workaround to get the xhtml?
[jQuery] Re: Select element based on a value of its child element
Hi,
just a little remark: add a child selector '' before the 'input' or
you will select surrounding divs as well.
$(div:has(input[value='2']))
by(e)
Stephan
2009/2/4 Mauricio (Maujor) Samy Silva css.mau...@gmail.com:
$('div:has(input[value=2])')
Maurício
-Mensagem Original- De: Adrian Lynch adely...@googlemail.com
Para: jQuery (English) jquery-en@googlegroups.com
Enviada em: quarta-feira, 4 de fevereiro de 2009 09:22
Assunto: [jQuery] Select element based on a value of its child element
Hello all. I have the following...
div
input type=text value=1 /
/div
div
input type=text value=2 /
/div
div
input type=text value=3 /
/div
... and I want to select the second div because its child input has a
value of 2.
I know I could select the input then come back to the div with parents
(div). Just wondering if there's a way to do it in the selector
string.
More out of curiosity than need ;)
Thanks.
Adrian
[jQuery] Re: animations; browser problem or bad code?
Hi,
I played around with your site and code a little bit (hope this was ok :-).
What I discovered was that FF (and others) seems to have problems with
setting (or animating) the width of an empty div via css. Adding a
$('.main_content').html(nbsp;);
before your open animation will do the trick.
This is independent of loading the content in the background. Even
then you might have an empty div at the start of the animation. So
place a space in your main content and overwrite it once the page has
loaded.
by(e)
Stephan
2009/2/4 re5et zerodex...@chello.at:
btw, I fixed the Could not get the display property. Invalid
argument error.
but that didn't help either...
[jQuery] Re: Next/Previous element in each loop
Hi,
there are prev() and next() functions doing exactly what you need:
$(div).each( function() {
var prev = $(this).prev();
var next = $(this).next();
alert( prev.text() + - + next.text() );
});
(I've skipped the extra code for the first and last element for simplicity.)
by(e)
Stephan
2009/2/4 Adrian Lynch adely...@googlemail.com:
Hey all, I'm loop over some nodes with each() and I need to look at
the next and previous elements for the current iteration.
script type=text/javascript
$(function() {
$(div).each(function(i) {
var prev = [SELECTOR FOR PREVIOUS DIV].text();
var next = [SELECTOR FOR NEXT DIV].text();
alert(prev + : + next);
});
});
/script
div1/div
div2/div
div3/div
Will I have to store a reference to the divs and access it with i in
the loop like this:
script type=text/javascript
$(function() {
var divs = $(div);
divs.each(function(i) {
var prev = ;
var next = ;
if (i 0)
prev = $(divs.get(i - 1)).text();
if (i divs.size() - 1)
next = $(divs.get(i + 1)).text();
alert(prev + - + next);
});
});
/script
div1/div
spanSpanner in the works/span
div2/div
spanDon't select me!/span
div3/div
Is next() the answer maybe?
[jQuery] Re: Select element based on a value of its child element
Good point.
I've just tested input[value=''] and got an error in jQuery.js. Just
tested it with other HTML attributes and got the same results.
Empty attributes are not selected with a element[attr] and doing a
element[attr=''] results in an error.
Is this a bug?
by(e)
Stephan
2009/2/4 Adrian Lynch adely...@googlemail.com:
Nice one! Should have spotted :has()...
I've asked this in another thread but I'll slip it in here too, does
the selector...
input[value='']
... work for any of you?
Adrian
On Feb 4, 12:11 pm, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi,
just a little remark: add a child selector '' before the 'input' or
you will select surrounding divs as well.
$(div:has(input[value='2']))
by(e)
Stephan
2009/2/4 Mauricio (Maujor) Samy Silva css.mau...@gmail.com:
$('div:has(input[value=2])')
Maurício
-Mensagem Original- De: Adrian Lynch adely...@googlemail.com
Para: jQuery (English) jquery-en@googlegroups.com
Enviada em: quarta-feira, 4 de fevereiro de 2009 09:22
Assunto: [jQuery] Select element based on a value of its child element
Hello all. I have the following...
div
input type=text value=1 /
/div
div
input type=text value=2 /
/div
div
input type=text value=3 /
/div
... and I want to select the second div because its child input has a
value of 2.
I know I could select the input then come back to the div with parents
(div). Just wondering if there's a way to do it in the selector
string.
More out of curiosity than need ;)
Thanks.
Adrian
[jQuery] Re: animations; browser problem or bad code?
Hi, I took a short look on your code and noticed that you load your main content after the animation has finished. Is this really what you want to do? Shouldn't it be rather that the main content is loaded in background as soon as the link is clicked, and set to visible after the animation has finished? Anyway, what happens if you comment out the content loading completely and test the animation only. by(e) Stephan 2009/2/4 re5et zerodex...@chello.at: uh that's odd, I don't get any errors in FF (except Warning: Error in parsing value for property 'opacity'. Declaration dropped.) I know it's not usable in IE6 as I haven't done anything towards IE compatibility yet. thanks for telling me about the error, though. so... does it work for everyone in FF? for me in all browsers but IE7 there's no animation when the content panel opens. the closing animations works most of the time but then it immediately jumps to 'open' instead of smoothly animating the width of the content div. I've tried disabling firebug and the dev toolbar to see if it works better without them but there was no difference - some odd settings in FF maybe?
[jQuery] Re: Long List, no particular order of IDs
Hi Drew, I'm not a JavsScript optimization expert, but here's my approach. Do you create the item list dynamically? If so, I would add every newly created jQuery object of an item into an array. Then loop through the array and expand / collapse as you like. If the HTML is created on server side, add a class (e.g.'top-level') to each top level item, get them once when the page has been loaded $(li.top-level) and store this jQuery selection in a global variable for later use. by(e) Stephan 2009/2/3 drewtown drew.t...@gmail.com: I have a long list of items for example + item 1 -- sub item 1 -- sub item 23 + item 45 -- sub item 142 +item 995 -- sub item 198 -- sub item 244 As you can see the ids are in no particular order. I'm looking for the most efficient way of expanding the top level ones. Also I would like all the items to be editable by their respective owners. b It's essentially a threaded comment system that is collapsed by default./ b Right now I have them in a foreach loop that is generated when the page is called but I'm guessing there is a faster way to do this. I look forward to your ideas. Drew
[jQuery] Re: Posting a serialized string without Ajax ??
Hi Brain, you can put it into a hidden input field and do a normal user submit of the form. by(e) Stephan 2009/2/4 sinkingfish sinkingf...@gmail.com: Hi, I think i might be overlooking the obvious but I've got a string from my sortable list, something like : item[]=3item[]=1... I don't want to post this using ajax, I want to do a plain old post, but how do I append the string to the post url? Thanks Brian -- View this message in context: http://www.nabble.com/Posting-a-serialized-string-without-Ajaxtp21834948s27240p21834948.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: events, lock and unlock
Hi Cequiel,
I've some questions to your problem.
1. Who triggers your events and when are they (supposed) to be dispatched?
2. If anotherevent happens before myevent it will have no effect on
anotherobject. So what is anotherevent for?
3. What do you mean with lock/unlockEvent()?
by(e)
Stephan
2009/2/3 Cequiel gonzalo.chumil...@gmail.com:
Hi everybody,
I have the next silly problem:
$(myobject).bind('myevent', function() {
var anotherobject = new MyCustomObject();
$(anotherobject).bind('anotherevent', function() {
// code here
});
});
and then I write these two lines:
$(myobject).trigger('myevent');
$(myobject).trigger('myevent');
The problem is that sometimes 'myevent' is dispatched before the
'anotherevent' and I would like to be sure that the 'anotherevent' has
been dispached previously. I'm thinking in something like this:
$(myobject).bind('myevent', function() {
// here we lock 'myevent'
$(myobject).lockEvent('myevent);
var anotherobject = new MyCustomObject();
$(anotherobject).bind('anotherevent', function() {
// code here
// here we unlock 'myevent' so we are sure 'myevent' is dispached
after the 'anotherevent'
$(myobject).unlockEvent('myevent');
});
});
I now it is a strange question :) and I currently I'm doing it in
another way, but I'm curios about it.
Thank you in advance and sorry for my English.
[jQuery] Re: Problem with Chrome firing events correctly
Hi Caleb,
Could you please post your LiveSaver object and the element variable
initialization as well.
I tested your code with a more or less meaningful dummy implementation
of LiveSaver and element and it works for me in: FF3, Chrome1, Opera9,
IE8
I guess the problem is either in LiveSaver.add() or LiveSaver.save().
by(e)
Stephan
2009/2/3 Caleb Morse morse.ca...@gmail.com:
I am having trouble getting this piece of code to work correctly in Chrome.
It works just fine in in IE7, IE8, and FF. Watching the Chrome javascript
console doesn't reveal anything useful.
I manually checked each value in the if statements, and they are all coming
back true.
The textbox is not created or changed using javascript so I shouldn't need
to use .live.
$('#textbox').bind('keyup focus blur', function() {
if(LiveSaver.enabled === true ((new Date()).getTime() -
LiveSaver.lastSave) LiveSaver.saveThreshold) {
LiveSaver.lastSave = (new Date()).getTime();
if($('#' + element).val() != LiveSaver.data[LiveSaver.page][element]) {
LiveSaver.add(element, $('#' + element).val());
LiveSaver.save();
}
}
});
-- Caleb
[jQuery] Re: Help creating a function
Hi Erwin, Of course you can code it by hand, but I would suggest that you take a look at the various validation plugins for jQuery (e.g. http://plugins.jquery.com/project/validate) first. by(e) Stephan 2009/2/3 ebru...@gmail.com ebru...@gmail.com: Hello, I have a site where i want to run a realtime check. I have 6 form fields, when someone fills a number in jquery has to check if he doesn't go over the max what he can fill in. So for example he kan take 40 bags: Field one he fills in 10 Field two he fills in 10 Field three he fills in 10 Field four he fills in 10 Field five he fills in 10 Field six he fills in 10 He wants to take 60 bags thats over the max he can take so there has to show a messages on the website: You can't take more then 40 bags you have selected 60 bags now! If he takes 40 bags the only thing there has to showup is how much he has filled in total. Any one how can advise me on how to fix this. Erwin
[jQuery] Re: Detecting wether an image link is going to work
You can set a timeout and jump to the next image if the image was not
loaded before the timeout.
see:
http://jsbin.com/evitu/edit
The third image is a broken link and will run into a 5s timeout.
by(e)
Stephan
2009/2/3 daveJay davidjo...@exit42design.com:
I've got a page set up where it loads each image on the page, one
after the other. As you can see here:
http://sandbox.exit42design.com/photography/folio_1.html
The problem with this is that if one of the images is broken, it'll
stop in it's tracks and not try to load the next.
Here's an example of how I'm loading the images
$(image[1]).load(function(){
$(#image1).attr({src : image[1].src});
image[2].src= path/to/next/image.jpg;
});
$(image[2]).load(function(){
$(#image2).attr({src : image[2].src});
image[3].src= path/to/next/image3.jpg;
});
So, basically when the first one is loaded, it inserts it onto the
page, and then sets up the next image path, and so on and so on. So I
need a way to detect if image 2 is going to load successfully, because
if it can't image 3 will never be allowed to load.
I tried using an ajax call but I'm not terribly familiar with how to
use it, for example, in an if statement. Can I get this ajax call to
just return a yes or no value of wether or not there was an error or
not?
$.ajax({url:imagesSrc[1], type:'HEAD', error:somefunction})
Thanks for any help. And any other comments/bug reports on the site
are welcome as well =)
[jQuery] Re: Problem with Chrome firing events correctly
notice
$('#notice').remove();
});
}
}
}
// Watch for multiple events in the textbox
$('#' + element).bind('keyup focus blur', function() {
// Check if enough time has passed
if(LiveSaver.enabled === true ((new
Date()).getTime() -
LiveSaver.lastSave) LiveSaver.saveThreshold) {
// Update last saved time
LiveSaver.lastSave = (new Date()).getTime();
// Only save if textbox has changed since last
save
if($('#' + element).val() !=
LiveSaver.data[LiveSaver.page]
[element]) {
LiveSaver.add(element, $('#' +
element).val());
LiveSaver.save();
}
}
});
},
save: function() {
var json = JSON.stringify(this.data);
this.cookie.save(json);
},
add: function(key, val) {
// Save everythng that is in the form
this.data[this.page][key] = val;
// Save revision id
this.data[this.page]['rev'] = wgCurRevisionId;
},
get: function(key) {
if(this.has(key)) {
return this.data[this.page][key];
} else {
return false;
}
},
reset: function() {
if(this.data[this.page][element]) {
this.data[this.page][element] = '';
}
if(this.data[this.page]['rev']) {
this.data[this.page]['rev'] = '';
}
this.save();
},
has: function(key) {
if(this.data[this.page][key].length 0) {
return true;
} else {
return false;
}
}
};
var LiveSaverCookie = function(e) {
this.save = function(data) {
$.cookie(cookie_name, escape(data), { expires: 1000 });
};
this.load = function() {
return unescape($.cookie(cookie_name));
};
};
function LiveSaver_init() {
LiveSaver.init();
LiveSaver.register();
$('#LiveSaverIcon').live('click', function(event) {
// event.which tells us which mouse button was used, 1 is the
left
mouse button
if(event.which === 1) {
if(LiveSaver.enabled === true) {
LiveSaver.disable();
} else {
LiveSaver.enable();
}
}
});
// Reset when the Cancel or submit button is clicked
$('#wpSave, #editform .editHelp a:contains(Cancel)').click(function
() {
LiveSaver.reset();
});
// Save changes before moving to next page
$('#wpPreview, #wpDiff').click(function() {
LiveSaver.add(element, $('#' + element).val());
LiveSaver.save();
});
}
// Set LiveSaver_init to run after page has finished loading
addOnloadHook(LiveSaver_init);
// End code //
On Feb 3, 3:04 am, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi Caleb,
Could you please post your LiveSaver object and the element variable
initialization as well.
I tested your code with a more or less meaningful dummy implementation
of LiveSaver and element and it works for me in: FF3, Chrome1, Opera9,
IE8
I guess the problem is either in LiveSaver.add() or LiveSaver.save().
by(e)
Stephan
2009/2/3 Caleb Morse morse.ca...@gmail.com:
I am having trouble getting this piece of code to work correctly in Chrome.
It works just fine in in IE7, IE8, and FF. Watching the Chrome javascript
console doesn't reveal anything useful.
I manually checked each value in the if statements, and they are all coming
back true.
The textbox is not created or changed using javascript so I shouldn't need
to use .live.
$('#textbox').bind('keyup focus blur', function() {
if(LiveSaver.enabled === true ((new Date()).getTime() -
LiveSaver.lastSave) LiveSaver.saveThreshold) {
LiveSaver.lastSave = (new Date()).getTime();
if($('#' + element).val() != LiveSaver.data[LiveSaver.page][element]) {
LiveSaver.add(element, $('#' + element).val());
LiveSaver.save();
}
}
});
-- Caleb
[jQuery] Re: callback for append function?
The append is done immediately, but you have to wait for the load event of the image before you can get the correct height. by(e) Stephan 2009/2/2 lhwpa...@googlemail.com lhwpa...@googlemail.com: is there any way to get a callback when append is ready? i have the following problem. i add some images with .append() after this i have to get the .height() of these images. when i now execute .append() it takes a while to load the images so the .height() function can not find the images.
[jQuery] Re: callback for append function?
You can make a function you call every time an image has been loaded and update a counter in this function. Once the counter reaches the number if images you have on your page, you know that all images where loaded. see: http://jsbin.com/ofici/edit by(e) Stephan 2009/2/2 Liam Potter radioactiv...@gmail.com: can you please not delete the quoted message, as I have no idea what you just thanked someone for now. lhwpa...@googlemail.com wrote: great! thanks for that! one last question. is it possible to fire a function when the last of 5 images is loaded ?
[jQuery] Re: Jquery Save Layout
You have to transmit (HTTP post) the HTML string to your php files.
You can do this either with AJAX or put the string into a hidden input
field and do an ordinary user submit.
AJAX could look something like:
$.post(your.php, { 'html': $(#root).html() });
In the PHP file you can read the data with:
$html = $_POST['html'];
for more details see:
http://docs.jquery.com/Ajax
by(e)
Stephan
2009/2/2 Chris Owen skatee...@gmail.com:
Sorry,
Got it working, was missing the div's.
How can I get to this value from php so that I can connect to my database?
Many Thanks
Chris.
On Mon, Feb 2, 2009 at 4:48 PM, Chris Owen skatee...@gmail.com wrote:
Hi Stephan
I have tried this and when I click my button I get null.
Guess I am calling the button incorrectly ?
Many Thanks
Chris.
On Mon, Feb 2, 2009 at 4:23 PM, Stephan Veigl stephan.ve...@gmail.com
wrote:
Saving $(#root_element).html() to your DB should do the job.
see a little demo: http://jsbin.com/uwujo/edit
by(e)
Stephan
2009/2/2 Chris Owen skatee...@gmail.com:
Hey,
I have been trying for about a week now to be able to save the layout
of my
page, I am using sortable, dragable etc so that my users can create
there
own layout.
I need away to save this layout either to a cookie or to a database so
that
I can reload there layout when they come back.
Many Thanks
Chris.
[jQuery] Re: Dynamic url in ajax call based on select value
First the bad news:
After taking a look at cascade and playing around with the source code
I think this is not possible with the original cascade plugin.
The cascade plugin is copying the ajax options (including the url) at
initialization time to local variable. So ajax: {url:
$(select#chained).val() +'_1.js'} will be called once at start up
and any later changes of the select input will have no effect on the
ajax settings.
Now the good news:
The cascade plugin can be patched so, that a dynamic URL is working.
It's just a quickdirty hack, but it should do the job.
Open jquery.cascade.ext.js and insert:
if (opt.urlCallback) ajax.url = opt.urlCallback(this);
after line 22 ( return { getList: function(parent) { )
than rewrite your code:
function which (element){
if (element.id == 'bchained_child')
{
var selectVal = $(#bchained).val()+'_1.js';
alert(selectVal);
return selectVal;
}
else
{
var selectVal = $(#bchained_child).val()+'_2.js';
alert(selectVal);
return selectVal;
}
}
$(#bchained_child).cascade(#bchained,{
ajax: {url: },
urlCallback: which
template: commonTemplate,
match: commonMatch
});
$(#bchained_sub_child).cascade(#bchained_child,{
ajax: {url: },
urlCallback: which
template: commonTemplate,
match: commonMatch
});
However, you should still try to trigger the original author of the
plugin to implement support for dynamic URLs.
by(e)
Stephan
2009/2/2 James james.tilb...@gmail.com:
@boermans
ajax: {url: $(select#chained).val() +'_1.js'},
SHOULD work, but the element being returned is not the updated form
element. It is the original element value from when the page
initially loads.
If anyone knows how to obtain the updated element value I would be
most appreciative... :)
Thanks!
James
Okay, so now I've realized that the notation has nothing to do with
the problem.
On Feb 2, 12:47 pm, James james.tilb...@gmail.com wrote:
Okay, I am tearing what hair I have left out.
The following code should illustrate what exactly I'm trying to
accomplish, but with my feeble understanding of jQuery I can't seem to
be getting what I want:
script type=text/javascript
function which (choice){
var selectVal =
document.getElementById('bchained').value;
if (choice == 'countryList')
{
selectVal += '_1.js';
alert(selectVal);
return selectVal;
}
else
{
selectVal += '_2.js';
alert(selectVal);
return selectVal;
}
}
jQuery(document).ready(function()
{
jQuery(#bchained_child).cascade(#bchained,{
ajax: {url: yo=which('cityList') },
template: commonTemplate,
match: commonMatch
});
jQuery(#bchained_sub_child).cascade(#bchained_child,{
ajax: {url: mo=which('cityList') },
template: commonTemplate,
match: commonMatch
});
});
/script
This seems to make perfectly logical sense, except that when my
function which() is called, the line
document.getElementById('bchained').value;
is ONLY returning the value of that element AS IT WAS WHEN THE PAGE
WAS FIRST LOADED.
For some reason that I don't understand the value is not updated when
a different selection is made in the box (according to firebug).
Please help me someone if you can :)
I'm trying to hang in there ;)
On Feb 2, 10:26 am, James james.tilb...@gmail.com wrote:
@boermans
The first thing I tried was your example:
ajax: {url: $(select#chained).val() +'_1.js'},
I don't think this works inside this structure, but then I'm not
reallty sure how to test the variable INSIDE THIS STRUCTURE! :)
Here is my whole code now...
script type=text/javascript
var selectVal = $(select#bchained).val();
var countryList = selectVal + '_1.js';
var cityList = selectVal + '_2.js';
alert (countryList); //just to test the varaible
alert (cityList); //just to test the variable
jQuery(document).ready(function()
{
jQuery(#bchained_child).cascade(#bchained,{
ajax: {url:
[jQuery] Re: How do I get the index of the currently clicked textbox?
How about writing the index of the textbox into it's name attribute
(or another attribute) and then get the index by
var index = $(this).attr(name);
by(e)
Stephan
2009/2/2 bittermonkey brakes...@gmail.com:
Hi,
How do I get the index of the currently clicked textbox? I have 5
textboxes in a form, all of which I am binding a click event. Here is
the code:
$(#associate-form input[type=text]).bind(click, function()
{
alert(this); //what is its index position from the 5
other textboxes?
});
Thanks in advance.
[jQuery] Re: Building a weight calculator, completely stumped
Simply use an each loop:
$(#calculateweight).click(function() {
var sum = 0;
$(input[name*='weight']).each(function() {
sum += Number($(this).val());
});
$(#totalweight).text( Math.ceil(sum) );
return false;
});
@James: looks quite similar :-)
However you should reset the total within the click function,
otherwise you would increase the sum with every click
by(e)
Stephan
2009/2/2 Zaliek zali...@gmail.com:
I'm new to javascript and jquery.
I'm building a shipping calculator that pulls the weights from hidden
input fields and adds them together then calculates the shipping
price. Due to the proprietary nature of the code I cannot change the
code of the input fields. The input fields are named weight1, weight2,
etc and the total number of input fields varies depending on the
number of items in the shopping cart.
The below code is a mockup webpage meant for designing the script:
---
html
head
script type=text/javascript src=jquery.js/script
script type=text/javascript
$(document).ready(function() {
$(#calculateweight).click(function() {
var weightarray = $(input[name*='weight']).val();
});
});
/script
/head
body
form
input type=hidden name=weight1 value=1.1
input type=hidden name=weight2 value=4.1
input type=hidden name=weight3 value=5.1
/form
a href= id=calculateweightCalculate Weight/a
span id=totalweight/span
/body
/html
---
When the Calculate Weight link is clicked the script should pull the
weights, add them together then do Math.Ceil to round up the result
and then pass that to the next part of the script that will compare
that weight to a table of weights and prices.
My problem currently is that I have no idea how to add together the
array of weights to pass them into a variable which I can then run
Math.Ceil on.
Any help is much appreciated!
[jQuery] Re: collapsible list
Hi,
that's a feature of the event bubbling in jQuery 1.3
You need to call stopPropagation().
$('li:not(:has(ul))').css({
cursor: 'default', 'list-style-image': 'none'
})
.click(function(event) {
event.stopPropagation();
return true;
});
by(e)
Stephan
$('li:not(:has(ul))').css({
cursor: 'default', 'list-style-image': 'none'
});
2009/2/2 Duncan i...@e-ips.com:
Hi
I'm using the function below to collapse an unordered list which all
seems to workfine, but what I want is the lower level items in the the
list to be hyper links (again I can get to display) but when I click
on the link nothing happens. It seems to be the Jquery function
stopping this but as I'm fairly new to Jquery and not sure why.
Jquery function
script type=text/javascript
$(function() {
$('li:has(ul)')
.click(function(event) {
if (this == event.target) {
if ($(this).children().is(':hidden')) {
$(this)
.css('list-style-image', 'url(../images/design/minus.gif)')
.children().show();
} else {
$(this)
.css('list-style-image', 'url(../images/design/plus.gif)')
.children().hide();
}
} return false;
})
.css('cursor', 'pointer')
.click();
$('li:not(:has(ul))').css({
cursor: 'default', 'list-style-image': 'none'
});
});
/script
unorderlist
ul
liheading
ul
lia href=http://www.hyperlink;text/a/li
lia href=http://www.hyperlink;text/a/li
lia href=http://www.hyperlink;text/a/li
/ul
/li
liheading
ul
lia href=http://www.hyperlink;text/a/li
lia href=http://www.hyperlink;text/a/li
lia href=http://www.hyperlink;text/a/li
/ul
/li
/ul
[jQuery] Re: callback for append function?
sure, no problem take a look at: http://jsbin.com/udeze/edit by(e) Stephan 2009/2/2 lhwpa...@googlemail.com lhwpa...@googlemail.com: ok thanks, and is there any way to use the load event to an image included with append?
[jQuery] Re: Jquery Save Layout
Saving $(#root_element).html() to your DB should do the job. see a little demo: http://jsbin.com/uwujo/edit by(e) Stephan 2009/2/2 Chris Owen skatee...@gmail.com: Hey, I have been trying for about a week now to be able to save the layout of my page, I am using sortable, dragable etc so that my users can create there own layout. I need away to save this layout either to a cookie or to a database so that I can reload there layout when they come back. Many Thanks Chris.
[jQuery] Re: appendingTo a just created element
the selector for an id is #, sou you should use #someID instead of
someID for the appendTo() function.
by(e)
Stephan
2009/1/31 Nicky nha...@gmail.com:
Hi All,
I'm fairly new to jQuery so I apologize if I'm missing something
straightforward but doing this:
$('div/')
.attr('id', 'someID')
.insertBefore(elm);
$('p/')
.appendTo('someID');
Seems to give me errors. If I change appendTo('someID') to a
different element's ID, it works fine, so I get the feeling that it
can't append to the just-created div. Is this not the case? What
should I do to move forward?
Thanks for the help!
[jQuery] Re: $(this).ready with images
Hi,
the event you are looking fore is the image load event.
try:
$('.myimage').load(function(){...});
by(e)
Stephan
2009/1/31 frederik.r...@gmail.com frederik.r...@gmail.com:
Hi!
I have the following task: I have a list of images and some of those
images have a larger version that I want to display in a popup when
clicking on them. As I want to generate those Popup-Links
automatically I need to know the size of the large image. I do this by
loading the large image into the list (without showing), getting it's
height passing it on to the function generating the popup. Of course
the (hidden) image has to be fully loaded for this. I try to wait for
that by using $('.myimage').ready(function(){actions go here}), but
somehow it won't wait (and returns dimensions of 0x0). As soon as my
browser has cached the images everything works fine. Any idea how to
get the function wait for the image to load?
Code goes like this:
function popup(pfad){
var hoehe = 0;
var breite = 0;
$('.asset:visible').append('img class=sizeCheck src='+pfad+'
style=display:none');
$('.sizeCheck').ready(function(){
$('.sizeCheck').each(function(){
hoehe = this.height;
breite = this.width;
});
$('.sizeCheck').remove();
var Grossansicht = window.open(pfad,'Grossansicht','width='+breite
+',height='+hoehe+',top=20,left=20');
Grossansicht.document.write('htmlheadstyle type=text/cssbody,
html{margin: 0 0 0 0; padding: 0 0 0 0;}/style/headbodyimg
src='+pfad+'/body');
Grossansicht.focus();
});
Thanks alot in advance!
[jQuery] Re: jquery tabs ajax mode
$(#tabs a).click(function() {
$.get( $(this).attr(href), function(data) {
$(#contaioner).html(data);
});
return false;
});
see also:
http://docs.jquery.com/Ajax
and (since I guess you are German speaking):
http://www.ajax-community.de/javascript/5951-jquery-ajax-ergebnis-ins-dom-laden.html
by(e)
Stephan
2009/1/29 jampov jam...@gmail.com:
Hello. I need some help with tabs jQuery v2.7.4 of stilbuero.
I want to use Ajax Mode and open the links in a given container. For
example:
div id=box
ul id=tabs
lia href=01.htmlspanTab one/span/a/li
lia href=02.htmlspanTab two/span/a/li
lia href=03.htmlspanTab three/span/a/li
/ul
/div
...
div id=container/div!-- Open external links here (01.html,
02.html and 03.html) --
Can you tell me how to do it?
Sorry for my bad English.
A greeting.
[jQuery] Re: copy input vals to 3 siblings in diffrent TR/TDs
Your $(input.frage) within your each function would give you all
questions for every each iteration.
First you need to find the common root object of your current
question (the row):
var row = $(this).parent().parent();
Then you update all child inputs. Maybe you add a second, general
class beruf to your check boxes, then you can filter more precisely:
(input.beruf).val(...)
$(input.frage).each(function () {
var output = $(this).val();
var row = $(this).parent().parent();
row.find(input).val(output);
console.log(output);
});
by(e)
Stephan
2009/1/29 tlob tlohb...@gmail.com:
Hello I have problems iterating with each() and traversing in jQ.
can you help me out with a slick example?
thx a lot!
$(input.frage).each(function () {
var output = $(this).val();
//$(input.frage).nextAll().val(output); /*NOT
WORKING*/
console.log(output);
});
.many TRs before
tr
tdinput class=frage type=checkbox value=Sicherer
Arbeitsplatz / Sicherer Arbeitsplatz/td
tdinput class=beruf1 type=checkbox value=beruf1[]
//td
tdinput class=beruf2 type=checkbox value=beruf2[]
//td
tdinput class=beruf3 type=checkbox value=beruf3[]
//td
/tr
tr
tdinput class=frage type=checkbox value=Chance,
Arbeitsplatz
zu finden / Chance, Arbeitsplatz zu finden/td
tdinput class=beruf1 type=checkbox value=beruf1[]
//td
tdinput class=beruf2 type=checkbox value=beruf2[]
//td
tdinput class=beruf3 type=checkbox value=beruf3[]
//td
/tr
.many TRs after
...should become
tr
tdinput class=frage type=checkbox value=Sicherer
Arbeitsplatz / Sicherer Arbeitsplatz/td
tdinput class=beruf1 type=checkbox value=Sicherer
Arbeitsplatz //td
tdinput class=beruf2 type=checkbox value=Sicherer
Arbeitsplatz //td
tdinput class=beruf3 type=checkbox value=Sicherer
Arbeitsplatz //td
/tr
tr
tdinput class=frage type=checkbox value=Chance,
Arbeitsplatz
zu finden / Chance, Arbeitsplatz zu finden/td
tdinput class=beruf1 type=checkbox value=Chance,
Arbeitsplatz zu finden //td
tdinput class=beruf2 type=checkbox value=Chance,
Arbeitsplatz zu finden //td
tdinput class=beruf3 type=checkbox value=Chance,
Arbeitsplatz zu finden //td
/tr
[jQuery] Re: .val is not a function
And that's right, .val is NO function,
the function is .val().
by(e)
Stephan
2009/1/29 trancehead williamjhu...@gmail.com:
All the core functions for JQuery seem to have stopped working.
Jquery is the first script include so it appears before the other
functions.
script src=../../Shared/JS/jquery-1.3.1.min.js type=text/
javascript/script
script src=../../Shared/JS/Functions.js type=text/javascript/
script
script src=../../Shared/JS/PPFFunctions.js type=text/javascript/
script
I'm using asp.net webforms so I have a function that fetches each
elements value for me according to the ID
// Returns the value of an element using JQuery to find ASP.NET
control ID - includes context for speed
getElementValueWithContext = function(elementId, context) {
// Returns all elements that end with the elementId
return getElementWithContext(elementId, context).val;
}
This gives the error .val is not a function. The strange thing is if I
return getElementWithContext(elementId, context).value; it works fine.
This is not really a huge issue but it affects other core functions
such as .html which I use a lot.
I've been trying to figure this out for 2 days now and I'm at an
absolute loss. Any suggestions?
[jQuery] Re: How to use one button to toggle multiple panels in succession
That depends on what you want to happen with the hidden divs.
Suppose you have added a button-button to every .myPanel div.
div class='myPanel'1button-/button/div
Scenario 1: hidden divs stay hidden and the next unopened div is shown
var myPanels = $(.myPanel).hide();
var nextPanel = 0;
$(.myHeader button).click(function(){
if (nextPanel myPanels.length) {
$(myPanels[nextPanel++]).slideDown();
}
});
$(.myPanel button).click(function(){
$(this).parent().slideUp();
});
Scenario 1.1: hidden divs are removed from the DOM
var myPanels = $(.myPanel).hide();
var nextPanel = 0;
$(.myHeader button).click(function(){
if (nextPanel myPanels.length) {
$(myPanels[nextPanel++]).slideDown();
}
});
$(.myPanel button).click(function(){
$(this).parent().slideUp(function(){$(this).remove();});
});
-or-
var myPanels = $(.myPanel).hide();
$(.myHeader button).click(function(){
$(.myPanel:hidden:first).slideDown();
});
$(.myPanel button).click(function(){
$(this).parent().slideUp(function(){$(this).remove();});
});
Scenario 2: hidden divs are opened again, before the next unopened div is shown
var myPanels = $(.myPanel).hide();
$(.myHeader button).click(function(){
$(.myPanel:hidden:first).slideDown();
});
$(.myPanel button).click(function(){
$(this).parent().slideUp();
});
by(e)
Stephan
2009/1/29 Kevin Rodenhofer krodenho...@gmail.com:
Not bad at all...if I remove them with slideUp, in succession, how would I
do that?
On Wed, Jan 28, 2009 at 7:39 AM, Stephan Veigl stephan.ve...@gmail.com
wrote:
I'm not sure if I realy understand what you want to do, but it could
look something like
HTML:
div id=root
div class=myHeaderbutton+/button/div
div class='myPanel'1/div
div class='myPanel'2/div
div class='myPanel'3/div
div class='myPanel'4/div
div class='myPanel'5/div
/div
JavaScript:
var myPanels = $(.myPanel).hide();
var nextPanel = 0;
$(.myHeader button).click(function(){
if (nextPanel myPanels.length) {
$(myPanels[nextPanel++]).slideDown();
}
});
However, you may have problems if you delete or insert a panel.
A more flexible, but not so performat method would be:
(same HTML)
JavaScript:
var myPanels = $(.myPanel).hide();
$(.myHeader button).click(function(){
$(.myPanel:hidden:first).slideDown();
});
by(e)
Stephan
2009/1/27 webopolis krodenho...@gmail.com:
I want to have 1 + with x number of slide panels set to display:
none; under it . When a user clicks the + a panel is revealed. Each
time the + is clicked, the next panel is revealed, and so on. Each
panel will have a x that can be clicked to close itself.
I figure I would have to create an array for my collection of DIVs,
then with clicks, iterate through each one until I have the desired
number of panels revealed, or, I reach the end of the array.
I just have no idea how to begin with this.
Am I making any sense?
[jQuery] Re: Inside page jumps,
to automatically jump to an anchor use the location hash:
window.location.hash=there;
by(e)
Stephan
2009/1/29 pejot pjonar...@gmail.com:
Hi,
I have quite complex page with internal link inside.
a href=#there id=jump Jump/a and a name=there /a far
a way on bottom page.
When I click a link Jump page jumps to specific there place. It
is fine.
Case is that click should be done from jquery code...
I put code $(#jump).click(); and it seems to work because function
from $(#jump).click( function () { alert('Hi'); } ); is fired and
alert Hi is displayed.
Unfortunnately page is not moved to a new position. #there is not join
to page address.
Do you have any idea why it no jumps to xxx label?
regards,
Piotr
[jQuery] Re: eval(JSON_DATA) how safe is it?
hi, check out the secureEvalJSON() method of the json plugin. http://code.google.com/p/jquery-json/ by(e) Stephan 2009/1/29 Trend-King i...@trend-king.de: Hi there another question from my, how save is it eval() data getting via JSON $.ajax() call i want to get javascript data to be executed after JSON $.ajax() call. or is there another way to do that?
[jQuery] Re: eval(JSON_DATA) how safe is it?
If you are trying to send JavaScript via AJAX that's not JSON. JSON is
about data only (see: http://json.org/), and that's exactly what makes
secureEvalJSON() secure. This function checks that there is nothing
else in your JSON except data, especially no JavaScript commands.
QUOTE: secureEvalJSON: Converts from JSON to Javascript, but does so
while checking to see if the source is actually JSON, and not with
other Javascript statements thrown in.
If your question is: How secure is it to transfer JavaScript via AJAX?
Then the answer depends on how secure is your channel, how confident
are you that the data are really from the expected source and how much
do you trust your source.
For the first shot I would say, that it is insecure by default.
However it depends on your application. Most web pages are loaded over
an insecure channel and from an unidentified source, and we live quite
well with it - as long as it's not my net banking page or an online
shop.
But from your example, I guess you are talking exactly about an online
shop - than you could use https, this would eliminate the network
questions, at least.
by(e)
Stephan
2009/1/29 Trend-King i...@trend-king.de:
ok thats right but $.ajax() also do that so my problem is how safe it
is to pass script/script through JSON and the append it to the DOM
and it will be executed
On 29 Jan., 15:13, jQuery Lover ilovejqu...@gmail.com wrote:
Reading the plugin homepage it does not. It only encodes and decodes
JSON or am I missing anything?
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Thu, Jan 29, 2009 at 6:57 PM, Trend-King i...@trend-king.de wrote:
ok and thats safe for things like a sting $(#cart_info).fadeIn
(500);setTimeout(function(){$(#cart_info).fadeOut(500)},2000);
getted from JSON?
On 29 Jan., 14:51, Stephan Veigl stephan.ve...@gmail.com wrote:
hi,
check out the secureEvalJSON() method of the json
plugin.http://code.google.com/p/jquery-json/
by(e)
Stephan
2009/1/29 Trend-King i...@trend-king.de:
Hi there another question from my, how save is it eval() data getting
via JSON $.ajax() call
i want to get javascript data to be executed after JSON $.ajax() call.
or is there another way to do that?- Zitierten Text ausblenden -
- Zitierten Text anzeigen -- Zitierten Text ausblenden -
- Zitierten Text anzeigen -
[jQuery] Re: How to decode Json value through Jquery
If you use AJAX to get your data, take a look at: jQuery.getJSON()
http://docs.jquery.com/Ajax/jQuery.getJSON
If your JSON data came from another source, suppose your JSON data are
stored in a string variable called json, you can simply do:
eval(var obj=+json);
then the variable obj will hold the decoded JSON data.
However this method is quite insecure if the data came from an
untrusted source (e.g. over the Internet). Therefore I would recommend
to use the secureEvalJSON() method of the json plugin.
http://code.google.com/p/jquery-json/
by(e)
Stephan
2009/1/28 Bluesapphire michealg...@gmail.com:
Hi!
I am novice to Jquery.
Iam getting following Json output from PHP file :
{jval:{wine:3,sugar:4,lemon:22}}
how can I decode/get these Json values in Jquery.
Thanks in advance
[jQuery] Re: How to use one button to toggle multiple panels in succession
I'm not sure if I realy understand what you want to do, but it could
look something like
HTML:
div id=root
div class=myHeaderbutton+/button/div
div class='myPanel'1/div
div class='myPanel'2/div
div class='myPanel'3/div
div class='myPanel'4/div
div class='myPanel'5/div
/div
JavaScript:
var myPanels = $(.myPanel).hide();
var nextPanel = 0;
$(.myHeader button).click(function(){
if (nextPanel myPanels.length) {
$(myPanels[nextPanel++]).slideDown();
}
});
However, you may have problems if you delete or insert a panel.
A more flexible, but not so performat method would be:
(same HTML)
JavaScript:
var myPanels = $(.myPanel).hide();
$(.myHeader button).click(function(){
$(.myPanel:hidden:first).slideDown();
});
by(e)
Stephan
2009/1/27 webopolis krodenho...@gmail.com:
I want to have 1 + with x number of slide panels set to display:
none; under it . When a user clicks the + a panel is revealed. Each
time the + is clicked, the next panel is revealed, and so on. Each
panel will have a x that can be clicked to close itself.
I figure I would have to create an array for my collection of DIVs,
then with clicks, iterate through each one until I have the desired
number of panels revealed, or, I reach the end of the array.
I just have no idea how to begin with this.
Am I making any sense?
[jQuery] Re: onblur Firing Ahead Of onclick
Hi bob,
So it works exactly how I would expect that it should work.
1. the focus is taken from the input, so you get a blur event
2. the submit button is clicked, so you get a submit event
How about simply ignoring the blur event if you don't use it?
If you use it for data validation you would want do to it BEFORE you
submit the form, so the order
1. blur event - data validation, set validation flag to true / false
2. submit event - submit form if validation flag is true
makes sense for me.
by(e)
Stephan
2009/1/27 bob xoxeo...@gmail.com:
jQuery('form[name=myForm]').bind('submit', validateForm);
jQuery('#login').bind('focus', validateForm);
jQuery('#blur').bind('blur', validateForm);
Problem: when I click login text field and then Submit button
what happens is that instead of
alert('submit');
I get
alert('blur');
What can I do about it? I need to have
alert('submit'); triggered every time I click it.
form name=myForm id=myForm method=post onsubmit=return
false;
input type=text name=login id=login
input type=submit value=Submit/
function validateForm(e){
if(e.type=='submit'){alert('submit');}
if(e.type=='blur'){alert('blur');}
}
[jQuery] Re: HELP!!! wait for fade out before replacement div fades in
simply do the fade in in the finished callback of the fade out
$(a.linkclass).click(function() {
var next = $($(this).attr(href));
$('.msg_body').fadeOut(fast, function(){
next.fadeIn(fast);
})
});
by(e)
Stephan
[jQuery] Re: UI Dialog Position Based on Link Position
The position of the mouse is sent as parameter with the click event. see: http://docs.jquery.com/Tutorials:Mouse_Position If you want to position the dialog absolute to the link (and not the mouse pointer) you could use $(link).position to get the position of your link. see: http://docs.jquery.com/CSS/position http://docs.jquery.com/CSS by(e) Stephan 2009/1/27 Adam apcau...@gmail.com: I'd like to open a dialog when a link is clicked, and have the dialog open beside the link, similar to a tooltip. Are there any examples on how to calculate the position where the dialog should show up? What's the best way to position it so that it shows within the confines of the page (i.e. if the link is right- aligned, the dialog should popup to the left of the link, etc.).
[jQuery] Re: Name Panels instead of calling them by #number
What do you mean with panels?
I'm not sure if it is what you are searching for, but if you have:
div
a name=contact...
...
/div
you can use
$('a[name=contact]:parent')
to get your surrounding div.
However using an ID instead of the attribute search (name=...) will
be much faster.
by(e)
Stephan
2009/1/25 td t...@gmx.de:
Hi,
is there a possibility to really name the panels somehow?
I would like to have links like this:
a href=#contact class=cross-link title=contact
with the anchor inside the associated div.
to get the side easier to search for searchengines.
[jQuery] Re: Callback function not working
haven't tested it, bu I guess the this variable is the problem in
your callback
$(#date_+$(this).attr(id)).html(Done!);
try:
var el = $(this);
$.post(includes/updateleverans.php,{id:el.attr(id), date:date},
function (data) {
$(#date_+el.attr(id)).html(Done!);
});
by(e)
Stephan
2009/1/24 Althalos ca...@ekdahlproduction.com:
and also $(#date_+$(this).attr(id)).html(Updating..); works
fine!
On 24 Jan, 16:39, Althalos ca...@ekdahlproduction.com wrote:
Hello, I have a callback function belonging to a $.post that won't
work. Anyone know why? This is my function:
function(date) {
$(#date_+$(this).attr(id)).html(Updating..);
$.post(includes/updateleverans.php,{id:$(this).attr(id),
date:date},
function (data) {
$(#date_+$(this).attr(id)).html(Done!);
});
}
This is my php:
?php
include (db_connect.inc);
$date = str_replace(-, /, $_POST['date']);
$id = $_POST['id'];
mysql_query(UPDATE prot_orders SET due_date = '$date' WHERE id =
'$id');
echo ($date);
?
The MySQL query executes SUCCESFULLY and $date is set correctly..
please anyone?
[jQuery] Re: strip tag leaving its content
try: var wrap = $(#wrap); // your span or other wrapper element wrap.children().insertBefore(wrap); // insert children before wrapper element, insertAfter() inverses children order wrap.remove(); // remove wrapper element by(e) Stephan 2009/1/24 BrainBurner brainbur...@gmail.com: Hello, I'm writing an effect, which has to build a span around my element, but when my effect is finished I wanted to strip this span tag, in order to leave the situation as it was before.. How can I strip a tag?? Is there something like: $(this).parent().strip(); ??? Thanks!
[jQuery] Re: strip tag leaving its content
This solution is easier one if the parent element has only one element - the span, if the parent element hase more spans (or other elements) parent.html() would overwrite all elements and replace them with the content of the child. The performace might also be an issue, however I have no idea which one is faster: html() od insertBefore(). by(e) Stephan 2009/1/24 Mike Alsup mal...@gmail.com: I'm writing an effect, which has to build a span around my element, but when my effect is finished I wanted to strip this span tag, in order to leave the situation as it was before.. How can I strip a tag?? Is there something like: $(this).parent().strip(); ??? In your example is 'this' the span? If so, I'd try something like this: $(this).parent().html( $(this).html() );
[jQuery] Re: bind eventhandler after animation finished
First of all, slideUp(speed, callback) and slideDown(speed, callback)
have callback functions which are called once the animation is
finished. (see http://docs.jquery.com/Effects/slideDown#speedcallback
- examples)
But I'm not sure if this really solves your problem. If you bind the
mouseleave event in the callback you might never get this event when
the user moves the mouse out of your div before the animation has
finished.
So the main question is: what would you like to happen if the mouse is
moved out while the image is sliding in?
by(e)
Stephan
2009/1/24 maggus.st...@googlemail.com markus.st...@redaxo.de:
hi everyone,
what i want to accomplish in general:
i have a text field which has a filename as the value.
when hovering the field, a div should slide in from the bottom of the
field and show a preview of this image.
currently i'm using the following jquery-code:
function rexShowMediaPreview() {
var value;
if($(this).hasClass(rex-widget-media))
value = $(input[type=text], this).val();
else
value = $(select, this).val();
var div = $(.rex-media-preview, this);
var url = '../index.php?rex_resize=246a__'+ value;
if(value value.length != 0
(
value.substr(-3) == png ||
value.substr(-3) == gif ||
value.substr(-3) == bmp ||
value.substr(-3) == jpg ||
value.substr(-4) == jpeg)
)
{
div.html('img src='+ url +' /');
div.slideDown(slow);
}
else
{
div.slideUp(slow);
}
};
$(.rex-widget-media.rex-widget-preview, .rex-widget-medialist.rex-
widget-preview)
.bind(mouseenter, rexShowMediaPreview)
.bind(mouseleave, function() {
var div = $(.rex-media-preview, this);
div.slideUp(slow);
});
the markup looks like the following:
div class=rex-widget
div class=rex-widget-media rex-widget-preview
p class=rex-widget-field
input type=text size=30 name=MEDIA[2]
value=myimg.jpg id=REX_MEDIA_2 readonly=readonly /
/p
div class=rex-media-preview/div
/div
/div
this doesn't work well...
(when leaving the div while sliding in, the div immediatly slides
out...)
is someony able to give me a hint...? i suppose it would be much
better if the mouseleave eventhandler would be bound when the slide in
animation finished (while unbinding the mouseenter handler) and the
same while sliding out vice versa...
any ideas?
