CodingForums.com - Man I am tired of this crap not working? Just freaking scroll!!!

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:

Code:

                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):

Code:

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:

Code:

<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.