Halloween - Jquery, Animate, Top, Left, End of Animation

Here is a quick halloween example, this can obviously be improved, but should help out people get a basic understanding of how to repeat a jquery animation. This is a simple example with a tranparent ghost png.

<style>
body {
background::#000;
overflow-x: hidden;
overflow-y: scroll;
background-color: #000;
}

#ghost {
background:url(img/ghost.png) transparent;
height:128px;
width:128px;
position:absolute;
left:-128px;
overflow:hidden;
}
</style>

<script language="javascript" src="js/jquery-1.8.2.min.js"></script>

<script>

$(document).ready(function () {

function ghost(div){

$(div).css("left","-128px");

// Fading Start
$(div).fadeTo(5000, Math.random(), function() {
// Animation complete.
});
// Fading End

$(div).animate({
left: "+=" + ($("body").width() + 140),
top: (Math.ceil(Math.random()*500)),

},
5000,
function() {
var randomize = Math.ceil(Math.random() * 10000);
setTimeout(function() { ghost(div)},randomize);
}
);

}

ghost("#ghost");

});

</script>

Take note of where "function() {" is within .animate as it allows you to callback once the animation is completed.

Javascript Highlight Text and Dynamic Creation of Links

I created this small Javascript to markup text with html links. The use of this is for advertising or other site affiliation.

The text that you wish to markup is in an array as well as the url and description. This allows you to add as many text links as you wish and obviously you could make this database driven with some additional coding.

I have also created a div for the containing text, this ensures they other elements are not affected outside the div tag.

<script>

var word = new Array('The','Javascript','Functions');

var url = new Array('http://www.google.co.uk', 'http://www.yahoo.co.uk','http://www.lycos.co.uk');

var desc = new Array('http://www.google.co.uk','http://www.yahoo.co.uk','http://www.lycos.co.uk');

function generatelinks() {

// Target the mytext div

var bdy = document.getElementById('mytext').innerHTML;

for (var i = word.length - 1; i >= 0; i--) {

var re = new RegExp('(\\b' + word[i] + '\\b)','ig');

bdy = bdy.replace(re,'<a class="hl" href="' + url[i] + '" title="' + desc[i] + '" target="_blank">$1<\/a>');

}

document.getElementById('mytext').innerHTML = bdy;

}

// run script on page start

window.onload = generatelinks;



</script>

<style>

.hl {

cursor:pointer;

color:#009999;

border-bottom-style: dashed;

border-bottom-color: #009999;

border-bottom-width: 1px;

text-decoration: none;

}

</style>

<div id="mytext">
Your Text Here

</div>

Here is an example of how it should look: