Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> слой поверх выпадающего списка 
:(
    Опции темы
homer21
Дата 29.5.2006, 14:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 3
Регистрация: 29.5.2006

Репутация: нет
Всего: нет
Здравствуйте all.

Столкнулся с проблемой. Суть такова ,при создании слоя
например так

<div id="panelParams" style="display: none; z-index: 101; left: 150pt; WIDTH: 350pt; POSITION: absolute; TOP: 230pt; HEIGHT: 200pt; BACKGROUND-COLOR: gray" ></div>

Слой становиться видимым посередине окна. Так вот если под ним есть выпадающие списки, то они просвечивают мой слой. Как будто они находяться всегда впереди...

Как это обойти?
                 

Присоединённый файл ( Кол-во скачиваний: 11 )
Присоединённый файл  Untitled_2.gif 14,67 Kb
PM MAIL   Вверх
light0ff
Дата 29.5.2006, 14:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 41
Регистрация: 29.1.2006
Где: Латвия, Рига

Репутация: нет
Всего: нет
В IE всегда так, поля ввода всегда наверху (ниже обсуждалось). В firefox - с этим все нормально. 
В этом случае единственный способ для Internet Explrer - написать псевдо селект. 
PM MAIL   Вверх
Alx
Дата 29.5.2006, 14:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78
homer21, light0ff
ничего подобного, выход уже давно найден.
селекты перекрывает IFRAME.
создаем слой с пустым IFRAME, при событии динамически генерим его размеры и координаты и вставляем текст подсказки.
пример - http://soft.flyweb.in/small/JsDragObjs/example.html   

Это сообщение отредактировал(а) Alx - 29.5.2006, 14:58


--------------------
© сам придумал.

. the world's most misunderstood programming language .
PM MAIL WWW ICQ   Вверх
homer21
Дата 29.5.2006, 16:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 3
Регистрация: 29.5.2006

Репутация: нет
Всего: нет
2 Alx
Спасибо огромное
Выход действительно прост smile))
Перечитал массу топиков в инете про то как невозможно сделать. 

Но в итоге
1. Делаетcя iframe c Z-INDEX=100 (например)
  с теми же размерами что и слой который должен отображать данные
2. Делается слой c Z-INDEX=101
 и размещается поверх фрейма.

Получается Фрейм закрывает списки. Наш слой отображается верно.  
PM MAIL   Вверх
Alx
Дата 29.5.2006, 16:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ajaxy
****


Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78
homer21, 
да нет, zIndex вообще можно не использовать.
просто iframe размещай внутри абсолютно позиционированного div'а, а он уже автоматически будет перекрывать select. 


--------------------
© сам придумал.

. the world's most misunderstood programming language .
PM MAIL WWW ICQ   Вверх
homer21
Дата 29.5.2006, 16:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 3
Регистрация: 29.5.2006

Репутация: нет
Всего: нет
2 Alx

Ну это дела вкуса smile
мне загружать данные  в iframe больше гемора, т.к. содержимое слоя контрол asp.net 
PM MAIL   Вверх
poison4401
Дата 18.7.2006, 10:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 4
Регистрация: 2.7.2006

Репутация: нет
Всего: нет
А без использования <iframe> можно как-то обойтись, чтобы в IE select'ы не просвечивали верхние слои?

У меня просто трабла в том, что я вывожу всплывающее описание, и в IE оно не может перекрыть select'ы!
И штука вся в том, что у меня описание это генериться динамически. 

Или в данном случае использовать IFRAME,  и  просто указывать src="message.php?sms=1", где уже будет браться содержание сообщения динамически? Но тогда в этом случае получается, что если у меня громозкое содержание описания (например таблица с большим количеством мелких изображений), то я вынужден ждать пока у меня прогрузится весь фрейм. А мне бы хотелось, чтобы загрузка описания была уже в момент загрузки основной страницы, как сейчас есть.

Вот пример кода:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
.clDescriptionCont {position:absolute;  width:200px; visibility:hidden; layer-background-color:#cccccc; z-index:200;}
.clDescription     {width:150px; left:0px; top:0px; font-family:verdana,arial,helvetica,sans-serif; overflow:hidden; border: 1px solid #999999; padding:3px; font-size:11px; background-color:#cccccc; layer-background-color:#cccccc;}
.clLinks           {position:absolute; left:100px; top:200px; z-index:1;}
.clCaption         {position:absolute; left:0px; top:0px; width:157px; height:15px; clip:rect(0px 157px 15px 0px); font-size:11px; font-family:verdana,arial,helvetica,sans-serif; background-color:#999999; layer-background-color:#999999;}
</style>


<script language="JavaScript" type="text/javascript">
/**********************************************************************************   
PopupDescriptions 
*   Copyright (C) 2001 Thomas Brattli
*   This script was released at DHTMLCentral.com
*   Visit for more great scripts!
*   This may be used and changed freely as long as this msg is intact!
*   We will also appreciate any links you could give us.
*
*   Made by Thomas Brattli
*
*   Script date: 09/04/2001 (keep this date to check versions) 
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
    this.ver=navigator.appVersion
    this.agent=navigator.userAgent
    this.dom=document.getElementById?1:0
    this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
    this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
    this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
    this.ie=this.ie4||this.ie5||this.ie6
    this.mac=this.agent.indexOf("Mac")>-1
    this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
    this.ns4=(document.layers && !this.dom)?1:0;
    this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
    return this
}
var bw=lib_bwcheck()

/***************************************************************************************
Variables to set:
***************************************************************************************/
messages=new Array()
//Write your descriptions in here.
messages[0] = "Description of test link 0 asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd  asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd"
messages[1] = "Description of test link 1 asd asd asd asd asd asd asd asd asd as ds asdasd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asdasd asd asd asd asd asd asd asd asd asd asd  asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd"
messages[2] = "Description of test link 2"
messages[3] = "Description of test link 3"
messages[4] = '<div class="clCaption">Your caption</div><br>Description of test link 4</div>'
//To have more descriptions just add to the array.

fromX = 50 //How much from the actual mouse X should the description box appear?
fromY = -20 //How much from the actual mouse Y should the description box appear?

//To set the font size, font type, border color or remove the border or whatever,
//change the clDescription class in the stylesheet.

//Makes crossbrowser object.
function makeObj(obj){                                
    this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layers[obj]:0;
    if(!this.evnt) return false
    this.css=bw.dom||bw.ie4?this.evnt.style:bw.ns4?this.evnt:0;    
    this.wref=bw.dom||bw.ie4?this.evnt:bw.ns4?this.css.document:0;        
    this.writeIt=b_writeIt;                                                                
    return this
}

// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";

function b_writeIt(text){
    if (bw.ns4){this.wref.write(text);this.wref.close()}
    else this.wref.innerHTML = text
}

//Capturing mousemove
var descx = 0
var descy = 0
function popmousemove(e){descx=bw.ns4||bw.ns6?e.pageX:event.x; descy=bw.ns4||bw.ns6?e.pageY:event.y}

var oDesc;
//Shows the messages
function popup(num){
    if(oDesc){
        oDesc.writeIt('<div class="clDescription">'+messages[num]+'</div>')
        if(bw.ie5||bw.ie6) descy = descy+document.body.scrollTop
        oDesc.css.left = (descx+fromX)+px
        oDesc.css.top = (descy+fromY)+px
        oDesc.css.visibility = "visible"
    }
}
//Hides it
function popout(){
    if(oDesc) oDesc.css.visibility = "hidden"
}
function setPopup(){
    if(bw.ns4)document.captureEvents(Event.MOUSEMOVE)
    document.onmousemove = popmousemove;
    oDesc = new makeObj('divDescription')
}
</script>
        
</head>

<body>


<div id="divDescription" class="clDescriptionCont">
<!--Empty div-->        
</div>
<div id="divLinks" class="clLinks">
    <!-- Just delete this layer, it's just here for the example links -->
    <a href="#" onmouseover="popup(0)" onmouseout="popout()">test link 0</a> -
    <a href="#" onmouseover="popup(1)" onmouseout="popout()">test link 1</a> -
<form action="center.php?center=mix&mode=1&type=1" method="post" enctype="multipart/form-data" name="mix11" onsubmit="return checkmix11(this.oil1,this.oil2,this.oil3,this.oil4,this.oil5,this.proc1,this.proc2,this.proc3,this.proc4,this.proc5,this.kol);"> 
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td width="100%" height="100">

    <table width="100%" cellspacing="1" cellpadding="1" border="0">

    <tr>
        <td valign="top" width="100%">

            <table cellspacing="0" cellpadding="0" border="0" >
            <tr>
                <td valign="top" class="c8pt">Выбор:</td>
                <td>&nbsp;</td>
                <td valign="top">
                <select name="V" style="width:80px;" class="c8pt">
                <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select>

                </td>
            </tr>
            </table>
        </td>
    </tr>

    </table>

</td>
</tr>
</table></form>


</div>
<script type="text/javascript">setPopup()</script>
</body>
</html>


Кто-нибудь может подсказать как лучше всего выкрутиться?   

Это сообщение отредактировал(а) poison4401 - 18.7.2006, 11:17
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0810 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.