How can we make a tool tip bubble using CSS3.

A tool tip is a box and an arrow at the edge pointing something. We can create this using two divs or one div and a span, one in normal mode and the other rotate through 90 degree or nearer.

Then, we make them rounded corners, borders, and by changing z-index, we move the smaller div behind the main div, then it will look like this:

Here is the CSS for the above tool tip

.menutool {

position:absolute;right:10px; width: 180px;height: 61px; padding-top: 15px; padding-left: 22px; margin-top: 10px;;
background: #f0f0f0;

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

-webkit-box-shadow: 2px 2px 3px 1px #8c8c8c;
-moz-box-shadow: 2px 2px 3px 1px #8c8c8c;
box-shadow: 2px 2px 3px 1px #8c8c8c;

border: 1px solid #8a8a8a;

z-index: 1000;

display: none;

}

.menutool span {width: 15px; height: 15px; top: -9px ; position: absolute; right: 13px ;

-moz-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);

border-top: 1px solid #8a8a8a;
border-left: 1px solid #8a8a8a;

background: #f0f0f0;

z-index: 999;

}

Another example for tooltip bubble, (this is for bookmark tool tip for iPhone)

Here is the CSS for the above image

.bmpopup {

background: none repeat scroll 0 0 #F0F0F0;
border: 1px solid #8A8A8A;
border-radius: 8px 8px 8px 8px;
bottom: 13px;
box-shadow: 2px 2px 3px 1px #8C8C8C;
height: 60px;
left: 16%;
margin-top: 10px;
padding: 8px 12px;
position: fixed;
text-align: justify;
width: 180px;
z-index: 1000;
display:none;

}

.bmpopup span {width: 15px; height: 15px;  bottom: -9px ; position: absolute; left: 49% ;

-moz-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);

border-right: 1px solid #8a8a8a;
border-bottom: 1px solid #8a8a8a;

background: #f0f0f0;

z-index: 999;

}

During your CSS creation, whenever  you think you need a gradient or rounder corner or a rotation, we can use the advantage of CSS3.

Don’t need to go to W3Schools or any CSS 3 documentation, that is old style

Use online tools, example and the one I mostly used: http://css3generator.com/

Here you can create css3 for most of the browsers support CSS3. In our case, we just need to take the web-kit part, as we are making this for iPhone. However, during your learning, better to copy full CSS, so that you can see the changes using your Firefox, I  know you will be using Firefox for development and html slicing with Firebug

So copy the full CSS from css3generator.com for the beginning. In the final stages of your development, you can remove unwanted css if you want this site in iPhone only.

Using this tool you can set

Border Radius, Box Shadow, Text Shadow, RGBA, Font-Face for custom fonts, Multiple Column divs, box sizing and resizing, Outlines, transitions, transformations, Selectors, Different Gradients etc.

Some output of these CSS3 looks like this:

Search box design (rounded corner and shadow) :

.searchbox .searchtext{

border: none;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-box-shadow: inset 0 0 5px #999;
-webkit-box-shadow: inset 0 0 5px #999;
box-shadow: inset 0 0 5px #999;
border-right: 1px solid #aeaeac;

color: #7f7f7e;
font-size: 14px;
width: 84%;
float: left;
height: 25px;
padding: 2px 2px 2px 4px;
margin-left: 4px;
margin-top: 4px;

}

Gradient Menu Background:

.menu-container ul li {
padding: 10px;
border-bottom: 1px solid #c6c6c6;
background: #e5e5e5; /* Old browsers */
background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); /* IE10+ */
background: linear-gradient(top, #e5e5e5 0%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

}

Rounded shaped button:

a.green-button {

background: #00a943; /* Old browsers */
background: -moz-linear-gradient(top, #00a943 0%, #00a341 50%, #008d18 50%, #008d18 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a943), color-stop(50%,#00a341), color-stop(50%,#008d18), color-stop(100%,#008d18)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00a943 0%,#00a341 50%,#008d18 50%,#008d18 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00a943 0%,#00a341 50%,#008d18 50%,#008d18 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a943 0%,#00a341 50%,#008d18 50%,#008d18 100%); /* IE10+ */
background: linear-gradient(top, #00a943 0%,#00a341 50%,#008d18 50%,#008d18 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a943', endColorstr='#008d18',GradientType=0 ); /* IE6-9 */

border: 1px solid #848484;
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
display: block;
font-size: 16px;
font-weight: bold;
padding: 8px 15px 8px;
text-align: center;
text-decoration: none;
width: 84%;
margin: 20px 0px 20px 4%;
float: left;
}

In the next post, we can see different designs like Facebook Button, Bubble tool tips, Loading indicators etc in CSS3 in 3-4 lines

Read my previous Series here:

Gmail Architecture

Online Photoshop

Basic Structure

As usual start designing your website with iPhone layout in mind. Things to remember before you design

1) iPhone support HTML5 and CSS3

2) iPhone has two orientations.

3) iPhone has no built in Menu for browser (mobile safari)

4) iPhone has a footer navigation by default in Safari

Why these things are important before we design something in Photoshop ?

Because, since iPhone has CSS3 support which has a lot of design advantages like rounded corner, gradients, rotation, dual background etc, the design can make a design which is suitable for a HTML developer to slice. In normal website development, we achieve these effects using small or big images in repeated mode. Here in CSS3.0, it all done using 2-3 lines of plain text in CSS file.

Since iPhone has 2 orientation, it is up to the product designer to decide whether we want two layouts of just one. Because iPhone can use two different CSS files for different orientation. I will cover this in coming chapters.

The number of controls or button in mobile safari browser is less, and hence we need to provide custom menus in our designs for each navigation, say go to home page, or my galleries, terms page etc. Also every click is just taps, and there is no scope for hover events, which is used in good consideration in majority of the Desktop websites.

Since safari has a footer navigation already, we can avoid many back buttons in our designs. Also can think about tools like Bookmark is placed at bottom. So, if you want to show a tool tip to bookmark your site, you can locate that tool tip button on the footer. (In coming series I will show you how quickly we can create a tool tip bubble for bookmark just with css3.o)

Special Tags

Once the design is done, before we start slicing, need to check some special tags available for iPhone (I would say for many latest handsets)

Doctype and HTML tag:

<!DOCTYPE html>
<html xml:lang="en" lang="en">

Meta tags:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width = device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="True" />
<meta name="apple-mobile-web-app-capable" content="yes" />

For iPhone, it is better to display a website in full width mode, without any zoom options, these meta tags simply does this.

The rest of the slicing, just follow typical div-css float model design (of course no table)

Continue like normal CSS slicing, and think about using CSS3.0 techniques whenever needed. All backgrounds, gradients, shadows, borders, round corners, rotations etc, use CSS3.0. In the next chapter, I will show you which are the tools we can use to create css3.0 for a particular design.  Don’t reinvent the wheel by learning all css3.0 techniques, Google is there for you

See you in next series post, “CSS3.0 tools – don’t reinvent the wheel”

Tips:

You can create custom bookmark icon using the following header, this is same like favicon for Desktop browsers:

<link rel="apple-touch-icon" href="/images/apple-touch-icon.png"/>

Thanks

Sajith

It is using a Javascript code to detect browsers audio status dynamically and show the result.

I also added 5 different audio format sample using html5 audio node, and using this you can test whether any particular format is playing or not

It works for both Desktop browsers and mobile browsers.

Here is the URL:

http://www.sajithmr.me/html5/audio/

The new Facebook app creation flow is really confusing.

For developers, to add a app as a tab to another page, you  need to user the following URL:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

next parameter should be your canvas page url.

Here you can see an option to add this app to your page.

As a first step, do a port update to get all new packages:

port selfupdate

Step 2:

sudo port install asterisk

[This is a long process, it will start installing many dependancy packages]

Possible errors you can see:

1) Image error: /opt/local/bin/a2p is being used by the active perl5.8 port.  Please deactivate this port first, or use ‘port -f activate perl5′ to force the activation.

Solution: Check all perl version installed using the given command:

sudo port installed | grep perl

Uninstall old perl version will solve this problem.

eg: port uninstall perl5 @5.8.9_0

sudo port uninstall   perl5.8 @5.8.9_3

