Ehsanul Haque

Welcome to my personal site & blog

31 December
2Comments

Inanis Glass theme for Wordpress: Set the clock to 24hr format

Posted by Ehsan in Codes, Resources

I have installed Inanis Glass theme (v. 1.2) for my Wordpress blog and it is really an amazing theme. It was very easy to install (unlike other themes where something is always missing or not fitting). I made small changes here and there to make it work the way I want. For example, it showed a message on the pages or articles where I turned off the comments that the comments are off etc. I modified it to remove that. Made few more CSS changes.

When I visited the author’s website I found few requests to show the clock in 24hrs format. When I looked at the javascript (functions.js) for the theme I found that the “clock” function is compressed by http://javascriptcompressor.com/. When I visited that site to see if they have any decompressor then I found a contribution on their forum which unpacks/decompresses the javascript – read about it on their forum http://javascriptcompressor.com/forums/p/9/42.aspx – and decompressed the “clock” function.

Decompressed/unpacked function looks like:

function init() {
   timeDisplay=document.createTextNode("");
   document.getElementById("clockhr").appendChild(timeDisplay);
   timeDisplay1=document.createTextNode("");
   document.getElementById("clockmin").appendChild(timeDisplay1);
   timeDisplay2=document.createTextNode("");
   document.getElementById("clockpart").appendChild(timeDisplay2)
}
function updateClock() {
   var currentTime=new Date();
   var currentHours=currentTime.getHours();
   var currentMinutes=currentTime.getMinutes();
   currentMinutes=(currentMinutes<10?"0":"")+currentMinutes;
   var timeOfDay=(currentHours<12)?"AM":"PM";
   currentHours=(currentHours>12)?currentHours-12:currentHours;
   currentHours=(currentHours===0)?12:currentHours;
   document.getElementById("clockhr").firstChild.nodeValue=currentHours;
   document.getElementById("clockmin").firstChild.nodeValue=currentMinutes;
   document.getElementById("clockpart").firstChild.nodeValue=timeOfDay
}

Basically the Javascript function used to find the current time – getHours() – returns the hour in 24hrs format. But to display the clock in 12hrs format the author has done some math. So if anyone wants to display 24hrs format clock comment out line number 14, 15, 16 and 19. To replace the function you can use the site above to re-compress the function or comment the existing function in functions.js file (clock function) and paste this decompressed version in the file.

Note: As I understand javascriptcompressor.com is used to pack/compress your javascript, not to encrypt it or hide it by any means. It is compressed so that it is either unreadable or smaller in size.

Bookmark & Share It!
[del.icio.us] [Digg] [Facebook] [Feed Me Links] [Google] [LinkedIn] [StumbleUpon] [Technorati] [Twitter] More »
Powered by Bookmarkify™
Tags: , , , , , , , , , , , , , , , ,
31 August
1Comment

Image Menu using Moo Tools

Posted by Ehsan in Resources

It is called Image Menu and uses Moo Tools. I found this example on AjaxRain.com which is a vault for Ajax, Javascript and DHTML examples. The demo is located at PhatFusion.net and it also lists the features, usages and options.

After I downloaded the Javascript and CSS I changed the menu of my own site. With the new funky looking menu, I’ve decided to change the whole theme of the site and now it looks like this. I am not sure how long this will last, as I’ve tried many funky stuff before but eventually I turn back to my old and simple looking site. Try it yourself and have fun.

Bookmark & Share It!
[del.icio.us] [Digg] [Facebook] [Feed Me Links] [Google] [LinkedIn] [StumbleUpon] [Technorati] [Twitter] More »
Powered by Bookmarkify™
Tags: , , , , , , , , , , , , , ,
20 December
14Comments

Javascript: Select Multiple Dropdown Items

Posted by Ehsan in Codes

If you would like to have a multiple select dropdown and want to use the selection in a specified format, then here is the solution. Sometimes you may need to create a query string value or fill in a textbox or textarea with the selected values. Say for example you have a dropdown list where you can select multiple items. Upon selecting each option you want to fill in a textarea with the selected value.

Example:


HTML Part:

<form method=POST name='testing'>
  <select name='testsel' multiple onchange='showselection()'>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
  </select>
  <textarea id="txtEditions"></textarea>
</form>

Javascript Part:

<script language='javascript'>
  function showselection()
  {
    var frm = document.testing
    var opt = frm.testsel

    var numofoptions = opt.length
    var selValue = new Array

    var j = 0
    for (i=0; i<numofoptions; i++)
    {
      if (opt[i].selected === true)
      {
        selValue[j] = opt[i].value
        j++
      }
    }

    selValue = selValue.join("+")

    document.getElementById("txtEditions").innerHTML = selValue
  }
</script>
Bookmark & Share It!
[del.icio.us] [Digg] [Facebook] [Feed Me Links] [Google] [LinkedIn] [StumbleUpon] [Technorati] [Twitter] More »
Powered by Bookmarkify™
Tags: , , , , , , , , , , , , , ,
15 May
3Comments

Overlay Images with LightBox JS v2.0

Posted by Ehsan in Interest, Playground, Resources

Just found a nice JavaScript that helps you display any image overlayed on your current page. LightBox v2.0 (developed by Lokesh Dhakar) lets you click on a thumbnail image to show the bigger image with cool visual effect. It disables the parent window, shows a preloader while loading the image and then shows with a nice effect by resizing the area (in which image will be shown) to the image size.


Example of LightBox JS v2.0

The implementation process is very simple and works fine with both IE and FireFox. Download package comes with four JS files, one CSS and images you will need.

Here on my site, click on “enlarge image” link right below my name on top of the page to see my implementation of the JS. So far works nice. Need to test it with the other browsers though.

~~HaVe FuN~~

Bookmark & Share It!
[del.icio.us] [Digg] [Facebook] [Feed Me Links] [Google] [LinkedIn] [StumbleUpon] [Technorati] [Twitter] More »
Powered by Bookmarkify™
Tags: , , , ,
Subscribe to RSS
Powered by WordPress
© 2010 Ehsanul Haque | Designed by Get a Custom Design