JQuery Mobile 1.2.1 - how to link to section inside a collapsible with .animate and scrollTop

I'm a non-programmer (i.e., designer) using JQuery Mobile 1.2.1 (I know this is old, in the process of updating). When a visitor arrives at a particular static page via an outside link that includes a #hash at the end of the URL (i.e., "my-site.com/mypage.html#target", #target being a section inside a collapsible), I need a collapsible on that page to expand, then I need the page to scroll smoothly to the target of the hash.

At the moment, this is a very specific use case, where I know the exact section and the target I want to scroll to, but it would be nice if this code could be reusable for any external link coming to a page where I would like to scroll to any target that's inside any collapsible. At this point, I'd settle for anything that works, as this is a somewhat urgent request.

I'm able to accomplish this sort of thing when just navigating to targets within a page via click, but when arriving from outside the page/site via a hash link URL, the results are very random and somewhat unpredictable. The collapsible opens, and then either the page scrolls to the target then immediately resets to view to the top of the page, or the scroll lands off target by varying margins. Kinda maddening.

This is where I've arrived most recently before throwing up my hands and running here.

$(window).bind("load", function() {
    	var hashName = window.location.hash;
//because I know the specific hash, I put it in an if statement to keep it from possibly interfering with other hash-based stuff
	if (hashName === "#refund-int"){

//because I know the target is here, I just throw a click on the collapsible I want
                $('.pages').find('h3#purchasefarevalue').click();
//then scroll to the hash
		$(function(){     
		     $('body,html').animate({
	             scrollTop: $(hashName).offset().top
		  });
		});
	}
});

Open in new window


I've tried countless permutations all with similar results; Either the open/scroll combo happens and then the page resets, or it happens and is off by a mile. I got nothing left. Hoping someone can point me in the right direction. Hopefully my explanation is clear enough to at least get us started. I'm not sure about sharing actual URLs here, although I know that would be the most expedient way of solving things.

Thanks in advance.
Matt KWeb DesignerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971MultitechnicianCommented:
I believe yoru issue in mainly using the click and animate

$(window).bind("load", function() {
    	var hashName = window.location.hash;
	if (hashName === "#refund-int"){
                // $('.pages').find('h3#purchasefarevalue').click(); // use  directly the styling/css instead using the click method you don't really have hand on it, something like :
		$("pucharsesectionvalue").css({width:120, height:100}).addClass("someclass1 someclass2").removeClass("someclass1 someclass2");
		$('body,html').animate({ scrollTop: $(hashName).offset().top });
	}
});

Open in new window

Matt KWeb DesignerAuthor Commented:
Good thinking, leakim971! Very helpful. So I was able to get the collapsible to open with a hash link, but now scrollTop shoots right past the target – apparently to the bottom of the page...? – in everything but Safari. For some reason scrollTop has been acting very squirrelly in this application. Seems like it was missing the target before by what appeared to be several hundred px, but I don't know why, since I'm simply scrolling to a div ID. Any ideas?
leakim971MultitechnicianCommented:
do it scroll fine if you scroll after a delay (5s is too much, just for testing)
$(window).bind("load", function() {
    	var hashName = window.location.hash;
	if (hashName === "#refund-int"){
                // $('.pages').find('h3#purchasefarevalue').click(); // use  directly the styling/css instead using the click method you don't really have hand on it, something like :
		$("pucharsesectionvalue").css({width:120, height:100}).addClass("someclass1 someclass2").removeClass("someclass1 someclass2");
setTimeOut(function() {
		$('body,html').animate({ scrollTop: $(hashName).offset().top });
}, 5000); // let's ait 5s just for testing purpose
	}
});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
OWASP: Forgery and Phishing

Learn the techniques to avoid forgery and phishing attacks and the types of attacks an application or network may face.

Matt KWeb DesignerAuthor Commented:
Still seems to be doing the exact same thing... I'm not even seeing the delay, strangely.  Just jumps straight to the wrong spot (a couple hundred px past the target, it looks like). Code looks like this:

	$(window).bind("load", function() {
    	var hashName = window.location.hash;
	if (hashName === "#refund-int"){
		$(".cr-farevalue").removeClass("ui-collapsible-collapsed");
		$("div.cr-farevalue.ui-collapsible > div.ui-collapsible-content").css("display", "block");		
		setTimeOut(function() {
				$('body,html').animate({ scrollTop: $(hashName).offset().top });
		}, 5000); // let's ait 5s just for testing purpose
	}
	});

Open in new window

Matt KWeb DesignerAuthor Commented:
Getting this in the console... looks like I got some syntax wrong in setTimeOut... but I can't tell where just yet:

ReferenceError: Can't find variable: setTimeOut

Open in new window

Matt KWeb DesignerAuthor Commented:
Aha! I figured it out... the "o" in setTimeout shouldn't be capitalized.

Better still, that was indeed the missing ingredient... JQ just needed a moment for the collapsible to open completely before scrolling. I set it to 700 in the end, but I think it could go even lower. But really, 700 works just fine without a long wait.

Works like a charm now. Thanks for the help, leakim971!
Matt KWeb DesignerAuthor Commented:
leakim971, I marked your last comment as the solution, with the caveat here that it should be edited to make the "o" in "setTimeOut" lowercase – if that's possible after this question is closed. Sorry, still new at this!

Thank you again!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Mobile

From novice to tech pro — start learning today.