Having problems scrolling to 'Y' position

m2244 · 02-20-2013, 06:34 PM

I have not been having luck with jQuery lately.

All I am trying to do is find a specific span tag (which i did) and then find its position in the parent div and scroll to that point.

The alerts below simply return '0'.

Code:

var elemnt = $('#glossaryContent').find('span:contains(' + evt + ')');
alert(elemnt.text());
var location = elemnt.offset().top;
alert(location);
var term = $('#glossaryContent').find('span:contains(' + evt + ')').scrollTop();
alert(term);

hdewantara · 02-21-2013, 09:15 AM

I didn't know there was a CSS pseudo class :contains, and as I search the w3c reference this has already been deprecated.

Nevertheless jQuery implements it and so perhaps your line should be something like below, or the reverse (flip the double-quotes with the singles):

Code:

.find('span:contains("' + evt + '")')

m2244 · 02-21-2013, 01:42 PM

Quote:

Originally Posted by hdewantara

I didn't know there was a CSS pseudo class :contains, and as I search the w3c reference this has already been deprecated.

Nevertheless jQuery implements it and so perhaps your line should be something like below, or the reverse (flip the double-quotes with the singles):

Code:

.find('span:contains("' + evt + '")')

Still not working. Returns zero no matter which term I chose.

hdewantara · 02-21-2013, 05:04 PM

Is it possible the span just doesn't contain the exact 'evt' term? Maybe some letters are in uppercase. Could you paste a bit of the HTML structure here?

m2244 · 02-21-2013, 05:30 PM

Quote:

Originally Posted by hdewantara

Is it possible the span just doesn't contain the exact 'evt' term? Maybe some letters are in uppercase. Could you paste a bit of the HTML structure here?

The user clicks on the link below and, in this case, 'GSU' is passed to the javascript. So I believe all is well with that part but here is the html:

Code:

<a class="glossaryLink" href="#" onmouseover="onRollOverPULink(event, 'GSU');"onmouseout="onRollOutPULink(event);" onclick="showHideGlossary('GSU')">GSU</a>

And here is the JS that populates the glossary div:

Code:

$("#glossaryContent").append("<span class='glossAcro'>" + $(this).attr('term') + "</span>" + "<span class='glossDef'>" + $(this).attr('def') + "</span>"); // output from XML

And here is part of the XML file which is the source for the glossary:

Code:

<item term="GIG" def="Global Information Grid" />

<item term="GSU" def="Geographically Seperated Unit" />

By the way, thanks for the help.