Wai Yan Lin

Tutorial: How to create a simple drop-down menu jQuery plugin

waiyan — Wed, 11 Aug 2010 02:30:07 +0000

I’ve been using jQuery for quite a long time and simply love the power of it. It helps to speed up my development time like what they say: ‘write less, do more’. And I also used many jQuery plugins depending on my development’s needs. There are many great plugins which will make your life much easier.

In this tutorial, I will share how to write a simple plugin for your drop-down navigation menu.

Basic Structure

Lets take a look at the basic structure of jQuery plugin. (If you wish, you can read the official article for writing a plugin)

(function($) {

$.fn.yourplugin = function() {

this.each(function() {

//your code comes here

});

return this;

};

})(jQuery);

(function($) {

$.fn.yourplugin = function() {

this.each(function() {

//your code comes here

});

return this;

};

})(jQuery);

Options

You might want to include some options to let the users to change easily without touching your plugin’s code.

(function($) {

$.fn.yourplugin = function() {

//set default values of your options

var config = {

‘option1′: value’,

‘option2′: ‘value’

};

var settings = $.extend(config, settings);

this.each(function() {

//default options. you can call your settings like ‘s.option1′ or ‘s.option2′

var s = settings;

//your code comes here

});

return this;

};

})(jQuery);

Now we know what basic plugin structure looks like. Lets create our very simple drop-down menu plugin. First of all, we need to create a navigation menu before we move on to the plugin. Here’s how it looks like:

Menu Item 1

Menu Item 1.1

Menu Item 1.1.1

Menu Item 1.1.1.1

Menu Item 1.1.2

Menu Item 1.2

Menu Item 1.3

Menu Item 2 Is Long

Menu Item 2.1

Menu Item 3

Menu Item 4

CSS

Then, we need to set some css rules for our menu.

ul#nav{

list-style: none;

margin: 0;

padding: 0;

position: relative;

}

ul#nav li{

float:left;

background-color: #0088AA;

position:relative;

display:block;

margin-right:1px;

font-size:14px;

}

ul#nav li a{

color:#FFF;

text-decoration: none;

padding:5px;

display:block;

position:relative;

width:100%;

}

ul#nav ul{

margin:0;

padding:0;

position:absolute;

width:100%;

}

ul#nav li li{

position:relative;

background-color:#0077AA;

display:block;

margin:0;

border-top:solid 1px #FFF;

width:100%;

font-size:11px;

}

ul#nav ul ul{

position:absolute;

left:100%;

top:0;

margin:0 0 0 1px;

width:100%;

}

Now, we will create the plugin which will use jQuery slideDown/Up effect for drop-down animation and giving one option for users to change the animation speed.

