Forcing focus on anchor for Switch Content script

**JetJagger** · 04-19-2014, 05:59 PM

1) Script Title: Switch Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tchcontent.htm

3) Describe problem: I am using Switch Content here for articles: http://ca.homeownertrends.com/timhemm/articles-maintenance.php

The issue is that when an article is opened by tapping on the TOP article preview (using Switch Content), the LOWER article preview (for the next article in sequence) opens to the bottom of that article ~ in other words, the LOWER article block opens at the end of the article.

I need to integrate an anchor that will focus the Switch Content script to jump back to the top of the article similar to what was implemented here (using Dynamic Ajax script): http://ca.homeownertrends.com/timhemm/feature-homescreen_instructions.php

The Dynamic Ajax script uses 'a href' in the inline JavaScript, so I could make it work there, but the Switch Content script does not use 'a href'. Here is a block of code from the article page. You can see how Switch Content is applied.....

Code:

<div id="article3-title" class="iconspan handcursor">
	<div class="articleHeader-block">
		<div class="articleHeader-position">
		<header class="articleHeader">
		<img src="http://aaaa.homeownertrends.com/content/symlink-articles/maintenance/when-your-freezer-stops-working/when-your-freezer-stops-working.png" class="articleHeader-image" />

		When Your Freezer Stops Working
		<p class="articleHeader-description">
		Step-by-step instructions to help you preserve and managed food in your freezer when it breaks (or if you need to unplug it for a period of time).
		</p>
		</header>
		</div>	
			<div id="article3" class="articlegroup1">
				<?php include("symlink-articles/maintenance/when-your-freezer-stops-working/when-your-freezer-stops-working.php"); ?>
			</div>
	</div>
</div>

Thank you for any assistance you can provide.

**ddadmin** · 04-20-2014, 01:07 AM

You can programmically get the expanded header to be scrolled into view after it's clicked on by adding the code in red to the existing code inside the .js file:

Code:

this.togglestatus(header, this.statusOpen)
	this.togglecolor(header, this.colorOpen)
	setTimeout(function(){
		if (header.scrollIntoView)
			header.scrollIntoView()
	}, 100)

**JetJagger** · 04-20-2014, 03:55 PM

I inserted the script in the .js file with the other 'togglecolor' scripts. All that happened is that the articles remained expanded and would not collapse. Upon clicking the article titles, nothing happens thereafter. What am I doing wrong?

Here is my application:

Code:

//JUMP TO TOP OF ARTICLE UPON CLICK/TAP <<<<<<<<<<<<<<<

this.togglestatus(header, this.statusOpen)
	this.togglecolor(header, this.colorOpen)
	setTimeout(function(){
		if (header.scrollIntoView)
			header.scrollIntoView()
}, 100)
	
	
//PRIVATE: Sets color of switch header.

switchcontent.prototype.togglecolor=function(header, status){
	if (typeof this.colorOpen!="undefined")
		header.style.color=status
}


//PRIVATE: Sets status indicator HTML of switch header.

switchcontent.prototype.togglestatus=function(header, status){
	if (typeof this.statusOpen!="undefined")
		header.firstChild.innerHTML=status
}