show-hide layers (javascript)

Barew_dzez · 16.05.2005, 10:41

как можно скрывать и показывать <div>ы,
но так, чтобы их место во время hide-а не пустовало.
яркий пример на этом форуме: кнопка

попытался разобраться в соурсах - голова разболелась

Obelix · 16.05.2005, 13:15

Арт, я сам не пробовал, но что тебе мешает, сделать два лейера, всегда держать один хайднутым, другой жизибл, и менять поочереди.

Barew_dzez · 16.05.2005, 13:37

ya vot tak sdelal

Code:

 function hide(my_obj){
myvar=document.getElementById(my_obj);
if (myvar.style.visibility=='hidden'){
myvar.style.visibility='visible';
myvar.style.height='210px';
}else{
myvar.style.visibility='hidden';
myvar.style.height='0px';
}
}

no vor

Code:

myvar.style.height='210px';

vot eta chast nne ne nravitsya..

a mojno javascriptom poschitat iznachalnyi height?

nm · 16.05.2005, 19:53

ртфм, ритфм и еще раз ртфм, черти ейджтеымельные

мотрите прикрепленный HTML файл, но правда в Firefox 1.0 и выше.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Test Page</title>
        <style>
            div.webmaster { border: 3px double olive;  height: auto;}

            div.webmaster div.title { width: 100%; height: auto; 
                font-style: italic; font-weight:900; 
                background-color: olive; color: white;  
            }
            div.webmaster div.title:hover + div.content { display: block }

            div.webmaster div.content { width: 100%; height: auto; 
                font-size: small;
                background-color: maroon; color: white;  
                margin: 0px; padding: 0px;
                display: none;
            }

            div.webmaster div.content:hover { display: block }
            div.webmaster div.content *:active { display: block; }

            div.webmaster img.editbtn { float: right; }
        </style>
    </head>

    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
        <table><tr height=400><td width=300>
                    <div class='webmaster'>
                        <div class='title'> blockname: title </div>
                        <div class='content'>
                            <A HREF=# onClick="javascript:alert('title');">
                                <IMG SRC='http://forum.armkb.com/images/smilies/frown.gif' BORDER=0 class='editbtn'>
                            </A>
                            ::title text for some more info::
                        </div>
                        <IMG SRC="http://forum.armkb.com/images/misc/akblogo.gif">
                    </div>
        </td></tr></table>
    </body>
</html>

nm · 16.05.2005, 20:00

как это же сделать JS - думайте сами

но легко делается, лег-ко

Barew_dzez · 17.05.2005, 08:22

Я из этого понял тока, что все это легко решается методом
.style.display='none'
и
.style.display='block'
За это огромное спасибо!!!
Все работает!
но есть одна мааааленкая проблема..
я попытаюсь ее решить, если не получится, тогда постну

Barew_dzez · 17.05.2005, 08:43

кто может сказать почему на странице
http://www.dinal.ru/test/index.htm

не работают margin и padding ?

Code:

<style>
.table1{
	border-style: solid;
	border-width: 1px;
	border-color: #99ccff;	 
	margin: 0px;  
	padding: 0px;
}
</style>

nm · 17.05.2005, 12:09

eto problemy explorer-a? ne tak-li ? :

Barew_dzez · 17.05.2005, 15:41

Нет.. во "всех" трех браузерах

Я не могу найти аналог

Code:

cellpadding="0"

в CSS.

nm · 17.05.2005, 15:48

вот какое дело, тогда для лучшего понимания css я просто пошлю

читать
документацию по CSS . www.w3.org

желательно не полениться, сесть и прочитать от начала и до конца вот это
http://www.w3.org/TR/CSS21/

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

Barew_dzez · 17.05.2005, 16:02

спасибо за ссылку.. (чесное слово попробую почитать)
а все таки это неправильно?

Code:

	margin: 0px;  
	padding: 0px;

ну ладно я пошел читать мануал

nm · 17.05.2005, 16:21

все правильно, но не там

просто надо сперва css block model понять

)) потом взять какой-нить firefox с webdeveloper extension-ом и сделать аутлайн по-очереди разные елементы страницы

и понять к чему и чего цеплять

вобчем .... манаулов по цсс - как собак не резаных. в рунете наверняка тоже есть приличные

Barew_dzez · 17.05.2005, 21:07

в общем помучаюсь немножко..
кстати Firefox c developer extensionом у меня есть. прото must have штука!

nm · 18.05.2005, 05:49

ладно. к вопросу о cellpadding
внимательно читаем - cell padding, до последнего времени cell - это td(ну и th)
пишем в css
td { padding: 0px; margin: 0px }
радуемся жизни

Barew_dzez · 20.05.2005, 12:51

Получилось...я добавил
border-collapse:collapse; в CSS и все пошло..!!!
а так как ты сказал, не поучилось

наверное я что то не то сделал..
в любом случае спасибо