[Javascript] Mac IE oddities with rollover help pop-ups

Fri Dec 20 10:36:53 CST 2002

Our new Web site incorporates boxes that pop up when you roll over a link
(to help people decide which link they want).  It works good in most
browsers, except Mac IE 5... where the pop up spans the entire screen.

I throw myself upon the mercy of the JavaScript mailing list... I would
appreciate any help you all may offer.  Thanks :)

Sincerely,
Thomas McCoy

(see it in action - mouse over a tab at:
http://www.city.newport-beach.ca.us/nbpl/ )

SCRIPT:

// to invoke:
//<SCRIPT LANGUAGE="JavaScript" SRC="/popup.js"
TYPE="text/javascript"></SCRIPT>
//<BODY onLoad="init()">
//<DIV ID=popupDiv STYLE="position:absolute; visibility:hidden;
z-index:1000"></DIV>
//<A HREF="URL" ONMOUSEOVER="popup('POPUP_CONTENTS')"
ONMOUSEOUT="popdn()">link</A>

pop_border = 1;
pop_pad_top = 3;
pop_pad_left = 4;
pop_bordercolor = "#003300";
pop_bgcolor = '#FFFFCC';
pop_font = "Arial,Verdana,,Helvetica,sans-serif";
pop_textsize = 2;
pop_fontsize = '7pt';
pop_textcolor = "#003300";

pop_offset_x = 12;
pop_offset_y = 10;

//--

var pop = null;
var initialized = false;
var pop_width = 200;
var mouse_x=0, mouse_y=0;

// Decide browser version
var ie4 = document.all && !document.getElementById;
var ie5 = document.all && document.getElementById;
var ns6 = !document.all && document.getElementById;
var ns4 = document.layers;

function init(){
 // popup
 if(ie4 || ie5 || ns4 || ns6){
  // Make a popup object shortcut
  if (ns4) pop = document.popupDiv;
  if (ie4 || ie5) pop = popupDiv;
  if (ns6) pop = document.getElementById("popupDiv");

  // Capture mouse movement
  if (ns4) document.captureEvents(Event.MOUSEMOVE);
  document.onmousemove = mouseMoved;
 } else {
  popup = do_nothing;
  popdn = do_nothing;
 }
 initialized = true;
}

// Show a popup
function popup(text,width,height) {
 if (!initialized) return false;

 pop_width = (width)? width:200;
 pop_contentwidth = pop_width - (pop_border*2) - (pop_pad_left*2);

 // Make layer content
 if (typeof width != 'undefined') { var html_width = 'WIDTH='+width+' '; }
 if (typeof height != 'undefined') { var html_height = 'HEIGHT='+height+' ';
}
 else var html_height = '';

 if (ie4 || ie5) { var layerhtml = "<DIV STYLE=\"background:"+pop_bgcolor+";
border:"+pop_border+"px solid "+pop_bordercolor+"; padding:"+pop_pad_top+"px
"+pop_pad_left+"px; font:"+pop_fontsize+" "+pop_font+";
color:"+pop_textcolor+"\">"+text+"</DIV>"; }
 if (ns4) { var layerhtml = "<TABLE "+html_width+html_height+" BORDER=0
CELLPADDING="+pop_border+" CELLSPACING=0
BGCOLOR="+pop_bordercolor+"><TR><TD><TABLE WIDTH=\"100%\" "+html_height+"
BORDER=0 CELLPADDING="+pop_pad_left+" CELLSPACING=0
BGCOLOR="+pop_bgcolor+"><TR><TD><FONT FACE=\""+pop_font+"\"
COLOR=\""+pop_textcolor+"\"
SIZE=\""+pop_textsize+"\">"+text+"</FONT></TD></TR></TABLE></TD></TR></TABLE
>"; }
 if (ns6) { var layerhtml = "<TABLE "+html_width+html_height+" CELLSPACING=0
STYLE=\"background:"+pop_bgcolor+"; border:"+pop_border+"px solid
"+pop_bordercolor+"\"><TR><TD STYLE=\"padding:"+pop_pad_top+"px
"+pop_pad_left+"px; font:"+pop_fontsize+"
"+pop_font+"\">"+text+"</TD></TR></TABLE>"; }

 // Write layer
 layerWrite(layerhtml);

 // Position layer
 setPopupPos(mouse_x, mouse_y);

 // Show layer
 show(pop);

 return true;
}

// Show a news story as a popup
function news_popup (heading,text) {
 if (!initialized) return false;

 var layerhtml = "<TABLE WIDTH=240 BORDER=0 CELLPADDING=2 CELLSPACING=0
BGCOLOR="+pop_bordercolor+"><TR><TD><TABLE WIDTH=100% BORDER=0
CELLPADDING=10 CELLSPACING=0 BGCOLOR="+pop_bgcolor+"><TR><TD
VALIGN=top><FONT FACE=\""+pop_font+"\" COLOR=\""+pop_textcolor+"\"
SIZE=\""+pop_textsize+"\"><SPAN
CLASS=popup_heading><NOBR>"+heading+"</NOBR></SPAN><BR>"+text+"</FONT></TD><
/TR></TABLE></TD></TR></TABLE>";

 // Write layer
 layerWrite(layerhtml);

 // Position layer
 setPopupPos(mouse_x, mouse_y);

 // Show layer
 show(pop);

 return true;
}

// Clears popups if appropriate
function popdn() {
 if ( initialized && (ie4 || ie5 || ns4 || ns6) && (pop != null) ) {
  hide(pop);
 }
 return true;
}

// Store mouse coordinates and move popup layer accordingly
function mouseMoved(e) {
 if ( ns4 || ns6 ) {
  mouse_x=e.pageX;
  mouse_y=e.pageY;}
 if (ie4) {
  mouse_x=event.x;
  mouse_y=event.y;}
 if (ie5) {
  mouse_x=event.x+self.document.body.scrollLeft;
  mouse_y=event.y+self.document.body.scrollTop;}

 setPopupPos(mouse_x, mouse_y);
}

// Determine popup position (relative to cursor)
function setPopupPos(mouse_x, mouse_y) {
 if (!initialized) return false;

 // Get window size
 if (ie4 || ie5) { var win_width = self.document.body.clientWidth;  var
win_height = self.document.body.clientHeight; }
 if (ns4) { var win_width = self.innerWidth;  var win_height =
self.innerHeight; }
 if (ns6) { var win_width = self.outerWidth;  var win_height =
self.outerHeight; }

 // Get window scroll position
 var win_scroll_x = (ie4 || ie5) ? self.document.body.scrollLeft :
self.pageXOffset;
 var win_scroll_y = (ie4 || ie5) ? self.document.body.scrollTop :
self.pageYOffset;

 // Get popup dimensions
 var pop_width_current = (ie4 || ie5)? pop.clientWidth:pop.offsetWidth;
 var pop_height_current = (ie4 || ie5)? pop.clientHeight:pop.offsetHeight;

//alert (mouse_x + ':' + mouse_y + "\n" + win_width + ':' + win_height +
"\n" + pop_width_current + ':' + pop_height_current + "\n" + pos_x + ':' +
pos_y );

 var scrollbar_size = (ie4 || ie5)? 0:16;

 // Set horizontal pos
 var pos_x = mouse_x + win_scroll_x + pop_offset_x;
 if (pos_x + pop_width_current > win_width + win_scroll_x - scrollbar_size)
  pos_x = win_width + win_scroll_x - pop_width_current - scrollbar_size;
 if (pos_x < win_scroll_x)
  pos_x = win_scroll_x;

 // Set vertical pos
 var pos_y = mouse_y + pop_offset_y;

// stick to edge of window if would pass bottom edge
// if (pos_y + pop_height_current > win_height + win_scroll_y -
scrollbar_size)
//  pos_y = win_height + win_scroll_y - pop_height_current - scrollbar_size;

// move above cursor if would pass bottom edge
 if (pos_y + pop_height_current > win_height + win_scroll_y -
scrollbar_size)
  pos_y = mouse_y - pop_height_current - pop_offset_y;

//self.status = "msx:" +mouse_x+ " msy:" +mouse_y+ " | posx:" +pos_x+ "
posy:" +pos_y+ " | scrx:" +win_scroll_x+ " scry:" +win_scroll_y+ " | offx:"
+pop_offset_x+ " offy:" +pop_offset_y+ " | cW:" + pop_width_current + " cH:"
+ pop_height_current;

 // Move the layer
 moveLayerTo(pop, pos_x, pos_y);
}

function moveLayerTo(obj,x,y) {
 if (ns4) {
  obj.left = x;
  obj.top = y;
 } else if (ie4 || ie5) {
  obj.style.left = x;
  obj.style.top = y;
 } else if (ns6) {
  obj.style.left = x + "px";
  obj.style.top = y + "px";
 }
}

// ==========================================

// Make an object visible
function show(obj) {
 if (ns4) obj.visibility = "show";
 else if (ie4 || ie5) obj.style.visibility = "visible";
 else if (ns6) obj.style.visibility = "visible";
}

// Hides an object
function hide(obj) {
 if (ns4) obj.visibility = "hide";
 else if (ie4 || ie5) obj.style.visibility = "hidden";
 else if (ns6) obj.style.visibility = "hidden";
}

// Writes to a layer
function layerWrite(txt) {
 if (ns4) {
  var lyr = self.document.popupDiv.document;
  lyr.write(txt);
  lyr.close();
 } else if (ie4 || ie5) {
 //  pop.innerHTML = txt;
  document.all.popupDiv.innerHTML=txt;
 } else if (ns6) {
  var range = self.document.createRange();
  range.setStartBefore(pop);
  domfrag = range.createContextualFragment(txt);
  while (pop.hasChildNodes()) {
   pop.removeChild(pop.lastChild);
  }
  pop.appendChild(domfrag);
 }
}

function do_nothing() {
 return 1;
}