CSS & CSS3

Crossbrowser CSS dropshadows

Very simple problem with a pretty complicated solution, mostly because IE is ignoring the box-shadow CSS3 property. Instead progid:DXImageTransform.Microsoft.Shadow is doing the trick for it and an equivalent can be found.

box-shadow: 4px 4px 8px #000;

for the white shadow is visually-similar to

progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=90,strength=8)

because box-shadow has the parameters:

horizontal-offset, vertical-offset, blur-radius, color

and progid:DXImageTransform.Microsoft.Shadow:

color, 
direction (90 for right bottom, it can also be 0, 45, 135, 180, 225, 270 and 315 )
strength (the distance, in pixels, that a filter effect extends - more like the combination of 4px 4px in the box-shadow)

What it doesn’t have is the blur-radius. Altough progid:DXImageTransform.Microsoft.Blur exist, it will blur the content of the box too, making the text unreadable.

The result is quite similar, with some small differences in how IE displays the corners. As you can see the top-right corner and the bottom-right corner are a mess (the bottom-left doesn’t feel very well either), but let’s be grateful they exist…

crossbrowser dropshadows in mozilla and internet explorer

You can check the demo link if you want to play with other browsers.
The complete CSS code for all browsers is:

.black-shadow { 
-moz-box-shadow: 4px 4px 8px #000;
-webkit-box-shadow: 4px 4px 8px #000;
box-shadow: 4px 4px 8px #000;
 
filter: progid:DXImageTransform.Microsoft.Shadow (color=#000000,direction=90,strength=8)
        progid:DXImageTransform.Microsoft.Shadow (color=#000000,direction=180,strength=8)
}

Check the Spanish version of this post:
Sombras CSS en múltiples navegadores

iPhone tooltip with Titanium
iPhone, Learn Titanium Appcelerator

Create a nifty tooltip in Titanium

6 Comments

In this post I will show how to create a tooltip to those that are using Titanium to develop their iPhone apps.
Sometimes when we set a button with an icon – lets say in navbar – a simple icon is not enough to make the user understand what the button is supposed to do.

For example this one:

What would the rightNavButton do ? The application is an ebook reader – if this helps, but I’m sure it will not….

What about this:

Now you know that by hitting this button you can continue your reading – in case something took you out from the chapter, like  changing a setting, or answering the phone or whatever…

So let’s start.

The tooltip is a simple view with the tip image set as background:

var lasttipView =  Titanium.UI.createView({
width:205,
height:57,
backgroundImage:"img/bubble.png",
top:0,
right:3
});

The “Continue reading” is a simple label added to this view

var lasttipLabel =  Titanium.UI.createLabel({
text:'Continue reading',
color:'#fff',
width:205,
height:34,
top:16,
font:{
fontFamily:'Helvetica Neue',
fontSize:13,
fontWeight:'bold'
},
textAlign:'center'
});
 
lasttipView.add(lasttipLabel);

and the index window contains the tip view

index_win.add(lasttipView);

I supposed we already have the index_win created.

Now when we open the index_win the tooltip will be there and the user will know what the rightNavButton does. But if the tooltip stays there it becomes annoying so we need to find a way to hide it. I choose to hide it when the user clicks the button by using a smooth fadeout.

The code below creates an animation and attaches it to the click event.

var anim_out = Titanium.UI.createAnimation();
anim_out.opacity=0;
anim_out.duration = 250;
 
 
last_read =  Titanium.UI.createButton({
image:"img/tag1.png"
});
 
 
last_read.addEventListener('click', function() {
lasttipView.animate(anim_out);
});
 
index_win.setRightNavButton( last_read );

Ok, here is the button code too but for simplicity I removed some parts that actually display the chapter and trigger other functions.

That’s all. Pretty simple, isn’t it ?

PS. You can use the bubble image in your apps if you want, only just let me know – and if you are curious about the app here it is:
Youth, by Isaac Asimov iPhone ebook.

Check the Spanish version of this post:
Crear una ingeniosa herramienta de notificación en Titanium

Custom table rows with Titanium
iPhone, Learn Titanium Appcelerator

Custom row for TableView in Appcelerator Titanium

58 Comments

In this post  I will try to explain how to create custom rows for TableViews using Titanium Mobile.

If you don’t know what Titanium is about,  take a look here. I suppose you already know how to setup and start a Titanium project so I’ll show only how to create a custom row.

By default a TableView will let you create a row that can have: the left image, the title and the row type decorator set. The next code is an example of the standard data that needs to be passed to a TableView.

var RegData = [
 
{ leftImage:'es.png', title:"Spain", hasChild:true },
{ leftImage:'gb.png', title:"United Kingdom", hasChild:true },
{ leftImage:'us.png', title:"United States", hasChild:true },
{ leftImage:'fr.png', title:"France", hasChild:true }
];
 
var TheTable = Titanium.UI.createTableView({
data:RegData
});

And the result is this:

Ok, we would like to add more data to a row, maybe something like this:

This will require to build the row “by hand”. So we need to add a 2 imageViews, the flag and the trend, and  labelViews for the country and the percent . We also need to change the data array of course.

var CustomData = [
{ flag:'es.png', country:"Spain", trend:'up.png', percent:'28%' ,hasChild:true },
{ flag:'gb.png', country:"United Kingdom", trend:'down.png', percent:'-3%', hasChild:true },
{ flag:'us.png', country:"United States", trend:'up.png', percent:'8%', hasChild:true },
{ flag:'fr.png', country:"France", trend:'down.png', percent:'-40%', hasChild:true }
];

We create a data variable as an array that will hold the row objects generated.

var data=[];

then we walk through the CustomData array, create  a new row , the imageViews and labels and add them to the row.

for (var i = CustomData.length - 1; i <= 0; i--) {
var row = Titanium.UI.createTableViewRow();
 
var flag =  Titanium.UI.createImageView({
url:CustomData[i].flag,
width:32,
height:32,
left:4,
top:2
});
 
var country = Titanium.UI.createLabel({
text:CustomData[i].country,
font:{fontSize:16,fontWeight:'bold'},
width:'auto',
textAlign:'left',
top:2,
left:40,
height:16
});
 
var percent =  Titanium.UI.createLabel({
text:CustomData[i].percent,
font:{fontSize:12,fontWeight:'bold'},
width:'auto',
textAlign:'left',
bottom:0,
left:60,
height:12
});
 
var trend =  Titanium.UI.createImageView({
url:CustomData[i].trend,
width:16,
height:16,
right:10
});
 
row.add(flag);
row.add(country);
row.add(percent);
row.add(trend);
row.hasChild=CustomData[i].hasChild;
 
row.className = 'coutry_row';
 
data.push(row);
};

As you see we also add a className to the row to improve the rendering performance, as the iPhone will reuse the row template with every new data when rendering the table.

The obtained result is this:

You can download the complete Titanium project from here. You will have to create a new project in Titanium and replace the resource folder with the one in the archive.

Let me know your thoughts.

Check the Spanish version of this post:
Como crear filas personalizadas para TableViews usando Titanium Móvil

CSS & CSS3, Javascript, News & Gossip

Everything is green with IE9

I am sure you all know about Mictosoft’s IE9 Testdrive. Its main target was, for now, the developer – in an attempt to showcase the improvements in IE9 and maybe make us be more nice to them and forget how much time we waste with IE6.

What I was interested as a frontend developer was the the compatibility tables for features like SVG, CSS3 and DOM. And the test results, as per Microsoft’s page, are all gorgeous.
IE9 testdrive results

A more detailed list of supported features can be seen by checking their website but long story short, everything is green for them and not so green for the other browsers, except CSS3 :nth-child selector and CSS comments
CSS3 supported selectors

and DOM level 2 style @import inside of @media
DOM level2 table

Another very interesting source of information regarding the present and future features supported by the browsers is When can I use… that also includes HTML5 elements – I notice IE9 testdrive page is not mentioning anything about HTML5 altough IE9 is expecting to support it in a certain percentage. They have also calculated the support that past and future browsers have for some features and their numbers are like this:
Test result When can I use

But you’d better check their website to see the features they worked with cause there are some differences that worth being taking into account.

We salute Microsofts initiative, altough we would love to see some of these CSS3 borders, backgrounds and selectors embedded in an IE8 update…cause we all check our statistics….

Design, Icons

3 free icons sets – webiconset.com

Webiconset.com offers for download three small sets of  icons (10 icons per set ) for both personal and commercial use. The Icons are high quality and come in 4 sizes –  128, 64, 48 and 32 pixels, in png format.

Aplication Icon Set

contains: Register, Settings, Users, Database, Login, Chat, Add, Delete, Edit, Invoice.

Cute Blogging Icon

Set has the next icons : Design, Download, Freelance, Part-time, Hire Me, Not Available, About Me, Services, My Blog, Contact.

while the last set

Mobile Icons Set

includes Phone Call, Photos, Messages, Calculator, Wireless, Calendar, Settings, Contacts, Notes, Map.