How to modify javascript to work on google chrome and mozilla ?

[leutrim]

This code dosen't function properly on google chrome, and mozilla firefox, just on IE. The problem is that, it allways put's the box on the left uppercorner, I need to the box to appear to the place where I clicked it. So if anybody could help me with the move_box function, I would really appreciate.

function move_box(an, box)

{

    var cleft = 0;

    var ctop = 0;

    var obj = an;



    while (obj.offsetParent)

    {

        cleft += obj.offsetLeft;

        ctop += obj.offsetTop;

        obj = obj.offsetParent;

    }



    box.style.left = cleft + 'px';



    ctop += an.offsetHeight + 8;



    // Handle Internet Explorer body margins,

    // which affect normal document, but not

    // absolute-positioned stuff.

    if (document.body.currentStyle &&

        document.body.currentStyle['marginTop'])

    {

        ctop += parseInt(document.body.currentStyle['marginTop']);

    }



    box.style.top = ctop + 'px';

}



// Shows a box if it wasn't shown yet or is hidden

// or hides it if it is currently shown

function show_hide_box(an, width, height, borderStyle)

{

    var href = an.href;

    var boxdiv = document.getElementById(href);



    if (boxdiv != null)

    {

        if (boxdiv.style.display=='none')

        {

            // Show existing box, move it

            // if document changed layout

            move_box(an, boxdiv);

            boxdiv.style.display='block';



            bringToFront(boxdiv);



            // Workaround for Konqueror/Safari

            if (!boxdiv.contents.contentWindow)

                boxdiv.contents.src = href;

        }

        else

            // Hide currently shown box.

            boxdiv.style.display='none';

        return false;

    }



    // Create box object through DOM

    boxdiv = document.createElement('div');



    // Assign id equalling to the document it will show

    boxdiv.setAttribute('id', href);



    boxdiv.style.display = 'block';

    boxdiv.style.position = 'absolute';

    boxdiv.style.width = width + 'px';

    boxdiv.style.height = height + 'px';

    boxdiv.style.border = borderStyle;

    boxdiv.style.textAlign = 'right';

    boxdiv.style.padding = '4px';

    boxdiv.style.background = '#FFFFFF';

    document.body.appendChild(boxdiv);

    bringToFront(boxdiv);



    var offset = 0;



    // Remove the following code if 'Close' hyperlink

    // is not needed.

    var close_href = document.createElement('a');

    close_href.href = 'javascript:void(0);';

    close_href.onclick = function()

        { show_hide_box(an, width, height, borderStyle); }

    close_href.appendChild(document.createTextNode('Close'));

    boxdiv.appendChild(close_href);

    offset = close_href.offsetHeight;

    // End of 'Close' hyperlink code.



    var contents = document.createElement('iframe');

    //contents.scrolling = 'no';

    contents.overflowX = 'hidden';

    contents.overflowY = 'scroll';

    contents.frameBorder = '0';

    contents.style.width = width + 'px';

    contents.style.height = (height - offset) + 'px';



    boxdiv.contents = contents;

    boxdiv.appendChild(contents);



    move_box(an, boxdiv);



    if (contents.contentWindow)

        contents.contentWindow.document.location.replace(

            href);

    else

        contents.src = href;



    // The script has successfully shown the box,

    // prevent hyperlink navigation.

    return false;

}



function getAbsoluteDivs()

{

    var arr = new Array();

    var all_divs = document.body.getElementsByTagName("DIV");

    var j = 0;



    for (i = 0; i < all_divs.length; i++)

        if (all_divs.item(i).style.position=='absolute')

        {

            arr[j] = all_divs.item(i);

            j++;

        }



    return arr;

}



function bringToFront(obj)

{

    if (!document.getElementsByTagName)

        return;



    var divs = getAbsoluteDivs();

    var max_index = 0;

    var cur_index;



    // Compute the maximal z-index of

    // other absolute-positioned divs

    for (i = 0; i < divs.length; i++)

    {

        var item = divs[i];

        if (item == obj ||

            item.style.zIndex == '')

            continue;



        cur_index = parseInt(item.style.zIndex);

        if (max_index < cur_index)

        {

            max_index = cur_index;

        }

    }



    obj.style.zIndex = max_index + 1;

}

[drhowarddrfine]

This will be difficult to figure out without the HTML. Do you have this on the web or can you make a jsfiddle?

In any case, though IE is showing what you want, Firefox and Chrome will show what you wrote. Never, ever use IE as a reference for how things work.

[leutrim]

Thank you for replying.
Yes I have this on web, here is the whole html and javascript code. The two pictures, Qyteti.jpg and you.jpg, I can send it to you, if necessary.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="mapguide1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script src="popup.js" type="text/javascript"></script>
</head>

