Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.06.2011, 12:46
Новичок на форуме
Отправить личное сообщение для StyLLeR Посмотреть профиль Найти все сообщения от StyLLeR
 
Регистрация: 04.06.2011
Сообщений: 4

Плавное раскрытие и сворачивание блока
Имеется скрипт который позволяет раскрывать и сворачивать блоки при этом позиция блока запоминается в cookie, но слишком всё резко, нужно добавить плавности при сворачивание и разворачивание блока
вот код
-----------------------------------------------
function setCookie(name, value, expiredays, path, domain, secure) {
	if (expiredays) {
		var exdate=new Date();
		exdate.setDate(exdate.getDate()+expiredays);
		var expires = exdate.toGMTString();
	}
	document.cookie = name + "=" + escape(value) +
	((expiredays) ? "; expires=" + expires : "") +
	((path) ? "; path=" + path : "") +
	((domain) ? "; domain=" + domain : "") +
	((secure) ? "; secure" : "");
}
function getCookie(name) {
	var cookie = " " + document.cookie;
	var search = " " + name + "=";
	var setStr = null;
	var offset = 0;
	var end = 0;
	if (cookie.length > 0) {
		offset = cookie.indexOf(search);
		if (offset != -1) {
			offset += search.length;
			end = cookie.indexOf(";", offset)
			if (end == -1) {
				end = cookie.length;
			}
			setStr = unescape(cookie.substring(offset, end));
		}
	}
	return setStr;
}
function block_now(id) {
	if(getCookie(id) == 1) {
		display = 'none';
		setCookie(id, 0, 90, "/");
	} else {
		display = '';
		setCookie(id, 1, 90, "/");
	}
	document.getElementById(id).style.display = display;
}
function block_start(id) {
	var cookie_stat = getCookie(id);
	if((cookie_stat == 1) || (!cookie_stat)){
		display = '';
	} else {
		display = 'none';
	}
	document.getElementById(id).style.display = display;
}


Подключается это так
<script type="text/javascript" src="{THEME}/js/block.js"></script>
<script type="text/javascript">
function block_search(){
	block_start("blok_1");
	block_start("blok_2");
//	block_start("blok_3");
//	block_start("blok_4");
// добавляет столько вызовов функций, сколько у вас будет блоков
}
</script>


И так
<table>
<tr onClick="block_now('blok_1')" style="cursor:pointer;">
	<th>Заголовок блока</th>
</tr>
<tr id="blok_1" style="">
	<td>Содержимое блока</td>
</tr>
</table>


Помогите пожалуйста очень нужно
Ответить с цитированием
  #2 (permalink)  
Старый 04.06.2011, 21:31
Аспирант
Отправить личное сообщение для kostr Посмотреть профиль Найти все сообщения от kostr
 
Регистрация: 12.09.2010
Сообщений: 98

Ну вот так можно:
function block_now(id) {
 if(getCookie(id) == 1) {
  $('#' + id).stop().slideUp();
  setCookie(id, 0, 90, "/");
 } else {
  $('#' + id).stop().slideDown();
  setCookie(id, 1, 90, "/");
 }
}

только библиотеку jquery подключить, если у вас не подключена
Ответить с цитированием
  #3 (permalink)  
Старый 05.06.2011, 15:33
Новичок на форуме
Отправить личное сообщение для StyLLeR Посмотреть профиль Найти все сообщения от StyLLeR
 
Регистрация: 04.06.2011
Сообщений: 4

Сообщение от kostr Посмотреть сообщение
Ну вот так можно:
function block_now(id) {
 if(getCookie(id) == 1) {
  $('#' + id).stop().slideUp();
  setCookie(id, 0, 90, "/");
 } else {
  $('#' + id).stop().slideDown();
  setCookie(id, 1, 90, "/");
 }
}

