JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<script src="http://narendramodi.in/campaign/sprite/scripts/jquery.spritely-0.6.js"></script>
<div id="animation"><div><img src="http://narendramodi.in/campaign/sprite/images/banner.png"></div><div class="closebutton"><img src="http://narendramodi.in/campaign/sprite/images/close.png" title="close" alt="close"></div></div>

CSS

#animation {
position: absolute;
top: 0px;
left: 0px;
width: 310px;
height: 250px;
z-index: 99999;
cursor: pointer;
z-index: 999;
}
.closebutton {
position: absolute;
top: 135px;
right: -5px;
width: 30px;
height: 30px;
}

JavaScript

(function($) {
    $(document).ready(function() {

        $('#animation').click(function() {
            window.location.href = "http://www.narendramodi.in/tag/ekmat-gujarat";
        });


        $('.closebutton').click(function() {
            $('#animation').hide();
            return false;
        });

        $('#animation').sprite({
            fps: 0,
            no_of_frames: 3,
            // the following are optional: new in version 0.6...
            start_at_frame: 1,
            on_last_frame: function(obj) {
                // you could stop the sprite here with, e.g.
                obj.spStop(); // stop the animation on the last frame
            }
        }).spRandom().activeOnClick().active();

        //$('body').flyToTap(); 
        $(window).scroll(function() {

            $("#animation").offset({
                top: $(window).scrollTop()
            });
            $("#animation").stop();
            //$("#animation").destroy();     
            $("#animation").clearQueue();
            $('#' + el_id).spRandom();

        });

    });
})(jQuery);



var content = '';


content = '<style type="text/css">';

content += '.textwidget { position:relative; z-index:99; }';

content += '#animation {/*background: transparent url(http://narendramodi.in/campaign/sprite/images/banner.png) 0 0 no-repeat;*/ position: absolute; top: 0px; left: 0px; width: 310px;height: 250px; z-index: 99999;cursor: pointer; z-index:999; }';



content += '.closebutton { position:absolute; top:135px; right:-5px; width:30px; height:30px }';

content += '</style>';

content += '<div id="animation"><div><img src="http://narendramodi.in/campaign/sprite/images/banner.png"></div><div class="closebutton" ><img src="http://narendramodi.in/campaign/sprite/images/close.png" title="close" alt="close"></div></div>';