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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Невидимый Div, отображающийся по клику 
V
    Опции темы
Michael.de
Дата 12.11.2008, 04:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 4
Всего: 9



Цитата(Wheels @  11.11.2008,  23:20 Найти цитируемый пост)
В IE дивы закрываются "через раз". При клике на кнопку закрываются на сотый раз, если вообще закрываются.
Я вообще не понимаю, как эта конструкция работает в лисе и опере (имею ввиду ф-цию closeqw() и её вызов в 36 строчке)...но работает smile
Я бы сделал как в моём примере: глоб. массив для кнопок, вначале содержащий все элем. false. При клике меняешь соотв. кнопке элемент: clicked[el]=!clicked[el]; --> отпадает потребность в 2х функциях: openqw() и closeqw() --> вместо них использ. только одну, в которой, в завис. от знач. (true or false) показываешь или скрываешь инфу.

Цитата(Wheels @  11.11.2008,  23:20 Найти цитируемый пост)
И еще не могу понять как сделать id кнопкам такого вида: butt[0]; а в функциях    findPosX(document.getElementById(x)); вместо x писать butt[x].
Во первых (если не ошибаюсь) id не может начинаться с цифры (быть ею).
Если я тебя правильно понял: пишешь в HTML: id='blabla0', получаешь элемент: var el=document.getElementById('blabla0'); и его id: var id=el.id; А дальше используешь след. констр.: var tvoj_x=parseInt(id.substr(6)); 6 - кол-во отрезаемых символов с начала id (blabla).
PM MAIL   Вверх
Wheels
Дата 12.11.2008, 10:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: 1
Всего: 1



Michael.de, в твоем примере нельзя закрыть див по клику в любом месте страницы. =((   Именно для этого наворочена функция closeqw()
Цитата(Michael.de @  12.11.2008,  04:51 Найти цитируемый пост)
Я вообще не понимаю, как эта конструкция работает в лисе и опере (имею ввиду ф-цию closeqw() и её вызов в 36 строчке)...но работает smile
Я бы сделал как в моём примере: глоб. массив для кнопок, вначале содержащий все элем. false. При клике меняешь соотв. кнопке элемент: clicked[el]=!clicked[el]; --> отпадает потребность в 2х функциях: openqw() и closeqw() --> вместо них использ. только одну, в которой, в завис. от знач. (true or false) показываешь или скрываешь инфу.

 smile 
Цитата(Michael.de @  12.11.2008,  04:51 Найти цитируемый пост)
Во первых (если не ошибаюсь) id не может начинаться с цифры (быть ею).
Если я тебя правильно понял: пишешь в HTML: id='blabla0', получаешь элемент: var el=document.getElementById('blabla0'); и его id: var id=el.id; А дальше используешь след. констр.: var tvoj_x=parseInt(id.substr(6)); 6 - кол-во отрезаемых символов с начала id (blabla). 

не, в функцию openqw(x, hei); и так уже пошел уникальный параметр x. 
Вот я и хочу сделать id такого вида <input type=button value="Нажми" onclick="openqw(1, 100)" id="butt[1]">, чтобы внутри функции всегда можно было написать butt[x].

Похоже, что единственного правильного решения нету =( Прокрутку и глюки в ИЕ так и не убрать(

Добавлено через 12 минут
нашел причину прокрутки: я присваивал координаты главному диву, который во все окно, вместо того, что бы присвоить маленьким.

Это сообщение отредактировал(а) Wheels - 12.11.2008, 10:21
PM MAIL ICQ   Вверх
Wheels
Дата 12.11.2008, 11:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: 1
Всего: 1



Вроде все здОрово, но залипания в ie остались... 
с чем это связано?
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
#win0
{
    position: absolute;
    border: 1px solid navy;
    width: 200px;
    height: 50px;
    background: blue;
    color: white;
}
#win1
{
    position: absolute;
    border: 1px solid navy;
    width: 200px;
    height: 100px;
    background: red;
    color: white;
}
#qw
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: none;
}
</style>
</head>

<body>
<div id="qw" onclick="closeqw()"></div>
В октябре россияне забрали из Сбербанка вкладов на 80 миллиардов рублей.<br />
Этот месяц стал самым неудачным за последние 10 лет деятельности банка.<br />
Столь высокий отток средств сотрудники Сбербанка объясняют тем,<br />
что вкладчики из-за слухов о девальвации рубля и деноминации активно забирали свои средства со счетов.<br /><br />
<input type=button value="Нажми" onclick="openqw(0, 50)" id="but0">
<br><br /><br />
Юрий Лужков внес в Мосгордуму законопроект, <br />
устанавливающий правила продажи столичных исторических зданий.<input type=button value="Нажми" onclick="openqw(1, 100)" id="but1">
По закону раз в три года Москомнаследие будет составлять список зданий, <br />
выставляемых на аукцион, с условием, <br />
что новый владелец будет сохранять и восстанавливать памятники истории и культуры.

<script>
function findPosX(obj) {
// X-координата слоя
  var currleft = 0;
  if (obj.offsetParent)
    while (obj.offsetParent) {
      currleft += obj.offsetLeft
      obj = obj.offsetParent;
    }
  else if (obj.x) currleft += obj.x;
  return currleft;
}
function findPosY(obj) {
// Y-координата слоя
  var currtop = 0;
  if (obj.offsetParent)
    while (obj.offsetParent) {
      currtop += obj.offsetTop
      obj = obj.offsetParent;
    }
  else if (obj.y) currtop += obj.y;
  return currtop;
}
var win = new Array();
win[0] = '<div id=win0><b>№ 0</b></div>';
win[1] = '<div id=win1>окошко номер 1</div>';
//...
function openqw(x, hei) {
    var bx = findPosX(document.getElementById('but'+x));
    var by = findPosY(document.getElementById('but'+x));
    var el = document.getElementById('qw');
    el.innerHTML = win[x];
    el.style.display = 'block';

    var di = document.getElementById('win'+x);
    di.style.left = bx + 1;
    di.style.top = by - hei - 2;
}
function closeqw() {
    var el = document.getElementById('qw');
    //el.innerHTML = '';
    el.style.display = 'none';
}
</script>
</body>
</html>

PM MAIL ICQ   Вверх
Wheels
Дата 12.11.2008, 22:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: 1
Всего: 1



Все! Вилы =( 
Поставил строчку DOCTYPE Strict и FF напрочь отказался показывать дивы по координатам, стал показывать в левом верхнем углу экрана. В то время, как IE на координаты реагирует нормально, однако выборочно реагирует на клики для закрытия дивов.

Уважаемые, помогите пожалуйста.

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">

#divcol
{
    width: 10px;
    height: 10px;
    cursor: pointer;
    overflow: hidden;
}
#win0
{
    position: absolute;
    width: 114px;
    height: 72px;
    background: #cdcdcd;
}
#win1
{
    position: absolute;
    border: 1px solid navy;
    width: 200px;
    height: 100px;
    background: red;
    color: white;
}
#qw
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: none;
}
</style>
</head>

<body>
    overflow: auto!important;
    overflow: scroll;
<div id="qw" onclick="closeqw()"></div>
В октябре россияне забрали из Сбербанка вкладов на 80 миллиардов рублей.<br />
Этот месяц стал самым неудачным за последние 10 лет деятельности банка.<br />
Столь высокий отток средств сотрудники Сбербанка объясняют тем,<br />
что вкладчики из-за слухов о девальвации рубля и деноминации активно забирали свои средства со счетов.<br /><br />
<input type=button value="Нажми" onclick="openqw(0, 72)" id="but0">
<br><br /><br />
Юрий Лужков внес в Мосгордуму законопроект, <br />
устанавливающий правила продажи столичных исторических зданий.<input type=button value="Нажми" onclick="openqw(1, 80)" id="but1">
По закону раз в три года Москомнаследие будет составлять список зданий, <br />
выставляемых на аукцион, с условием, <br />
что новый владелец будет сохранять и восстанавливать памятники истории и культуры.

<script>
function findPosX(obj) {
// X-координата слоя
  var currleft = 0;
  if (obj.offsetParent)
    while (obj.offsetParent) {
      currleft += obj.offsetLeft
      obj = obj.offsetParent;
    }
  else if (obj.x) currleft += obj.x;
  return currleft;
}
function findPosY(obj) {
// Y-координата слоя
  var currtop = 0;
  if (obj.offsetParent)
    while (obj.offsetParent) {
      currtop += obj.offsetTop
      obj = obj.offsetParent;
    }
  else if (obj.y) currtop += obj.y;
  return currtop;
}
var win = new Array();
win[0] = '<div id=win0><table><tr><td bgcolor=#000000><div id=divcol></div></td><td bgcolor=#A0522D><div id=divcol></div></td><td bgcolor=#556B2F><div id=divcol></div></td><td bgcolor=#006400><div id=divcol></div></td><td bgcolor=#483D8B><div id=divcol></div></td><td bgcolor=#000080><div id=divcol></div></td><td bgcolor=#4B0082><div id=divcol></div></td><td bgcolor=#2F4F4F><div id=divcol></div></td></tr><tr><td bgcolor=#8B0000><div id=divcol></div></td><td bgcolor=#FF8C00><div id=divcol></div></td><td bgcolor=#808000><div id=divcol></div></td><td bgcolor=#008000><div id=divcol></div></td><td bgcolor=#008080><div id=divcol></div></td><td bgcolor=#0000FF><div id=divcol></div></td><td bgcolor=#708090><div id=divcol></div></td><td bgcolor=#696969><div id=divcol></div></td></tr><tr><td bgcolor=#FF0000><div id=divcol></div></td><td bgcolor=#F4A460><div id=divcol></div></td><td bgcolor=#9ACD32><div id=divcol></div></td><td bgcolor=#2E8B57><div id=divcol></div></td><td bgcolor=#48D1CC><div id=divcol></div></td><td bgcolor=#4169E1><div id=divcol></div></td><td bgcolor=#800080><div id=divcol></div></td><td bgcolor=#808080><div id=divcol></div></td></tr><tr><td bgcolor=#FF00FF><div id=divcol></div></td><td bgcolor=#FFA500><div id=divcol></div></td><td bgcolor=#FFFF00><div id=divcol></div></td><td bgcolor=#00FF00><div id=divcol></div></td><td bgcolor=#00FFFF><div id=divcol></div></td><td bgcolor=#00BFFF><div id=divcol></div></td><td bgcolor=#9932CC><div id=divcol></div></td><td bgcolor=#C0C0C0><div id=divcol></div></td></tr><tr><td bgcolor=#FFC0CB><div id=divcol></div></td><td bgcolor=#F5DEB3><div id=divcol></div></td><td bgcolor=#FFFACD><div id=divcol></div></td><td bgcolor=#98FB98><div id=divcol></div></td><td bgcolor=#AFEEEE><div id=divcol></div></td><td bgcolor=#ADD8E6><div id=divcol></div></td><td bgcolor=#DDA0DD><div id=divcol></div></td><td bgcolor=#FFFFFF><div id=divcol></div></td></tr></table></div>';
win[1] = '<div id=win1>окошко номер 1</div>';
//...
function openqw(x, hei) {
    var bx = findPosX(document.getElementById('but'+x));
    var by = findPosY(document.getElementById('but'+x));
    var el = document.getElementById('qw');
    el.innerHTML = win[x];
    el.style.display = 'block';

    var di = document.getElementById('win'+x);
    di.style.left = bx + 1;
    di.style.top = by - hei - 2;
}
function closeqw() {
    var el = document.getElementById('qw');
    //el.innerHTML = '';
    el.style.display = 'none';
}
</script>
</body>
</html>


Спасибо!

Это сообщение отредактировал(а) Wheels - 12.11.2008, 22:36
PM MAIL ICQ   Вверх
Michael.de
Дата 13.11.2008, 03:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 4
Всего: 9



Цитата(Wheels @  12.11.2008,  10:19 Найти цитируемый пост)
Michael.de, в твоем примере нельзя закрыть див по клику в любом месте страницы. =((
Т.е. ты хочешь показывать див при нажатии на соотв. кнопку, а закрывать при клике на боду???

Цитата(Wheels @  12.11.2008,  10:19 Найти цитируемый пост)
Вот я и хочу сделать id такого вида <input type=button value="Нажми" onclick="openqw(1, 100)" id="butt[1]">, чтобы внутри функции всегда можно было написать butt[x].
Может тебе нужна внутри ф-ции ссылка на элемент, с которого её вызвали?
Код

<html>
<head>
<script type='text/javascript'>
function a(object){
 alert(object.innerHTML);
}
</script>
</head>
<body>
<p onclick='a(this);'>Bla bla</p>
</body>
</html>
this можешь передать как 3й параметр...

P.S. А ты мой пример только запускал, или ещё и посмотрел, как код работает?
PM MAIL   Вверх
Wheels
Дата 13.11.2008, 12:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: 1
Всего: 1



Цитата(Michael.de @  13.11.2008,  03:50 Найти цитируемый пост)
Т.е. ты хочешь показывать див при нажатии на соотв. кнопку, а закрывать при клике на боду???

Да, необходимо чтобы див закрывался по клику в любом месте документа, на любом объекте, даже если на сам этот див ткнуть, вот в чем дело.

А открывался только от клика по кнопке/картинке (не суть). Только торчать див должен точнехонько из этой самой кнопки/картинки.


Цитата(Michael.de @  13.11.2008,  03:50 Найти цитируемый пост)
Может тебе нужна внутри ф-ции ссылка на элемент, с которого её вызвали?

Да с этой-то мелочью я уже разобрался) Кавычки не там ставил просто. В любом случае - спасибо. 

Цитата(Michael.de @  13.11.2008,  03:50 Найти цитируемый пост)
P.S. А ты мой пример только запускал, или ещё и посмотрел, как код работает? 

Я не только посмотрел, я его еще и мучил долго =((
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type='text/javascript'>
function findPosX(obj) {
// X-координата слоя
  var currleft = 0;
  if (obj.offsetParent)
    while (obj.offsetParent) {
      currleft += obj.offsetLeft
      obj = obj.offsetParent;
    }
  else if (obj.x) currleft += obj.x;
  return currleft;
}
function findPosY(obj) {
// Y-координата слоя
  var currtop = 0;
  if (obj.offsetParent)
    while (obj.offsetParent) {
      currtop += obj.offsetTop
      obj = obj.offsetParent;
    }
  else if (obj.y) currtop += obj.y;
  return currtop;
}
var info=[], clicked=[];
// создание массива подсказок:

function init(){
    var i = 0;
    while (document.getElementById('sk'+i)!==null)
    {
        info[i]=document.getElementById('sk'+i);
        info[i].style.cssText='position:absolute;visibility:hidden;border:1px solid #00A;background-color:#EED;padding:2px;';
        clicked[i]=false;
        document.body.appendChild(info[i]);
        i++;
    }
}

// показать/спрятать подсказку:
function show_hide(number){
    bx = findPosX(document.getElementById('skbut'+number));
    by = findPosY(document.getElementById('skbut'+number));
    py = 30;
 if (clicked[number]) info[number].style.visibility='hidden';
 else {
  info[number].style.visibility='visible';
  info[number].style.left=bx+'px';
  info[number].style.top=by+py+'px';
 }
 clicked[number]=!clicked[number];
}
</script>
</head>
<body leftmargin=0 topmargin=0 marginheight=0 marginwidth=0 onload='init();'>

<!---Очень хочется вынести контейнеры сюда--->
<div id="sk0" style="visibility: hidden">000000000</div>
<div id="sk1" style="visibility: hidden">111111111</div>
<div id="sk2" style="visibility: hidden">222222222</div>
<div id="sk3" style="visibility: hidden">333333333</div>
<div id="sk4" style="visibility: hidden">444444444</div>
<!---Очень хочется вынести контейнеры сюда--->

<button id="skbut0" onclick="show_hide('0')">Button 1</button>
<br><br><center>
<button id="skbut1" onclick="show_hide('1')">Button 2</button>
</center><br><br>
<button id="skbut2" onclick="show_hide('2')">Button 3</button>
<br><br><center>
<button id="skbut3" onclick="show_hide('3')">Button 4</button>
</center><br><br>
<button id="skbut4" onclick="show_hide('4')">Button 5</button>
</body>
</html>



PM MAIL ICQ   Вверх
Michael.de
Дата 14.11.2008, 00:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 4
Всего: 9



Цитата(Wheels @  13.11.2008,  12:24 Найти цитируемый пост)
Я не только посмотрел, я его еще и мучил долго =((
Ну я не поленился и тоже его "помучил" smile
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type='text/css'>
.d {position:absolute;visibility:hidden;border:1px solid #00A;background-color:#EED;padding:2px}
</style>
<script type='text/javascript'>
var info=[], clicked=-1;

// создание массива подсказок:
function init(){
 var i=0;
 while (document.getElementById('sk'+i)!=null){
  info[i]=document.getElementById('sk'+i);
  i++;
 }
}

// массив координат [X,Y]:
function findPos(obj){
 var pos=[0,0];
 if (obj.offsetParent) while (obj.offsetParent){
  pos[0]+=obj.offsetLeft;
  pos[1]+=obj.offsetTop;
  obj=obj.offsetParent;
 }
 else if (obj.x || obj.y){
  if (obj.x) pos[0]+=obj.x;
  if (obj.y) pos[1]+=obj.y;
 }
 return pos;
}

// показать подсказку:
function show(num){
 clicked=num;
 var pos=findPos(document.getElementById('skbut'+num));
 info[num].style.visibility='visible';
 info[num].style.left=pos[0]+'px';
 info[num].style.top=pos[1]+30+'px';
}

// спрятать подсказку:
function hide(){
 for (var i=0; i<info.length; i++){
  i==clicked ? info[i].style.visibility='visible' : info[i].style.visibility='hidden';
 }
}
</script>
</head>
<body leftmargin='0' topmargin='0' marginheight='0' marginwidth='0' onload='init();' onclick='hide();'>

<!-- Очень хочется вынести контейнеры сюда -->
<div id='sk0' class='d'>000000000</div>
<div id='sk1' class='d'>111111111</div>
<div id='sk2' class='d'>222222222</div>
<div id='sk3' class='d'>333333333</div>
<div id='sk4' class='d'>444444444</div>
<!-- Очень хочется вынести контейнеры сюда -->

<button id='skbut0' onclick="show('0');">Button 1</button>
<br><br><center>
<button id='skbut1' onclick="show('1');">Button 2</button>
</center><br><br>
<button id='skbut2' onclick="show('2');">Button 3</button>
<br><br><center>
<button id='skbut3' onclick="show('3');">Button 4</button>
</center><br><br>
<button id='skbut4' onclick="show('4');">Button 5</button>
</body>
</html>

1. не понял фразу "Очень хочется вынести контейнеры сюда"
2. Ты говоришь
Цитата(Wheels @  13.11.2008,  12:24 Найти цитируемый пост)
Да, необходимо чтобы див закрывался по клику в любом месте документа, на любом объекте, даже если на сам этот див ткнуть, вот в чем дело.
т.е. онклик на закрытие нужно ставить на боди (логично?). Я поставил и обнаружил, что если ты кликаешь где угодно (даже по кнопке), у тебя срабатывает этот онклик (закрытие). Замени в мной приведённом коде аналогичные строчки на следующие:
Код

// спрятать подсказку:
function hide(el){
 alert('Object: '+el);
 for (var i=0; i<info.length; i++) info[i].style.visibility='hidden';
}
</script>
</head>
<body leftmargin='0' topmargin='0' marginheight='0' marginwidth='0' onload='init();' onclick='hide(this);'>
ты видишь, что при клике по кнопке див отображается, но... тут же пропадает. Спросишь "почему?" --> см. содержимое алерта. Как это обойти? У меня одна мысль: для каждой кнопки находишь её высоту и ширину. При клике по боди сравниваешь координаты клика с коорд. полученных прямоугольников. Кликнул по кнопке (по прямоугольнику) - не закрываешь подсказки ... как-то так:
Код

// спрятать подсказку:
function hide(e){
 // тут ты получаешь координаты клика:
 e=e||window.event;
 var x=e.clientX;
 var y=e.clientY;
 // тут проверяешь:
 if (!(x>0&&y>0&&x<60&&y<30 || x>0&&y>100&&x<60&&y<130 /* и так далее для всех кнопок */ )){
  alert('ne knopkko :)')
  for (var i=0; i<info.length; i++) info[i].style.visibility='hidden';
 }
}
</script>
</head>
<body leftmargin='0' topmargin='0' marginheight='0' marginwidth='0' onload='init();' onclick='hide(event);'>
Сам доделаешь? smile
PM MAIL   Вверх
Wheels
Дата 14.11.2008, 02:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: 1
Всего: 1



Цитата(Michael.de @  14.11.2008,  00:58 Найти цитируемый пост)
При клике по боди сравниваешь координаты клика с коорд. полученных прямоугольников. Кликнул по кнопке (по прямоугольнику) - не закрываешь подсказки


Похоже, что необходимости изврата с координатами нет. Знающие люди подсказали о существовании таких вещей, как Propagation(); preventDefault(); и cancelBubble();

Типа нужно отменить действие закрытия дивов при клике на кнопки, открывающие неоткрытые дивы. Гуглил полдня, пробовал и так и сяк, так и не понял как прикрутить...



PM MAIL ICQ   Вверх
Wheels
Дата 14.11.2008, 03:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: 1
Всего: 1



Истина где-то рядом!

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type='text/css'>
.d {position:absolute;visibility:hidden;border:1px solid #00A;background-color:#EED;padding:2px}
</style>
<script type='text/javascript'>
var info=[], clicked=-1;
// создание массива подсказок:
function init(){
    var i=0;
    while (document.getElementById('sk'+i)!=null){
        info[i]=document.getElementById('sk'+i);
        i++;
    }
}
// массив координат [X,Y]:
function findPos(obj){
    var pos=[0,0];
    if (obj.offsetParent) while (obj.offsetParent){
        pos[0]+=obj.offsetLeft;
        pos[1]+=obj.offsetTop;
        obj=obj.offsetParent;
    }
    else if (obj.x || obj.y){
        if (obj.x) pos[0]+=obj.x;
        if (obj.y) pos[1]+=obj.y;
        }
    return pos;
}
// показать подсказку:
function show(num, e){
    clicked=num;
    var pos=findPos(document.getElementById('skbut'+num));
    info[num].style.visibility='visible';
    info[num].style.left=pos[0]+'px';
    info[num].style.top=pos[1]+30+'px';

    if(clicked==!num)
    {
     if(e.stopPropagation) e.stopPropagation();
     else e.cancelBubble = true;
     if(e.preventDefault) e.preventDefault();
     else e.returnValue = false;
    }
}
// спрятать подсказку:
function hide(){
    for (var i=0; i<info.length; i++) info[i].style.visibility='hidden';
}
</script>
</head>
<body leftmargin='0' topmargin='0' marginheight='0' marginwidth='0' onload='init();' onclick='hide();'>

<!-- Очень хочется вынести контейнеры сюда -->
<div id='sk0' class='d'>000000000</div>
<div id='sk1' class='d'>111111111</div>
<div id='sk2' class='d'>222222222</div>
<div id='sk3' class='d'>333333333</div>
<div id='sk4' class='d'>444444444</div>
<!-- Очень хочется вынести контейнеры сюда -->

<button id='skbut0' onclick="show('0', event);">Button 1</button>
<br><br><center>
<button id='skbut1' onclick="show('1', event);">Button 2</button>
</center><br><br>
<button id='skbut2' onclick="show('2', event);">Button 3</button>
<br><br><center>
<button id='skbut3' onclick="show('3', event);">Button 4</button>
</center><br><br>
<button id='skbut4' onclick="show('4', event);">Button 5</button>
</body>
</html>


Но вот никак не могу понять - почему открывается див только из первой кнопки...
PM MAIL ICQ   Вверх
Wheels
Дата 14.11.2008, 14:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: 1
Всего: 1



Ну наконец-то!!! Еще немного поколдовал и все заработало! Огромное спасибо всем, кто помог!

Вот результат:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type='text/css'>
.d {position:absolute;visibility:hidden;border:1px solid #00A;background-color:#EED;padding:2px}
</style>
<script type='text/javascript'>
var info=[], clicked=-1;
// создание массива подсказок:
function init(){
    var i=0;
    while (document.getElementById('sk'+i)!=null){
        info[i]=document.getElementById('sk'+i);
        i++;
    }
}
// массив координат [X,Y]:
function findPos(obj){
    var pos=[0,0];
    if (obj.offsetParent) while (obj.offsetParent){
        pos[0]+=obj.offsetLeft;
        pos[1]+=obj.offsetTop;
        obj=obj.offsetParent;
    }
    else if (obj.x || obj.y){
        if (obj.x) pos[0]+=obj.x;
        if (obj.y) pos[1]+=obj.y;
        }
    return pos;
}
// показать подсказку:
function show(num, e){
    hide();
    var pos=findPos(document.getElementById('skbut'+num));
    info[num].style.visibility='visible';
    info[num].style.left=pos[0]+'px';
    info[num].style.top=pos[1]+25+'px';

    if(clicked!=num){
     if(e.stopPropagation) e.stopPropagation();
     else e.cancelBubble = true;
     if(e.preventDefault) e.preventDefault();
     else e.returnValue = false;
        clicked=num;
    }
    else{
        clicked=-1;
    }
}
// спрятать подсказку:
function hide(){
    for (var i=0; i<info.length; i++) info[i].style.visibility='hidden';
}
</script>
</head>
<body leftmargin='0' topmargin='0' marginheight='0' marginwidth='0' onload='init();' onclick='hide();'>

<div id='sk0' class='d'>000000000</div>
<div id='sk1' class='d'>111111111</div>
<div id='sk2' class='d'>222222222</div>
<div id='sk3' class='d'>333333333</div>
<div id='sk4' class='d'>444444444</div>

<button id='skbut0' onclick="show('0', event);">Button 1</button>
<br><br><center>
<button id='skbut1' onclick="show('1', event);">Button 2</button>
</center><br><br>
<button id='skbut2' onclick="show('2', event);">Button 3</button>
<br><br><center>
<button id='skbut3' onclick="show('3', event);">Button 4</button>
</center><br><br>
<button id='skbut4' onclick="show('4', event);">Button 5</button>
</body>
</html>

Если кто-нибудь заметит ошибки - пишите.
Еще раз спасибо.
PM MAIL ICQ   Вверх
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




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


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

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