Man I am tired of this crap not working? Just freaking scroll!!!

[m2244]

So, I am simply trying to get a div to scroll to a term. When a user clicks a term I have code below that finds the term in the div. This much works, I can find the span with the correct term in it. But I cannot seem to get it to scroll to that point.

Now I am wondering if the problem is the fact that I populated the div dynamically. Would this cause a problem? All of the alerts for offset return 0.

Here is how I populated the div from an XML file:

		var curLetter = "@";
		$(glossaryXML).find('item').each(function()
		{
			var first = ($(this).attr('term').charAt(0).toUpperCase());
			while ( first > curLetter )
			{
				// bump the curLetter by one (NOTE: "@" + 1 ==>> "A")
				curLetter = String.fromCharCode(curLetter.charCodeAt(0) + 1);

				if ( curLetter > "Z" ) break; // don't go past last letter (shouldn't happen)

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

And this is how I am trying to make ti scroll to the correct term (as you can see, I have tried a bunch of things):

var thisObj = $('#glossaryContent').find('span:contains("' + evt + '")');
		alert(thisObj.parent().is('span'));
		
		var container = $('#glossaryContent');
		var scrollTo = $(thisObj);
		
		container.scrollTop(
			scrollTo.offset().top - container.offset().top + container.scrollTop()
		);
		
		/*$('#glossaryContent').animate({
			scrollTop: $(thisObj).offset().top
		}, 2000);*/
		
		//var location = elemnt.offset().top;
		//alert(location);
		var term = $('#glossaryContent').find(thisObj).offset().top;
		alert(term);

And here is the html, 'glossaryContent' is the div in question:

<div id="glossaryContainer" style="left:140px;top:155px;display:none;">
		<div id="glossaryTop">
		<span class="glossaryTitle">Glossary</span><span class="glossary_searchTitle">Search:<input type="text" id="glossary_search" style="margin-left:10px;"></input></span>
		</div>
			<div onselectstart="return false;" id="glossary_index">
				<!--<a href="#">A</a>-->
			</div>
		<div id="glossaryBar" onmousedown="dragStart(event, 'glossaryContainer')"><img class='glossary_four_arrow' src="course_assets/four_arrow.png"></img></div>
		<div id="glossaryContent"></div>
		<div id="glossaryClose"><a href="javascript:showHideGlossary();"><img src="course_assets/x_out.png" width="18" height="18" border="0" /></a></div>
	</div>

Man, I am losing my mind with this stuff.

[m2244]

It seems that scrollto and a few other things are not supported in v1.8 due to Webkit functionality. Not sure if I am going to revert to 1.7 or try something else.

[xelawho]

you could try plain ol' javascript

generally speaking what I have found in scrolling from one element to another using their offsets is that you have to scroll back to the top of the container first so that you then scroll the correct amount

I guess in jQuery that would translate to something like this:

$("#scrolling_div").scrollTop(0);
$("#scrolling_div").scrollTop($("#target_div").offset().top);