Catzie.net Blog » JavaScript http://blog.catzie.net Programming, Networking, and other Downloads by Catzie Tue, 07 Feb 2012 15:19:50 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 JavaScript: Setting the selected dropdown option by its index number http://blog.catzie.net/javascript-setting-the-selected-dropdown-option-by-its-index-number/ http://blog.catzie.net/javascript-setting-the-selected-dropdown-option-by-its-index-number/#comments Tue, 10 Aug 2010 05:30:10 +0000 Catzie http://blog.catzie.net/?p=327 Long time no new entry. :) Internship is keeping me very busy. In this blog entry I’ll show you how to select a drop down option by specifying its index number.

The JavaScript code:

document.getElementById("selectionDD").selectedIndex = 0;

The HTML code:

<select id="selectionDD" name="selectionDD">
&nbsp&nbsp&nbsp&nbsp&nbsp<option value="one">One</option>
&nbsp&nbsp&nbsp&nbsp&nbsp<option value="two">Two</option>
&nbsp&nbsp&nbsp&nbsp&nbsp<option value="three">Three</option>
</select>

Refer to the JavaScript code. The selectionDD is the id of the <select> tag. The value 0 represents the index number of the option that we want to be selected, and will select the first option in the selection. Note that the index numbers start with 0, not 1.

]]> http://blog.catzie.net/javascript-setting-the-selected-dropdown-option-by-its-index-number/feed/ 3 Fix PNG images with transparency in older Windows Internet Explorer versions http://blog.catzie.net/fix-png-images-with-transparency-in-older-windows-internet-explorer-versions/ http://blog.catzie.net/fix-png-images-with-transparency-in-older-windows-internet-explorer-versions/#comments Mon, 16 Nov 2009 06:49:31 +0000 Catzie http://blog.catzie.net/?p=251 I wonder if this post would still get hits from search engine result pages. So many other web pages feature this fix for IE 5.5 and IE 6 web browser, that the Catzie.net Blog’s entry might just show up on the… 10th page or so. lol.

Anyways, I’m still posting this, in case there are some visitors browsing around who need help with properly displaying the transparency of .PNG images in IE5.5 and IE6. This also helps me easily find the needed code to fix the display. I need it from time to time when I design website layouts. :)

Tip: Most of us are probably using the newer versions of Internet Explorer. I suggest that you download and use the IE Tester. It’s a web browser that lets you see how web pages render in different versions of IE – 5.5, 6, 7, and 8.

I assume that as you read this, you are using Internet Explorer version 5.5, or the version 5.5 tab on the IE Tester.

The following .png image has a grayish background color that replaces the parts that are supposed to be transparent.

This is the code for what’s show above.

<div style="background:pink;padding:20px;">
<img src="http://img.photobucket.com/albums/v209/catzie/transparent1.png"
alt="" />
</div>

Please click here to open on a new window the fixed version of what we are trying to display. You’d notice that there’s no longer the grayish background on the parts that are supposed to be transparent. Now you can see through the pink background.

The final code is:

<html>
<head>
	<style type="text/css">
		body{
			background-color:pink;
		}
	</style>
<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters))
   {
      for(var i=0; i<document.images.length; i++)
      {
         var img = document.images[i]
         var imgName = img.src.toUpperCase()
         if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
            var imgID = (img.id) ? "id='" + img.id + "' " : ""
            var imgClass = (img.className) ? "class='" + img.className
                               + "' " : ""
            var imgTitle = (img.title) ? "title='" + img.title + "' " :
                               "title='" + img.alt + "' "
            var imgStyle = "display:inline-block;" + img.style.cssText
            if (img.align == "left") imgStyle = "float:left;" + imgStyle
            if (img.align == "right") imgStyle = "float:right;" + imgStyle
            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
            var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height
            + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"<>/span>"
            img.outerHTML = strNewHTML
            i = i-1
         }
      }
   }
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->
</head>
<body>
  <div style="background:pink;padding:20px;">
         <img src="http://img.photobucket.com/albums/v209/catzie/transparent1.png"
                alt="" />
  </div>
</body>
</html>

The code above uses conditional comment to check if your current browser is older than IE 7. If it is, the JavaScript code which corrects the display of the .png is executed.

This method has limitations though. It works only on IE5.5 and IE6. It needs JavaScript enabled on your browser, or else it won’t work. And it only works on images placed using the <img> tag. It won’t work on background images.

I learned about this fix from this website

]]> http://blog.catzie.net/fix-png-images-with-transparency-in-older-windows-internet-explorer-versions/feed/ 1 Inline Frame that automatically adjusts its height for the source page http://blog.catzie.net/inline-frame-that-automatically-adjusts-its-height-for-the-source-page/ http://blog.catzie.net/inline-frame-that-automatically-adjusts-its-height-for-the-source-page/#comments Sat, 31 Oct 2009 04:58:10 +0000 Catzie http://blog.catzie.net/?p=234 Last year, I was working on our MULPROJ layout, and the type of layout I was making needed an iframe whose height is auto resized according to the source page’s content. This means that there should be no vertical scrollbar in the iframe, it simply adjusts itself vertically.

I thought that it wasn’t possible to do this but I found a JavaScript code that can do the trick, and I just want to share it with you. ;)


<script language="JavaScript">

 function autoResize(id){
  var newheight;
  var newwidth;

 if(document.getElementById){
  newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
  newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
  }

 document.getElementById(id).height= parseInt(newheight) + 45 + "px";
  document.getElementById(id).width= (newwidth) + "px";
  }
  </script>


<iframe SRC="yourPage.html" width="100%" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>

Save the above code as iframe.html, or whatever you like.
Remember to create the file yourPage.html in the same folder as your previous html file.

I stumbled upon it on: this forum thread.

I also did a little editing.

]]> http://blog.catzie.net/inline-frame-that-automatically-adjusts-its-height-for-the-source-page/feed/ 0