(function($) {

$.fn.jDropDown = function(settings) {

//option for speed with default value of 500 milliseconds

var config = {

‘speed’: ’500′

};

var settings = $.extend(config, settings);

this.each(function() {

var s = settings;

var mainNav = this;

//set css to all second ul to display none

$(mainNav).find(‘ul’).css({‘display’:'none’});

//hover event for each main li

$(mainNav).find(‘li’).hover(

function(){

$(this).find(‘ul:first’).slideDown(s.speed);

},

function(){

$(this).find(‘ul:first’).slideUp(s.speed);

}

);

});

return this;

};

})(jQuery);

This is all we have to do. Now, you can use this plugin by putting the following code in your html page between and

It is not too difficult to create your own jQuery plugin. I hope this tutorial will help you to write some cool plugins. If you have any doubt, feel free to write in the comment section below.

Demo

Tutorial: Easiest way to display random image using PHP

waiyan — Fri, 30 Jul 2010 08:01:59 +0000

First of all, this tutorial is mainly for the beginners who start learning programming especially PHP. If you are building some website and sometimes, you might need to display a random image per page load. It that case, you could use this method. There might be some other ways to achieve this but I find that this is the easiest way at least, for me.

$iArr = array(‘image1.jpg’, ‘image2.jpg’, ‘image3.jpg’);

$no = sizeof($iArr)-1;

$random = mt_rand(0, $no);

$path = ‘images/’;

$ranImg = $iArr[$random];

$img = $path.$ranImg;

echo $img;

echo ‘’;

$iArr = array(‘image1.jpg’, ‘image2.jpg’, ‘image3.jpg’); //create an array of image

$no = sizeof($iArr)-1;

$random = mt_rand(0, $no); //get random number between 0 and array size

$path = ‘images/’; //this is the path to your images

$ranImg = $iArr[$random]; //get random image from array

$img = $path.$ranImg; //the full image path e.g. images/image1.jpg

echo ‘’; //display the random image

?>

I believe the code is quite simple and self explained. Please feel free to share your thoughts in comments.

New Look

waiyan — Fri, 25 Jun 2010 08:30:40 +0000

It’s been very long time I never write a single blog post. It’s needless to say that I was busy with my both work and personal stuff for the past few month. But in that time, I used some of my tiny free time to re-design my online portfolio website as well as this blog template.

I decided to go for a minimalist design for my both portfolio site and blog. And I choose dark color which is my favorite as my main color scheme. My main objective is that it should be simple, clean, minimal usage of images but still user friendly and faster to load the content. I use the same basic template design for my blog and portfolio website to make it look consistent. Have a look and tell me what do you think.

Free Premium WordPress Theme: Featured

waiyan — Tue, 27 Oct 2009 03:05:33 +0000

I am giving away another free premium wordpress theme named “Featured”. This is magazine style theme with easily customizable featured post gallery on home page. Visit here to see live demo and if you like this theme, download here.

Theme Features

Widgetized sidebar
Featured Post Gallery on Home Page
Compatible with all major browsers (Firefox, IE6/7/8, Safari)
Theme Options Admin Panel ( to manage easily your theme settings )
Create thumbnail automatically using timthumb.php
Fixed Layout
Tested With WordPress 2.8
Valid XHTML & CSS

demo | download

Free WordPress Theme: CodeF

waiyan — Mon, 05 Oct 2009 07:43:34 +0000

This is a simple and clean 2 column wordpress theme releasing free for everyone. This theme is most suitable for those who want a simple design for personal blogging.

WordPress version: 2.8
Column: 2
Widget Ready: Yes
Layout: Fixed
Browsers: Firefox 3+, IE6/7/8, Safari
Valid XHTML/CSS: Yes

Demo | Download

jQuery: Flying Text With Fade Effect

waiyan — Tue, 16 Dec 2008 17:01:00 +0000

With this great javascript framework, jQuery, you can create some flash like effects. In this post, I will show how to create very simple flying and fading text effect using jQuery. Here is live demo.

javascript:

$(‘.container .flying-text’).css({opacity:0}); //set all text opacity to 0

$(‘.container .active-text’).animate({opacity:1, marginLeft: “350px”}, 4000); //animate first text

var int = setInterval(changeText, 5000); // call changeText function every 5 seconds

function changeText(){

var $activeText = $(“.container .active-text”); //get current text

var $nextText = $activeText.next(); //get next text

if($activeText.next().length == 0) $nextText = $(‘.container .flying-text:first’); //if it is last text, loop back to first text

$activeText.animate({opacity:0}, 1000); //set opacity 0 to animated text

$activeText.animate({marginLeft: “-100px”}); //set animated text position to default

//animate next text

$nextText.css({opacity: 0}).addClass(‘active-text’).animate({opacity:1, marginLeft: “350px”}, 4000, function(){

$activeText.removeClass(‘active-text’);

});

}

HTML:

I believe

I can

Fly

CSS:

body{

background-color:#000;

}

.container{

background-color:#000;

width:500px;

margin:0 auto;

color:#FFF;

overflow:hidden;

}

.flying-text{

margin-left:-100px;

}

Check this live demo.

Run Linux Live CDs Inside Windows With MobaLiveCD

waiyan — Thu, 25 Sep 2008 17:21:14 +0000

Read this post in:
[ English | Burmese ]

If you are thinking of trying Linux OS on your PC, MobaLiveCD will make it easier for you. It is a free tool that allows you to run your favorite Linux Live CD inside your Windows without installing or rebooting your PC. It is very light (1.6MB) and you can run it from your thumb drive.
It is simple enough that you just get any ISO image of your favorite Live CD, run MobaLiveCD and point to ISO image. But you are running two OS at the same time and don’t expect it will be fast. I tested with Ubuntu 8.04.1 and it took more than 5 mins to load. If you are testing it on Vista, don’t forget to run MobaLiveCD as an Administrator (Right Click and Run as Administrator) to make it work.

(via – Lifehacker)

တကယ္လို႔ PC ေပၚမွာ Linux OS တစ္ခုကို အစမ္းသေဘာအေနနဲ႔ သံုးၾကည့္ခ်င္တယ္ဆိုရင္ေတာ့ MobaLiveCD ဆိုတာနဲ႔ အလြယ္တကူပဲ စမ္းႏိုင္ပါတယ္။ သူကေတာ့ PC ကို reboot သို႔မဟုတ္ install လုပ္စရာမလိုပဲနဲ႔ ႀကိဳက္ရာ Linux Live CD တစ္ခုကို ခ်က္ခ်င္းေကာက္ run ေပးပါတယ္။ size အေနနဲ႔လဲ အေတာ္ေပါ့ပါးၿပီးေတာ့ thumb drive ထဲကေနလဲ run လို႔ရပါတယ္။
လုပ္ရမွာကလဲ လြယ္ပါတယ္။ ႀကိဳက္တဲ့ Linux Live CD တစ္ခုကို download လုပ္လိုက္ေပါ့။ ၿပီးရင္ MobaLiveCD ကိုဖြင့္ၿပီး Live CD ရဲ႕ ISO image ကို point လုပ္ေပးလိုက္ရံုပါပဲ။ ဒါေပမယ့္ OS ႏွစ္ခုကို တစ္ၿပိဳင္ထဲ run ေနတာဆိုေတာ့ သံုးရတာ ျမန္မွာေတာ့ မဟုတ္ပါဘူး။ ကၽြန္ေတာ္ Ubuntu 8.04.1 နဲ႔စမ္းၾကည့္တာေတာ့ load လုပ္ေနတာ ၅ မိနစ္မကၾကာပါတယ္။ Vista ေပၚမွာစမ္းေနတာဆိုရင္ေတာ့ MobaLiveCD ကို run တဲ့အခါမွာ Administrator အေနနဲ႔ (Right Click and run as Administrator) run ဖို႔ကိုမေမ့လိုက္နဲ႔ဦး။

(via – Lifehacker)

FormatFactory: Another Media Converter

waiyan — Thu, 25 Sep 2008 16:34:52 +0000

Read this post in:
[ English | Burmese ]

FormatFactory is a free media converter as well as a DVD ripper. It supports a large number of file formats that can be converted. You can convert all popular audio, video, picture and even mobile devices format such as iPhone or PSP. It allows you to zoom, rotate or flip the image before you convert these. The interface is very simple and straight forward. It has 4 default skins that you can choose and also supports 30 different languages. FormatFactory is only for Windows.

FormatFactory ကို media converter အေနနဲ႔သံုးႏိုင္သလို DVD ripping tool အေနနဲ႔ သံုးမယ္ဆိုရင္လဲ ရပါတယ္။ သူ႕မွာ file format အေတာ္မ်ားမ်ားကို ေျပာင္းႏိုင္ေအာင္ လုပ္ေပးထားပါတယ္။ လူသံုးမ်ားတဲ့ audio, video နဲ႔ picture ဖိုင္အမ်ိဳးအစားေတြသာမက iPhone ဒါမွမဟုတ္ PSP စတဲ့ mobile device ေတြမွာသံုးတဲ့ ဖိုင္အမ်ိဳးအစားေတြကိုပါ ေျပာင္းလို႔ရပါတယ္။ ရုပ္ပံုေတြကို ေျပာင္းတဲ့အခါမွာလဲ zoom တို႔ rotate ဒါမွဟုတ္ flip တို႔ကိုလည္း လုပ္လို႔ရပါတယ္။ သူ႕ရဲ႕ inteface ကအေတာ္ေလးကို ရိုးရွင္းၿပီး အသံုးျပဳရတာလဲ လြယ္ကူပါတယ္။ Skin ၄ခုကုိေရြးခ်ယ္သံုးႏိုင္တဲ့အျပင္ ဘာသာစကားေပါင္း ၃၀ ကိုလည္း ေျပာင္းသံုးႏိုင္ပါတယ္။ ဒါေပမယ့္ ထံုးစံအတုိင္း ကၽြန္ေတာ္တို႔ ျမန္မာဘာသာေတာ့ မပါဘူးေပါ့ဗ်ာ။

Start++: Make Vista Start Menu More Useful

waiyan — Wed, 17 Sep 2008 17:13:28 +0000

Read this post in:
[ English | Burmese ]

Start++ adds a number of useful functions to Windows Vista start menu. By using this, web search can be done in your start menu. If you want to search in Google, just type g (space) followed by your search input and it will show the Google search result. Google, Yahoo and Wikipedia are supported by default. And if you want your own function, you can set up new custom keywords.
Another useful function is that if you need to run a command with admin privileges, type ‘sudo’ followed by your command and it will run that with admin privileges. It also has a few list of plug-ins to extend it.

(via – downloadsquad)

Start++ ဆိုတာေလးက Windows Vista ရဲ႕ start menu ကိုပိုၿပီး အသံုး၀င္ႏိုင္တဲ့ function ေလးေတြထည့္ေပးတဲ့ free application တစ္ခုျဖစ္ပါတယ္။ အဲဒါကိုသံုးၿပီး web search ေတြကို start menu ထဲမွာပဲ ရွာႏိုင္ပါတယ္။ ဥပမာ – Google မွာတစ္ခုခုရွာခ်င္ရင္ g နဲ႔ space ရိုက္ၿပီး အဲဒီေနာက္မွာ ရွာခ်င္တဲ့ဟာ ရိုက္ထည့္လိုက္။ search result ေတြ start menu ထဲမွာ ေပၚလာပါလိမ့္မယ္။ Google, Yahoo နဲ႔ Wikipedia စတာေတြက အစတည္းက default ပါၿပီးသားပါ။ တျခားကုိယ္ႀကိဳက္တာ ထပ္ထည့္ခ်င္ရင္လဲ ကိုယ္ပိုင္ custom keyword ေတြထပ္ေပးလို႔ရပါတယ္။
ေနာက္ထပ္ အသံုး၀င္ႏိုင္တာတစ္ခုကေတာ့ admin privileges လိုတဲ့ command ေတြ run ခ်င္ရင္ ‘sudo’ ဆိုတဲ့ဟာကိုရိုက္ၿပီး ေနာက္ကေန ကိုယ္ရိုက္ခ်င္တဲ့ command ရိုက္လိုက္တာနဲ႔ အဲဒီ command ကို admin privileges နဲ႔ run ပါတယ္။ ေနာက္ၿပီး plug-ins ေတြကိုလဲ ထပ္ထည့္လို႔ရပါေသးတယ္တဲ့ဗ်။

(via – downloadsquad)

VLC media player 0.9.2 is Released

waiyan — Tue, 16 Sep 2008 17:27:29 +0000

Read this post in:
[ English | Burmese ]

The latest version of popular open source media player has been released a few days ago. This new version, VLC 0.9.2, adds a new user interface which looks better.
Many new inputs and codecs are supported in this version, and one big improvement is that we can see the controls when we are watching video in full screen mode. It has live search feature in the playlist and also support YouTube, Google Video or Dailymotion videos playback by just entering their URLs.

လူသံုးမ်ားၿပီး open source media player တစ္ခုျဖစ္တဲ့ VLC media player ကသူ႔ရဲ႕ေနာက္ဆံုး version အသစ္ကို ထုတ္လိုက္ပါတယ္။ အဲဒီ VLC 0.9.2 မွာပိုေကာင္းတဲ့ interface အသစ္ကိုျမင္ရမွာျဖစ္ပါတယ္။
ေနာက္ၿပီး inputs ေတြ codecs အသစ္ေတြကိုလည္း ဒီ version မွာ support လုပ္လာပါတယ္။ ကၽြန္ေတာ္ႀကိဳက္တာတစ္ခုကေတာ့ full screen mode မွာ controls ေတြထည့္ေပးထားတာပါ။ playlist မွာလဲ live search ရွာလို႔ရလာပါတယ္။ ၿပီးေတာ့ YouTube, Google Video ဒါမွဟုတ္ Dailymotion စတဲ့ site ေတြက video ေတြကို သူတို႔ URL ထည့္ေပးၿပီး တိုက္ရိုက္ၾကည့္လို႔ရပါတယ္။