RSS

Category Archives: Javascript

Setting the value for a select list

22 Feb

We come across a lot of instances where we need to set the values of form elements programmatically using client side script. To set the value of a select list (in case of multiple select or single select), the best way to do it is to loop through the options, checking if the value matches and then setting [option].selected = true.

For example:
//here for simplicity i am considering a single select case

function setSelectValue(selectList, val) {
for (option in selectList.options) {
if (option.value == val) {
option.selected = true;
break;
}
}
}

This piece of code will work for almost all web browsers. But not so surprisingly there is a difference in the way IE and other browsers handle the select list. In Firefox a listitem given without a specific value attribute considers the given text as the value. Though IE also gives the same result on post back, while programmatically checking the value of an option it says its undefined. So you cannot use the setSelectValue function for <li>Hello</li> in IE. To make it work for IE you have to explicitly give <li value=”Hello”>Hello</li>.

Not a big deal but it cost me half a day 😉

 
1 Comment

Posted by on February 22, 2008 in Computers, Internet Explorer, Javascript

 

CSS Style position:fixed and Internet Explorer

13 Sep

The CSS styling attribute position:fixed makes an HTML element stationary (does not move on scrolling) and absolutely positioned. If you are familiar with position:absolute, the fixed styling is quite similar except for that it remains in position even on page scroll.

Most of the modern browsers (IE7, Firefox, Opera etc.) support the fixed styling. But older versions of Internet Explorer (prior to IE 7) does not. The problem with older IE is that it completely ignores the fixed attribute and the default styling (position:relative) is applied. This can completely disrupt your page design.

Accepting the fact that IE6 still remains the most widely used web browser, we cannot ignore this issue. One way to solve this is by changing the value of position attribute to absolute (which is the closest to fixed) in case of IE older than version 7. To give the actual effect of fixed we also need to handle the scroll event or else this element will also move along with the rest of the page. In the scroll event you have to reload (hide and show) the element and you get the most closest fixed style implementation in IE.

You may download the complete working page source.

<script type="text/javascript">
/* <![CDATA[ */
   var isOldIE = false;
   function onPageLoad()	{
      if (navigator.appName.indexOf('Microsoft Internet Explorer') > -1)  {
         ver = navigator.appVersion.substr(navigator.appVersion.indexOf('MSIE ')+5,3);
         if (ver < 7) {
            document.getElementById('fixedDiv').style.position = 'absolute';
            window.onscroll = reloadFixedDiv;
         }
      }
   }

   function reloadFixedDiv()	{
      var d= document.getElementById('fixedDiv');
      d.style.display = 'none';
      d.style.display = 'block';
   }
/* ]]> */
</script>
<style type="text/css">
<!--
#fixedDiv	{
	position:fixed;
	right:0px;bottom:0px;
	height:72px;
	width:256px;
	background-color:#ABCDEF;
}
-->
</style>

and also

 <body onload="javascript:onPageLoad();">

Note: There will be a slight flickering on the element.

 
Leave a comment

Posted by on September 13, 2007 in Computers, Javascript

 

Javascript and Cross-browser Window focus

28 Aug

It is a common requirement in today’s highly interactive web applications to keep track if the browser window is currently in focus. Let me tell you one thing. If you take a look at the browser events and the very limited documentation, you might be tempted to believe that you are in safe hands. But thats not the case.

Catching the onblur and onfocus events is the most recommended way to know when a window gains or loses focus. But this does not work in all cases. The onfocus event is triggered correctly in almost all browsers. But onblur on the other hand is highly unpredictable. In Internet Explorer, every onfocus event is immediately followed by an onblur event even though the window is still in focus. On Firefox, the onblur will not be trigerred if the active element of the window is of input type.

Solution: IE has its custom events which works fine for it namely focusin and fosucout. For firefox, we need to check whether the active element has changed.

var isIE = (navigator.appName == "Microsoft Internet Explorer");
var hasFocus = true;
var active_element;

function setFocusEvents()	{
	active_element = document.activeElement;
	if (isIE)	{
		document.onfocusout = function() {	onWindowBlur();	      }
		document.onfocusin = function()	 {	onWindowFocus();     }
	}	else	{
		window.onblur = function()	  {	onWindowBlur();	         }
		window.onfocus = function()	 {	onWindowFocus();       }
	}
}

function onWindowFocus()	{
	hasFocus = true;
}

function onWindowBlur()	{
	if (active_element != document.activeElement) {
		active_element = document.activeElement;
		return;
	}
	hasFocus = false;
}

NB: I have tested mostly on IE 6+ and Firefox. So you might find my method incomplete for other browsers.

Update: This post has been updated (corrected) as per Lucent’s comment.

 
12 Comments

Posted by on August 28, 2007 in Computers, Javascript