Also if you can run an update outdate package command, this will be alos helpful:

sudo port upgrade outdated

Continue again the command: sudo port install asterisk

2) Error: Target org.macports.configure returned: configure failure: shell command failed (see log for details).

portaudio failed to install.

Solution: Download port audio files from portaudio website.  Replace the source files of portaudio local folded  (where the error is located) and Manually install it using the following commands

sudo /usr/bin/make -j2 -w all
sudo /usr/bin/make install

After installation, link this portaudio with port installation using the following command:

port -f activate portaudio

Continue running this command: sudo port install asterisk

3) When installing Asterisk, you may get another error:

For a undefined variable: snmp/agent.c:830: error: ‘RONLY’ undeclared

Solution: Find the file snmp/agent.c and add #define RONLY 1

If Asterisk still fail to install, download the package file from asterisk website and install manually.

Before compiling this, edit makeopts file and update the line:

change “CONFIG_LDFLAGS=” to “CONFIG_LDFLAGS= /usr/lib/bundle1.o

Good luck

A normal Fan page of Facebook would like this:

https://www.facebook.com/apps/application.php?id=xxxxxxxxxx&sk=app_XXXXXX

This Url will call your domain, say example.com inside the iframe to load the page.

Each time the iframe is loaded, Facebook do a POST to this iframe URL with some data which we can use to identify the status of the user, eg, whether the user already liked this page, or any other parameter is passed through the fan page url.

Facebook keep app_data variable for developers to pass additional parameters to your iframe page.

eg: https://www.facebook.com/apps/application.php?id=xxxxxxxxxx&sk=app_XXXXXX&app_data=mydata

To retrieve this information, in PHP, use can use the following code:

<?php

if(isset($_REQUEST["signed_request"]))
{

$signed_request = $_REQUEST["signed_request"];
// $_POST also work, but better with $_REQUEST

list($encoded_sig, $payload) = explode(‘.’, $signed_request, 2);

$data = json_decode(base64_decode(strtr($payload, ‘-_’, ‘+/’)), true);

if(isset($data['app_data']))
{
$mydata = $data['app_data']; //here you can get the value you passed
}
}

?>

Check my article here  to see how you can get the ‘like’ status using PHP

Courtesy: From various online sources

Thanks
Sajith

Two months ago, I published a jQuery plugin to record audio from browser (without any Media server) called jRecorder

I got many responses and requests to maintain the code with new enhancements and some bug fixes.

Based on that, a new version (1.1) is released which has the capability to preview the recorded audio before sending to the server.

See the example implementation and documentation here.

Also I made this source open and available for anybody to develop at: https://github.com/sythoos/jRecorder/

Thanks

Sajith

I use that platform for writing quick programming tips, and which I feel  really interesting.

Here are my recent 4 posts:

Upload File using PhoneGap

PhoneGap new version comes with upload/download file support in iPhone/Android and BlackBerry

Problem in PhoneGap accessing external URL

Article on how to access a 3rd party website content using PhoneGap (Default setting does not allow this)

Change Browser Address Location using Javascript (w/o reloading)

Article on manipulating browser address bar without reloading the page. Do not work for IE

Get filetype from header without checking extension in Unix

Get the MIME type of a file without checking the extension of the file (Good way – Unix style)

Thanks

Sajith

The question is how can we do this ?

The trick here is, you need to create a page using iframe as you usually create FB app. In that iframe, you have your custom page fragment hosted somewhere else showing some copies/contents/offer etc.

Each time when Facebook load your url inside the iframe, Facebook do a POST to your domain signed_request as the parameter. The rest of the part you have to handle with your server side scripting.

Here mine is PHP:

<?php

$signed_request = $_REQUEST["signed_request"];
// $_POST also work, but better with $_REQUEST

list($encoded_sig, $payload) = explode(‘.’, $signed_request, 2);

$data = json_decode(base64_decode(strtr($payload, ‘-_’, ‘+/’)), true);

if (empty($data["page"]["liked"])) {

//write code here to show a non-liked situational contents
echo “You haven’t liked us yet”;

}
else {

//write code here to show contents for already liked people
echo “Hello Fan, here are your offers.”;

}
?>