Xinha Discussion Forum

ceecko

New member

Registered: 2006-02-12

Posts: 1

xinha is hiding the css menu

Hi there,

I have a issue to be solved. I'm pretty new to xinha and I'm considering its use, however I have a problem, which probably I cannot solve on my own.
I'm using a css menu, but I have a problem probably with the z-index value. The css menu is hidden under xinha...
The picture will tell you more >

It used to do the same on the fullscreen button, but I solved it with z-index value in css stylesheet. However I cannot get rid of this issue The other buttons are just fine.

The problem is in IE6, in firefox everything is ok...

Can anyone help me please?
Thank you

Last edited by ceecko (2006-02-12 09:56:18)

gogo

Xinha Leader

From: New Zealand

Registered: 2005-02-11

Posts: 1,015

Website

Re: xinha is hiding the css menu

Select lists are "windowed" elements in IE, they always appear on top.  At least last time I looked there is no solution (aside from hiding the select lists, but that's a job for your menu code, not Xinha).

---

James Sleeman

mokhet

Xinha Authority

From: Paris, France

Registered: 2005-04-03

Posts: 105

Website

Re: xinha is hiding the css menu

hiding the select lists is one solution, but imo it's very ugly. Can be pretty confusing to have select lists appearing and disappearing on the document. The solution i think is better is to mask your element with an iframe with a lower zIndex than your element.

function mask(id_element)
{
 // mask is only needed for IE, do nothing if not IE
 // will we ever get rid of crappy IE behavior ?
 if (!HTMLArea.is_ie) { return ; }
 var element = document.getElementById(id_element);
 var iframe = document.createElement('iframe');
 var zIndex = getStyle(element, 'zIndex') - 1;
 if (isNaN(zIndex)) { zIndex = -1);
 iframe.style.zIndex = zIndex;
 iframe.style.position = 'absolute';
 iframe.style.top = findPosY(element) + 'px';
 iframe.style.left = findPosX(element) + 'px';
 iframe.style.width = element.offsetWidth;
 iframe.style.height = element.offsetHeight;
 iframe.style.overflow = 'hidden';
 iframe.style.borderWidth = '0px';
 document.body.appendChild(iframe);
}

I didnt tested this piece of code but i hope you understand the theory. Dont forget to remove the mask (the iframe) when you hide your element (your menu in your case).

But as stated by gogo, Xinha can do nothing for you here, it's a job for your menu code.

I cant believe anyone doing some javascript not having them but in case you dont have the functions getStyle, findPosX and findPosY (or any equivalent doing the job) in your common javascript toolkit, here is what i am using :

/**
 * alias for document.getElementById
 * @param {String} element ID of the HTMLElement
 * @return {HTMLElement} Return a HTMLElement reference
 */
function $(element) { return document.getElementById(element); };

/**
* Normalizes currentStyle and ComputedStyle.
* @param {String | HTMLElement} Accepts either a string to use as an ID for getting a DOM reference, or an actual DOM reference.
* @param {String} property The style property whose value is returned.
* @return {String} The current value of the style property.
*/
function getStyle(el, property) {
  var value = null;
  var dv = document.defaultView;

  if (typeof el == 'string') { el = $(el); }

  if (property == 'opacity' && el.filters)
  { // IE opacity
    value = 1;
    try
    {
      value = el.filters.item('DXImageTransform.Microsoft.Alpha').opacity / 100;
    }
    catch(e)
    {
      try
      {
        value = el.filters.item('alpha').opacity / 100;
      } catch(e) {}
    }
  }
  else if (el.style[property])
  {
     value = el.style[property];
  }
  else if (el.currentStyle && el.currentStyle[property])
  {
     value = el.currentStyle[property];
  }
  else if ( dv && dv.getComputedStyle )
  {  // convert camelCase to hyphen-case

    var converted = '';
    for (var i=0, len=property.length; i<len; ++i)
    {
      if (property.charAt(i) == property.charAt(i).toUpperCase())
      {
        converted = converted + '-' + property.charAt(i).toLowerCase();
      }
      else
      {
        converted = converted + property.charAt(i);
      }
    }

    if (dv.getComputedStyle(el, '').getPropertyValue(converted))
    {
      value = dv.getComputedStyle(el, '').getPropertyValue(converted);
    }
  }

  return value;
};

/**
* find X position of an element
* @param {String | HTMLElement} obj Accepts either a string to use as an ID for getting a DOM reference, or an actual DOM reference.
* @return {Number} The current X position of the object.
*/
function findPosX(obj)
{
  if (typeof obj == 'string') { obj = $(obj); }
  var curleft = 0;
  if (obj.offsetParent)
  {
    while (obj.offsetParent)
    {
      curleft += obj.offsetLeft;
      obj = obj.offsetParent;
    }
  }
  else if (obj.x)
  {
    curleft += obj.x;
  }
  return curleft;
};

/**
* find Y position of an element
* @param {String | HTMLElement} obj Accepts either a string to use as an ID for getting a DOM reference, or an actual DOM reference.
* @return {Number} The current Y position of the object.
*/
function findPosY(obj)
{
  if (typeof obj == 'string') { obj = $(obj); }
  var curtop = 0;
  if (obj.offsetParent)
  {
    while (obj.offsetParent)
    {
      curtop += obj.offsetTop;
      obj = obj.offsetParent;
    }
  }
  else if (obj.y)
  {
    curtop += obj.y;
  }
  return curtop;
};

Last edited by mokhet (2006-02-15 08:58:50)