Monday, February 28, 2011

javascript image slideshow

php used to open a directory, select image files in it (even if it contains only images, this check is necessary, otherwise, we'll get '.' and '..' files too. php 'echos' a script which initialises an array of images of these images. the browser just gets the script text from the server, which makes it set the array. 

<?php
if (!$dir=opendir("activities")) echo "could not open dir" ;
$javastr = "<script language=\"javascript\">";
$javastr .= "var d = new Array();";
$num=0;
while ( ($file = readdir($dir)) != false )
{
  if (preg_match ("/.jpg$/i",$file)) {
    $name = preg_replace("/.jpg$/","",$file);
    $javastr .= "d[$num] = new Image();";
    $javastr .= "d[$num].src = 'activities/$file';";
    $javastr .= "d[$num].name = \"$name\"; ";
    $num++;
  }
}
$javastr .= "</script>";
echo $javastr;
?>

a placeholder 'div' defined.

<div id="para">
<div id="activity_div" >
 <div id="slide_caption" ></div>
 <div id="slider"><img name="slide"   /></div>
</div>


In the javascript, a function is iterated to change the slides, passing it the serial number of the slide to be put up. It calls another function which calls itself, till it has finished fading out the current slide, change the image source of the slide, then fading in the slide.   The loop is within the nested function. In javascript, nested function cannot be called within a loop, so, it can't be in the first function.

<script language="javascript" >
 var num=0;
 document.images.slide.src=d[num].src;
 document.getElementById("slide_caption").innerHTML = d[num].name;
 function slideit() {
  var alfa = 0;
  num++;
  if (num==d.length) num=0;
  setalpha(num,alfa);
  setTimeout("slideit()",2500);
 }
 function setalpha(numm, alpha) {
   if (alpha>2) return;
   if (alpha<1) {
     document.getElementById("slider").style.opacity = 0.9-alpha;
   }
   else if (alpha>1.1) {
     document.getElementById("slider").style.opacity = alpha-1;
   }
   else  {
    document.images.slide.src=d[numm].src;
    document.getElementById("slide_caption").innerHTML = d[numm].name;
   }
   alpha += 0.1;
   setTimeout(function() {setalpha(numm,alpha);},50);
 }
 slideit();
</script>

the sample site:
http://midtownpayyanur.orgfree.com/activities.php

Saturday, February 26, 2011

Javascript multiple image fadein

I just got multiple images to fade-in on page load using javascript. I thought, i 'll put down how to do it, since all online helps were bit confusing, at the least.

at first, there's an onLoad event handler for img tag. All tutorials just teach you body tags onLoad event handler.

Then, since we are handling multiple images, you have to pass in the image reference to repeat calls of function to change the alpha of the image. here
setTimeout("function_to_change_alpha("+img+")",interval); 
doesnt work. (for reasons beyond my comprehension about javascript quirks.)
the rightway to do it is, by using closure:
setTimeout(function() {function_to_change_alpha(img);}, interval);

For unknown reasons, i couldn't read the opacity property of the object (image) thus passed.
mOpacity = obj.style.opacity; didn't work.
I had to pass in the current opacity value also, to the function and increment it in the function.

Thus, the final version of the function was:

fadeimage = function (obj, opc) {
 if (opc==undefined) opc=0;
 opc += 0.1;
 obj.style.opacity = opc ;
 if (opc<1){
  setTimeout(function() {fadeimage(obj,opc);},300);
 }
}

I used a php script to dynamically load images in a directory, and assign it's filenames as captions to the images, and assign the above fade-in function to images' onload event.

if (!$dir=opendir("photos")) echo "could not open dir" ;
while ( ($file = readdir($dir)) != false ) {
  if (preg_match ("/.jpg$/i",$file)) {
    $name = $file;
    $name = preg_replace("/.jpg/","",$name);
    $name = preg_replace('/\b(\w)/e', 'strtoupper("$1")', $name);
    
    if ($row ==0) echo "<tr>";
    echo '<td> <img src="photos/'.$file.'" class="fadinimage" onLoad="fadeimage(this);"><br><center>'.$name.'</center></td>';
    $row ++;
    if ($row==2 ) {
      echo "</tr>";
      $row =0;
    }
  }
}

and finally set the alpha of the .fadeimage class to 0 in the css file.

here's the final site:


http://midtownpayyanur.orgfree.com/photos.php

Thursday, February 24, 2011

Paithalmala trip


we had a marvelous trip to Paithalmala, along with Taliparamba Lions club on Feb 19,20. our stay was arranged at Vaithalmala resorts. had a camp fire there on 19th eve.
on 20th we set out to the peak. It was not as tedious, and all members made it easily. we had tapioka biriyani (arranged by the resort) at the pea...k. we were back at resort for lunch, which was a sumptuous kerala meal.
 



Tuesday, February 8, 2011

How to print an online marriage/death/birth certificate in KERALA

The govt of Kerala has made it easy to register the birth/death/marriage events (it takes only few minutes !!) and then obtain a hard copy of the certificate at the convenience, sitting at your home. Its 'information Kerala Mission' makes this possible.


to obtain the cirtificate:

1. visit www.cr.lsgkerala.gov.in
2. click on 'registration search'
3. select the municipality
4. select Birth/Death/Marriage from left side Menu
5. Fill the right side form with details
6. click on 'Search'
7. click on 'View' button
8. click on 'Print'

Wednesday, February 2, 2011

BSNL GPRS settings

had lot of trouble setting up bsnl gprs settings on my android. there are confusing settings given in bsnl and other websites.  but in the end, it turned out to be very simple.

    Connection Name = bnslnet(or anything)
    Data Bearer          = GPRS
    Access point name       = bsnlnet 
    User Name = none
    Password = No

dont enter anything in user name field, but in the password field, enter "No". 

I also installed APNdroid, which lets me switch gprs on and off.




http://nxwiki.blogspot.com/2010/04/bsnl-gprs-settings-for-nokia.html