Armenian Knowledge Base  

Go Back   Armenian Knowledge Base > Technical sections > Webmaster Zone > Web Development
Register

Reply
 
LinkBack Thread Tools
Old 16.05.2005, 11:41   #1
шат харн ем...
 
Barew_dzez's Avatar
 
Join Date: 03 2004
Location: de nayac or eli
Age: 33
Posts: 808
Downloads: 0
Uploads: 0
Reputation: 27 | 3
Default show-hide layers (javascript)

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

попытался разобраться в соурсах - голова разболелась
Reply With Quote
Old 16.05.2005, 14:15   #2
панаехавший
 
Obelix's Avatar
 
Join Date: 06 2003
Location: форпост
Age: 30
Posts: 4,007
Downloads: 0
Uploads: 0
Reputation: 0 | 0
Default

Арт, я сам не пробовал, но что тебе мешает, сделать два лейера, всегда держать один хайднутым, другой жизибл, и менять поочереди.
Reply With Quote
Old 16.05.2005, 14:37   #3
шат харн ем...
 
Barew_dzez's Avatar
 
Join Date: 03 2004
Location: de nayac or eli
Age: 33
Posts: 808
Downloads: 0
Uploads: 0
Reputation: 27 | 3
Default

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?
Reply With Quote
Old 16.05.2005, 20:53   #4
ЙЦУКЕН
 
Join Date: 07 2002
Location: 0x68,0x69,0x72, 0x69,0x6e,0x67, 0x20,0x6e,0x6f, 0x77
Age: 47
Posts: 3,118
Downloads: 0
Uploads: 0
Reputation: 5 | 0
Cool

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

мотрите прикрепленный 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>
Reply With Quote
Old 16.05.2005, 21:00   #5
ЙЦУКЕН
 
Join Date: 07 2002
Location: 0x68,0x69,0x72, 0x69,0x6e,0x67, 0x20,0x6e,0x6f, 0x77
Age: 47
Posts: 3,118
Downloads: 0
Uploads: 0
Reputation: 5 | 0
Default

как это же сделать JS - думайте сами но легко делается, лег-ко
Reply With Quote
Old 17.05.2005, 09:22   #6
шат харн ем...
 
Barew_dzez's Avatar
 
Join Date: 03 2004
Location: de nayac or eli
Age: 33
Posts: 808
Downloads: 0
Uploads: 0
Reputation: 27 | 3
Default

Я из этого понял тока, что все это легко решается методом
.style.display='none'
и
.style.display='block'
За это огромное спасибо!!!
Все работает!
но есть одна мааааленкая проблема..
я попытаюсь ее решить, если не получится, тогда постну
Reply With Quote
Old 17.05.2005, 09:43   #7
шат харн ем...
 
Barew_dzez's Avatar
 
Join Date: 03 2004
Location: de nayac or eli
Age: 33
Posts: 808
Downloads: 0
Uploads: 0
Reputation: 27 | 3
Default

кто может сказать почему на странице
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>
Reply With Quote
Old 17.05.2005, 13:09   #8
ЙЦУКЕН
 
Join Date: 07 2002
Location: 0x68,0x69,0x72, 0x69,0x6e,0x67, 0x20,0x6e,0x6f, 0x77
Age: 47
Posts: 3,118
Downloads: 0
Uploads: 0
Reputation: 5 | 0
Default

eto problemy explorer-a? ne tak-li ? :
Reply With Quote
Old 17.05.2005, 16:41   #9
шат харн ем...
 
Barew_dzez's Avatar
 
Join Date: 03 2004
Location: de nayac or eli
Age: 33
Posts: 808
Downloads: 0
Uploads: 0
Reputation: 27 | 3
Default

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

Я не могу найти аналог
Code:
cellpadding="0"
в CSS.
Reply With Quote
Old 17.05.2005, 16:48   #10
ЙЦУКЕН
 
Join Date: 07 2002
Location: 0x68,0x69,0x72, 0x69,0x6e,0x67, 0x20,0x6e,0x6f, 0x77
Age: 47
Posts: 3,118
Downloads: 0
Uploads: 0
Reputation: 5 | 0
Default

вот какое дело, тогда для лучшего понимания css я просто пошлю читать
документацию по CSS . www.w3.org

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

и не забывать потом периодически туда заглядывать
Reply With Quote
Old 17.05.2005, 17:02   #11
шат харн ем...
 
Barew_dzez's Avatar
 
Join Date: 03 2004
Location: de nayac or eli
Age: 33
Posts: 808
Downloads: 0
Uploads: 0
Reputation: 27 | 3
Default

спасибо за ссылку.. (чесное слово попробую почитать)
а все таки это неправильно?
Code:
	margin: 0px;  
	padding: 0px;
ну ладно я пошел читать мануал
Reply With Quote
Old 17.05.2005, 17:21   #12
ЙЦУКЕН
 
Join Date: 07 2002
Location: 0x68,0x69,0x72, 0x69,0x6e,0x67, 0x20,0x6e,0x6f, 0x77
Age: 47
Posts: 3,118
Downloads: 0
Uploads: 0
Reputation: 5 | 0
Default

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

вобчем .... манаулов по цсс - как собак не резаных. в рунете наверняка тоже есть приличные
Reply With Quote
Old 17.05.2005, 22:07   #13
шат харн ем...
 
Barew_dzez's Avatar
 
Join Date: 03 2004
Location: de nayac or eli
Age: 33
Posts: 808
Downloads: 0
Uploads: 0
Reputation: 27 | 3
Default

в общем помучаюсь немножко..
кстати Firefox c developer extensionом у меня есть. прото must have штука!
Reply With Quote
Old 18.05.2005, 06:49   #14
ЙЦУКЕН
 
Join Date: 07 2002
Location: 0x68,0x69,0x72, 0x69,0x6e,0x67, 0x20,0x6e,0x6f, 0x77
Age: 47
Posts: 3,118
Downloads: 0
Uploads: 0
Reputation: 5 | 0
Default

ладно. к вопросу о cellpadding
внимательно читаем - cell padding, до последнего времени cell - это td(ну и th)
пишем в css
td { padding: 0px; margin: 0px }
радуемся жизни
Reply With Quote
Old 20.05.2005, 13:51   #15
шат харн ем...
 
Barew_dzez's Avatar
 
Join Date: 03 2004
Location: de nayac or eli
Age: 33
Posts: 808
Downloads: 0
Uploads: 0
Reputation: 27 | 3
Default

Получилось...я добавил
border-collapse:collapse; в CSS и все пошло..!!!
а так как ты сказал, не поучилось
наверное я что то не то сделал..
в любом случае спасибо
Reply With Quote
Sponsored Links
Reply

Thread Tools


На правах рекламы:
реклама

All times are GMT. The time now is 03:06.


Powered by vBulletin® Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.