Tuesday 17 December 2013

Simple Email Validation

If you are sure that the users of your web page are using HTML5 compatible browsers you can use the following neater example for the same purpose:
<!DOCTYPE html>

<html>
    <body>
        <form>
            <input type="email" pattern="^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$">
            <input type="submit">
        </form>
    </body>
</html>

Scale on Hover with Webkit Transition

This only works on webkit based browsers (Chrome, Safari). It degrades gracefully for non-webkit browsers (no change is seen, rather than an unanimated size bump).
#blah { -webkit-transition: all .2s ease-in-out; }
#blah:hover { -webkit-transform: scale(1.1); }

Monday 16 December 2013

CSS body background image fixed to full screen even when zooming in/out

Hi Guyz.. I solve this problem using : background-size:cover
That is it full set of css is
body { 
background: url('images/body-bg.jpg') no-repeat center center fixed;

-moz-background-size: cover;

-webkit-background-size: cover;

-o-background-size: cover;

background-size: cover;

} 
Latest browsers support the default property.

Tuesday 10 December 2013

Special links: phone calls, sms, e-mails, iPhone and Android apps

Hidayt Rahman
Hidayt Rahman 
Everyone knows to include a link into a page, but what I want to discuss today is how you can include some special links.

Phone calls

This is something cool and with the explosion of smart phones with which you can easily browse this is definitely to consider having on the mobile version of your website. Such a link will initiate a call on your mobile to a specified number. But here the things are a little bit more complicated, requiring different links for different phones. You can easily find how to create such a link consulting the WURFL database and looking at the wml_make_phone_call_stringproperty in the wml_ui category.
Basically this is done as follows:
callto:[phone_number]
mainly appropriate for iPhone and Nokia phones
wtai://wp/mc;[phone_number]
mainly appropriate for Android phones
tel:[phone_number]
reported to work on most of the newest devices. If you want to have only one type of URI, use this one.
In the phone number you can use +(plus) sign for international numbers. What’s also interesting to know is that this can even work on a desktop if you have an application like Skype installed. So maybe it’s a good idea to have this on the classic/desktop website too.
Later update from comments. Another interesting phone link will be how to call ateleconferencing phone number. There you call a phone number and then you enter your conference code, usually followed by hash(#). To do this from a link you will need a pause after the phone number and this is done with , (comma), usually entered by a long press onstar(*). I tested this on Android and iOS and it works fine, but you usually need two pauses (,) between the phone number and conference code. Same way you can dial an extension line.

Examples

callto:12345678
call 12345678 on iPhone and Nokia
wtai://wp/mc;12345678
call 12345678 on Android
wtai://wp/mc;+123456789
call an international number on Android
tel:12345678
call 12345678 on most of the newer devices
tel:12345678,,100200#
join 100200 conference code on the conference line 12345678 on most of the newer devices
tel:+12345678,,100200#
join 100200 conference code on the international conference line +12345678 on most of the newer devices

SMS

From a web page you can open the SMS sending application on the user phone with a link like below:
sms:<phone_number>[,<phone-number>]*[?body=<message_body>]
The link contains a comma separated list of phone numbers and an optional message body. The phone numbers are specified as in the call links. Detailed information you can find in theURI Scheme for GSM Short Message Service (draft)

Examples

sms:12345678
SMS to 12345678
sms:12345678?body=Hello my friend
SMS “Hello my friend” to 12345678
sms:123456789,+123456789?body=Hello
SMS to multiple phone numbers, including an international one
There is also an URI version for MMS starting with mms:. On some (mobile) browsers (devices) it is also reported to work smsto: and mmsto:, although I would recommend the first version.

iPhone/iPod/iTunes

When developing a website iPhone is definitely to be considered. You can include links to items in the iTunes store, such as movies, music or application. Apple provided for your convenience a web interface to create such links: ITMS Link Maker. Just specify the country, the search keyowrds and what type of iTunes items. You will get a list of items and when you click one you will get the link. You can even get the link for an author. These links will both work on the desktop and iPhone.

Android market

Android is gaining market share as we speak. Nexus One was just released and in my opinion will beat iPhone. As you include links to iTunes, you can include links to applications in Android Market.
market://search?q=<query>
The query can include keywords or can identify a specific application usingq=pname:your.package.name and then the link will be market://search?q=pname:your.package.name.

Ovi Store

Nokia created a new fresh application repository for their latest phone – Ovi Store. If you want to include a link to an application, search for it and then copy the link that it will look likehttp://store.ovi.com/content/XXXXX?clickSource=publisher+channel. Just remove the last part and include http://store.ovi.com/content/21309 into your page, where XXXXX is the application Id. You can also include a link to a publisher’s page containing a summary of their application. The link is found on any of the publisher’s application (see by Publisher Name) and it will look like http://store.ovi.com/publisher/Publisher+Name

Windows Marketplace

We cannot exclude Microsoft from the list with their Windows Phone Marketplace. Same steps to find out the application link: search it, copy the link location and strip the last part. The link will look like http://marketplace.windowsphone.com/details.aspx?appId=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx, where xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx is the application ID, clearly resembling a GUID. Here publishers don’t have a personal page.

BlackBerry App World

For all those BlackBerry fans, there is BlackBerry App World. Again same process: search for the application and copy the link location of the application icon. The format ishttp://appworld.blackberry.com/webstore/content/XXXXX, where XXXXX is the application ID. The app authors have a page here with a summary of their apps. See the by Author link under each application. The link will be likehttp://appworld.blackberry.com/webstore/vendor/XXXX, where XXXX is the author ID.

Geolocation

Nowadays you cannot even imagine a world without maps and GPS. More and more contact pages include a map too. Nowadays smart phones usually include a map application and opening a map with your location in it would be quite nice for the user
geopoint:latitude,longitude
As simple as this and you know where to go.

Messengers

From a web site you can also interact with the messenger applications installed on your machine.

Yahoo Messenger

ymsgr:ACTION?USERNAME&m=YOUR+MESSAGE
The possible actions are addfriendsendIM and call. The message can, of course, be specified only for sendIM action. The USERNAME should be your.account@yahoo.com oryour.account@hotmail.com.

Example: ymsgr:sendIM?beradrian&m=Hello – Say Hello in Yahoo Messenger.

Windows Messenger

msnim:ACTION?contact=USERNAME
The possible actions are chatadd (to add a contact), voice (for voice call) and video (for video call). The USERNAME should be your.account@yahoo.com or your.account@hotmail.com.

Example: msnim:chat?contact=beradrian@yahoo.com – Chat with me in Windows Messenger.

Google Talk

gtalk:ACTION?jid=USERNAME&from_jid=YOURNAME
The possible actions are chat and call (for voice call). The USERNAME and YOURNAME should be your.account@gmail.com. The parameter from_jid is optional and it should be specified only if you use multiple accounts.

Example: gtalk:chat?jid=beradrian@yahoo.com – Chat with me in Google Talk.

Skype

skype:USERNAME?ACTION
The possible actions are chatadd (to add a contact), userinfo (to view a profile) andvoicemail (to leave a voicemail). The USERNAME is your Skype ID.

Example: skype:chat?jid=beradrian – Chat with me in Skype.
There is also AIM, IRC and some others but we will not get into any other details for the moment.

Mail

It’s pretty easy to include a link for sending an email into your webpage. Basically it’s replacing the http scheme with mailto. So the link will look something like:
mailto:<email>[,<email>]*[?<arguments>]
Such a link will practically open the system application for sending emails (like Outlook or Thunderbird) and the message will be prepopulated with some values. As you can notice you can use multiple email addresses (To) separated by comma.
The possible arguments to be included are:
subject
the message Subject field
cc
the message CC field as a comma separated list of addresses
bcc
the message BCC field as a comma separated list of addresses
body
the message body. If you include a new line in your message you should include %0A.

Examples

mailto:nobody@wordpress.com
the simplest mailto link
mailto:nobody@wordpress.com,no.one@wordpress.com
multiple email addresses
“mailto:nobody@wordpress.com?subject=Testing mailto
specify a subject
“mailto:nobody@wordpress.com?subject=Testing mailto&cc=no.one@wrodpress.com
specify a subject and CC
Just as a side note in the end, it’s better not to rely on this kind of mechanism for handling email on your website. A contact form that sends an email could be a better idea.
Happy linking!!!

Monday 2 December 2013

Alternate table row color using CSS

There are two syntax of change Alternate table row color using CSS...

I am using a table with alternate row color with this.
CSS:
tr.d0 td {
    background-color: #CC9999; color: black;
}
tr.d1 td {
    background-color: #9999CC; color: black;
}
HTML:
<table>
<tr class="d0"><td>One</td><td>one</td></tr>
<tr class="d1"><td>Two</td><td>two</td></tr>
</table>
Syntax 2
02.<style type="text/css">
03./* technique 1 */
04.tbody tr:nth-child(odd){ background-color:#ccc; }
05./* technique 2 */
06.TBODY TR.odd { background-color:#78a5d1; }
07.</style>
08. 
09.<table>
10.<tbody>
11.<tr><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
12.<tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
13.<tr><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
14.<tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
15.<tr><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
16.</tbody>
17.</table>
18. 
19.<table>
20.<tbody>
21.<tr class="odd"><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
22.<tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
23.<tr class="odd"><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
24.<tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
25.<tr class="odd"><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
26.</tbody>
27.</table>
Created By: Hidayt Rahman