• Fruitsnow

    <script src="fruitsnow.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://beneposto.pl/jqueryrotate/js/jQueryRotateCompressed.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    window.onload = function() {

    function timeouts() {
    setTimeout(function () {
    fruitfall();
    timeouts();
    }, 10000);
    }
    timeouts();
    fruitfall();

    var rotation = function (){
    jQuery(".auglis1").rotate({
    angle:0,
    animateTo:360,
    duration: 2000,
    callback: rotation,
    easing: function (x,t,b,c,d){
    return c*(t/d)+b;
    }
    });
    }
    rotation();

    var rotation2 = function (){
    jQuery(".auglis2").rotate({
    angle:360,
    animateTo:0,
    duration: 2000,
    callback: rotation2,
    easing: function (x,t,b,c,d){
    return c*(t/d)+b;
    }
    });
    }
    rotation2();

    };
    //]]>
    </script>

    fruitsnow.js

    for (i=1; i<9; i++){
    jQuery("#clickban").after("<img id='br"+i+"' class='auglis"+Math.floor((Math.random() * 2) + 1)+"' src='/augli/"+i+".png' style='width:100px;z-index:-1;position:absolute;right:30px;top:-200px;'>");
    }

    function rightfall(kurs){
    setTimeout(function(){
    var bar1 = jQuery('#br'+kurs);
    bar1.animate({top: jQuery(document).height()-200}, Math.floor((Math.random() * 10000) + (10000)), "linear", function() {
    //bar1.hide();
    bar1.css("top","-200px");
    });
    }, Math.floor((Math.random() * 8000) + ((kurs-1)*2000)));
    }

    for (i=1; i<9; i++){
    jQuery("#clickban").after("<img id='fr"+i+"' class='auglis"+Math.floor((Math.random() * 2) + 1)+"' src='/augli/"+i+".png' style='width:100px;z-index:-1;position:absolute;left:30px;top:-200px;'>");
    }

    function leftfall(kurs){
    setTimeout(function(){
    var bar1 = jQuery('#fr'+kurs);
    bar1.animate({top: jQuery(document).height()-200}, Math.floor((Math.random() * 10000) + (10000)), "linear", function() {
    //bar1.hide();
    bar1.css("top","-200px");
    });
    }, Math.floor((Math.random() * 8000) + ((kurs-1)*2000)));
    }

    function fruitfall(){
    for (i=1; i<9; i++){
    rightfall(i);
    leftfall(i);
    }
    }


  • Scrollable background

    CSS
    html, body{
    height:100%;
    min-height:100%;
    margin:0;
    padding:0;
    }
    .bg{
    width:100%;
    height:100%;
    background: #fff url(..) no-repeat fixed 0 0;
    overflow:auto;
    }
    <div class="bg">
    < span >..< /span >
    </div>

    Javascript
    $('.bg').scroll(function() {
    var x = $(this).scrollTop();
    $(this).css('background-position', '0% ' + parseInt(-x / 10) + 'px');
    });

    Check working example at http://jsfiddle.net/Vbtts/
    Click this link for the full screen example: http://jsfiddle.net/Vbtts/embedded/result/


  • CSS objekta 360 grādu pargriezšana

    .rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow:hidden;
    }
    .rotate:hover
    {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    }


  • twitter widget

    $("iframe#twitter-widget-0").contents().find('head').append('<style>img.u-photo.avatar{display:none !important;}.header.h-card.p-author{padding-left:0;}</style>');

    i use the “waituntilexists.js” plugin to detect when the content is added to DOM instead of the setTimout(): https://gist.github.com/buu700/4200601

    $("iframe#twitter-widget-0").waitUntilExists(function(){
    $("iframe#twitter-widget-0").contents().find('head').append('<style>img.u-photo.avatar{display:none !important;}.header.h-card.p-author{padding-left:0;}</style>');
    });


  • HTML CSS centrēšanas paņēmiens

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <body style='top:0px;bottom:0px;padding:0px;margin:0px;width:100%;height:100%;position:absolute;'>
    <table width=100% height=100%><tr><td valign=middle align=center>

    your content here

    </td></tr></table>
    </body>
    </html>