[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 would help:
$foo = $(""+foo+"");
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+<"));
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 :
> 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
> wrote:
>>
>> Hi Josh,
>>
>> are your data ordered? (e.g. MAP_ID is the first , 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() +
>> '' +
>> '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; j> hash[$(names[j]).text()] = $(data[j]).text();
>> }
>> var parcelOutput = 'Parcel ID: ' +
>> hash['MAP_ID'] +
>> '' +
>> '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 :
>> > 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 s in s
>> > in
>> > a . Given this snippet, what would be the best (fastest) way to
>> > return
>> > the values of MAP_ID and SITE_ADDRESS
>> > foo = "GISDATA.ASSESSPARNC_POLY_PUBLIC
>> >
>> >
>> > M
[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 :
>
> 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: Exploding nested s....
You could try something similar to
$("#outerdiv").children().hide("explode");
by(e)
Stephan
2009/2/27 webspee...@gmail.com :
>
> Using the explode animation, where the div "explodes" into X pieces.
>
> On Feb 17, 8:30 pm, Ricardo Tomasi wrote:
>> What do you mean by "explode"? remove?
>>
>> On Feb 17, 4:50 pm, "webspee...@gmail.com"
>> wrote:
>>
>> > Hey all.
>>
>> > Exploding a simple is easy enough, but can you explode nested
>> > s? 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: 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 :
>
> Attempt to post again.
>
> Hi All,
>
> I have a JSON object (called 'dataloggers') that I am retrieving via
> $.getJSON, and then creating a 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 = "";
> tBodyRow += ''+dlname+'' ;
> $.each(arr.values, function(vKey,vVal){
> tBodyRow += ''+vKey+': '+vVal+'' ;
> });
> tBodyRow += "" ;
> $("table#dataloggers tbody").append(tBodyRow);
> });
> });
>
> This outputs a table:
>
>
>
>
>
>
> TA_124A
> one: wake
> two: up
> three: time
> four: to
> five: die
>
>
> TA_109C
> one: this
> two: is
> three: not
> four: a
> five: test
>
>
>
>
> 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 output now looks like
> this:
>
>
>
>
>
>
> TA_124A
> one: wake
> two: up
> three: time
> four: to
> five: die
> commtype: slink2orb
> provider: orb
>
>
> TA_109C
> one: this
> two: is
> three: not
> four: a
> five: test
> commtype: vsat
> provider: Verizon
>
>
>
>
> 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 reason (very likely my
> syntax) I cannot create my custom jQuery objec
[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 :
>
> 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: 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 :
>
> Hello again!
>
>
> GENERAL
>
> class="tooltip" href="#">App #1Info
> [SECRET FIELD FOR App #1]
> class="tooltip" href="#">App #2Info
> [SECRET FIELD FOR App #2]
> .
>
>
>
> 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 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 :
>>
>>
>>
>> > 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 wrote:
>> >> Hi Miguel,
>>
>> >> you can use the click trigger of the checkbox:
>>
>> >>
>> >> show secret:
>> >>
>> >> secret field:
>> >>
>> >>
>>
>> >> $("#div").hide();
>>
>> >> $("#checkbox").click(function(){
>> >> if ( this.checked ) {
>> >> $("#div").show();
>> >> } else {
>> >> $("#div").hide();
>> >> }
>>
>> >> })
>>
>> >> by(e)
>> >> Stephan
>>
>> >> 2009/2/18 shapper :
>>
>> >> > 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
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 :
>
> 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 wrote:
>> Hi Miguel,
>>
>> you can use the click trigger of the checkbox:
>>
>>
>> show secret:
>>
>> secret field:
>>
>>
>>
>> $("#div").hide();
>>
>> $("#checkbox").click(function(){
>> if ( this.checked ) {
>> $("#div").show();
>> } else {
>> $("#div").hide();
>> }
>>
>> })
>>
>> by(e)
>> Stephan
>>
>> 2009/2/18 shapper :
>>
>>
>>
>> > 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: 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 :
>
> 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: 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 :
>
> 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: $('#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 :
> 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 s in a "foo" and 900 s in a
> "bar" .
>
> 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 :
>
> 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 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 tags and from that list subselect those who
>
> belong to #foo. Suppose you have 1000 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 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 :
>
> 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
>> 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
>>>> 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 elements in the scope of the #foo
>>>>>> element.
>>>>>> In other words, it selects every element under #foo in the DOM
>>>>>> tree.
>>>>>>
>>>>>> by(e)
>>>>>> Stephan
>>>>>>
>>>>>> 2009/2/24 Liam Potter :
>>>>>>
>>>>>>
>>>>>>
>>>>>>>
>>>>>>> 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 s in a "foo" and 900 s in
>>>>>>>> a
>>>>>>>> "bar" .
>>>>>>>>
>>>>>>>> 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 :
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>>
>>>>>>>>> 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 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 tags and from that list subselect those who
>>>>>>>>>> belong to #foo. Suppose you have 1000 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 tags outside #foo.
>>>>>>>>>>
>>>>>>>>>> Or am I talking rubbish?
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>
[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 elements in the scope of the #foo element.
In other words, it selects every element under #foo in the DOM tree.
by(e)
Stephan
2009/2/24 Liam Potter :
>
> 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 s in a "foo" and 900 s in a
>> "bar" .
>>
>> 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 :
>>
>>>
>>> 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 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 tags and from that list subselect those who
>>>> belong to #foo. Suppose you have 1000 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 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 :
>
> 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,
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 s in a "foo" and 900 s in a
"bar" .
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 :
>
> 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 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 tags and from that list subselect those who
>> belong to #foo. Suppose you have 1000 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 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
yes
no
Value 1
Value 2
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 :
>
> 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
>
>
>
> yes
> no
>
> Value 1
> Value 2
>
>
>
>
>
> 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 :
>
> 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 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 :
>>
>>
>>
>> > 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: 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 :
>
> 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: Stop effect
Hi
$("#y").stop().stop().stop()
.show().css({opacity: 1.0});
by(e)
Stephan
2009/2/20 adexcube :
>
> 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: Selector Efficiency?
Hi Josh,
are your data ordered? (e.g. MAP_ID is the first , 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() +
'' +
'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; j' +
'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 :
> 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 s in s in
> a . Given this snippet, what would be the best (fastest) way to return
> the values of MAP_ID and SITE_ADDRESS
> foo = "GISDATA.ASSESSPARNC_POLY_PUBLIC
>
>
> MAP_ID: class="atr-value">16-27
> SITE_ADDRESS: class="atr-value">396 Main St
> SITE_OTHER_FIELD: class="atr-value">Grat Data
> USE_CODE: class="atr-value">101
> TOWN_ID: class="atr-value">116
> WARREN_GROUP_05_MAP_ID:
> M:0016 B: L:0027
> ACRES: class="atr-value">0.67102373655
>
> "
>
> The following works
> parcelOutput = 'Parcel ID: ' +
> jQuery(foo).find('li:contains("MAP_")').not('li:contains("WARREN_GROUP")').children('.atr-value').text()
> + '' + '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: Hide/Show when Check Box is selected
Hi Miguel,
you can use the click trigger of the checkbox:
show secret:
secret field:
$("#div").hide();
$("#checkbox").click(function(){
if ( this.checked ) {
$("#div").show();
} else {
$("#div").hide();
}
})
by(e)
Stephan
2009/2/18 shapper :
>
> 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: Exploding nested s....
Hi, how do you explode the outer div? Can you share your function with us? by(e) Stephan 2009/2/18 Ricardo Tomasi : > > What do you mean by "explode"? remove? > > On Feb 17, 4:50 pm, "webspee...@gmail.com" > wrote: >> Hey all. >> >> Exploding a simple is easy enough, but can you explode nested >> s? 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: 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 :
>
> 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 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/17roryreiff:
>>
>>
>>
>> > 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 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,roryreiff 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: 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 :
>
> 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 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,roryreiff 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: 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 :
>
> 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?
>
>
>
>
>
> http://www.sionvalais.com/v2/js/
> jq.js">
>
>
> $(document).ready(function(){
>
> $.getJSON("http://www.sionvalais.com/social/json.php";,
>function(data){
> $.each(data.items, function(i,item){
>$("![]()
").attr("src", item.cam).appendTo("#images");
>if ( i == 3 ) return false;
> });
>});
>
>});
>
>
> img{ height: 100px; float: left; }
> #images {
> width:500px;
> height:200px;
> }
>
>
>
>
>
[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
copy&paste 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 :
> 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
> 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 :
>> >
>> > 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: 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 :
>
> 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: 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 :
>
> for example, how to find biggest div height under box.
>
>
>.
>.
>.
>
[jQuery] Re: catch-all clicks
Hi,
$().click( function() {...});
should work
by(e)
Stephan
2009/2/11 BrainBurner :
>
> Hello,
> is there a way to catch-all click on the page?
>
> I tried $("html").click(fn), but it doesn't work..
[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 :
>
> 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 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 :
>>
>>
>>
>> > Can I use jQuery to work with elements in other frames?
>>
>> > For Example:
>>
>> >
>> >
>>
>> >
>> > $("#frame1 document")
>> > OR
>> > $(document, $("#frame1"))
>> >
[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(""+txt+"");
}
by(e)
Stephan
2009/2/11 mofle :
>
> 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 wrote:
>> Hi,
>>
>> ok, in this case it would be, IMHO, the easiest way to split the list
>> in two s and clue them together with CSS.
>>
>>
>> Item 1
>> Item 2
>> Item 3
>> Item 4
>> Item 5
>>
>>
>> Item 6
>> Item 7
>> Item 8
>> Item 9
>> Item 10
>>
>>
>> $(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 :
>>
>>
>>
>> > 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 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 :
>>
>> >> > Hi.
>>
>> >> > I have an unordered list like this one:
>>
>> >> >
>> >> > Item 1
>> >> > Item 2
>> >> > Item 3
>> >> > Item 4
>> >> > Item 5
>> >> > Item 6
>> >> > Item 7
>> >> > Item 8
>> >> > Item 9
>> >> > Item 10
>> >> >
>>
>> >> > 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:
>> >> > Show the rest
>>
>> >> > 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.
>> >> >
>> >> > $(document).ready(function() {
>> >> >$('#myList').hide();
>> >> >$('a#myList-toggle').click(function() {
>> >> > $('#myList').slideToggle(400);
>> >> > return false;
>> >> >});
>> >> > });
>> >> >
[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 s and clue them together with CSS.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
$(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 :
>
> 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 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 :
>>
>>
>>
>> > Hi.
>>
>> > I have an unordered list like this one:
>>
>> >
>> > Item 1
>> > Item 2
>> > Item 3
>> > Item 4
>> > Item 5
>> > Item 6
>> > Item 7
>> > Item 8
>> > Item 9
>> > Item 10
>> >
>>
>> > 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:
>> > Show the rest
>>
>> > 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.
>> >
>> > $(document).ready(function() {
>> >$('#myList').hide();
>> >$('a#myList-toggle').click(function() {
>> > $('#myList').slideToggle(400);
>> > return false;
>> >});
>> > });
>> >
[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 :
> 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: How to pass a date to DatePicker??
Hi André see: http://docs.jquery.com/UI/Datepicker -> setDate by(e) Stephan 2009/2/10 AndreMiranda : > > Hi everyone!! > > How can I pass a date to DatePicker and it shows this date selected, > highlighted etc? > > Thanks!! > > André
[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 :
>
> 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.
>
> ---
>
>
>Item
>
>
> href="test.htm">Item
>Item
>
>
>
> Item
>
> Item
>
>
>
>
>Item
>
>
>Item
>
>
>
> Item
>
> Item
>
>
>
>
>
> Item
>
> Item
>
> Item
>
> Item
>
> Item
>
>
>
>
>
>
> href="test.htm">Item
>
>
>
>
> http://ajax.googleapis.com/ajax/
> libs/jquery/1.3.1/jquery.min.js">
>
>
>
>
>
> $(document).ready(function() {
>$("#navigation>ul>li>a").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);
> });
>
> }
> });
> });
>
> --
>
[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:
"-"
by(e)
Stephan
2009/2/10 Po01 :
>
> 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> "+s);
>$(Ss).show();
> }
> else
> {
>$(S).empty().html("+ 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> "+s);
>$(S).empty().html("+ a> "+s);
>
[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 :
>
> 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: 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 :
>
> Hi.
>
> I have an unordered list like this one:
>
>
> Item 1
> Item 2
> Item 3
> Item 4
> Item 5
> Item 6
> Item 7
> Item 8
> Item 9
> Item 10
>
>
> 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:
> Show the rest
>
> 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.
>
> $(document).ready(function() {
>$('#myList').hide();
>$('a#myList-toggle').click(function() {
> $('#myList').slideToggle(400);
> return false;
>});
> });
>
>
[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 :
>
> You can just check the length of the child elements of ul#Themes:
>
> $('#AddTheme').bind('click', function(){
> // Other code
> var len = $('#Themes li').length;
> $theme = $('').appendTo
> ('#Themes');
> $theme.append(' value = "' + $subject.val() + '" />');
> $theme.append('');
> $theme.append('');
> });
>
>
> On Feb 8, 8:13 am, Stephan Veigl wrote:
>> Hi Miguel,
>>
>> you could use a global counter.
>> e.g.
>>
>> var themesCounter = 0;
>> $('#AddTheme').bind('click', function(){
>> ...
>> $theme.append('> name="Themes[themesCounter].Subject" value = "' + $subject.val() + '"
>> />');
>> ...
>> themesCounter++;
>> });
>>
>> by(e)
>> Stephan
>>
>> 2009/2/8 shapper :
>>
>>
>>
>> > Hi,
>>
>> > I am adding list items to a list as follows:
>>
>> > $('#AddTheme').bind('click', function(){
>>
>> > // Other code
>>
>> > $theme = $('').appendTo
>> > ('#Themes');
>>
>> > $theme.append('> > value = "' + $subject.val() + '" />');
>> > $theme.append('');
>> > $theme.append('');
>>
>> > });
>>
>> > 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 = $('').appendTo
>> > ('#Themes');
>>
>> > // Add fields
>> > $theme.append($subject.text()).append('');
>> > $theme.append( Levels(levels) + '' );
>> > if ($description.val()) { $theme.append($description.val
>> > ()).append(''); }
>>
>> > // Add button
>> > $theme.append('Remover> > a>');
>>
>> > // Add inputs
>> > $theme.append('> > value = "' + $subject.val() + '" />');
>> > $theme.append('');
>> > $theme.append('');
>>
>> > // Add input
>> > //$theme.append(' > > "' + 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: 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 :
>
> 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: 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 :
>
> 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: 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 , but that may be not suitable for your application. by(e) Stephan 2009/2/8 David .Wu : > > 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 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 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: 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 : > > 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 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 : >> >> > 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_up&id=11), I'm >> > not sure if this is how it should look like. >> >> > by(e) >> > Stephan >> >> > 2009/2/6 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 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 : >> >> >>> > 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: 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; i:
>
> $("p") is an array, so you could just use the index:
>
> var ps = $("p"); //cache
> ps.each(function(i,d) {
>var prevP = i>0?$(ps[i-1]):false; /* however you want to deal with
> there not being a prev */
>var nextP = i 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(i>0 && iconsole.log( $(ps[i-1]).html() + ', ' + $(ps[i+1]).html() );
>}
> });
>
>
> On Feb 9, 8:55 am, Adrian Lynch 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());
>>
>> });
>>
>>
>> 1
>>
>> This is next
>>
>>
>>
>>
>> This is previous
>>
>> 2
>>
>>
>> 3
>>
>>
>> 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 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());
>>
>> > });
>>
>> >
>> >
>> > 1
>> >
>> > This is next
>> >
>> >
>> >
>> >
>> > This is previous
>> >
>> > 2
>> >
>> >
>> > 3
>> >
>> >
>>
>> > 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 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/4AdrianLynch:
>>
>> > > > Hey all, I'm loop over some nodes witheach() and I need to look at
>> > > > the next and previous elements for the current iteration.
>>
>> > > >
>> > > >$(function() {
>> > > >$("div").each(function(i) {
>> > > >var prev = [SELECTOR FOR PREVIOUS DIV].text();
>> > > >var next = [SELECTOR FOR NEXT DIV].text();
>> > > >alert(prev + " : " + next);
>> > > >});
>> > > >});
>> > > >
>>
>> > > > 1
>> > > > 2
>> > > > 3
>>
>> > > > Will I have to store a reference to the divs and access it with i in
>> > > > the loop like this:
>>
>> > > >
>> > > >$(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);
>>
>> > > >});
>> > > >});
>> > > >
>>
>> > > > 1
>> > > > Spanner in the works
>> > > > 2
>> > > > Don't select me!
>> > > > 3
>>
>> > > > Is next() the answer maybe?
[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 :
> 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
> wrote:
>>
>> Hi,
>>
>> I got an error in line 267 because of the "e;s in the javascript
>> function. Try to replace it with single quotes.
>>
>> > 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 :
>> > 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 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 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: what could be causing this isnull error ( realy weird )
Hi,
I got an error in line 267 because of the "e;s in the javascript
function. Try to replace it with single quotes.
by(e)
Stephan
2009/2/9 Armand Datema :
> 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 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 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: 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('');
...
themesCounter++;
});
by(e)
Stephan
2009/2/8 shapper :
>
> Hi,
>
> I am adding list items to a list as follows:
>
> $('#AddTheme').bind('click', function(){
>
> // Other code
>
> $theme = $('').appendTo
> ('#Themes');
>
> $theme.append(' value = "' + $subject.val() + '" />');
> $theme.append('');
> $theme.append('');
>
> });
>
> 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 = $('').appendTo
> ('#Themes');
>
> // Add fields
> $theme.append($subject.text()).append('');
> $theme.append( Levels(levels) + '' );
> if ($description.val()) { $theme.append($description.val
> ()).append(''); }
>
> // Add button
> $theme.append('Remover a>');
>
> // Add inputs
> $theme.append(' value = "' + $subject.val() + '" />');
> $theme.append('');
> $theme.append('');
>
> // Add input
> //$theme.append(' "' + 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: $(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 :
>
> Can I use jQuery to work with elements in other frames?
>
> For Example:
>
>
>
>
>
> $("#frame1 document")
> OR
> $(document, $("#frame1"))
>
[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:
myInitFxn = [ManageCategoriesClick, HideByDefault,
PrepareSplitForm,...];
ready.js:
$().ready(function(){
for(var i in myInitFxn) {
myInitFxn[i](); // call init function
}
});
by(e)
Stephan
2009/2/8 brian :
>
> On Sat, Feb 7, 2009 at 11:21 PM, Ricardo Tomasi 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: 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 :
>
> 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 (,
> , etc.) stripped out for some reason.
>
>
> On Feb 6, 11:48 am, Ricardo Tomasi 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 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" 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 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 += 'data from json';});
>>
>> > > > > $("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: 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 :
>
> 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 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 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 wrote:
>>
>> > > Could I get some help on this please?
>>
>> > > Thank you,
>> > > Precar.
>>
>> > > On Jan 30, 8:52 am, precar wrote:
>>
>> > > > Hi,
>>
>> > > > Yes, I'm using the bind() method with 'click'. Is that the correct
>> > > > approach?
>>
>> > > > Precar.
>>
>> > > > On Jan 28, 9:47 am, amuhlou 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 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: 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 : > 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_up&id=11), I'm > not sure if this is how it should look like. > > by(e) > Stephan > > > 2009/2/6 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 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 : >>> >>> >>> >>> > 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..
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_up&id=11), I'm not sure if this is how it should look like. by(e) Stephan 2009/2/6 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 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 : >> >> >> >> > 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: 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 :
>
> Hello
>
> What about this?
>
>
> about.php Get me out of here !
>
>
> // ..
> //your code...
> // ..
>
> $(document).ready(function(){
>$('#skip').find('span').hide().end().show('slow').end().find
> ('span').show('slow');
> });
>
>
[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 : > > 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: 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; i:
>
> 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 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 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 += 'data from json';});
>>> >
>>> > $("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: 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 :
>
> 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 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 :
>>>
>>> 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 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 :
>>>>
>>>>
>>>>
>>>> > $('div:has(input[value=2])')
>>>>
>>>> > Maurício
>>>>
>>>> > -Mensagem Original- De: "Adrian Lynch"
>>>> > Para: "jQuery (English)"
>>>> > 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...
>>>>
>>>> >>
>>>> >>
>>>> >>
>>>> >>
>>>> >>
>>>> >>
>>>> >>
>>>> >>
>>>> >>
>>>>
>>>> >> ... 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: $('#xxx').html() changing xhtml to html
Hi, you could use RegExp to replace with and with , 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 : > > 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 instead of and > instead of > > Is there a workaround to get the xhtml? >
[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 :
>
> 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: 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 :
>
> I remember i can use the statement "jQuery('.button:eq(1):lt(3)');" in
> jQuery 1.2.6.
> example:
>
>
> button1
> button2
> button3
> button4
> button5
>
>
> 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: 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 : > > 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: 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 : > > > Hi, > > I think i might be overlooking the obvious but I've got a string from my > sortable list, something like : > item[]=3&item[]=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: 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 :
>
> 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 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 :
>>
>>
>>
>> > $('div:has(input[value=2])')
>>
>> > Maurício
>>
>> > -Mensagem Original- De: "Adrian Lynch"
>> > Para: "jQuery (English)"
>> > 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...
>>
>> >>
>> >>
>> >>
>> >>
>> >>
>> >>
>> >>
>> >>
>> >>
>>
>> >> ... 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: 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 :
>
> 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.
>
>
>$(function() {
>$("div").each(function(i) {
>var prev = [SELECTOR FOR PREVIOUS DIV].text();
>var next = [SELECTOR FOR NEXT DIV].text();
>alert(prev + " : " + next);
>});
>});
>
>
> 1
> 2
> 3
>
> Will I have to store a reference to the divs and access it with i in
> the loop like this:
>
>
>$(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);
>
>});
>});
>
>
> 1
> Spanner in the works
> 2
> Don't select me!
> 3
>
> Is next() the answer maybe?
>
>
[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 :
>
> $('div:has(input[value=2])')
>
> Maurício
>
> -Mensagem Original- De: "Adrian Lynch"
> Para: "jQuery (English)"
> 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...
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>> ... 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(" ");
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 :
>
> btw, I fixed the "Could not get the display property. Invalid
> argument" error.
>
> but that didn't help either...
[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 :
>
> 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. 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: 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 : > > 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: Problem with Chrome firing events correctly
$('#editform').before(' id="notice">There is an autosave
> of this page that is more recent than the version below. id="LiveSaver_Restore">Restore old version.');
>
>// Wait for user to decide to move to
> new version.
>
> $('#LiveSaver_Restore').click(function(e) {
>// Prevent link from being
> followed
>e.preventDefault();
>
>// Replace text
>$('#' +
> element).val(LiveSaver.get(element));
>
>// Remove 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 LiveSave
[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 :
>
> 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: 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 : > > 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: 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 :
> 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: 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 :
>
> 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: 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 :
>
> 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
>
>
> $(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'
> });
> });
>
>
> unorderlist
>
>
> heading
>
> http://www.hyperlink";>text
> http://www.hyperlink";>text
> http://www.hyperlink";>text
>
>
> heading
>
> http://www.hyperlink";>text
> http://www.hyperlink";>text
> http://www.hyperlink";>text
>
>
>
>
[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 :
>
> 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:
> ---
>
>
>
>
> $(document).ready(function() {
> $("#calculateweight").click(function() {
>var weightarray = $("input[name*='weight']").val();
> });
> });
>
>
>
>
>
>
>
>
> Calculate Weight
>
>
>
> ---
> 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: 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 :
>
> 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: 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 quick&dirty 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 :
>
> @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 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:
>>
>>
>> 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
>> });
>> });
>>
>>
>> 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 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...
>>
>> >
>>
>> > 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()
>> > {
>> > jQ
[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 :
> 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 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
>> 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 :
>>> > 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: 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 : > > 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
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 :
> 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: 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 : > > ok thanks, and is there any way to use the load event to an image > included with append?
[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 : > > 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: appendingTo a just created element
Hi Nicky,
where do the variables elm, and serial come from?
Your posted code snipped looks ok, and it's working fine if you
populate the elm and serial with meaningful values. (see example:
http://jsbin.com/oxehe/edit)
I guess there is a problem with elm. Are you sure it holds exactly 1
DOM element?
Is serial a unique ID?
by(e)
Stephan
2009/1/31 Nicky :
>
> Ah, very sorry about that mistype, but that is in fact what I am doing
> (just replaced my code wrong when I changed what I have to 'someID')
>
> Here's what I have, exactly:
>
>$('')
>.attr('id', 'ntww-'+serial)
>.insertBefore(elm);
>$('')
>.appendTo('#ntww-'+serial);
>
> Sorry about that and thanks for the reply!
>
> -Nicky
>
> On Jan 31, 9:28 am, Stephan Veigl wrote:
>> 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 :
>>
>>
>>
>> > Hi All,
>>
>> > I'm fairly new to jQuery so I apologize if I'm missing something
>> > straightforward but doing this:
>>
>> > $('')
>> >.attr('id', 'someID')
>> >.insertBefore(elm);
>> > $('')
>> >.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 :
>
> 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(' 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('body,
> html{margin: 0 0 0 0; padding: 0 0 0 0;} src="'+pfad+'">');
> Grossansicht.focus();
>
> });
>
> Thanks alot in advance!
>
[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 :
>
> Hi All,
>
> I'm fairly new to jQuery so I apologize if I'm missing something
> straightforward but doing this:
>
> $('')
>.attr('id', 'someID')
>.insertBefore(elm);
> $('')
>.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: 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 :
>
> ok thats right but $.ajax() also do that so my problem is how safe it
> is to pass through JSON and the append it to the DOM
> and it will be executed
>
> On 29 Jan., 15:13, jQuery Lover 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 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 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 :
>>
>> >> > 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: 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 : > > 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: Inside page jumps,
to automatically jump to an anchor use the location hash:
window.location.hash="there";
by(e)
Stephan
2009/1/29 pejot :
>
> Hi,
>
> I have quite complex page with internal link inside.
> < a href="#there" id="jump"> Jump and 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: 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 - to every ".myPanel" div.
1-
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 :
> 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
> wrote:
>>
>> I'm not sure if I realy understand what you want to do, but it could
>> look something like
>>
>> HTML:
>>
>>+
>>1
>>2
>>3
>>4
>>5
>>
>>
>> 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 :
>> >
>> > 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: .val is not a function
And that's right, ".val" is NO function, the function is ".val()". by(e) Stephan 2009/1/29 trancehead : > > All the core functions for JQuery seem to have stopped working. > > Jquery is the first script include so it appears before the other > functions. > >
[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 :
>
> 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
>
> Sicherer Arbeitsplatz
> />
> />
> />
>
>
> Chance, Arbeitsplatz zu finden
> />
> />
> />
>
> .many TRs after
>
> ...should become
>
> Sicherer Arbeitsplatz
>
>
>
>
>
> Chance, Arbeitsplatz zu finden
>
>
>
>
[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 :
>
> 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:
>
>
>
>Tab one
>Tab two
>Tab three
>
>
> ...
>
>
>
> Can you tell me how to do it?
> Sorry for my bad English.
> A greeting.
[jQuery] Re: if condition within a loop
First of all, you have a typo in your css for #portMain (line 5), the
color value should have exactly 6 (or 3) hexadecimal digits
1. (line 35)
you are using a jQuery each() function so the this object is the
selected object and not the this object you expected it to be
2. (line 39):
if($('#portMain>div')[i] != $(this)) tests if a DOM Element is equal
to a jQuery object, which will never be true (or false in your case)
3. (line 41):
$('#portMain>div')[i] is not a jQuery Object but a DOM Element, so you
have to make it a jQuery Object again, before you can apply
removeClass()
--> $($('#portMain>div')[i]).removeClass().addClass('portDiv');
4. for simplicity and performance issues I would suggest that you
store your currently "on" element somewhere (either as global variable
or with data()) and handle only the new and old "on" elements, instead
of traversing through all divs on every click.
$('#portMain>div').click(function(){
var prev = $('#portMain').data("prev");
if (prev)
prev.removeClass().addClass('portDiv');
$(this).removeClass().addClass('portDiv2');
$('#portMain').data("prev", $(this));
})
by(e)
Stephan
2009/1/28 pho99 :
>
> Hello.
>
> I am just starting to learn JQuery. I want to click on a div to set an
> "on" class. When I click on another div, I want the first div to
> release the "on" class and restore to default class. I also have a
> hover effect that apply to divs that are not shown as "on."
>
> I am trying to set an "If" condition within the "eachfunction" loop.
> I've tried the "not" method, but I am not referring to the right
> object. Can someone take a look?
>
> Here is my code:
>
>
>
>test
>
>#portMain{background-color:#99000}
>.portDiv{border:solid 2px #44; font:normal 22px
> verdana;padding:
> 4px}
>.portDivOver{border:solid 2px #CCC000; font:normal 22px
> verdana;padding:4px}
>.portDiv2{border:solid 2px #FF; font:normal 22px
> verdana;padding:
> 4px}
>
>http://ajax.googleapis.com/ajax/
> libs/jquery/1.3.1/jquery.min.js">
>
>
>$(function() {
>$.portBox = {
>box : $('#portMain div'),
>len : $('#portMain div').size()
>};
>
>$('#portMain').find('div').each(function(i) {
>$(this).addClass('portDiv');
>})
>
> //**SETCLASS**//
>
>
>$('#portMain>div').click(function(){
>
>
> $(this).removeClass().addClass('portDiv2');
>
> $('#portMain').find('div').each(function(i) {
>
>
>
>if($('#portMain>div')[i] != $(this)){
>
>
> $('#portMain>div')[i].removeClass().addClass('portDiv');
>
>}
> // $('#portMain>div')[i].not($(this)).removeClass().addClass
> ('portDiv');
>
>})
>})
>
> //**ENDCLICK**//
>
> $('#portMain div').mouseover(function() {
>
> $(this).not('.portDiv2').removeClass().addClass('portDivOver');
>})
>$('#portMain div').mouseout(function() {
>
> $(this).not('.portDiv2').removeClass().addClass('portDiv');
>})
>
>
>
>});
> //**ENDFUNCT**//
>
>
>
>
>
>port0
>port1
>port2
>port3
>port4
>port5
>
>http://www.yahoo.com";>clickme
>
>
>
[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 :
>
>
> 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.
>
>
>
>
>
>
>
> 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: 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:
+
1
2
3
4
5
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 :
>
> 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: 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 :
>
> 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: 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 : > > 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:
...
...
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 :
>
> Hi,
> is there a possibility to really name the panels somehow?
> I would like to have links like this:
>
> 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 :
>
> and also $("#date_"+$(this).attr("id")).html("Updating.."); works
> fine!
>
> On 24 Jan, 16:39, Althalos 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:
>> > 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: Weird Hiding Issue
suppose you have a jQuery element called: div
div.children(":not(:first)").hide();
will hide every immediate child of the div, except the first one
by(e)
Stephan
2009/1/24 david.vansc...@gmail.com :
>
> Yeah, I figured it was probably something along those lines. So what
> would be the best way to hide all but the first element of a DIV?
>
>
> David
>
> On Jan 23, 11:12 pm, Karl Swedberg wrote:
>> Hi David,
>>
>> I suspect the unordered lists aren't being hidden because the browser
>> will not recognize that they are within the paragraph.
>>
>> Paragraphs are not allowed to have any block-level elements inside of
>> them:
>>
>> > The P element represents a paragraph. It cannot contain block-level
>> > elements (including P itself).
>>
>> http://www.w3.org/TR/html40/struct/text.html#h-9.3.1
>>
>> When you have an invalid DOM structure, script goofiness happens.
>>
>> --Karl
>>
>>
>> Karl Swedbergwww.englishrules.comwww.learningjquery.com
>>
>> On Jan 23, 2009, at 3:46 PM, david.vansc...@gmail.com wrote:
>>
>>
>>
>> > The answer to this is probably really simple, but I'm just not finding
>> > it.
>>
>> > I'm working on a newsletter and they want the first paragraph of each
>> > article shown, then a More link at the end. Got that working fine. I
>> > even have it working so that it automatically hides all but the first
>> > paragraph tag. Perfect. However, I have a few unordered lists inside
>> > paragraph tags and the unordered lists aren't hidden when the page
>> > loads, even if they're inside the paragraph tags. How would I get
>> > those elements to be hidden when the paragraph tag is hidden? Thanks!
