Add a Background Music (MP3) to your Blogger

Here's the simplest method (HTML/JavaScript Widget/Gadget) I can find:

<object type="application/x-shockwave-flash" data="https://sites.google.com/site/blogknol/blogknol/dewplayer-multi.swf" width="240" height="20" id="dewplayer" name="dewplayer"> <param name="wmode" value="transparent" /><param name="movie" value="https://sites.google.com/site/blogknol/blogknol/dewplayer-multi.swf" /> <param name="flashvars" value="mp3=http://yourdomain.com/pathtoyour.mp3&autostart=1" /> </object>

You need to replace the path to your mp3 in red with the URL of the actual mp3. You can upload the mp3 file to your shared hosting server. Add these codes to the "Content".

Hope you like it!!!

Read More »

Javascript Mouse Wheel Event Handler

I found several examples online but none of it works 100% as expected. I sort of modified them and came out with the version which works 100% for me on Chrome, IE, Safari and Firefox.

Here it is:

var ff = (navigator.userAgent.indexOf("Firefox") != -1); if (ff) {   mousewheelevent = "DOMMouseScroll"; } else {   mousewheelevent = "mousewheel"; } if (document.attachEvent) {   document.attachEvent("on"+mousewheelevent, catchWheel); } else if (document.addEventListener) {   document.addEventListener(mousewheelevent, catchWheel, false); } function catchWheel(e){   var evt=window.event || e;   var delta=evt.detail? evt.detail : evt.wheelDelta/40;   if (ff) { delta *= -1; } // Firefox gives opposite sign      if (delta > 0) {     // Scroll Up detected     // Handle Scroll Up Event   }   else {     // Scroll Down detected     // Handle Scroll Down Event   } }

Enjoy!

Read More »

The Death of Web Page ...............???

Ever since the social network pages such as Facebook, Twitter and Linked'in came into picture, the demand of conventional web pages are slowing down.

Especially blogs, you'll see less and less new blogs or many blogs are switching over to Facebook pages.

Additionally, with the mobile apps getting more and more popular, web pages take another hit. Web users nowadays prefer Facebook and mobile apps over conventional web pages due to its simplified user interface, easy exposure to friends and very "touching" (AJAX and touchscreen friendly).

Still, I can see the following scenario that will prevent web pages from dying off:

1. Corporate image - no company can afford to live without a proper web page. For web user without any tablet or smartphone, conventional web pages are still a good source of information.



2. Versatility - you can put more info on your web page than other mobile platform and social networks. Such as Facebook, you cannot put much info on a Facebook page. You can also hardly put as many info on a mobile app either. For mobile apps, access to info usually goes through a series of touches before you can get to the content you need. The navigation is a bit more complicated.



3. Exposure - contents in social networks and mobile apps are harder to be found in search engines. If you want your electronic content exposed to public web users, you'll need conventional web pages. Contents in social networks and mobile apps are very limited to their users only.

I could be wrong. The wind may change its direction any time. But I'm confident that web pages still have many years of popularity to come. Imagine those web giants Google, Amazon, Ebay only available on mobile apps, the picture is ugly.

What I can see is expansion rather than contraction. Most organization requires not only a web page nowadays, they also require a presence on social networks and mobile applications. Web developers now need to equip themselves with various skills in order to survive. Due to the current web search capability and incentive to write blogs or online tutorials, keeping up with latest technology or programming skills cannot be easier. Anything you want to learn especially programming, just "Google" for it.

Instead, the current trend is good for web developers. That's only one thing that is holding back the conventional web presence, I discover more and more small businesses and companies are only requesting presence in Facebook and reject conventional web pages. Since Facebook pages can be set up easily, it is a good tool for small organization to save cost which is also something good for them.

In conclusion, the challenge in web development is being taken to a new height, actually closing in to a peak. A web developer is not only required to know the nature of IE5, IE6, IE7, IE8, IE9, IE10, latest Firefox, Chrome, Safari, Opera, Linux based web browsers and all the mobile versions of browsers, they also need to learn to develop apps, developing Facebook pages and applications. It is never this fun for web developers until recently. I think it is time for people like us to hunt for food to grow our hair faster!

Is it the end of web pages? A big NO. Is it a good source of income as a developer? Sadly, a big NO as well as one needs to spend a lot more hours for a fee that is closed to a simple web page 10 years ago. So think twice before you want to become a web developer. :(

P.S.: Don't forgot that mobile apps come in two flavours, iOS and Andoid which requires very different codes and platform. To make the matter worse, you still need to deal with the difference between the screen resolutions especially the difference between the tablet and phone version.

P.S.2.: With the popularity of Facebook, websites are obliged to make it feel "Facebook" which means a lots of "AJAX" toys without refreshing the page.

Read More »

Is It The End of Javascript?

Since almost all of our javascript codes can be replaced by jQuery equivalent, do we still need Javascript?

The answer is yes and no. Yes, if you want to place dynamic HTML content in a controlled page such as Ebay. Ebay doesn't allow the call to an external javascript such as the jQuery library. You have no choice but to switch back to conventional javascript for actions.

For me, I would encourage the use of conventional javascript for beginners. Then switch it to jQuery after learning the basics of dynamic HTML.

There is not much difference between javascript and jQuery in terms of speed. But when it comes to coding, jQuery can save us many lines of codes especially when it comes to traversing down the DOM stucture.

So jQuery or javascript? I think both. First, grasp the basics of javascript and switch to jQuery once you are comfortable with the basics of DOM structure.

Read More »

Pre-fill Text Input Box with Grey Text using Javascript

I don't know since when the pre-filled grey text in the text input box becomes so popular. Here's what I do. I hope these are the simplest codes. Enjoy!


The Javascript & HTML:

<script> function checkText(action) {   if (document.getElementById('myTextID').value == 'Default Text' && action == 'focus') {     document.getElementById('myTextID').value = "";   }   else if (document.getElementById('myTextID').value == '' && action == 'blur') {     document.getElementById('myTextID').value = "Default Text";     document.getElementById('myTextID').style.color = '#bbbbbb';   }   else {     document.getElementById('myTextID').style.color = '#333333';     // You can put more action here such as the AJAX submit codes   } } </script> <input type=text name=textName size=20 maxlength=100 id=myTextID onFocus="checkText('focus')" onBlur="checkText('blur')"> <script> document.getElementById('myTextID').value = 'Default Text'; document.getElementById('myTextID').style.color = '#bbbbbb'; </script>

P.S.: You can change the 'Default Text' to something else.

Read More »

Render Text in PNG Format using PHP GD2 in IIS Environment

The following example won't work if you are running GD version 1 in your PHP server. Some modications are required to make it work.

GD's imagettftext by default cannot set the spacing between characters. If you want to force spacing between characters, you can display each character at a time calculating the spacing your self using a loop.

However, there is one problem setting the spacing: each character's width is different. Therefore, the spacing varies depending on the width of each character.

We use imagettfbbox to measure the width of a character with a given font.

imagettfbbox is troublesome as it is using different requirement to specify the font location in IIS. For Linux environment, you also need to add './' in front of the relative font location. As for IIS, absolute font location is needed. dirname(__FILE__) is used to specify the absolute current script location.

If the font's location is not specified correctly, the error of "Warning: imagettfbbox(): Invalid font filename in ..." will be produced.

Even the location is specified correctly, imagettfbbox gives different result according to the GD version. The following example codes are targeted for GD version 2. If you are using GD version 1, you can modify the codes a bit to make it work.

For imagettfbbox in GD 2 environment, an array of 8 elements are returned. Each data in the array represents a x or y coordinate in the bounding box of a character:

For my case, I use x1 to deduct from x2 to get the width of the character.

Finally, enough said, here are the codes:

<?php // Make sure you have the font arialbd.ttf in the ./font directory // webtrick101.blogspot.com $height = 40; $width = 80; $text = "test"; $font_space = 9; // You can change the font space here $font_size = 19; $angle = 0; $x = 10; $y = $height/2 + 7; $color = 0; // text color black $bgcolor = '#ffff00'; $font = 'fonts/arialbd.ttf'; $font2 = './fonts/arialbd.ttf'; $img = imagecreatetruecolor($width, $height); imagefilledrectangle($img, 0, 0, $width - 1, $height - 1, gd_color($bgcolor)); $textlen = strlen($text); for ($i = 0; $i < $textlen; $i++) {  $charwidthArr = imagettfbbox(12, 0, dirname(__FILE__).'\\'.$font, $text[$i]);  $charwidth = $charwidthArr[2] - $charwidthArr[0];  imagettftext($img, $font_size, $angle, $x, $y, gd_color($color), $font2, $text[$i]);  $x += $charwidth + $font_space; } header("Content-Type: image/png"); imagepng($img); imagedestroy($img); function gd_color($html_color) {      return preg_match('/^#?([\dA-F]{6})$/i', $html_color, $rgb)       ? hexdec($rgb[1]) : false; } ?>

Read More »

Check Out Facebook Friends with Specific Birthday Month FQL

As in my previous post, here's the modified version to list out friends with birthday in the month of May in Facebook.

SELECT name,uid,birthday_date FROM user WHERE uid IN (SELECT uid1 FROM friend WHERE uid2=me()) AND strpos(birthday_date,'05') = 0

You can change the month (highlighted in blue) to some other values.

Read More »

Check Out Facebook Friends with Most Mutual Friend FQL

As in my previous post, here's the modified version to list out friends with most mutual friends in Facebook.

SELECT name,uid,mutual_friend_count FROM user WHERE uid IN (SELECT uid1 FROM friend WHERE uid2=me()) ORDER BY mutual_friend_count DESC

Read More »

Check Out The Seniors Among your Facebook Friends Using FQL

As we know that we are all assigned an ID as we signed up a Facebook account. The account grows bigger as time goes by. We can tell from this little hint who signed up the FB account earlier by comparing the user ID.

Here's the FQL used to generate the list according to the time first joined the social network:

SELECT name,uid FROM user WHERE uid in (SELECT uid1 FROM friend WHERE uid2=me() ORDER BY uid1 ASC)

As in the earlier post, you can try out this FQL query here:

https://developers.facebook.com/tools/explorer

Read More »

Check Out Facebook Friends with Most Friend FQL

Here's a fun FQL to find out who among your FB friends has the most friends:

SELECT name,friend_count,mutual_friend_count FROM user WHERE uid in (SELECT uid1 FROM friend WHERE uid2=me()) ORDER BY friend_count DESC

Just copy and paste from the above query codes and paste it to:

https://developers.facebook.com/tools/explorer

I also added the mutual_friend_count for more fun. You can add as many objects you want to "query" from the table documentation here:

http://developers.facebook.com/docs/reference/fql/user

The Output? Of course, the data in JSON format.

Read More »

jQuery: Dim an Entity and Hide it

Make sure you call the jQuery library before running any jQuery functions. Either library version is fine, Google or jQuery Foundation. The following shows the code to dim the myDiv to 0.1 opacity within 500ms. After that, hide the DIV:

$('#myDiv').fadeTo(500, 0.1, function() {   $('#myDiv').css({visibility: "hidden"}); });

If you straight away animate the opacity to 0 without hiding the DIV, the DIV will stay there although it is not visible nor it is hidden. If the DIV is another layer, it is recommended to hide it or it could cause some interactivity problem as it may cause the links below the DIV not being able to interact with the user.

Read More »