PDA

Click to See Complete Forum and Search --> : using javascript w/IE5.0 vs IE6.0 SP1

gipigww
08-19-2003, 03:26 PM
Hi, i am having a bit of problem with some javascript that was copy/pasted from codelifter.com. i cannot re-find the free code on the site now.

the code allows me to build a menu with dropdowns right under the menu option.

anyway, i have been using this javascript code for 2 years and it still works while i am on IE5.0. anyone with IE6.0, the dropdown menu will overlay my logo in the upper left corner.

i have put some alerts in the code to see if screen size is different but all var are the same in both IE versions.


also, IE6.0 has my form boxes a little larger, changing text size makes no difference.


any ideas?
thanks
gww

here is the javascript code copied/pasted;

// Amazing Frameless Popup Window - Version I
// (C) 2000 www.CodeLifter.com
// Free for all users, but leave in this header

// set the popup window width and height

var windowW=214 // wide
var windowH=398 // high

// set the screen position where the popup should appear

//var windowX = 260 // from left
//var windowY = 100 // from top
var windowX = (screen.width/2)-(windowW/2);
var windowY = (screen.height/2)-(windowH/2);

// set the url of the page to show in the popup

var urlPop = "Pic.htm"

// set the title of the page

var title = "Click Close"

// set this to true if the popup should close
// upon leaving the launching page; else, false

var autoclose = true

// ============================
// do not edit below this line
// ============================

s = "width="+windowW+",height="+windowH;
var beIE = document.all?true:false

function openFrameless(src){
if (beIE){
NFW = window.open("","popFrameless","fullscreen,"+s)
NFW.blur()
window.focus()
NFW.resizeTo(windowW,windowH)
NFW.moveTo(windowX,windowY)
var frameString=""+
"<html>"+
"<head>"+
"<title>"+title+"</title>"+
"</head>"+
"<frameset rows='*,0' framespacing=0 border=0 frameborder=0>"+
"<frame name='top' src='"+urlPop+"?name="+ src +"' scrolling=auto>"+
"<frame name='bottom' src='about:blank' scrolling='no'>"+
"</frameset>"+
"</html>"
NFW.document.open();
NFW.document.write(frameString)
NFW.document.close()
} else {
NFW=window.open(urlPop,"popFrameless","scrollbars,"+s)
NFW.blur()
window.focus()
NFW.resizeTo(windowW,windowH)
NFW.moveTo(windowX,windowY)
}
NFW.focus()
if (autoclose){
window.onunload = function(){NFW.close()}
}
}



function OpenWindow (URL, WinName, Features) { //v2.0
if (WinName == null){
WinName = 'tmpWin';
}
if (Features == null){
Features = 'width=600,height=500, left=0,top=0,screenX=0,' +
'screenY=0,outerwidth=500,outerheight=300,' +
'resizable,status,scrollbars';
}

window.open(URL, WinName, Features);
}

function OpenPic ( src) { //v2.0
Features = 'width=600,height=500, left=0,top=0,screenX=0,' +
'screenY=0,outerwidth=500,outerheight=300,' +
'resizable,status,scrollbars,popFrameless';
window.open("Pic.htm?name="+ src, "", Features);
}

// check browser version
NS4 = (document.layers) ? 1 : 0;

function layer_enter (id)
{
on_layer_id = id;
}
function layer_exit (id)
{
on_layer_id = - 1;
setTimeout ('hide('+ id +')', delay/5);
}
function menu_enter (id)
{
if (buff_id >= 0)
hide (buff_id);

show (id);
active_layer_id = id;
}
function menu_exit (id)
{
setTimeout ('hide('+ id +')', delay);
buff_id = active_layer_id;
active_layer_id = -1;
}
function show (id)
{
if (!NS4)
document.all['Menu' + id].style.visibility = "visible";
else
document.layers[id].visibility = "visible";
}
function hide (id)
{
if (active_layer_id != id && on_layer_id != id)
{
if (!NS4)
document.all['Menu' + id].style.visibility = "hidden";
else
document.layers[id].visibility = "hide";
}
}

function swapColor (obj)
{
obj.style.backgroundColor= '#663366;';
}