только библиотеку jquery подключить, если у вас не подключена
Вообще не работает так =(
Ответить с цитированием
  #4 (permalink)  
Старый 05.06.2011, 17:03
Аспирант
Отправить личное сообщение для kostr Посмотреть профиль Найти все сообщения от kostr
 
Регистрация: 12.09.2010
Сообщений: 98

У вас jquery подключена?

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">

function setCookie(name, value, expiredays, path, domain, secure) {
 if (expiredays) {
  var exdate=new Date();
  exdate.setDate(exdate.getDate()+expiredays);
  var expires = exdate.toGMTString();
 }
 document.cookie = name + "=" + escape(value) +
 ((expiredays) ? "; expires=" + expires : "") +
 ((path) ? "; path=" + path : "") +
 ((domain) ? "; domain=" + domain : "") +
 ((secure) ? "; secure" : "");
}
function getCookie(name) {
 var cookie = " " + document.cookie;
 var search = " " + name + "=";
 var setStr = null;
 var offset = 0;
 var end = 0;
 if (cookie.length > 0) {
  offset = cookie.indexOf(search);
  if (offset != -1) {
   offset += search.length;
   end = cookie.indexOf(";", offset)
   if (end == -1) {
    end = cookie.length;
   }
   setStr = unescape(cookie.substring(offset, end));
  }
 }
 return setStr;
}
function block_now(id) {
 if(getCookie(id) == 1) {
  $('#' + id).stop().slideUp();
  setCookie(id, 0, 90, "/");
 } else {
  $('#' + id).stop().slideDown();
  setCookie(id, 1, 90, "/");
 }
}
function block_start(id) {
 var cookie_stat = getCookie(id);
 if((cookie_stat == 1) || (!cookie_stat)){
  display = '';
 } else {
  display = 'none';
 }
 document.getElementById(id).style.display = display;
}
</script>

<table>
<tr onClick="block_now('blok_1')" style="cursor:pointer;">
 <th>Заголовок блока</th>
</tr>
<tr>
 <td>
<div id="blok_1">
  Содержимое блока <br>
  Содержимое блока <br>
  Содержимое блока <br>
  Содержимое блока <br>
  Содержимое блока
</div>
 </td>
</tr>
</table>

<script>
 block_start("blok_1");
</script>

Последний раз редактировалось kostr, 05.06.2011 в 17:13.
Ответить с цитированием
  #5 (permalink)  
Старый 05.06.2011, 22:24
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

можно и так :

<style>
div {
  
  -moz-transition : height 1s ease-in-out;
  transition : height 1s ease-in-out;
  -webkit-transition : height 1s ease-in-out;
  -o-transition : height 1s ease-in-out;
  overflow: hidden;

  height: 200px; /* пример. */
}

div.an{

  height: 0;

}
</style>

<script type="text/javascript">

function setCookie(name, value, expiredays, path, domain, secure) {
 if (expiredays) {
  var exdate=new Date();
  exdate.setDate(exdate.getDate()+expiredays);
  var expires = exdate.toGMTString();
 }
 document.cookie = name + "=" + escape(value) +
 ((expiredays) ? "; expires=" + expires : "") +
 ((path) ? "; path=" + path : "") +
 ((domain) ? "; domain=" + domain : "") +
 ((secure) ? "; secure" : "");
}
function getCookie(name) {
 var cookie = " " + document.cookie;
 var search = " " + name + "=";
 var setStr = null;
 var offset = 0;
 var end = 0;
 if (cookie.length > 0) {
  offset = cookie.indexOf(search);
  if (offset != -1) {
   offset += search.length;
   end = cookie.indexOf(";", offset)
   if (end == -1) {
    end = cookie.length;
   }
   setStr = unescape(cookie.substring(offset, end));
  }
 }
 return setStr;
}
function block_now(id) {
 if(getCookie(id) == 1) {

  //set class
 document.getElementById(id).className = "an";
  
  setCookie(id, 0, 90, "/");
 } else {

  //remove class
  document.getElementById(id).className = "";

  setCookie(id, 1, 90, "/");
 }
}
function block_start(id) {
 var cookie_stat = getCookie(id);
 if((cookie_stat == 1) || (!cookie_stat)){
  display = '';
 } else {
  display = 'none';
 }
 document.getElementById(id).style.display = display;
}
</script>

<table>
<tr onClick="block_now('blok_1')" style="cursor:pointer;">
 <th>Заголовок блока</th>
</tr>
<tr>
 <td>
<div id="blok_1">
  Содержимое блока <br>
  Содержимое блока <br>
  Содержимое блока <br>
  Содержимое блока <br>
  Содержимое блока
</div>
 </td>
</tr>
</table>
Ответить с цитированием
  #6 (permalink)  
Старый 09.06.2011, 16:40
Новичок на форуме
Отправить личное сообщение для StyLLeR Посмотреть профиль Найти все сообщения от StyLLeR
 
Регистрация: 04.06.2011
Сообщений: 4

jQuery разумеется подключен
Ответить с цитированием
  #7 (permalink)  
Старый 07.07.2014, 15:00
Аватар для ДимДим
Новичок на форуме
Отправить личное сообщение для ДимДим Посмотреть профиль Найти все сообщения от ДимДим
 
Регистрация: 07.07.2014
Сообщений: 2

Сделал как показал kostr, но закрытый блок при перезагрузке страницы, иногда на немного открывается.
И как бы иконки подцепить + и - (откр. закр. блок)

Последний раз редактировалось ДимДим, 07.07.2014 в 16:36.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
плавное раскрытие DIV ufaclub jQuery 3 26.04.2011 16:20
Фиксация блока DIV при сворачивании другого блока DIV kacnepbI4 jQuery 2 04.04.2011 13:15
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 15:21
плавное изменение размера блока alexk984 jQuery 4 29.11.2010 07:46
Управление содержимым блока brainiac Элементы интерфейса 1 12.04.2010 12:34