<body >

  
  <img src="Qyteti.jpg" width="1500" height="1500" alt="Harta" usemap="#citymap" />

  <map name="citymap">

  <area shape="rect" coords="0,0,600,600" href="you.jpg" onclick="return show_hide_box(this, 200, 270, '2px solid')" alt="LE" />
  <area shape="rect" coords="650,650,1200,1200" href="you.jpg" onclick="return show_hide_box(this, 200, 270, '2px solid')" alt="LE" />
  
  
  </map>
  
  
  
  
  
  
   
   <script type="text/javascript">
// Moves the box object to be directly beneath an object.
function move_box(an, box){  
 var cleft = 0; 
 var ctop = 0;   
 var obj = an;  
  while (obj.offsetParent)    {   
    cleft += obj.offsetLeft;    
    ctop += obj.offsetTop;    
    obj = obj.offsetParent;    }
 
  box.style.left = cleft + 'px';  
  ctop += an.offsetHeight + 8;   

 // Handle Internet Explorer body margins, 
 // which affect normal document, but not 
 // absolute-positioned stuff.   

 if (document.body.currentStyle &&        document.body.currentStyle['marginTop'])    {        

ctop += parseInt(document.body.currentStyle['marginTop']);    }    

box.style.top = ctop + 'px';}




// Shows a box if it wasn't shown yet or is hidden
// or hides it if it is currently shownfunction 

show_hide_box(an, width, height, borderStyle){  
 var href = an.href;   
 var boxdiv = document.getElementById(href);  
 if (boxdiv != null) {     
   if (boxdiv.style.display=='none')  {        

    // Show existing box, move it       
     // if document changed layout      

      move_box(an, boxdiv);               boxdiv.style.display='block';            bringToFront(boxdiv);         

   // Workaround for Konqueror/Safari        

    if (!boxdiv.contents.contentWindow)   

          boxdiv.contents.src = href;        }        else         

   // Hide currently shown box.            

boxdiv.style.display='none';     
   return false;    } 

   // Create box object through DOM 
   boxdiv = document.createElement('div');   

 // Assign id equalling to the document it will show 

  boxdiv.setAttribute('id', href);     
  boxdiv.style.display = 'block';  
  boxdiv.style.position = 'absolute';     
  boxdiv.style.width = width + 'px';     
  boxdiv.style.height = height + 'px';    
  boxdiv.style.border = borderStyle;    
  boxdiv.style.textAlign = 'right';    
  boxdiv.style.padding = '4px';  
  boxdiv.style.background = '#FFFFFF';    
  document.body.appendChild(boxdiv);    
  bringToFront(boxdiv);    var offset = 0;   

 // Remove the following code if 'Close' hyperlink    // is not needed.   

 var close_href = document.createElement('a');     
 close_href.href = 'javascript:void(0);';     
 close_href.onclick = function()        { 

show_hide_box(an, width, height, borderStyle); }  
  close_href.appendChild(document.createTextNode('Close'));  
  boxdiv.appendChild(close_href); 
  offset = close_href.offsetHeight;  

  // End of 'Close' hyperlink code.    var contents = document.createElement('iframe');    

//contents.scrolling = 'no';  
  contents.overflowX = 'hidden';  
  contents.overflowY = 'scroll'; 
  contents.frameBorder = '0';   
  contents.style.width = width + 'px';     
  contents.style.height = (height - offset) + 'px';       
  boxdiv.contents = contents;    
  boxdiv.appendChild(contents);  

  move_box(an, boxdiv);   
 
  if (contents.contentWindow)           
   contents.contentWindow.document.location.replace(            href);   

 else        contents.src = href; 

  // The script has successfully shown the box,   
 // prevent hyperlink navigation.  

  return false;}

function getAbsoluteDivs(){   
 var arr = new Array();   
 var all_divs =  
 document.body.getElementsByTagName("DIV");   
 var j = 0;  
 for (i = 0; i < all_divs.length; i++)  

      if (all_divs.item(i).style.position=='absolute')        {            arr[j] = all_divs.item(i);    
        j++;        }  
  return arr;}

function bringToFront(obj){   
 if (!document.getElementsByTagName)    
    return;    var divs = getAbsoluteDivs(); 
   var max_index = 0;   
   var cur_index;   
 
// Compute the maximal z-index of  
// other absolute-positioned divs   

 for (i = 0; i < divs.length; i++)    {  
      var item = divs[i];  
      if (item == obj || item.style.zIndex == '')            continue;    
    cur_index = parseInt(item.style.zIndex);    
    if (max_index < cur_index)        {            max_index = cur_index;        }    }   

 obj.style.zIndex = max_index + 1;}</script>
   
</body>
</html>

[drhowarddrfine]

In your css, you have the body's margin set to zero and the modern browsers are honoring that. IE is not. I haven't looked to see why yet.

EDIT: Got distracted. That's not the main issue. Look at the error in the error console.