RSS

Monthly Archives: April 2009

Highlighting table rows

It would be great one day when we could finally highlight table rows with one line of CSS code like this:

table tr:hover td { background:#ccc; }

But unfortunately IE6 only supports :hover pseudo-class on <a> elements. And my testing showed that Opera and Firefox had weird problems with this code on TDs with borders. A way round this is to add a bit of JavaScript instead of pure CSS solution.

Let’s say there are several tables on the page with the same highlight behavior. Table structure doesn’t matter so I chose the very simple one:

<table>
   <tr>
      <td>row 1 column 1</td>
      <td>row 1 column 2</td>
      <td>row 1 column 3</td>
   </tr>
   <tr>
      <td>row 2 column 1</td>
      <td>row 2 column 2</td>
      <td>row 2 column 3</td>
   </tr>
</table>

On page load the script goes through all the TRs and apply “onhover” event handler to each one. To add event handlers I use a great cross-browser function “addEvent” by Peter-Paul Koch. It’s code looks like this:

function addEvent(obj, evType, fn){ 
 	if (obj.addEventListener){ 
   		obj.addEventListener(evType, fn, false); 
   		return true; 
 	} else if (obj.attachEvent){ 
   		var r = obj.attachEvent("on"+evType, fn); 
   		return r; 
 	} else { 
   		return false; 
 	} 
}

And bellow is an example of how to use it:

addEvent(window, 'load', rowHighlightSet);

The function “rowHighlightSet” will be execuled each time you move the mouse over the TR. It goes through all the tables on the page and through each TR of each table and assign “rowHighlight” function as onmouseover and onmouseout event handler. The way I am doing this is the following:

var rowHighlightSet = function(){
 var tables = document.getElementsByTagName('table');
	
 for(var i=0,trs; i<tables.length;i++){
    var trs = tables&#91;i&#93;.getElementsByTagName('tr');
    for(var j=0; j<trs.length;j++){
      trs&#91;j&#93;.onmouseover = trs&#91;j&#93;.onmouseout = rowHighlight;
    }
 }
}
&#91;/sourcecode&#93;

<p>To change the background colour function "rowHighlight" adds "hovered" class to the row. If there are already classes applied to this rows then you should remove (or replace) only the value of the highlighting class name (and don't forget about spaces between class names).</p>


var rowHighlight = function(){
   if(this.className!='hovered') 
      this.className='hovered'; 
   else 
      this.className='';
}

And the last bit to add is definition of hovered class in the CSS. I am using a nice colour for my TRs 🙂

.hovered td {background:#d2ebfb;}

Nice and easy!

Link to the source file

 
2 Comments

Posted by on April 27, 2009 in CSS, HTML, JavaScript

 

Tags: ,

Dynamically create radio buttons in JavaScript

The initial task sounds trivial but when I tried to test the following code in IE the radio button seemed to be totally uncheckable.

var radButton = document.createElement("input");
radButton.type = "radio";
radButton.name = "radSelect0";
someelement.appendChild(radButton);

It turned out that there is a problem in IE and the name and selected properties can’t be set dynamically.

The only way round is to create radio button using innerHTML property.

function createRadioButton(elementname, ifchecked) {
   var radiobutton = '<input type= "radio" name="' + elementname + "'";
   if ( ifchecked) radiobutton +=  ' checked="checked"';
   radiobutton += '/>';

   document.createElement('p').innerHTML = radiobutton;
}

Or it’s also possible to combine both ways:

function createRadioButton(elementname, ifchecked) {
   var radioButton; 
   var ifChecked = false; 
   try { 
      radioButton = '
      if ( ifChecked ) { radioButton += ' checked="checked"'; } 
      radioButton += '/>'; 
      radioButton = document.createElement(radioButton); 
   } catch( err ) { 
      radioButton = document.createElement('input'); 
      radioButton.setAttribute('type', 'radio'); 
      radioButton.setAttribute('name', "radSelect0"); 
      if ( ifChecked ) { radioButton.setAttribute('checked', 'checked'); } 
   } 
   document.createElement('p').innerHTML = radioButton;
}

Hope it helps to save someone’s time.

 
2 Comments

Posted by on April 26, 2009 in HTML, JavaScript

 

Tags: ,

Moving images continuously

Yesterday I got a task to create a script that would make images move continuously. Of course the easiest way is to use flash for such sort of animation. But the client insisted on JavaScript.

First we need to prepare HTML – 2 dives with a few images inside.

<div id="picsholder">

   <div id="movingpics">

      <img src="/img/1.jpg">

      <img src="/img/2.jpg">

      <img src="/img/3.jpg">

      <img src="/img/4.jpg">

   </div>

</div>

The outer div limits of the visible area of the slidshow and must have width and height specified.

#picsholder { overflow:hidden; width:950px; height:135px; }

As we don’t want the images to move to the next line if the slideshow has length greater than desirable visible area, we position them absolutely in a positioning context generated by the outer div:

#picsholder { overflow:hidden; width:950px; height:135px; position:relative}
#picsholder img { width:200px; height:130px; position:absolute; }

Notice position:relative rule has been added to the outer div css to create positioning context.

Now all the images are stuck to the left side of the outer div. All we need to do is specify left property for each image. And then make them move!

For that I add some JavaScript on window onload event:

var movingpics = document.getElementById('movingpics');

if((movingpics)&amp;&amp;(movingpics.getElementsByTagName('img'))) {
   var links = movingpics.getElementsByTagName('img');
   var totallength = 0;
   movingpics.style.display = 'inline';
   for(var i=0, link; i&lt;links.length;i++){
      link = links[i];
      link.style.left = totallength + 'px';
      totallength+= link.offsetWidth;
   }
}

The code above gives each image of the slide show it’s own value of the left property accordingly to the position in the list. To make images move all I need is change the left property. For that I use the following function.

var movepic = function(){

   var movingpics = document.getElementById('movingpics');

   if((movingpics)&amp;&amp;(movingpics.getElementsByTagName('img'))) {

      var links = movingpics.getElementsByTagName('img');
      var totallength = 1250;

      for(var i=0, link; i&lt;links.length;i++){
      link = links[i];

      if(link.style.left.replace('px','')*1&lt;=0-link.offsetWidth){
            if(i==0){link.style.left =  (links[links.length-1].style.left.replace('px','')*1)+links[links.length-1].offsetWidth+'px';}
            else{link.style.left =  (links[i-1].style.left.replace('px','')*1)+links[i-1].offsetWidth+'px';	}

         } else {link.style.left =  ((link.style.left.replace('px',''))*1)-1+'px';}

      }

   }
}

I add it to the same onload function and make it execute every 50 milliseconds.

setInterval ( "movepic()", 50 );

That’s it!

Link to source file

 
Leave a comment

Posted by on April 24, 2009 in CSS, HTML, JavaScript

 

Tags: , ,

Skype for mobile

Just found a wonderful java application for my Sony Ericsson W880i – ISkoot! Surprisingly it works perfectly on my non-Symbian phone.

Spent a few hours on searching for anything of that kind!

Java version of the software can be downloaded from here.

Hurray!!

 
Leave a comment

Posted by on April 22, 2009 in misc

 

Tags: , , ,

PROTX (SagePay) new API version 2.23

Great news forProtx (SagePay) payment users! 

Along with new brand name and design Protx introduced new version of their API (2.23). 

For the end users everything stays the same except for design – it looks much better now 😉 Developers will be surprized with extended functionality of VSP Server for instance.

The very first thing I would like to mention is so called Low Profile payment pages which are run inside an IFRAME and can be customized to look like they are a part of your site. The only exception is payments that run 3D Secure checking – clients will be redirected to the card issuing bank’s 3D Secure pages (full screen HTML).

To start using Low Profile pages all you need is to pass an optional parameter in the transaction registration request:

Profile = “LOW”

Omitting this field or sending “NORMAL” renders the normal card selection screen.

Great new feature in terms of statistics is that new API provides an opportunity to access information on card type and last 4 digits of the card number used. List of fields for computing MD5 signature has also been changed.

The only drawbacks I could find are:

  • Testing of the previous versions of VSP Server with Simulator is no longer possible. Testing environment still supports 2.22 version but unfortunately doesn’t give the same detailed picture.
  • In new release fields like billing and delivery address are compulsory. This makes no sense at all for businesses that deliver services by email, for instance.

Protx (SagePay) made a really great job. The only questions I have as a customer are:

  1. Why do I need to collect all this completely irrelevant to the business nature information?
  2. If they need this information why don’t they collect it on their end?

To be continued with testing experience.

 
5 Comments

Posted by on April 21, 2009 in misc

 

Tags: ,

 
%d bloggers like this: