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: *
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{
padding: 50px;
font-family: Arial;
font-size: 100%;
}
.switch-label{
line-height: 26px;
display: block;
float: left;
margin-right: 10px;
}
.input-block{
margin-bottom: 1em;
}
/* Rich checkbox */
.rich-checkbox{
position: relative;
cursor: pointer;
display: inline-block;
background: #DDD;
color: #3f3f3f;
width: 70px;
text-shadow: 0px 1px 0px #f2f2f2;
filter: dropshadow(color=#f2f2f2, offx=0, offy=1);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
height: 26px;
line-height: 26px;
-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
}
.rich-checkbox.on{
background: #C4E69F;
color: #3c5226;
}
.rich-checkbox .handler{
display: block;
background: #CCC;
width: 28px;
height: 28px;
position: absolute;
margin-top: -1px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(235,235,235,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(235,235,235,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(235,235,235,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(235,235,235,1) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(235,235,235,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb',GradientType=0 );
}
.rich-checkbox.on .handler{
left: 0;
}
.rich-checkbox.off .handler{
left: 0;
margin-left: 42px;
}
.rich-checkbox .on-state,
.rich-checkbox .off-state{
text-transform: uppercase;
font-size: 0.875em;
font-weight: bold;
}
.rich-checkbox .on-state{
padding-left: 35px;
padding-right: 10px;
}
.rich-checkbox .off-state{
padding-right: 35px;
padding-left: 10px;
}
.rich-checkbox.on .on-state,
.rich-checkbox.off .off-state{
display: block;
}
.rich-checkbox.on .off-state,
.rich-checkbox.off .on-state{
display: none;
}
jQuery plugin:
;
(function($) {
$.checkbox = function(el, options) {
var base = this;
base.$el = $(el);
base.el = el;
base.$el.data("checkbox", base);
base.init = function() {
base.options = $.extend({}, $.checkbox.defaultOptions, options);
};
// Run initializer
base.init();
};
$.checkbox.defaultOptions = {
onchange: function(state) {}
};
$.fn.checkbox = function(options) {
return this.each(function() {
var base = (new $.checkbox(this, options));
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.
<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><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</div>
<!-- Content column -->
<div class="content-column">
<h1>Content</h1>
</div>
</div>
</div>
</div>
.same-height-wrap-full,
.same-height-wrap-inner{
width: 500px;
}
.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{
margin: 10% auto;
background: #EEE;
}
.same-height-menu-column,
.menu-column{
width: 150px;
}
.same-height-menu-column{
background: #DDD;
}
.menu-column{
float: left;
}
.content-column{
float: right;
width: 350px;
}
Demo:
http://dabblet.com/gist/2819076
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><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a 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{
width: 500px;
}
.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{
margin: 10% auto;
background: #EEE;
}
.same-height-menu-column,
.menu-column{
width: 150px;
}
.same-height-menu-column{
background: #DDD;
}
.menu-column{
float: left;
}
.content-column{
float: right;
width: 350px;
}
Demo:
http://dabblet.com/gist/2819076
Subscribe to:
Posts (Atom)