Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > Невидимый Div, отображающийся по клику


Автор: Wheels 10.11.2008, 16:14
Здравствуйте.
Задача:

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

вопросы:
1) Как его убрать при нажатии в любом другом месте страницы?
2) Насколько кроссброузерен и универсален данный вариант?
3) В правильном ли я двигаюсь направлении при решении данной задачи?

Код

<HTML>
<HEAD>
<style>
.hidden {position: absolute; visibility: hidden;}
.visible {position: absolute; visibility: visible; z-index: 2;}
</style>
</HEAD>
<body>
<input type=button value="Нажми" onclick="document.getElementById('s1').className=='hidden'?document.getElementById('s1').className='visible':document.getElementById('s1').className='hidden'; return false;">
<div id="s1" class="hidden" onClick="this.className='hidden'">
<table border=1 bgcolor=#0000aa>
<tr><td><a href="">dsfsdf</a></td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>
</div>
</body>
</HTML>


Заранее спасибо.

Автор: bars80080 10.11.2008, 16:51
<body onclick="document.getElementById('s1').style.visibility='hidden'">

Автор: Wheels 10.11.2008, 16:56
bars80080, спасибо тебе большое. Постоянно выручаешь. 
Но я так пробовал уже, не работает. Див вообще не раскрывается при нажатии на кнопку. Кнопка же тоже в теле документа находится.
К тому же что делать если таких кнопок с дивами будет несколько и разных?

Автор: bars80080 10.11.2008, 17:44
может вообще идея крамольная с боди, но если всё же с ним, то <body onclick="prov();">

а в функции prov(); во-первых проверка какие дивы открыты и их закрытие (просто при открытие дива в общем массиве менять значение флага, а потом проверять в цикле)



но скорее всего выход такой: 
твой див - это слой, растягивающийся на весь экран, в середине окошко, которое тебе нужно, всё остальное - прозрачный слой, по которому можно осуществить клик. при этом можно даже задать не прозрачный слой, а фон в виде полупрозрачного png, тогда будет красивое затенение сайта

Автор: Wheels 10.11.2008, 17:47
Цитата(bars80080 @  10.11.2008,  17:44 Найти цитируемый пост)
но скорее всего выход такой: 
твой див - это слой, растягивающийся на весь экран, в середине окошко, которое тебе нужно, всё остальное - прозрачный слой, по которому можно осуществить клик. при этом можно даже задать не прозрачный слой, а фон в виде полупрозрачного png, тогда будет красивое затенение сайта 

Спасибо! )

Ой...
Можно хоть как-нибудь в примере, пожалуйста?
Я же в раздел для начинающих пишу =)

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

Автор: bars80080 10.11.2008, 21:39
самое простое - заготовить такой слой заранее. располагаться он должен перед </body> и желательно иметь нужные характеристики. т.е. растянут по всей ширине с помощью css. только быть невидимым:

Код

<style>
#qw { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: none; }
</style>
<div id="qw" onclick="closeqw()"></div></body>


конечно, тут возможны подводные камни в зависимости от ситуации.

по нажатию кнопки просто берётся разметка нужного тебе окна и вставляется в qw, затем он открывается:

Код

var win = new Array();
win[0] = '<div>окошко номер 0</div>';
win[1] = '<div>окошко номер 1</div>';
//...
function openqw(x) {
    var el = document.getElementById('qw');
    el.innerHTML = win[x];
    el.style.display = 'block';
}
function closeqw() {
    var el = document.getElementById('qw');
    //el.innerHTML = '';
    el.style.display = 'none';
}
это конечно жутко упрощённо. но хотя бы идея

Автор: Michael.de 11.11.2008, 00:44
Во, наваял:
Код

<html>
<head>
<script type='text/javascript'>
var info=[], clicked=[], cX, cY;
// создание массива подсказок:
function init(){
 var i, text=['Bla bla', 'Blu bla', 'Blu blu', 'Bla blu', 'Ups :)'];
 for (i=0; i<text.length; i++){
  info[i]=document.createElement('div');
  info[i].innerHTML=text[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]);
 }
}
// актуальные координаты мыши:
function mc(e){
 e=e||window.event;
 cX=e.clientX;
 cY=e.clientY;
}
// показать/спрятать подсказку:
function show_hide(number){
 var dX=20, dY=20; // <-- это - сдвиг подсказки вниз и вправо
 if (clicked[number]) info[number].style.visibility='hidden';
 else {
  info[number].style.visibility='visible';
  info[number].style.left=cX+dX+'px';
  info[number].style.top=cY+dY+'px';
 }
 clicked[number]=!clicked[number];
}
</script>
</head>
<body onload='init();' onmousemove='mc(event);'>
<button onclick="show_hide('0')">Button 1</button>
<br><br><center>
<button onclick="show_hide('1')">Button 2</button>
</center><br><br>
<button onclick="show_hide('2')">Button 3</button>
<br><br><center>
<button onclick="show_hide('3')">Button 4</button>
</center><br><br>
<button onclick="show_hide('4')">Button 5</button>
</body>
</html>
...выглядит пример конечно отстойно, но... работает smile

Автор: Wheels 11.11.2008, 11:11
user posted image


Michael.de, спасибо огромное, но к сожалению это не совсем то, что мне нужно =((


bars80080, Во, как раз так! Вроде разобрался... мне нравится и даже в разных броузерах работает ) Только 1 нюанс остался... 
Как открываемый див к "родительской" кнопке прилепить? Пробовал по-всякому, но какая-то белеберда получается, все зависимости от местоположения и дива и кнопки в коде. Нужно координаты кнопки узнавать? Или можно приемами верстки ограничиться? У меня уже дошло до маразма ;) &nbsp; и nobr =)))

Автор: bars80080 11.11.2008, 11:18
нет, но если ты имеешь возможность затенить всю страницу, то див тупо должен быть в центре

насчёт определения координат элемента (кнопки), то можно посмотреть здесь http://xhtml.ru/2006/08/23/cursor-coordinates/
там есть пару функций: 
Код

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;
}
которые можно подкорректировать под свои задачи

Автор: Wheels 11.11.2008, 11:28
Цитата(bars80080 @  11.11.2008,  11:18 Найти цитируемый пост)
нет, но если ты имеешь возможность затенить всю страницу, то див тупо должен быть в центре


Как так? И координаты кнопки не придется узнавать? Меня этот вариант наверное устроил бы. Т.е. тот, что проще.  Только я тебя не очень понимаю... что значит в центре?  А если кнопок много? А если дизайн страницы "резиновый"? Я, наверное, не совсем суть самой идеи понимаю от того, что не имею в голове представления КАК это будет работать =((

В любом случае - спасибо за ссылку, буду разбираться пока что.

Автор: bars80080 11.11.2008, 17:13
Цитата(Wheels @  11.11.2008,  10:28 Найти цитируемый пост)
Как так?

ну смотри. когда у тебя вылетает alert(), то ничего кроме как на его конпку на странице ты нажать не можешь. если у тебя див с сообщением открывается и приэтом любое нажатие на остальную часть страницы вызывает его закрытие, то самое логичное - разместить его в центре, и при этом затенить страницу (в иделае, она должна поблекнуть - png полупрозрачный поверху)

Автор: Wheels 11.11.2008, 20:04
Цитата(bars80080 @  11.11.2008,  17:13 Найти цитируемый пост)
ну смотри. когда у тебя вылетает alert(), то ничего кроме как на его конпку на странице ты нажать не можешь. если у тебя див с сообщением открывается и приэтом любое нажатие на остальную часть страницы вызывает его закрытие, то самое логичное - разместить его в центре, и при этом затенить страницу (в иделае, она должна поблекнуть - png полупрозрачный поверху)


Ясно. Т.е. в любом случае Див будет по центру.  Но он нужен прямо от кнопки, где бы она ни находилась, как на изображении. Нужно пробовать разместить его, узнав координаты верхнего левого угла кнопки, так? Или есть другие способы добиться этого?

Автор: Wheels 11.11.2008, 21:12
В результате размышлений и пары экспериментов я пришел к выводу, что нужно иметь див фиксированной высоты, так? С прокруткой... Ведь, его левый нижний угол нужно "прилепить" левому верхнему углу кнопки...   А на тот случай, если див широкий, а кнопка у самого правого борта страницы - еще и фиксированную ширину дива, что бы не уезжал за край страницы, а отъехал влево немного.

Я правильно размышляю?

Автор: bars80080 11.11.2008, 21:16
чёрт его знает. сделай чёнибуть. а там посмотришь, нравится или нет

Автор: Wheels 11.11.2008, 23:20
Сделал. Не нравится =(

При появлении дивов возникает вертикальная и/или горизонтальная прокрутка на странице. Не знаю как от нее избавиться.
С чем это связано? 
В IE дивы закрываются "через раз". При клике на кнопку закрываются на сотый раз, если вообще закрываются.
В чем тут проблема?

И еще не могу понять как сделать id кнопкам такого вида: butt[0]; а в функциях    findPosX(document.getElementById(x)); вместо x писать butt[x]. Но тут просто с синтаксисом не разобрался...

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
.mshown0
{
    position: absolute;
    border: 1px solid navy;
    width: 200px;
    height: 50px;
    background: blue;
    color: white;
}
.mshown1
{
    position: absolute;
    border: 1px solid navy;
    width: 200px;
    height: 70px;
    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="0">
<br><br /><br />
Юрий Лужков внес в Мосгордуму законопроект, <br />
устанавливающий правила продажи столичных исторических зданий.<input type=button value="Нажми" onclick="openqw(1, 70)" id="1">
По закону раз в три года Москомнаследие будет составлять список зданий, <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 class=mshown0><b>№ 0</b></div>';
win[1] = '<div class=mshown1>окошко номер 1</div>';
//...
function openqw(x, hei) {

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

Автор: Michael.de 12.11.2008, 04:51
Цитата(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).

Автор: Wheels 12.11.2008, 10:19
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, 11:01
Вроде все здОрово, но залипания в 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>

Автор: Wheels 12.11.2008, 22:31
Все! Вилы =( 
Поставил строчку 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>


Спасибо!

Автор: Michael.de 13.11.2008, 03:50
Цитата(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. А ты мой пример только запускал, или ещё и посмотрел, как код работает?

Автор: Wheels 13.11.2008, 12:24
Цитата(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>



Автор: Michael.de 14.11.2008, 00:58
Цитата(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

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


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

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



Автор: Wheels 14.11.2008, 03:41
Истина где-то рядом!

Код

<!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>


Но вот никак не могу понять - почему открывается див только из первой кнопки...

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

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

<!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>

Если кто-нибудь заметит ошибки - пишите.
Еще раз спасибо.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)