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

Matt K
Matt K used Ask the Experts™
on
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.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
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 Designer

Author

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?
Multitechnician
Top Expert 2014
Commented:
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

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Matt KWeb Designer

Author

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 Designer

Author

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 Designer

Author

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 Designer

Author

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!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial