WebDev

Transparency PNG file in IE

2009-02-11T23:27:00.000-08:00

The ability of this script is help you to show PNP files transparency in IE.It's will effect all ur <img class="whatever"> tag in the page that u added this script.But to make sure that img u have to create class whatever it's name.

// CONFIGURATION
// png_overlay is the png 'frame' that will be loaded over the images with a class name of "frame"
// suffix is the identifier for the rollover image; image.jpg -> image_suffix.jpg
//
// var png_overlay = 'rounded_frame.png';
// var suffix = '_over';

//
// addEvent()
// Allows attachment of events to elements
//
function addEvent( obj, type, fn ) {
if (obj.addEventListener) {
obj.addEventListener( type, fn, false );
EventCache.add(obj, type, fn);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
EventCache.add(obj, type, fn);
}
else {
obj["on"+type] = obj["e"+type+fn];
}
}
var EventCache = function() {
var listEvents = [];
return {
listEvents : listEvents,
add : function(node, sEventName, fHandler) {
listEvents.push(arguments);
},
flush : function() {
var i, item;
for(i = listEvents.length - 1; i >= 0; i = i - 1) {
item = listEvents[i];
if(item[0].removeEventListener) {
item[0].removeEventListener(item[1], item[2], item[3]);
};
if(item[1].substring(0, 2) != "on") {
item[1] = "on" + item[1];
};
if(item[0].detachEvent) {
item[0].detachEvent(item[1], item[2]);
};
item[0][item[1]] = null;
};
}
};
}();

addEvent(window,'unload',EventCache.flush);
//
// correctPNG()
// Allows transparent PNG images to be display correctly in IE
// Not sure who wrote it, but thanks
//
function correctPNG() {
for(var i=0; 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 = " + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='image');\">"
img.outerHTML = strNewHTML
i = i-1
}
}
}

//
// rollovers()
// Displays a rollover for any image with a class name of "rollover". Includes IE friendly function for transparent PNG fix.
//
var rollovers = {
obj : Object,
init : function() {
for( var i = 0, over; over = document.getElementsByTagName('img')[i]; i++ ){
if( over.className.indexOf('rollover') >= 0 ) {
rollovers.preload(over);
addEvent(over,'mouseover',rollovers.show);
addEvent(over,'mouseout',rollovers.hide);
}
}
},
preload : function(e) {
var img = new Image;
var ext = e.src.substring(e.src.length - 4, e.src.length);
var name = e.src.substring(0, e.src.length - 4);
img.src = name + suffix + ext;
},
show : function(e) {
var ext = this.src.substring(this.src.length - 4, this.src.length);
var name = this.src.substring(0, this.src.length - 4);
this.src = name + suffix + ext;
},
hide : function(e) {
this.src = this.src.replace(suffix,'');
}
}
var rollovers_ie = {
obj : Object,
init : function() {
if( document.getElementsByTagName('span').length < 1 )
setTimeout('rollovers_ie.init()',500);
for( var i = 0, span; span = document.getElementsByTagName('span')[i]; i++ ){
if( span.className.indexOf('rollover') >= 0 ) {
rollovers_ie.preload(span);
addEvent(span,'mouseover',rollovers_ie.show);
addEvent(span,'mouseout',rollovers_ie.hide);
}
}
},
preload : function(e) {
var img = new Image;
var filter = e.style.filter;
var src = filter.substring( filter.indexOf("src='") + 5, filter.indexOf("',"));
var ext = src.substring(src.length - 4, src.length);
var name = src.substring(0, src.length - 4);
img.src = name + suffix + ext;
},
show : function(e) {
var filter = this.style.filter;
var src = filter.substring( filter.indexOf("src='") + 5, filter.indexOf("',"));
var ext = src.substring(src.length - 4, src.length);
var name = src.substring(0, src.length - 4);
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + name + suffix + ext + "\', sizingMethod='image')";
},
hide : function(e) {
var filter = this.style.filter;
var src = filter.substring( filter.indexOf("src='") + 5, filter.indexOf("',"));
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + src.replace(suffix,'') + "\', sizingMethod='image')";
}
}

