Меню
Что нового?

Длинные строки внутри тэга option

hammet

Новичок
Длинные строки внутри тэга option

Представим себе <select multiple size="5" name="x">... в опшенах которого может появляться достаточно длинная строка, которая не вмещается в ширину селекта, скажем в 200 пкс. И соответственно часть текста не видна.
Вижу пока единственное решение делать hint при наступлении события onmouseover, показывать какой нибудь div и писать туда текст из <option></option>, хотя вариант не самый элегантный. При этом даже можно отлавливать координаты мыши и див показывать над курсором, но это ж блин изобретение велосипеда, которые есть браузере под именем alt / title....
Буду рад вашей помощи.
 

LeFF®

Новичок
так принципиально делать мультиселектом а не чекбоксами?
 

hammet

Новичок
Да. В нем список регионов России (80 кажется), либо список категорий (их около 50). К тому же я не в праве менять дизайн :)

-~{}~ 20.02.08 11:44:

вижу других вариантов нет....

-~{}~ 20.02.08 18:17:

Написал такой вот код, проблема только в ИЕ проблема со слоями, проклятый хинт находится под формой :(
Хелп!

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> 
<head> 
<title>select test</title> 
<script type="text/javascript">
<!--
document.onmousemove = getCoordinates;
function getCoordinates(e) {
  var IE = document.all?true:false;
  if (!IE) document.captureEvents(Event.MOUSEMOVE)
  if (IE) {
    mouseX = event.clientX + document.body.scrollLeft;
    mouseY = event.clientY + document.body.scrollTop;
  }
  else {
    mouseX = e.pageX;
    mouseY = e.pageY;
  }
  if (mouseX < 0){mouseX = 0;}
  if (mouseY < 0){mouseY = 0;}
  var div = document.getElementById("hint");
  div.style.top  = (mouseY-30) + 'px';
  div.style.left = (mouseX+10) + 'px';
}

function hint() {
   var select = document.getElementById("select");
   var div = document.getElementById("hint");
   div.innerHTML = select.options[select.selectedIndex].text;
   div.style.display = "block";
}

function hide() {
   document.getElementById("hint").style.display = "none";
}
//-->
</script>
<style type="text/css">
#hint {border: 1px solid #ccc; 
       background: #F1F1F1; 
       width: 300px; 
       font-size: 78%; 
       display: none; 
       padding: 2px;
       font-family: Arial; 
       position: absolute; 
       top: 0;
       left: 0;
       z-index: 2;
       //filter:alpha(opacity=90); -moz-opacity: .9; opacity: .9;
}
#form {position: absolute; 
       top: 100px; 
       left: 100px;
       z-index: 1;
}
#select {width: 200px; z-index: 1; position: relative; top: 0; left: 0;}
</style>
</head> 
<body> 
<div id="form">
<select size="5" name="select" onclick="hint()" onmouseout="hide()" id="select">
       <option value="1">Класс View, который входит в Zend Framework, имеет очень плохие способности к расширению.</option>
       <option value="2">My solution was to create a class that extended Zend_View_Abstract.</option>
       <option value="3">Класс View, который входит в Zend Framework, имеет очень плохие способности к расширению.</option>
       <option value="4">My solution was to create a class that extended Zend_View_Abstract.</option>
       <option value="1">Класс View, который входит в Zend Framework, имеет очень плохие способности к расширению.</option>
       <option value="2">My solution was to create a class that extended Zend_View_Abstract.</option>
       <option value="3">Класс View, который входит в Zend Framework, имеет очень плохие способности к расширению.</option>
       <option value="4">My solution was to create a class that extended Zend_View_Abstract.</option>
 </select>
</div>
<div id="hint"></div>
</body> 
</html>
 

LeFF®

Новичок
в ИЕ селект всегда самым верхним слоем отображается, и z-index на него не действует(
 

hammet

Новичок
Я не знал этого...
ппц лажа :(
неужели нельзя придумать ничего?
 

hammet

Новичок
Ха!
решение есть и оно тут
http://anton-egorov.blogspot.com/2007/11/ie-select-z-index.html
 
Войдите или зарегистрируйтесь для ответа.
Сверху