jQuery Innerfade with Separate Link Region

January 14th, 2010 | Posted in jQuery

Was working on a project and the client needed a fading news rotator with a link to each article at the bottom of the news box. The jQuery Innerfade plugin can handle the fading rotation but requires some modification to update another <div> that includes the link from the fading news article.

Here is demo that might help explain:
jQuery Innerfade with Separate Link Region Demo

jQuery

Place this in your <head> section:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.innerfade.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		$('#fade').innerfade({
			speed: 1000,
			timeout: 4000,
			type: 'sequence'
		});
	});
</script>

To change the HTML elements you need to apply the HREF to open jquery.innerfade.js and go to Line 79-84. You can comment out the debug text.

// Set the news link
var this_element = $(elements[current]);
var matches = /<a\s [^>]*href="([^"]*)"[^>]*>(.*)<\/a>/i.exec(this_element.html());
var url = matches[1];
$("a#news-link").attr("href", url);
$("div#news-link-debug").html("Debug Item HREF: " + url);

HTML

<ul id="fade">
	<li><a href="#1">Item 1</a></li>
	<li><a href="#2">Item 2</a></li>
	<li><a href="#3">Item 3</a></li>
	<li><a href="#4">Item 4</a></li>
</ul>

<div id="news-link"><a href="#1">Click Here</a></div>
<div id="news-link-debug"></div>

Demo/Download

Download
jQuery Innerfade with Separate Link Region Demo

Jiv Studio