jQuery Forum

I am just wondering if there's a quick way to select a node based on the value of its contents. For instance, if the node looks like this - "<foo>bar</foo>" - is there a quick way to select the node "foo", and therefore sibling nodes, using the text "bar".

 

I know I can do this:

 

xmlFile.find('foo')each(function(){

      if($(this).text() == "bar){

            //do something

            }

      });

 

No problem, but I wonder if there is a better way? I'm think particularly about the performance of the script if it has fo loop through thousands of nodes to find a specific one. I don't know if that matters, but it's worth putting out there if I can the script faster.

 

(Just so you know, all of these nodes have unique values so there's no chance I will end up with duplicates).

I'm sure this is quite a common problem, but I just cannot seem to get my head around it. When my script loads, a bunch of new page content is appended all over the page, with a series of menus and images popping up all over the page. So far so good.

 

The menu items are presented, and using ".live()" I can perform another series of tasks which essentially reloads or rearranges the page contents. At the moment a new image table pops up as expected, but the way it appears is sort abrupt and jarring... so I thought it would be nicer to have it fade in instead.

 

My problem is this: ".live()" works really well when for doing things with the dynamic element which is clicked (or whatever), but I cannot get it to effect another dynamic element elsewhere on the page. For example, this works as expected:

 

newDiv.live('click', function(){

      $(this).fadeTo(100, 0);

      });

 

But this does not:

 

newDiv.live('click', function(){

      anotherNewDiv.fadeTo(100, 0);

      });

 

If I replace "anotherNewDiv" with something that was present on page load, it all seems to works okay. So all I can guess is that the new content is not finding or binding to other new content. Since the script I'm working with starts off with only two empty divs to play with, this seems like an important nut to crack early on.

 

Thanks in advance.

I have been playing around with an application which reads from an xml document and dynamically creates an image gallery. (I have done it this way so that a non-programmer can easily edit the file to change the gallery contents).

 

My initial ajax process does successfully access the xml file (which properly vaildates) and on success follows through with the appropriate functions. At this point, however, the scripts are getting pretty long, so I decided it would be better and more organized to make one ajax request and store the xml for use globally in all the subsequent functions, etc.

 

My problem is that in trying to store the xml into a variable, it always comes up as 'undefined' when I use 'responseXML', but if I use 'responseText' and alert or append the contents it all seems to be there. 

 

Here is my code:

 

var a = $.ajax({
      type: 'GET',

      cache: false,
      url: 'my_file.xml',
      dataType: 'xml',
      async: false,

      success: function(xml){
            return $(xml);

      }

}).responseXML;

 

And if I do something like this:

 

a.find('somthing').each(function(){

      var b = $(this).attr('name');

      alert(b);

      });

 

I get an error and the var 'a' appears to be undefined.

 

While I have used $.ajax quite a lot in my scripts, I haven't frequently dealt w/ xml results and have never tried storing the results in this manner. Any advice would be much appreciated.

 

Thanks.

this is sort of css question except for the fact that this quirk only seems to apply to my jquery animation sequence (please... don't anyone jump up from your eggnog or whatever b/c i've already solved this, i'm just curious).

 

so i've got this test page where an animation sequence runs on load. all cool. i animate a bunch of css attributes to make a web page that sort of morphs like a film intro to ulitimately present the final page. but of course some people, for some reason, think that javascript is bad... so i want to have the page load normally (or perhaps not go through all the show on a repeat visit) for those with javascript disabled.

 

so my question is this: at the start of my animation sequence, the text zooms in from a huge text size and letter-spacing to a normal size. on the page load the script sets all the css attributes to include massive negative margins on both the left and right (to make the text zoom in from the center) as well as big em and spacing values. then the values animate() to change size, etc. the problem is that when i input, let's say "-50000px for the margins", it doesn't work correctly, but using "-2000%" everything is fine (i know these values are abnormal, but i makes sense when you see it). i'm not really sure why ths is, but i would like to know to avoid any confusion or upset in the future.

 

you can see it here: http://www.jamesmehaffey.com/animationtest01.php

 

thanks in advance.

 

oh yeah, in the source the css/jquery var is "logo-display"/"logoArea".

I am new to jQuery, and to a lesser extent javascript in general, so recently started a page to learn and play around with writing my own functions. Basically, I'm just learning about something new or coming up with a problem, and then I monkey with the code until it works properly.

 

So I have this "toggle" function that I recently came up with were a user selects from a list of items, which in turn changes the class of the selection - and "resets" the class of the unselected items in the background. When another items is clicked, then, anything with the new "clicked" class is restored to "unclicked". And this works pretty well. So what I wanted to do next is allow users to input their own data and add this to the list using "ammend()", and these new items are subject to the same rules as the original list information.

 

My problem is that adding the ammended items, or rather getting the new items participated in the "toggle" function correctly, is throwing back some unintened quirks. I have approached the problem a few different ways, but it all seems to come back to how I'm selected the objects for performing the functions. Here is an abbreviated example of the list:

 

<div class="list">

      <a class="unclicked">item 1</a>

      <a class="unclicked">item 2</a>

      <a class="unclicked">item 3</a>

</div>

 

Simple enough, and of course new info is ammened to the div. The two approaches I have taken are to 1) select the links and perform the operation and 2) select the div container and perform the operations on the children objects. The problem with the first approach is that new items added by users are not included in the operations - the items are added to the list, but nothing happens when clicked. And the problem with the second approach is that while it works at the moment, I cannot get the class or id of the children objects when clicked and so cannot perform new operations, such as determining if the item has the updated "clicked" class and doing something new, as the click action, for example, addresses all of the children rather than the specific child object.

 

Rather than trying to paste in a bunch of code, I will direct you to the page itself so you can see what's happening: http://www.jamesmehaffey.com/jqtest.php

 

In the version that is currently up, you will notice that you can click on the city names to change the classes, an you can add new cities to the list which will play nicely with the original list. However, once an city has been selected it should be disabled, that is to say the image on the right should no longer hide or unhide, and because I cannot ascertain it's current class I cannot tell the bouncer to keep it out.

i have a site where users can paste in code from other sources, youtube or google maps, for example, and it seems that some sources obscure cluetip boxes that happen to pass over them. i am aware of the problem where cluetip hides behind embedded objects, etc and i have taken steps to correct most of these problems, but i cannot seem to figure how to prevent this with google earth maps embedded in the code. the only thing that seems to stand out is that these are iframes, and i'm just not to familiar with them to figure out how to force them into the background. that being said, it is worth nothing that it is only the "earth" option that obscures the cluetip box, while "map", "sat" and "ter" work fine - so i'm stumped.

 

and help or suggestions would be greatly appreciated.