jQuery Innerfade with Separate Link Region

Demo

Item 1
Item 2
Item 3
Item 4

Debug Item HREF: #1

jQuery

<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>

Donate

If you found this article useful and would like to see more like it this please consider making a donation.