post

Embed iPhone Friendly Videos on your Website

It is pretty easy to embed an iPhone-optimized video in any website you are designing. Which can be a nice flourish to welcome the growing hordes of iPhone users who might be visiting your site soon.

All video format is not playing in iPhone or iPad. The most commonly used format is m4v and it is lightweight too. You have to convert your video into m4v format and then have to write a little chunk of html5, yes HTML5 code.

The code snippet is:

Don’t forget to start your html with . You also an use a poster using poster attribute and autoload option. Try html5 video in w3schools.com

Now, how you can convert into m4v:

  • Play your video in QuickTime Player
  • Go to File > Export for web

  • Select your choice

  • Then you will get your required m4v file

It’s interesting, isn’t it? This video will also play in iPad.

post

Create multi level drop down menu in css

This is pretty simple to create a multi level drop down menu in css. But it’s true that it doesn’t have such flexibility that javascript have. And also the width of drop down section needs to be fixed, not flexible. Now a days css drop down menu is not widely used, but it is very useful to get clear concept of css inheritance.

Let’s look at the code:

Html chunks:

[html]

[/html]

CSS Chunks:
[css]
*{margin: 0; padding: 0;}
#menu{width:484px; margin: 0 auto; background-color: #000; height:25px;}
#menu ul{list-style-type:none;}
#menu ul li{float: left; position: relative;}
#menu ul li:hover{background-color: #999;}
#menu ul li a{color: #fff; padding: 0 30px; line-height:25px; font-size:11px; font-family:arial; display: block; text-decoration:none;}
#menu ul li a:hover{background-color: #999;}
#menu ul li ul li{float: none; position: relative;}
#menu ul li ul{position: absolute; top:25px; left:0; display: none; background-color: #000; width:150px;}
#menu ul li:hover > ul{display: block;}
#menu ul li ul li a{white-space: nowrap; line-height:25px;}
#menu ul li ul li ul{position: absolute; top:0; left:145px; display: none; background-color: #000; width:150px;}
[/css]

Pretty simple, huh? Why don’t you look at the demo?

Wanna Download?

post

Change input type text to password type onclick – JQuery

Sometimes we need to change input type text to password type when user click on it. It should like more attractive. This is very simple. Here is the code for jQuery, just set a class name e.g. pw for that input field: