Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts

    Cool April fools joke

    OK, so people are probably going to know it's a joke, but I thought I would share. I'm going tot be posting this on our intranet at work. feel free to steal/re-adapt or make /suggest improvments.

    Description : It basically starts off with some dummy error messages that move around when you click on them. I used the cookie plugin to keep track of whether or not people wanted to see the joke again or just hide it altogether ( you know how some people at work are)

    ( i didnt make it very portable)

    http://dansplace.x10.mx/joke/

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
      <title>April Fool's Joke with jQuery</title>
      <script type="text/javascript" src=
      "https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    </script>
      <script type="text/javascript">
    //<![CDATA[
                    /* this function from:
                     * http://www.admixweb.com/2010/08/24/javascript-tip-get-a-random-number-between-two-integers/
                     */
    function randomFromTo(from, to) {
        return Math.floor(Math.random() * (to - from + 1) + from);
    }
    var count11 = 1;
    
    function moveRandom(id) {
        /* get container position and size
         * -- access method : cPos.top and cPos.left */
        if (count11 >= 1 && count11 < 11) {
            if (count11 === 1) {
                count11 = 2
            }
            var cPos = $('#container').offset();
            var cHeight = $('#container').height();
            var cWidth = $('#container').width();
            // get box padding (assume all padding have same value)
            var pad = parseInt($('#container').css('padding-top').replace('px', ''));
            // get movable box size
            var bHeight = $('#' + id).height();
            var bWidth = $('#' + id).width();
            // set maximum position
            maxY = cPos.top + cHeight - bHeight - pad;
            maxX = cPos.left + cWidth - bWidth - pad;
            // set minimum position
            minY = cPos.top + pad + 5;
            minX = cPos.left + pad + 5;
            // set new position                     
            newY = randomFromTo(minY, maxY);
            newX = randomFromTo(minX, maxX);
            $('div').animate({
                top: newY,
                left: newX
            }, 600, function () {});
            $('#box img').attr('src', '/images/joke/remove0' + count11 + '.png')
            count11++
        }
        if (count11 >= 11) {
            var bb;
            bb = confirm("Hope you enjoyed my little joke. \nClick OK to never see this again.\nClick Cancel to temporarily save a link to my joke in the corner of this page.")
            if (bb) {
                //set cookie as nomore
                // hide joke
                //hide link
                $.cookie('replayjoke', 'nomore', {
                    expires: 7
                });
                $("#jokelink").hide();
                $("#box,#container").fadeOut();
    			$("#info").show();
            } else {
                count11 = 1
                //set cookie as playagain
                //hide joke
                //display link
                $.cookie('replayjoke', 'playagain', {
                    expires: 7
                });
                $("#jokelink").show();
                $("#box,#container").fadeOut();
    			$("#info").show();
                $('#box img').attr('src', '/images/joke/remove0' + count11 + '.png')
                $('#box img').attr({
                    'left': '35%',
                    'top': '25%'
                });
            }
        }
    }
    //cookie script
    /*!
     * jQuery Cookie Plugin
     * https://github.com/carhartl/jquery-cookie
     *
     * Copyright 2011, Klaus Hartl
     * Dual licensed under the MIT or GPL Version 2 licenses.
     * http://www.opensource.org/licenses/mit-license.php
     * http://www.opensource.org/licenses/GPL-2.0
     */ (function ($) {
        $.cookie = function (key, value, options) {
            // key and at least value given, set cookie...
            if (arguments.length > 1 && (!/Object/.test(Object.prototype.toString.call(value)) || value === null || value === undefined)) {
                options = $.extend({}, options);
                if (value === null || value === undefined) {
                    options.expires = -1;
                }
                if (typeof options.expires === 'number') {
                    var days = options.expires,
                        t = options.expires = new Date();
                    t.setDate(t.getDate() + days);
                }
                value = String(value);
                return (document.cookie = [
                encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
                options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : ''].join(''));
            }
            // key and possibly options given, get cookie...
            options = value || {};
            var decode = options.raw ?
            function (s) {
                return s;
            } : decodeURIComponent;
            var pairs = document.cookie.split('; ');
            for (var i = 0, pair; pair = pairs[i] && pairs[i].split('='); i++) {
                if (decode(pair[0]) === key) return decode(pair[1] || ''); // IE saves cookies with empty string as "c; ", e.g. without "=" as opposed to EOMB, thus pair[1] may be undefined
            }
            return null;
        };
    })(jQuery);
    //end cookie script
    $(document).ready(function () {
        if ($.cookie('replayjoke') == null) {
            $("#box,#container").show();
        } else if ($.cookie('replayjoke') == "nomore") {
            $("#box,#container").hide();
            $("#jokelink").hide();
    		$("#info").show();
        } else if ($.cookie('replayjoke') == "playagain") {
            $("#box,#container").hide();
            $("#jokelink").show();
    		$("#info").show();
        }
     $("#jokelink").click(function (e) {
            e.preventDefault();
           $("#box,#container").show();
            });
     $("#box").click(function () {
                moveRandom('box')
            });
    		
    });
      //]]>
      </script>
      <style type="text/css">
    /*<![CDATA[*/
      #top {
    	margin: 0 auto;
    	background: #d3d3d3;
    	text-align: center;
    	padding: 10px;
    	width: 500px;
    	margin-bottom: 10px;
      }
      #container {
    	margin: 0 auto;
    	width: 800px;
    	height: 500px;
    	padding: 10px;
      }
      #box {
    	position: absolute;
    	left: 35%;
    	top: 25%;
      }
    
      /*]]>*/
      </style>
    </head>
    
    <body>
      <div id="info" style="display:none;">
        <p>I used the following code to make this joke, all images are free to use, the cookie plugin and rnadommove plugin should have comments left in.</p>
        <ul>
          <li>
            Random move code original source = <a href="http://superdit.com/2010/12/25/moving-element-to-random-position-inside-a-container/">http://superdit.com/2010/12/25/moving-element-to-random-position-inside-a-container/</a>      </li>
          <li>Cookie code source = <a href="https://github.com/carhartl/jquery-cookie">https://github.com/carhartl/jquery-cookie</a>      </li>
          <li>images generated with = <a href="http://atom.smasher.org/error/">http://atom.smasher.org/error/</a>        </li>
          <li>click here to reset the cookie - <a href=
        "javascript:$.cookie('replayjoke',%20null);alert($.cookie('replayjoke'));">reset
            cookie</a></li>
        </ul>
      </div>
    
      <div>
        <a id="jokelink" href="#" name="jokelink" style="display:none;">Play Joke Again</a>
      </div>
    
      <div id="container">
        <div id="box"><img src="../images/joke/remove01.png" /></div>
      </div>
    </body>
    </html>
    Last edited by DanInMa; 02-26-2012 at 03:02 AM.

  • #2
    New Coder
    Join Date
    Feb 2012
    Location
    Florida
    Posts
    14
    Thanks
    0
    Thanked 3 Times in 3 Posts
    lmao.

    That's awesome and very creative.

  • #3
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,724
    Thanks
    41
    Thanked 191 Times in 190 Posts
    i really like that :P

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Marty is my boss'(es?) boss. He's a bruins fan, hockey is pretty popluar. Im doing this in Sharepoint so Ill be able to tell who is logged in and Im going to use that info to target some specific extras


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •