I tried to make multiple elements exposed like:
$("img").expose();
It works fine for almost all browsers but IE do not expose all items, so I tried to make my own expose function that work for IE too like:
if ($.browser.msie && $.browser.version.substring(0,1) < '9')
{
$('body').find('*').css({'z-index':1});
$('<div />').addClass('lightbox_IE').css({'width':($(document).width()),'height':($(document).height()),'position':'absolute','z-index':50}).appendTo('body').show();
$('.Result').each(function (i) {
$(this).addClass("editeModeBox");
});
$('body').find('.Result').css({'z-index':60});
}
else
{
$('<div />').addClass('lightbox_notIE').css({'width':($('body').width()),'height':($(document).height()),'position':'fixed'}).appendTo('body').show();
$('.Result').each(function (i) {
$(this).addClass("editeModeBox").css({'z-index':1000});
});
}
my css is:
<style>
.editeModeBox
{
position:relative;
background-color: White !important;
-webkit-box-shadow: 2px 2px 10px #4a4a4a;
-moz-box-shadow: 2px 2px 10px #4a4a4a;
box-shadow: 2px 2px 10px #4a4a4a;
-moz-border-radius: 3px;
border-radius: 3px;
}
.Result
{
position:relative;
padding:5px;
}
.lightbox_notIE
{
background: #000 none repeat scroll 0 0;
height: 100%;
width: 100%;
z-index: 999;
left: 0;
filter: alpha(opacity=50);
opacity: 0.5;
top: 0;
}
.lightbox_IE
{
background: #000 none repeat scroll 0 0;
/*background: url(../images/ui-bg.png) repeat;*/
z-index: 999;
left: 0;
filter: alpha(opacity=50);
opacity: 0.5;
top: 0;
display: none;
bottom: auto;
clear: both;
top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) - 1 : document.body.scrollTop +(document.body.clientHeight-this.clientHeight) - 1);
}
</style>
but I stuck with a problem again for z-index in IE, and I found that it is the same problem in expose class. then I tried to solve some z-Indexing problem with adding:
<!--[if IE 7]><script type="text/javascript">$(function(){var zIndexNumber=500;$('div').each(function(){$(this).css('zIndex',zIndexNumber);zIndexNumber-=5;});});</script><![endif]-->
but nothing worked.
if any one solve this problem please let us know.
