Tuesday, November 29, 2011

Centering an inner div vertically inside another div

Green div is centered on a gray div
So how do you:
A div tagged as "divsmall" is contained inside a bigger div tagged as "divbig". the challenge is how to *vertically* align/center divsmall inside divbig.
Interesting question although having limited applications but still this should be possible. So, broke out my favorite IDE and started coding away. We start with our HTML.

 <!DOCTYPE html>  
 <html>  
   <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
     <link rel="stylesheet" type="text/css" href="css/mystyle.css"/>  
     <title></title>  
   </head>  
   <body>  
     <div class="div-big">  
       <div class="div-small">  
         <strong>div-small</strong>  
       </div>  
     </div>  
   </body>  
 </html>  
This should be easy to read. We then move to the CSS.

.div-big{
    background: #999;
    border: 1px solid #000;
    min-height: 640px;
    margin: auto;
    text-align: center;
    width: 940px;
}

.div-small{
    background: #66cc00;
    border: 1px solid #666;
    min-height: 600px;
    margin: 20px auto;
    width: 25%;
}
The trick in the margins. If you look at line 14, that all you need to center inner div. The width doesn't really matter. Try modifying the width value at line 15. The div should adjust in relation to its parent div.

Monday, November 28, 2011

All I want for Christmas is a XiaoMi

You simply can't knock it. This new Android phone from Meizu is off the hook! Spec-wise its gorgeous for only $310 bucks. That's about P13,500 in my pesos.

You will admit that it looks like an iPhone and that's what exactly its makers want it. The iPhone 4s is just weak if you do a side-by-side comparison.

The iPhone runs on a A5 dual core clocked at 800MHz. The Xiaomi run a Cortex-A8 dual core at 1.5Ghz. Xiaomi 1, iPhone 0.

Internal RAM? iPhone 500MB; Xiaomi 1GB. Xiaomi 2, iPhone 0.

The iPhone has a capacitive 3.5inch touch screen while the Xiaomi has 4inches. Xiaomi 3, iPhone 0.

The Xiaomi has this massive 1930mAh battery. I forgot what iPhone has on it but I will bet it running a standard 1430 mAh. Xiaomi 4, iPhone 0.

And please don't make get started on the price. We all already know that the iPhone is like 29k. How can you beat 13.5k phone with better or equivalent hardware?

Heck, the manufacturer is also promising that by January, Ice Cream Sandwich build will be available. FTW!

So for Christmas, unless your a fanboy, skip the iPhone.

For a more in-depth review, read this.

Anyone want to buy a Cherry Mobile MagnumHD?

Thursday, November 17, 2011

CM Magnum HD + MIUI = iDroid

MIUI Home screen
I bought my Cherry Mobile Magnum HD about about a year ago and if you have been following this blog, you'll remember that I installed and been using the Welcomm ROM. The Welcomm ROM has served me well but time to look for another.

Enter the MIUI.

Now MIUI is a custom Android ROM. The most striking feature is its UI. Its very reminiscent of a iPhone's user interface. That's why I sometimes confuse people when I tell them that I have an iDroid. *big grin*

Now, you will notice that in the official MIUI webpage that the Cherry Mobile Magnum (or its variants) are not support. That's because it isn't. I'm using a modified MIUI ROM by an Indonesian guy named TJ_Style. He hangs around the andro-id.net website.

To get your grubby hands on the rom, you'll have to register to the andro-id.net forum. Just run the site thru a translator since most of the post is in Indonesian.

Also, you'll need to get that custom CWM recovery for your phone so you can install the ROM and get superuser rights. That shouldn't to hard.

Anyway, here's a couple more screenshots of my newly flashed Cherry Mobile Magnum:


Wednesday, November 9, 2011

My 15.4" laptop backpack

I've had been searching for a laptop backpack for months now but my city certainly had slim pickings for a 15.4" laptop. As it turns out, a lot of options for a 14" laptop.  I think I've visited at least once all the bag, backpack retailer in every mall, department store in this city. No such luck, so I turn to the internet.

This is where I found http://www.dealextreme.com/. Its's this online shop based out of Hong Kong. The real kicker is that they ship stuff you buy from the site anywhere in the world for FREE. Gravy.

Search the site for a "laptop backpack" and browsed the results. I finally settled on this Waterproof 15.4" Travel backpack. I stupidly thought that the brand is Waterproof. Hehehe. When I got my backpack after 4 weeks, the brand is Swissgear. Just its made in China which probably makes it a knockoff. But don't let that put you off because honestly I can't tell it apart from the original. The backpack seems to be well made.

And it fits all my gear nicely. Just take a look at the image at the right. The bag has this padded compartment for the laptop and extra pockets for the mouse and power brick and cord. In fact, the pads are so nice that you can forget about getting one of those soft carrying sleeves.

