overlay div pop up not working in google chrome

Okay, here is the issue and solution

Problem: i found a java script across internet for div pop up using overlay, working fine with all browsers except chrome. In chrome it would execute to create a popup but its position was top left of the screen and was viewable less than 50%.

Solutions: here is the solution.

if (!window.ie6) {
this.overlay.setStyles({
position: ‘fixed’,
top: 0,
left: 0
});
this.window.setStyles({
position: ‘fixed’,
top: ‘50%’,
left: ‘50%’
});
} else if (navigator.userAgent.indexOf(‘Chrome’) !=1) {

this.overlay.setStyles({
position: ‘absolute’,
top: ‘0%’,
left: ‘0%’
//,marginTop: “expression(document.documentElement.scrollTop + ‘px’)”
});

this.window.setStyles({
position: ‘absolute’,
top: ‘50%’,
left: ‘50%’
//,marginTop: “(expression(0 – parseInt(this.offsetHeight / 2) + document.documentElement.scrollTop + ‘px’)”
});

}else {
this.overlay.style.setExpression(‘marginTop’, ‘document.documentElement.scrollTop + “px”‘);
this.window.style.setExpression(‘marginTop’, ‘0 – parseInt(this.offsetHeight / 2) + document.documentElement.scrollTop + “px”‘);

this.overlay.setStyles({
position: ‘absolute’,
top: ‘0%’,
left: ‘0%’
//,marginTop: “expression(document.documentElement.scrollTop + ‘px’)”
});

this.window.setStyles({
position: ‘absolute’,
top: ‘0%’,
left: ‘0%’
//,marginTop: “(expression(0 – parseInt(this.offsetHeight / 2) + document.documentElement.scrollTop + ‘px’)”
});
}

Advertisements

javascript pop-up window close event

Add the below javascript to the javascript pop-up window on the close event of which you want to execute a particular javascript funciton.

window.onbeforeunload = 
 function(){
      // add the javascript code here which you want to execute at the close of this pop-up window
 }

modalbox javascript onclose event

Today after along period writing a post. I tried a new javascript library called modalbox js. Was working very good, but i had to run other javascript when the box was closed. Found some help at http://code.google.com/p/modalbox/wiki/MethodsReference but didn’t found the exact syntax.

After some trial and error finally succeeded, so thought to post on to the blog. Here is the syntax for javascript as well as for symfony (in case you are working with symfony)

Syntax for symfony:

<?php echo m_link_to(‘link_name’,
‘url’,
array(‘title’ => ‘title’),
array(‘width’ => 630, ‘height’ => 180, ‘afterHide’ => ‘afterhidealert‘)); ?>

here afterhidealert is the javascript function that will be called on the closing of the modalbox popup.

Syntax for javascript:

<a href=”url” onclick=”Modalbox.show(this.href, {afterHide:afterhidealert, height:180, title:this.title, width:630}); return false;” title=”title”>link_name</a>

here afterhidealert is the javascript function that will be called on the closing of the modalbox popup.

Thanks,

samsami2u

http://www.avidindiainc.com

ie 6 png fix – ie 6 png issue solutlion with css and/or js

The issue is with png type of images that are not properly displayed in ie 6 (internet explorer – Version 6). I found the solution somewhere on internet while googling.

Okay, so the solution goes as below:

1) download the files needed for the solution from http://demo.avidindiainc.com/ie6pngfix/ie6PNGFixDownload.zip

2) There are 5 files in the directory after you unzip it. They are  blank.gif, iepngfix.htc, iepngfix_tilebg.js, iepngfix.php and .htaccess.

3) for solving the issue the two files blank.gif and iepngfix.htc are enough. i will explain them first and we’ll go for the rest files later.

4) Copy and paste iepngfix.htc and blank.gif into your website folder.

5) Copy and paste this into your website’s CSS or HTML:

<style type=”text/css”>
img, div { behavior: url(iepngfix.htc) }
</style>

6) now the other  files work as follow. If you want support for CSS1 background-repeat and background-position, make sure you include the add-on .JS file in your <head>:

