Animating Fade Of Twitter Bootstrap Buttons

I came across a curious issue today. You can’t select a period of time over which to fade out and fade in Twitter Bootstrap buttons.

If you apply jQuery fadeTo() or animate() they fade out and they fade in, but they do it in their own time.

This may be related to a css transition which is applied in the bootstrap css, I haven’t had a chance to look, but the workaround for me is to put the button in a span and fade the span in and out instead.

   Button Text

CSS3 Element Wiggle With Keyframes

This technique produces something similar to the wiggle you get on an iPhone when deleting items.

Be aware that keyframe animation is still very poor in Chrome and cases freezing and jumping if multiple items are animated at once.

The animation css below results in a hovered element rotating back and forth around it’s centre point. You can update the number of degrees and length of animation to change the appearance.

Just add this css and give your element the class ‘wiggler’ to implement

/* safari and chrome */
@-webkit-keyframes wiggle {
	0% {-webkit-transform:rotate(4deg);}
	50% {-webkit-transform:rotate(-4deg);}
	100% {-webkit-transform:rotate(4deg);}
}

/* firefox */
@-moz-keyframes wiggle {
	0% {-moz-transform:rotate(4deg);}
	50% {-moz-transform:rotate(-4deg);}
	100% {-moz-transform:rotate(4deg);}
}

/* anyone brave enough to implement the ideal method */
@keyframes wiggle {
	0% {transform:rotate(4deg);}
	50% {transform:rotate(-4deg);}
	100% {transform:rotate(4deg);}
}

.wiggler:hover {
	-webkit-animation: wiggle 0.5s infinite;
	-moz-animation: wiggle 0.5s infinite;
	animation: wiggle 0.5s infinite;
}

Twitter Bootstrap Tabs On Right Side

Twitter’s bootstrap css currently doesn’t support tabs on the right hand side or floated right. We’ll here is the css to allow it.

We’ll stick to existing naming. Twitter use secondary-nav within topbar so let’s use that…

.tabs .secondary-nav {
	float:right;
	margin-left:10px;
	margin-right:0;
}

The the html for the tab you want to float right you need:

The outcome is most tabs on the left and any with the new class positioned over to the right.

Yii 2 (and Yii 1.1) UpdateAll Examples

A few Yii 2 updateAll examples:

Updating a single column:

$rows = Comment::updateAll(['status' => 1], 'type_id = 1 AND status = 0');

Updating multiple columns:

$rows = Comment::updateAll(['status' => 1, 'updated' => '2011-08-25 09:33:23'], 'type_id = 1 AND status = 0' );

Some simple Yii 1.1 examples of how to use updateAll():

In this example we want to set status = 1 WHERE type_id = 1 AND status = 0

Note this is a simple example where we are only updating one column and using a string for our condition. There are more complex options available.

$rows = Comment::model()->updateAll(array( 'status' => 1 ), 'type_id = 1 AND status = 0' );

So as you can see first comes an array of column => new_value pairs, then a condition string which is pretty much used as the WHERE clause.

An example of updating more than one column:

$rows = Comment::model()->updateAll(array( 'status' => 1, 'updated' => '2011-08-25 09:33:23' ), 'type_id = 1 AND status = 0 ' );