I also need to mention this...it has this cool feature where a special small bag designed to load CD/MP3/MP4 players (ie. an iPod) with 3.5mm cable and jack allowing you to enjoy music at anytime. The interface jack is on the harness. But I think you have to get one of those headphones with controllers so you don't have to dig through the pack.
Despite all of that stuff, the pack still has enough space for a couple of books, a shirt or two and a from the looks of it, a netbook. And that's just from the inside compartment. The pack still has space on the front and sides for a water bottle or canteen or camera or overnight kit. Heck, it even has space for your shades.

My best purchase ever!

Monday, November 7, 2011

Views and jCarousel fun

Node.tpl.php
So, to make a long story short, I got a client who wanted to display his Drupal site's content nodes just like the image above. We are working with Drupal 6.

He wanted:
  1. A callout box that contains location and a link
  2. An image carousel 
  3. A social networking toolbox 
Interesting. 

So we start off with a custom content type. My setup is composed of CCK, Location, Image, ImageCache. 

Content Construction Kit (CCK) needs no explaination. You can't make custom content type without it. The Location module is used with CCK to capture Location data. The Image module so we can attached, well, images to the node. The ImageCache complements this; allowing us to process the attached images to whatever size we need it.

We are are off to writing code in the our theme's template.php. We are going to preprocess our node data. Here is mine. Your CCK field names might not be same as mine but you can look at the CCK field names up with a dpm($vars) call. Remember that you can't make a dpm call without the devel module.

function [YOUR_THEME]_preprocess_node(&$vars, $hook) {      
    // construct callout box for organizer and venue
    $organizer_url = $vars['field_organizer_link']['0']['view'];  
    $venue_name = $vars['field_record_venue']['0']['name'];  
    $venue_street = $vars['field_record_venue']['0']['street'];  
    $venue_city = $vars['field_record_venue']['0']['city'];  

    $field_venue = '<div class="venue"><span class="venue-title">' . $venue_name . '</span><br/> <span class="venue-location">' . $venue_street . ', ' . $venue_city . '</span></div>';  
    $field_organizer = '<span class="organizer"><p> For more Information,<br/> visit the organizer\'s site</p>' . $organizer_url . '</span>';  
    $vars['callout'] = '<div class="callout">' . $field_venue . $field_organizer . '</div>';  

    // construct embedded view for image carousel  
    $embedded_view = 'embedded_related_img';  
    $embedded_args = $vars[nid];  
    $emdedded_view_display = 'default';  
    $vars['embedded_carousel'] = views_embed_view($embedded_view, $emdedded_view_display, $embedded_args);  
  }  
We then can insert the newly constructed callout box via the $callout variable. See line #12.

The next step here is the image carousel. I did this using Views and jCarousel. When you read up on how to use jCarousel it should be apparent that you can use a Views argument to make an image carousel of the current node using its id and get all the attached images. I then named the view "embedded_related_img". Set the view style to jCarousel. The options shouldn't be a problem. It will not preview correctly since Views will not load the javascript for the carousel. I then attached this on the node via the $embedded_carousel variable. The magic is the views_embed_view() function. See lines #15 - 18.

And as for the social networking bar that's done with the addThis module. This should be a no-brainer.

For reference, here is the node.tpl.php file.

<div id="record-<?php print $node->nid; ?>" class="node record clear-block">   
   <?php if ($page == 0): ?>  
     <h2 class="title"><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>  
   <?php else: ?>  
     <h2 class="title"><?php print $title ?></h2>  
   <?php endif; ?>  
   <div class="content clear-block">  
     <?php print $picture ?>  
     <?php if(!$teaser): ?>  
       <?php print $callout; ?>  
     <?php endif; ?>  
     <?php print $content ?>  
   </div>  
   <?php if(!$teaser): ?>  
     <div class="embeded_view clear-block">  
       <?php print $embedded_carousel; ?>  
     </div>    
   <?php endif; ?>  
   <?php  
   if ($links) {  
     print '<div class="node-links">'. $links .'</div>';  
   }  
   ?>  
 </div>

Saturday, November 5, 2011

Overcoming CSS's limitations with Less CSS

I have written my fair share of CSS for almost every kind of project. CSS is easy to use but on a whole I always wished that CSS had some kind of programming elements. You dont' how many times I have come across a scenario where I had to write a style rule over and over again or target specific children classes inside a parent element. The resulting CSS is not pretty. This was until I came across Bootstrap from Twitter and Less CSS. The tag line says:
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.
Yes, CSS with "dynamic behavior" and everything still boils down to pure CSS. You just drop in less.js and off you go. Here's an examples that I think makes writing CSS interesting again. Supposed that you have a hex colors that is used all over the place, this wouldn't be a problem until you have change it. Now you can crank up your editor's Find and Replace but we know that sometimes that thing replaces values that it shouldn't be replacing. So....
/* Less CSS sheet */
@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

The variables @color allow me to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code. With a little foresight, I can set this up so what I change say only affects #header divs or certain areas in my HTML page. Don't worry because, when you pass the site to the browser, your Less CSS will be "compiled" by the less.js spitting out pure, clean CSS.
/* Your CSS as far as the browser is concern */
#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

I think this will become another important tool in a web developers toolbox. I already use it indirectly anyway. I'm a big fan of the Bootstrap framework from Twitter.