Sunday, 11 November 2012

Free scrum tool

http://www.scrummaster.cz free online tool for scrum and agile methodology. You can use hashtags for filtering tasks.

Monday, 3 September 2012

Font face not working in Firefox

If your font-face working in Chrome but not in Firefox and you are serving file from CDN or static domain try check this header:

Access-Control-Allow-Origin

On IIS:

1. Open IIS manager
2. Open web with static content
3. Open HTTP Response Headers (in features view)
4. Add Name: Access-Control-Allow-Origin, Value: *

Wednesday, 6 June 2012

Rich checkbox





Demo:


http://jsfiddle.net/tjerabek/ft6UZ/


HTML:


<div class="input-block">
<label for="newsletter" class="switch-label">Send newsletter</label>
<input type="checkbox" name="newsletter" id="newsletter" checked="checked" />
</div>

CSS:


body{
    padding50px;
    font-familyArial;
    font-size100%;
}

.switch-label{
    line-height26px;
    displayblock;
    floatleft;
    margin-right10px;
}
.input-block{
    margin-bottom1em;
}

/* Rich checkbox */

.rich-checkbox{
    positionrelative;
    cursorpointer;
    displayinline-block;
    background#DDD;
    color#3f3f3f;
    width70px;
    
    text-shadow0px 1px 0px #f2f2f2;
    filterdropshadow(color=#f2f2f2offx=0offy=1);
      
    -webkit-border-radius15px;
    -moz-border-radius15px;
    border-radius15px;
    height26px;
    line-height26px;
    
    -webkit-box-shadowinset 0px 1px 2px 0px rgba(0000.2);
    box-shadowinset 0px 1px 2px 0px rgba(0000.2);
}
.rich-checkbox.on{
    background#C4E69F;
    color#3c5226;
}
.rich-checkbox .handler{
    displayblock;
    background#CCC;
    width28px;
    height28px;
    positionabsolute;
    margin-top-1px;
    -webkit-border-radius15px;
    -moz-border-radius15px;
    border-radius15px;
    -webkit-box-shadow0px 1px 1px 0px rgba(0000.3);
    box-shadow0px 1px 1px 0px rgba(0000.3)

-webkit-transitionall 0.3s ease;
-moz-transitionall 0.3s ease;
-ms-transitionall 0.3s ease;
-o-transitionall 0.3s ease;
transitionall 0.3s ease;   

backgroundrgb(255,255,255);
background-moz-linear-gradient(toprgba(255,255,255,10%rgba(235,235,235,1100%);
background-webkit-gradient(linearleft topleft bottomcolor-stop(0%,rgba(255,255,255,1))color-stop(100%,rgba(235,235,235,1)));
background-webkit-linear-gradient(toprgba(255,255,255,10%,rgba(235,235,235,1100%);
background-o-linear-gradient(toprgba(255,255,255,10%,rgba(235,235,235,1100%);
background-ms-linear-gradient(toprgba(255,255,255,10%,rgba(235,235,235,1100%);
backgroundlinear-gradient(toprgba(255,255,255,10%,rgba(235,235,235,1100%);
filterprogid:DXImageTransform.Microsoft.gradientstartColorstr='#ffffff'endColorstr='#ebebeb',GradientType=);    
}
.rich-checkbox.on .handler{
    left0;
}
.rich-checkbox.off .handler{
    left0;
    margin-left42px;
}
.rich-checkbox .on-state,
.rich-checkbox .off-state{
    text-transformuppercase;
    font-size0.875em;
    font-weightbold;
}
.rich-checkbox .on-state{
    padding-left35px;
    padding-right10px;
}
.rich-checkbox .off-state{
    padding-right35px;
    padding-left10px;
}
.rich-checkbox.on .on-state,
.rich-checkbox.off .off-state{
    displayblock;
}
.rich-checkbox.on .off-state
.rich-checkbox.off .on-state{
    displaynone;
}



jQuery plugin:


;
(function(${
    $.checkbox function(eloptions{
        var base this;

        base.$el $(el);
        base.el el;

        base.$el.data("checkbox"base);

        base.init function({
            base.options $.extend({}$.checkbox.defaultOptionsoptions);
        };

        // Run initializer
        base.init();
    };

    $.checkbox.defaultOptions {
        onchangefunction(state{}
    };

    $.fn.checkbox function(options{
        return this.each(function({
            var base (new $.checkbox(thisoptions));
            var $check $(this);
            $check.hide();

            var $richCheck $('<div class="rich-checkbox"></div>');
            var $handler $('<div class="handler"></div>');
            var $onState $('<div class="on-state">On</div>');
            var $offState $('<div class="off-state">Off</div>');

            if ($check.attr('checked'== 'checked'{
                $richCheck.addClass('on');
            else {
                $richCheck.addClass('off');
            }

            $richCheck.append($handler);
            $richCheck.append($onState);
            $richCheck.append($offState);

            $onState.click(function({
                var $parentNode $(this).parent();
                $parentNode.removeClass("on");
                $parentNode.addClass("off");
                $check.removeAttr('checked');
                base.options.onchange(false);
            });
            $offState.click(function({
                var $parentNode $(this).parent();
                $parentNode.removeClass("off");
                $parentNode.addClass("on");
                $check.attr('checked''checked');
                base.options.onchange(true);
            });
            $handler.click(function({
                var $parentNode $(this).parent();
                if ($parentNode.hasClass('on'){
                    $parentNode.removeClass("on");
                    $parentNode.addClass("off");
                    $check.removeAttr('checked');
                    base.options.onchange(false);
                else {
                    $parentNode.removeClass("off");
                    $parentNode.addClass("on");
                    $check.attr('checked''checked');
                    base.options.onchange(true);
                }
            });

            $check.after($richCheck);

            $check.change(function({
                if ($check.attr('checked'== 'checked'{
                    $richCheck.removeClass('off');
                    $richCheck.addClass('on');
                    base.options.onchange(true);
                else {
                    $richCheck.removeClass('on');
                    $richCheck.addClass('off');
                    base.options.onchange(false);
                }
            });
        });
    };

})(jQuery);

$(document).ready(function({
    $('input[type="checkbox"]').checkbox();
});


Friday, 25 May 2012

Divs with equal height

This is my simple solution of equal height divs without any hacks.

Basics

Basic idea was simple solution of same height problem. This is my solution:

  • 5 divs
  • No css hacks
  • Image slider inspired
  • Div with class same-height-wrap-full represents color of right column
  • Div with class same-height-menu-column represents color of left column
  • Div with class same-height-wrap-inner is viewport for columns content
  • Div with class menu-column is content of left column
  • Div with class content-column is main content of page (right column)

HTML:

<!-- This is background of main content -->
<div class="same-height-wrap-full">
    <!-- This is backgroun of aside content -->
    <div class="same-height-menu-column">
        <!-- Viewport for columns -->
        <div class="same-height-wrap-inner">
            <!-- Menu column -->
            <div class="menu-column">
                <nav>
                    <ul>
                        <li><href="">Home</a></li>
                        <li><href="">About</a></li>
                        <li><href="">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <!-- Content column -->
            <div class="content-column">
                <h1>Content</h1>
            </div>
        </div>
    </div>
</div>


CSS:



.same-height-wrap-full
.same-height-wrap-inner{
    width500px;
}
.same-height-wrap-inner:before,
.same-height-wrap-inner:after {
    content:"";
    display:table;
}

.same-height-wrap-inner:after {
    clear:both;
}
.same-height-wrap-inner {
    *zoom:1;
}

.same-height-wrap-full{
    margin10% auto;
    background#EEE;
}
.same-height-menu-column
.menu-column{
    width150px;
}
.same-height-menu-column{
    background#DDD;
}
.menu-column{
    floatleft;
}
.content-column{
    floatright;
    width350px;
}


Demo:
http://dabblet.com/gist/2819076