function generate_layers ()
{
for (i = 0; i < menu_content.length; i++)
{
elements = menu_content[i].split (/\s*\|\s*/);
layer_body = '';
menu_width = elements[0]*1;

var mouseOver = "onMouseOver=\"this.style.backgroundColor='" + link_over_color + "'\";"
var mouseOut = " OnMouseOut=\"this.style.backgroundColor='" + back_color + "'\";"
for (j = 1; j < elements.length; j++)
{
layer_body += '<tr><td width=' + menu_width + ' style="background-color:' + back_color + '"';
layer_body += mouseOver;
layer_body += mouseOut + '>';
layer_body += elements[j];
layer_body += '</td></tr>';

if ((NS4 && j < elements.length - 1) || (!NS4 && j < elements.length - 1))
{
layer_body += '<tr><td width=' + menu_width + ' style="background-color:' + back_color + '">';
layer_body += '<hr width=' + (menu_width - 8) + ' size=1 color='+ border_color + '></td></tr>';
}
}

layer_body += '<tr><td width=' + menu_width + ' style="background-color:' + back_color + '"';
layer_body += '>&nbsp;</td></tr>';

if (!NS4)
layer_header = '<div id=Menu' + i +
' onMouseOver="layer_enter (' + i + ');" onMouseOut = "layer_exit (' + i + ');"' +
' style="visibility: hidden; position: absolute; left: ' + (left_corner_x) +
'; top: ' + left_corner_y + ';">';
else
layer_header = '<layer id=' + i +
' onMouseOver="layer_enter (' + i + ');" onMouseOut = "layer_exit (' + i + ');"' +
' visibility=hide left=' + (left_corner_x) +
' top = ' + left_corner_y + '>';

layer_header += '<table width=' + menu_width + ' cellpadding=0 cellspacing=0 border=0>' +
'<td bgcolor=' + border_color + '><table width=' + menu_width + ' cellpadding=0 ' +
'cellspacing=' + border_size + ' border=0>';


layer_footer = '</table></td></table>';
if (!NS4)
layer_footer += '</div>';
else
layer_footer += '</layer>';
document.writeln (layer_header + layer_body + layer_footer);

left_corner_x = left_corner_x*1 + menu_width*1;

}
}
generate_layers ();
Khalid Ali
08-19-2003, 03:31 PM
there are few differences in the way IE6 gets the position of the element in reference to the window.

post a link to the site where you have this code implemented so that some one can see it and suggest what could be wrong
gipigww
08-19-2003, 04:16 PM
yep. i am blaming IE6.0 but i cannot pin point the exact difference. when i put alerts into my javascript to display the vars and elements, IE5.0 and IE6.0 resolve those to be the same elemnets and vars (screen sizes).

is there a place that i can research more on IE6.0 or maybe
an issue newgroup? i have looked on IE website.

thanks
gww
gipigww
08-26-2003, 03:28 PM
I have 2 problems that started with IE6.0

1) i have dropdown menu in javascript that uses x-y-coordinates. no matter what value i set the coordinate to,
it always displays as x=1 and y=1. The same exact code in
IE5 looks perfect. must be a setting in IE6....?

2) my form boxes are extra long. like for the box which contains the month, <INPUT type="text" NAME="StartMonth" VALUE="" size="2" maxlength="2" onKeyUp="return autoTab(this, 2, event);" />. This appears on my page as about 6-8 char positions but only allows the 2 as expected. it makes the page look sloppy when boxes are longer than expected. (a maxlength="12" field looks like about 20 in length).

anyone know why or how i can find the difference between IE5 and IE6? I sent this request to my site people and they tell me i have to rewrite the menu and form boxes....i dont agree....2nd option anyone? is there anything i can do?
should i rewrite the code so that it works with IE6?

thanks!
dragle
08-27-2003, 09:08 AM
Where are left_corner_x and left_corner_y set? Did you try adding "px" to your top/left settings, i.e.,


'... position: absolute; left: ' +
(left_corner_x) + 'px; ' +
'top: ' + left_corner_y + 'px;">';


Cheers,
gipigww
08-27-2003, 09:31 AM
the content.js is below and has
left_corner_x = 15;
left_corner_y = 72;


// constants
var left_corner_x = 15; // x-coordinate of top left corner of dropdown menu
var left_corner_y = 72; // y-coordinate of top left corner of dropdown menu
var back_color = '#CC9966'; //'#cc9966'; / the background color of dropdown menu
var link_over_color = '#FFE7C6';
var border_color = 'BLACK'; // the color of dropdown menu border
var border_color = '';
var border_size = '0'; // the width of dropdown menu border
var menu_width = '121'; // the width of dropdown menu
// Don't change these parameters
var delay = 500; ///
var active_layer_id = -1; ///
var on_layer_id = -1; ///
var buff_id = -1; ///
// ----------------------------

menu_content = new Array ('98 | <a href=.....etc