Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post

    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.

  • #2
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post
    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.

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    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:

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •