How do I include hyperlinks in fixed content that changes as you scroll past divs?

Question

I'm using a bit of script based on Changing div content based on scroll position

I just want to make part of the text (which changes) include some varying hyperlinks. For example as you scroll it shows a link to Google at one point, and then when you scroll past another div it shows a link to Twitter .etc.

I thought it would be simple as embedding it within the classed text, just like below..

<p class="description" style="display: none;">This is <a href="http://www.twitter.com">Twitter</a></p>

However as you can see in this jsfiddle: http://jsfiddle.net/6RHys/56/, the text will change, but the hyperlink does not work.

Would anybody have an idea as to how this is possible ?

Answer 1

instead of text()

$('#date').html($(this).find('.description').text());

use html()

$('#date').html($(this).find('.description').html());

Answer 2

I think this is because you use the .text() function which just gives you the innerText with HTML stripped out. It should work if you use .html() instead.