Have you ever wanted a jQuery plugin that causes your users to question their sanity? Then look no further!
You So Crazy inserts phrases into the paragraphs of an HTML document, which then disappear when they are scrolled out of view, only to reappear in a different place.
Demo
And here, as always, is the source:
1: (function($){
2: $.you_so_crazy = function(customPhrases, options) {
3:
4: var phrases = [
5: 'feed me a stray cat'
6: ];
7: var settings = {
8: 'highlight' : false
9: };
10:
11: if (options)
12: $.extend(settings, options);
13: if (customPhrases)
14: phrases = phrases.concat(customPhrases);
15:
16: var currentElement = null;
17: var spotted = false;
18:
19: $(window).scroll(function() {
20: if (currentElement)
21: {
22: if (element_on_screen(currentElement))
23: {
24: if (spotted)
25: {
26: select_element();
27: spotted = false;
28: }
29: }
30: else
31: {
32: if (!spotted)
33: spotted = true;
34: }
35: }
36: });
37:
38: var select_element = function() {
39:
40: if (currentElement)
41: currentElement.remove();
42:
43: var target = null;
44: while(target == null)
45: {
46: var paragraphs = $('p');
47: var index = Math.floor(Math.random() * paragraphs.length);
48: target = $(paragraphs[index]);
49:
50: if (element_on_screen(target))
51: break;
52:
53: target = null;
54: }
55:
56: var tokens = target.html().split(' ');
57: var strIndex = Math.floor(Math.random() * tokens.length);
58: var phraseIndex = Math.floor(Math.random() * phrases.length);
59: var finalPhrase = '<span class="psycho42"'
60: + (settings.highlight ? ' style="background-color: #f00;">' : '>')
61: + phrases[phraseIndex] + '</span>';
62: tokens.splice(strIndex, 0, finalPhrase);
63: target.html(tokens.join(' '));
64: currentElement = target.find('span.psycho42');
65: };
66:
67: var element_on_screen = function(element)
68: {
69: var screen_position = element.offset();
70: screen_position.top -= $(document).scrollTop();
71: screen_position.left -= $(document).scrollLeft();
72: var windowSize = { 'left': $(window).width(), 'top': $(window).height() }
73:
74: return screen_position.top + element.height() < 0
75: || screen_position.left + element.width() < 0
76: || screen_position.top > windowSize.top
77: || screen_position.left > windowSize.left;
78: }
79:
80: select_element();
81: };
82: })(jQuery);
This is a strong contender for the title of most pointless code I've ever written, but I had a spare hour and felt it was about time I added my own contribution to the swath of jQuery plugins out there.