show-hide layers (javascript)

Barew_dzez · May 16, 2005, 10:41

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

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

Obelix · May 16, 2005, 13:15

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

Barew_dzez · May 16, 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 · May 16, 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 · May 16, 2005, 20:00

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

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

Barew_dzez · May 17, 2005, 08:22

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

Barew_dzez · May 17, 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 · May 17, 2005, 12:09

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

Barew_dzez · May 17, 2005, 15:41

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

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

Code:

cellpadding="0"

в CSS.

nm · May 17, 2005, 15:48

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

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

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

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

Barew_dzez · May 17, 2005, 16:02

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

Code:

	margin: 0px;  
	padding: 0px;

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

nm · May 17, 2005, 16:21

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

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

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

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

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

Barew_dzez · May 17, 2005, 21:07

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

nm · May 18, 2005, 05:49

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

Barew_dzez · May 20, 2005, 12:51

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

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

May 16, 2005, 10:41	#1
Barew_dzez шат харн ем... Join Date: Mar 2004 Location: de nayac or eli Posts: 808 Rep Power: 5 Reputation: 37	show-hide layers (javascript) как можно скрывать и показывать <div>ы, но так, чтобы их место во время hide-а не пустовало. яркий пример на этом форуме: кнопка попытался разобраться в соурсах - голова разболелась __________________ - ▁▂▃▄▅▆▇█▉ +

May 16, 2005, 13:15	#2
Obelix панаехавший Join Date: Jun 2003 Location: форпост Posts: 4,005 Rep Power: 6 Reputation: 10	Арт, я сам не пробовал, но что тебе мешает, сделать два лейера, всегда держать один хайднутым, другой жизибл, и менять поочереди. __________________ Իսկ ԴՈՒ արդեն վաճառե՞լ ես Հայրենիքդ ռուսներին: My Exchange Rate Monitor \| Իմ Արտարժույթի Մոնիտորը

May 16, 2005, 13:37	#3
Barew_dzez шат харн ем... Join Date: Mar 2004 Location: de nayac or eli Posts: 808 Rep Power: 5 Reputation: 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? __________________ - ▁▂▃▄▅▆▇█▉ +

May 16, 2005, 20:00	#5
nm ЙЦУКЕН Join Date: Jul 2002 Location: 0x68,0x69,0x72, 0x69,0x6e,0x67, 0x20,0x6e,0x6f, 0x77 Posts: 3,113 Rep Power: 7 Reputation: 10	как это же сделать JS - думайте сами но легко делается, лег-ко __________________ -- Опоздавшему поросёнку сиська возле жопы.

May 17, 2005, 08:22	#6
Barew_dzez шат харн ем... Join Date: Mar 2004 Location: de nayac or eli Posts: 808 Rep Power: 5 Reputation: 37	Я из этого понял тока, что все это легко решается методом .style.display='none' и .style.display='block' За это огромное спасибо!!! Все работает! но есть одна мааааленкая проблема.. я попытаюсь ее решить, если не получится, тогда постну __________________ - ▁▂▃▄▅▆▇█▉ +

May 17, 2005, 08:43	#7
Barew_dzez шат харн ем... Join Date: Mar 2004 Location: de nayac or eli Posts: 808 Rep Power: 5 Reputation: 37	кто может сказать почему на странице 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> __________________ - ▁▂▃▄▅▆▇█▉ +

May 17, 2005, 12:09	#8
nm ЙЦУКЕН Join Date: Jul 2002 Location: 0x68,0x69,0x72, 0x69,0x6e,0x67, 0x20,0x6e,0x6f, 0x77 Posts: 3,113 Rep Power: 7 Reputation: 10	eto problemy explorer-a? ne tak-li ? : __________________ -- Опоздавшему поросёнку сиська возле жопы.

May 17, 2005, 15:41	#9
Barew_dzez шат харн ем... Join Date: Mar 2004 Location: de nayac or eli Posts: 808 Rep Power: 5 Reputation: 37	Нет.. во "всех" трех браузерах Я не могу найти аналог Code: cellpadding="0" в CSS. __________________ - ▁▂▃▄▅▆▇█▉ +

May 17, 2005, 15:48	#10
nm ЙЦУКЕН Join Date: Jul 2002 Location: 0x68,0x69,0x72, 0x69,0x6e,0x67, 0x20,0x6e,0x6f, 0x77 Posts: 3,113 Rep Power: 7 Reputation: 10	вот какое дело, тогда для лучшего понимания css я просто пошлю читать документацию по CSS . www.w3.org желательно не полениться, сесть и прочитать от начала и до конца вот это http://www.w3.org/TR/CSS21/ и не забывать потом периодически туда заглядывать __________________ -- Опоздавшему поросёнку сиська возле жопы.

May 17, 2005, 16:02	#11
Barew_dzez шат харн ем... Join Date: Mar 2004 Location: de nayac or eli Posts: 808 Rep Power: 5 Reputation: 37	спасибо за ссылку.. (чесное слово попробую почитать) а все таки это неправильно? Code: margin: 0px; padding: 0px; ну ладно я пошел читать мануал __________________ - ▁▂▃▄▅▆▇█▉ +

May 17, 2005, 16:21	#12
nm ЙЦУКЕН Join Date: Jul 2002 Location: 0x68,0x69,0x72, 0x69,0x6e,0x67, 0x20,0x6e,0x6f, 0x77 Posts: 3,113 Rep Power: 7 Reputation: 10	все правильно, но не там просто надо сперва css block model понять )) потом взять какой-нить firefox с webdeveloper extension-ом и сделать аутлайн по-очереди разные елементы страницы и понять к чему и чего цеплять вобчем .... манаулов по цсс - как собак не резаных. в рунете наверняка тоже есть приличные __________________ -- Опоздавшему поросёнку сиська возле жопы.

May 17, 2005, 21:07	#13
Barew_dzez шат харн ем... Join Date: Mar 2004 Location: de nayac or eli Posts: 808 Rep Power: 5 Reputation: 37	в общем помучаюсь немножко.. кстати Firefox c developer extensionом у меня есть. прото must have штука! __________________ - ▁▂▃▄▅▆▇█▉ +

May 18, 2005, 05:49	#14
nm ЙЦУКЕН Join Date: Jul 2002 Location: 0x68,0x69,0x72, 0x69,0x6e,0x67, 0x20,0x6e,0x6f, 0x77 Posts: 3,113 Rep Power: 7 Reputation: 10	ладно. к вопросу о cellpadding внимательно читаем - cell padding, до последнего времени cell - это td(ну и th) пишем в css td { padding: 0px; margin: 0px } радуемся жизни __________________ -- Опоздавшему поросёнку сиська возле жопы.

May 20, 2005, 12:51	#15
Barew_dzez шат харн ем... Join Date: Mar 2004 Location: de nayac or eli Posts: 808 Rep Power: 5 Reputation: 37	Получилось...я добавил border-collapse:collapse; в CSS и все пошло..!!! а так как ты сказал, не поучилось наверное я что то не то сделал.. в любом случае спасибо __________________ - ▁▂▃▄▅▆▇█▉ +

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
add Javascript code at runtime	greka	Web Development	0	Aug 12, 2004 14:36
[java] Read return value of JavaScript	greka	Web Development	0	Jun 18, 2004 13:49
Generating Random values from JavaScript	x.ice	Web Development	2	Feb 17, 2004 13:03
JavaScript: working with forms	Aram Ghazanchyan	Web Development	1	Feb 12, 2004 10:17
Kak spryatat Javascript	Mono	Web Development	18	Jun 9, 2002 01:53