//
// pngFrame()
// Replaces images with class name of "frame" with png_overlay file.
//
function pngFrame() {
var imgs = document.images;
for( var i = 0, img; img = imgs[i]; i++ ) {
if( img.className.indexOf('frame') >= 0 ) {
var bgSrc = img.src;
img.style.background = "url(" + bgSrc + ")";
img.src = png_overlay;
}
}
}

//
// Load the Functions
//
if( navigator.userAgent.indexOf('MSIE') >= 0 )
addEvent(window,'load',correctPNG);
addEvent(window,'load',pngFrame);
if( navigator.userAgent.indexOf('MSIE') >= 0 )
addEvent(window,'load',rollovers_ie.init);
addEvent(window,'load',rollovers.init);

Get width of text in px

2008-10-08T20:46:00.000-07:00

Create a DIV styled with the following styles. In your JavaScript, set the font size and attributes that you are trying to measure, put your string in the DIV, then read the current width and height of the DIV. It will stretch to fit the contents and the size will be within a few pixels of the string rendered size.

<div id="introtext" class="txt_select">This is some introductory text</div>

<style>
.txt_select{
position: absolute;
background-color:#000099;
font-size:12px;
}
</style>

<script language="javascript" type="text/javascript">
var test = document.getElementById("introtext");
var height = (test.clientHeight + 1) + "px";
var width = (test.clientWidth + 1) + "px";
</script>

Callback Functions

2008-09-21T20:25:00.000-07:00

When you pass a function A to another function B and B executes A, it's often said that A is a callback function. If A doesn't have a name, then you can say that it's an anonymous callback function.

When are the callback functions useful? Let's see some examples that demonstrate the benefits of the callback functions, namely:

They let you pass functions without the need to name them (which means there are less global variables)

You can delegate the responsibility of calling a function to another function (which means there is less code to write)

They can help with performance

Callback Example:
function multiplyByTwo(a, b, c, callback) {
var i, ar = [];
for(i = 0; i < 3; i++) {
ar[i] = callback(arguments[i] * 2);
}
return ar;
}

>>> myarr = multiplyByTwo(1, 2, 3, addOne);

[3, 5, 7]

Instead of defining addOne() we can use an anonymous function, this way saving an extra global variable.
>>> myarr = multiplyByTwo(1, 2, 3, function(a){return a + 1});

[3, 5, 7]

Local versus Global scoping

2008-09-21T20:08:00.000-07:00

Here's an interesting example that shows an important aspect of the local versus global scoping.
var a = 123;
function f() {
alert(a);
var a = 1;
alert(a);
}

f();

You might expect that the first alert() will display 123 (the value of the global variable a) and the second will display 1 (the local a). This is not the case. The first alert will show "undefined". This is because inside the function the local scope is more important than the global scope. So a local variable overwrites any global variable with the same name. At the time of the first alert() a was not yet defined (hence the value undefined) but it still existed in the local space.

SQL_BIG_SELECTS

2008-09-12T00:00:00.000-07:00

Before I had one problem that can not execute big query in my Search page.It's because of web-hosting not allow to execute big query. So we have to add one line bellow before the big query like this:
ActiveRecord::Base.connection.execute('SET SQL_BIG_SELECTS = on')
Place.find_by_sql("..............")

Save_without_validation

2008-08-22T23:26:00.000-07:00

This snip code bellow show about save a new record without validation

photo = Photo.new
photo.name = ""
photo.save(false)

if we use update_attribute_with_validation_skipping(name, value) to update record without validation and want to success this task when we user find_by_sql to find that record we must to select all fields of that record.otherwise it will not effect at all.
biz = Photo.find_by_sql(..............)
biz.update_attribute_with_validation_skipping("request_date", Time.now)