<script type=”text/javascript” src=”iepngfix_tilebg.js”></script>

7) Suppose if it works offline but not online, in this case you may have a MIME type problem. You must ensure your server is sending the correct MIME type of “text/x-component” for .HTC files. Try one of these two easy fixes:

  • Upload the “.htaccess” file from within this script’s download ZIP to your webserver, which will make Apache send the correct MIME type.
  • Instead of calling “IEPNGFIX.HTC” from your CSS, upload IEPNGFIX.PHP to the same folder and call that instead, which also sends the right MIME type.

Thats all folks. I hope this solves your issue with ie6.

flowplayer with auto playlist and seperate caption file for each clip along with external control bar

Flowplayer is free to download and available at flowplayer.org

it also have all these examples i.e.

1) Auto Playlist, 2)Playlist with captions on clips and 3)HTML Control bar

but here i have integrated all of the above three in one file/ one player

you can find the demo at http://demo.avidindiainc.com/flowplayer/

and you can download the files at http://demo.avidindiainc.com/flowplayer/flowplayer-download.zip

Thanks,

samsami2u

http://www.avidindiainc.com

ajax in internet explorer (ie) hangs up or Microsoft.XMLHTTP not working in ie

here is the possible solution:

function getHTTPObject() {

var httpObject = null;
// I think the issue has something to do with this area of code… (1)

if (window.ActiveXObject) { // IE
try {
httpObject = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e) {
try {
httpObject = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {}
}
}
else if (window.XMLHttpRequest) { // Mozilla, Safari,…
httpObject = new XMLHttpRequest();
if (httpObject.overrideMimeType) {
httpObject.overrideMimeType(‘text/html’);
}
}
if (httpObject == null) {
alert(‘Cannot create XMLHTTP instance’);
}
return httpObject;

}

now add the below given code:

var reqNum = rand(1,1000);
url_add = url_add + “&reqnum=” + reqNum;

httpObject.open(“GET”, “levels_dropdown.php?performance_id=” + url_add, true);

httpObject.send(null);

for the rand() function:

function rand (min, max) {

var argc = arguments.length;
if (argc === 0) {
min = 0;
max = 2147483647;
} else if (argc === 1) {
throw new Error(‘Warning: rand() expects exactly 2 parameters, 1 given’);
}
return Math.floor(Math.random() * (max – min + 1)) + min;

function rand (min, max) {
// http://kevin.vanzonneveld.net
// +   original by: Leslie Hoare
// +   bugfixed by: Onno Marsman
// %          note 1: See the commented out code below for a version which will work with our experimental (though probably unnecessary) srand() function)
// *     example 1: rand(1, 1);
// *     returns 1: 1

var argc = arguments.length;
if (argc === 0) {
min = 0;
max = 2147483647;
} else if (argc === 1) {
throw new Error(‘Warning: rand() expects exactly 2 parameters, 1 given’);
}
return Math.floor(Math.random() * (max – min + 1)) + min;

/*
// See note above for an explanation of the following alternative code

// +   reimplemented by: Brett Zamir (http://brett-zamir.me)
// –    depends on: srand
// %          note 1: This is a very possibly imperfect adaptation from the PHP source code
var rand_seed, ctx, PHP_RAND_MAX=2147483647; // 0x7fffffff

if (!this.php_js || this.php_js.rand_seed === undefined) {
this.srand();
}
rand_seed = this.php_js.rand_seed;

var argc = arguments.length;
if (argc === 1) {
throw new Error(‘Warning: rand() expects exactly 2 parameters, 1 given’);
}

var do_rand = function (ctx) {
return ((ctx * 1103515245 + 12345) % (PHP_RAND_MAX + 1));
};

var php_rand = function (ctxArg) { // php_rand_r
this.php_js.rand_seed = do_rand(ctxArg);
return parseInt(this.php_js.rand_seed, 10);
};

var number = php_rand(rand_seed);

if (argc === 2) {
number = min + parseInt(parseFloat(parseFloat(max) – min + 1.0) * (number/(PHP_RAND_MAX + 1.0)), 10);
}
return number;
*/
}