Jump to content
  • 0

Applet под Div и iFrame!


Rezet
 Share

Question

Задача: Наложить полупрозрачный слой на java applet.

На сайте использую multibox для подгрузки подробной версии новости. В мультибоксе при клике на "Подробнее" стандартно создаётся полупрозрачный див 100 на 100 процентов + слой-рамка новости, а в этом слою в iframe подгружается полная новость. Всё работало отлично, пока я не поставил java applet на страницу(pjirc). Теперь аплет перекрывает даже оверлей, создаваемый мультибоксом. Погуглив, я выяснил, что апплеты как бЭ грузятся не браузером, а операционкой, потому это не проблема z-index'a... Самое нормальное решение нашёл ЗДЕСЬ. Для тех кто не шарит в английском, чел перекрыл апплет используя трюк iFrame shim. Он как бы сделал слой над фреймом, а фрейм над апплетом. Ну думаю, знающие люди уже поняли всё по коду скрипта (я просто совсен не знаю java script).

И к сожалению это решение не работает на Опере... А оперой то пользуется... дай Бог народа.

Можете исправить код, чтобы он работал и в опере?

И может кто-то тоже юзает multibox, помог добавить этот фикс в сприпт, наверняка многим это тоже пригодится!

fdf.jpg

w1280.png

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Ну как обычно мне никто не может ответить....

Нашёл косяк в скрипте создающем оверлей для multibox. Вот что он мне выдаёт:

<div style="overflow: hidden; position: absolute; left: 0px; top: 0px; width: 1242px; visibility: visible; z-index: 1; opacity: 0.7; height: 1016px;" id="OverlayContainer"><iframe style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; visibility: hidden; opacity: 0; z-index: 1;" src="java script:void(0);" name="OverlayIframe" id="OverlayIframe" scrolling="no" frameborder="0"></iframe><div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 2; background-color: rgb(0, 0, 0);" id="Overlay"></div></div>

Хотя по идее он должен отображать это в такой структуре: <div><iframe><div></div></iframe></div>

Помогите, пожалуйста, исправить ошибку!

Код скрипта:

var Overlay = new Class({

getOptions: function(){
return {
colour: '#000',
opacity: 0.7,
zIndex: 1,
container: $(document.body),
onClick: new Class()
};
},

initialize:function(options)
{
this.setOptions(this.getOptions(),options);

this.container = new Element('div').setProperty('id','OverlayContainer').setStyles({
position: 'absolute',
left: '0px',
top: '0px',
width: '100%',
visibility: 'hidden',
overflow: 'hidden',
zIndex: this.options.zIndex,
opacity: 0
}).inject(this.options.container,'inside');

this.iframe = new Element('iframe').setProperties({
id: 'OverlayIframe',
name: 'OverlayIframe',
src: 'java script:void(0);',
frameborder: 0,
scrolling: 'no'
}).setStyles({
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
filter: 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)',
opacity: 0,
zIndex: 1
}).inject(this.container,'inside');

this.overlay = new Element('div').setProperty('id','Overlay').setStyles({
position: 'absolute',
left: '0px',
top: '0px',
width: '100%',
height: '100%',
zIndex: 2,
backgroundColor: this.options.colour
}).inject(this.container,'inside');

this.container.addEvent('click',function(){
this.options.onClick();
}.bind(this));

this.fade = new Fx.Morph(this.container);
this.position();

window.addEvent('resize',this.position.bind(this));
},

position: function(){
this.container.setStyle('height','0');//reset container height ready for resize( removes scrollbar so new calc is true - liam)
if(this.options.container == document.body){
if(this.options.container.getSize().y >= this.options.container.getScrollSize().y){
this.container.setStyles({
width: window.getSize().x+'px',
height: window.getSize().y+'px'
});
}else{
this.container.setStyles({
width: window.getSize().x+'px',
height: window.getScrollSize().y+'px'
});
}
}else{
var myCoords = this.options.container.getCoordinates();
this.container.setStyles({
top: myCoords.top+'px',
height: myCoords.height+'px',
left: myCoords.left+'px',
width: myCoords.width+'px'
});
};
},

show: function(){
this.fade.start({
opacity: this.options.opacity,
visibility: 'visible'
});
},

hide: function(){
this.fade.start({
opacity: 0,
visibility: 'hidden'
});
}
});

Overlay.implement(new Options);

Link to comment
Share on other sites

  • 0

Совершенно без знания скриптов сделал так:

show: function(){
this.fade.start({
opacity: this.options.opacity,
visibility: 'visible'
});
this.iframe.setStyles({
opacity:1
});
},

hide: function(){
this.fade.start({
opacity: 0,
visibility: 'hidden'
});
this.iframe.setStyles({
opacity:0
});

Это позволило добиться нужного результата, НО в Opera апплету насрать на точто его перекрывает фрейм... Я вижу один вариант при клике присвоить visibility:hidden аплету, но как это вставить в этот скрипт???

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy