Tutorial

Bouncing Frog Head!

A little bit of fun!

Take a look at what's in the latest Frog Release - Discover Hopper

HTML isn't always serious!

Just a bit of fun - copy the code below to recreate this:

<div class="alert alert-success message"></div>


<style>
    .bouncing_frog {
        background-image: url('public/image/logo/fav-icon-196.png');
        background-repeat: no-repeat;
        width: 200px;
        height: 200px;
        position: fixed;
    }
</style>

<template class="frog_template">
    <a class="bouncing_frog"></a>
</template>

<script type="text/javascript">
    var user = FrogOS.getUser(),
        msg = FrogOS.sprintf('Hello, %s, having a bouncing Frog or two!', user.attr('displayname')),
        frog_template = document.querySelector('template.frog_template'),
        initialClone = document.importNode(frog_template.content, true),
        screenWidth = (jQuery(window).width() - 50),
        screenHeight = (jQuery(window).height() - 50),
        mkNewPosition = function() {
            return {
                top: Math.floor(Math.random() * screenHeight),
                left: Math.floor(Math.random() * screenWidth)
            };
        },
        animateFrog = function(frogEl) {
            var newPosition = mkNewPosition();
            jQuery('.bouncing_frog').animate({
                top: newPosition.top,
                left: newPosition.left
            }, 1600, 'easeInOutQuad', animateFrog);
        };
    jQuery('.message').text(msg);
    document.body.appendChild(initialClone);
    setTimeout(function(){
        animateFrog();
    });
</script>