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:

• Link Text

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

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 ' );

When you use css3 to rotate an element with it’s new transform property, you may find yourself fighting to keep it inside it’s parent.

To clarify, usually rotating an element will first put it into it’s usual position and then literally rotate it around it’s own centre, not caring if it now overlaps elements around it (well I suppose that’s the point sometimes?!?)

I’m using css transform to rotate, in combination with a little javascript to allow images to be rotated (and then saved) as part of PagePlay‘s super simple user interface.

So I initially start out with something like…

--div-------------------------
| ccw                     cw |
| --img--------------------- |
| |                        | |
| |                        | |
| |                        | |
| -------------------------- |
-----------------------------

When you click ccw (counter clockwise) or cw (clockwise) js switched classes on the img and it rotates. Initially, that would give me something like….

       ----------------
       |              |
--div-------------------------
| ccw  |              |   cw |
|      |              i      |
|      |              m      |
|      |              g      |
|      |              |      |
|      |              |      |
-----------------------------
       |              |
       ----------------

(loving the crude graphics? Thought so)

So what I wanted was for the parent div to sit around the image. The problem here is that the div parent doesn’t (and shouldn’t) care about the rotation of it’s child, so we need to make the div larger when it’s rotated. To do this I used a little bit of jQuery and maths to calculate the required additional space…

I don’t know whether the image is going to be taller or wider first, so we need to check that first and come up with a pixel margin to use later…

var img = $('rotator');
var img_w = img.width();
var img_h = img.height();
var the_margin = (img_w > img_h ? (img_w-img_h)/2 : 0);

The img width minus image height divided by 2 is the amount space above and below the standard space the image takes up that it will also need when rotated. If the image is taller than it is wide, we will already have enough space (you could do better by making the div smaller on rotation in this case).

So when we rotate we look at whether the image is rotated or not (rev tells me that here) and then based on that we add or remove the margin we calculated above to the top and bottom of the image to push it’s parent div away from it and make it large enough to accommodate the image.

img.css({marginTop:(rev ? 0 : marg),marginBottom:(rev ? 0 : marg)});

You could certainly do better with dealing with image which are portrait, but then maybe I’ll come back to that another time.

There is a Yii error I come across every now and again, and each time it stumps me.

If you ever get SomeModel.id not defined error when trying to put your dataprovider results into a cgridview or similar then it’s likely because

1) Your model doesn’t have an id column, it might use file_id or user_id etc instead and

2) You haven’t defined which other column should be used.

We do this using what’s known as keyField:

new CArrayDataProvider($users, array('keyField' => 'user_id'));
new CSqlDataProvider($users, array('keyField' => 'user_id'));

[carousel keywords=”yii” tag=”fetchit-21″]