Рскрытие-Закрытие Блока По Клику.

petrovich · April 24, 2011

Здравствуйте Уважаемые форумчане.

Пришёл к Вам в надежде на помощь, ибо сам уже мозги сломал с этим javascript.

Есть форум на phpBB за валидность которого мы с малыми успехами боремся, сделана валидной индексная страница, страница просмотра списка тем. Сейчас боремся со страницей просмотра сообщений темы.

На странице сообщений основные ошибки которые мы не можем победить даёт скрипт скрытия-показа информации в блоке.

Если образно то под аватарой пользователя есть кнопка-изображение по клику на которую с плавным эффектом выезжает вертикально текстовая информация, при повторном клике информация так же плавно уезжает. По умолчанию блок скрыт

style="display: none;

что очень очень не гут. (

Выглядит это примерно вот так(просьба детей и людей со слабой психикой убрать от экрана):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-ru" xml:lang="ru-ru">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>title</title>

<script type="text/javascript">
// <![CDATA[
    jQuery(document).ready(function(){
        jQuery('img').click(function(e){
            var img = jQuery(e.target);
            var div = img.parent().next('div#first');
         if(div.length > 0) {
            if (div.css('display') == 'none'){
               div.show('slow', function(){
                 img.attr('src', 'images/dopinfo_up.gif');
               });
            }
            else{
               div.hide('slow', function(){
                 img.attr('src', 'images/dopinfo_down.gif');
               });
            }
         }
        });
    });
</script>
// ]]>
</script>

</head>
    <body>
       <span><img src="images/dopinfo_down.gif" id="toggleimg" style="cursor:pointer;"/></span>
           <div id="first" style="display: none;">
			 <span class="postdetails">
				<!-- содержимое -->
				  <!-- содержимое -->
					<!-- содержимое -->
					  <!-- содержимое -->
						<!-- содержимое -->
						 <!-- содержимое -->
						<!-- содержимое -->
					  <!-- содержимое -->
					<!-- содержимое -->
				  <!-- содержимое -->
				<!-- содержимое -->		   
			</span>
           </div>
   </body>
</html>

Побродивши некоторое время по htmlbook нашёл вот такой вот скриптик:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-ru" xml:lang="ru-ru">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Template</title>

<style type="text/css">
div.submenu {
background: #00AA00;
overflow: hidden;
width: 200px;
}
</style>

<script type="text/javascript">
// <![CDATA[
var timeoutID = 0;
var currentHeight = 0;
function dropDwn() {
if (currentHeight < maxMenuHeight) {
currentHeight += 5;
scroll_menu.style.height = currentHeight.toString() + "px";
} else {
window.clearInterval(timeoutID);
timeoutID = 0;
}
}
function dropBack() {
if (currentHeight > 5) {
currentHeight -= 5;
scroll_menu.style.height = currentHeight.toString() + "px";
} else {
scroll_menu.style.height = "0px";
window.clearInterval(timeoutID);
timeoutID = 0;
currentHeight = 0;
}
}
function show(linkobj) {
if (timeoutID != 0) {window.clearInterval(timeoutID);}
linkobj.parentNode.innerHTML="<a href='#' onclick='hide(this);'>Collapse menu</a>";
timeoutID = window.setInterval("dropDwn()", 10);
}
function hide(linkobj) {
if (timeoutID != 0) {window.clearInterval(timeoutID);}
linkobj.parentNode.innerHTML="<a href='#' onclick='show(this);'>Expand menu</a>";
timeoutID = window.setInterval("dropBack()", 10);
}
// ]]>
</script>

</head>

<body>
<div><a href="#" onclick="show(this);">Expand menu</a></div>
<div class="submenu" id="scrollMenu">
<a href="#">Lorem</a><br />
<a href="#">ipsum</a><br />
<a href="#">dolor</a><br />
<a href="#">sit</a><br />
<a href="#">amet</a>
</div>

<script type="text/javascript">
// <![CDATA[
var scroll_menu = document.getElementById("scrollMenu");
var maxMenuHeight = scroll_menu.offsetHeight;
scroll_menu.style.height = "0px";
// ]]>
</script>

</body>

</html>

В дополнению к скрипту что выше найден ещё один скриптик с кнопкой которая как мне кажется ну обязана быть у нас.

Второй скрипт с кнопкой залит на народ

Человек у которого руки растут не оттуда откуда у нас, откликнись!!! Помоги решить проблему.

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

Для связи личка, ася: 40-ноль-6-четыре-65-шесть-1, скайп: desmond9903

Форумчане не проходите мимо горя, помогите. Не допустите бан форума на http://validator.w3.org/

А то чувствуется что это скоро случится, валидатор корёжит и корчится проверяя нас...

Спасибо всем кто откликнется.

up: Христос Воскресе!

Edited April 24, 2011 by petrovich

mishka · April 24, 2011

Вот он, славный идальго Дон Кихот Ламанчский нашего времени, борящийся с ветряными мельницами.

Если все же вы решили не оставлять шансов мельнице, то есть форуму, то могу помочь со скриптом.

кто вам сказал что:

style="display: none;

есть очень не гуд ?

Покажите мне хоть один форум проходящий проверку на валидность.

Sign In

Рскрытие-Закрытие Блока По Клику.

Recommended Posts

petrovich

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

Обсуждения

Forums

Important Information