Posts from September 2011.

CSS3 Element Wiggle With Keyframes

wp-carousel-20

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;
}

Reordering Yii Results Without Another Select

fetchit-21

In case you weren’t aware, you can reorder the results you already have from a previous Yii call. For example…

 
$users = User::model()->findByPk(2);
$posts = $user->posts(array('order'=>' created Desc '));

There were just ordered our users posts by created date descending.

We can also do filtering…

 
$users = User::model()->findByPk(2);
$posts = $user->posts(array('condition'=>' status=1 '));

So now we only have active posts. We could also combine a condition and a status.

You can find out more here: http://www.yiiframework.com/doc/guide/1.1/en/database.arr#dynamic-relational-query-options

A Friend Request Form Inside A Facebook Iframe Application

fetchit-21

The example given on the Facebook developer documentation page ( http://developers.facebook.com/docs/reference/fbml/serverFbml/ ) doesn’t work. This one does.

Note how some html is escaped and the multi-friend-selector is inside the form.

The code below allows you to add the large version of a friend select in the form of an invite tool to your iframe facebook applications:

<fb:serverFbml style="width: 755px;">  
     <script type="text/fbml">
        <fb:fbml>
            <fb:request-form
                action=""
                method="post"
                invite="true"
                type="XFBML"
                content="This is a test invitation from XFBML test app
                &lt;fb:req-choice url=&quot;see fb:req-choice docs for details.&quot;
                    label=&quot;Ignore the Facebook test app!&quot; /&gt;
             ">
				<fb:multi-friend-selector
                    showborder="false"
                    actiontext="Invite your friends to use Socially." />
             </fb:request-form>
         </fb:fbml>
    </script>
</fb:serverFbml>

Twitter Bootstrap Tabs On Right Side

fetchit-21

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:

<li class="secondary-nav"><a href="#">Link Text</a></li>

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