Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.04.2013, 16:57
Интересующийся
Отправить личное сообщение для olehpdatu Посмотреть профиль Найти все сообщения от olehpdatu
 
Регистрация: 18.02.2013
Сообщений: 25

Как сделать акардеон в которому выезжающий блок можно было закрыть!
Добрый день.

Помогите сделать акардеон такой что бы при НАВЕДЕНИИ на блок выезжаел другой блок с текстом, который можно было закрывать при нажатии на крестик!
Пример нарисованная картинка:
Ответить с цитированием
  #2 (permalink)  
Старый 02.04.2013, 13:12
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,136

Сообщение от olehpdatu
сделать акардеон такой что бы при НАВЕДЕНИИ на блок выезжаел другой блок с текстом, который можно было закрывать при нажатии на крестик!
Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
}
.container {
	position: relative;
	width: 80%;
	height: 50%;
	margin-left: auto;
	margin-right: auto;
	background-color: yellow;
}
.text {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 80%;
	overflow: auto;
	color: #ffffff;
	background-color: blue;
	display: none;
}
.text > button {
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 20px;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('.container').mouseover(function (){
		var o=$(this).find('.text');
		if (o.hasClass('on')) return;
		o.slideDown();
		o.addClass('on');
	});
	$('.text > button').click(function (){
		var o=$(this.parentNode);
		o.slideUp();
		setTimeout(function (){
			o.removeClass('on');
		},300);
	});
});
</script>
</head>
<body>
<div class='container'>
	<div class='text'>
		<p>
			Служба Яндекс.Рефераты предназначена для студентов и школьников, 
			дизайнеров и журналистов, создателей научных заявок и отчетов — 
			для всех, кто относится к тексту, как к количеству знаков.
		</p>
		<button>X</button>
	</div>
</div>
</body>
</html>

Последний раз редактировалось ksa, 02.04.2013 в 13:16.
Ответить с цитированием
  #3 (permalink)  
Старый 02.04.2013, 19:57
Интересующийся
Отправить личное сообщение для olehpdatu Посмотреть профиль Найти все сообщения от olehpdatu
 
Регистрация: 18.02.2013
Сообщений: 25

Сообщение от ksa Посмотреть сообщение
Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
}
.container {
	position: relative;
	width: 80%;
	height: 50%;
	margin-left: auto;
	margin-right: auto;
	background-color: yellow;
}
.text {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 80%;
	overflow: auto;
	color: #ffffff;
	background-color: blue;
	display: none;
}
.text > button {
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 20px;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('.container').mouseover(function (){
		var o=$(this).find('.text');
		if (o.hasClass('on')) return;
		o.slideDown();
		o.addClass('on');
	});
	$('.text > button').click(function (){
		var o=$(this.parentNode);
		o.slideUp();
		setTimeout(function (){
			o.removeClass('on');
		},300);
	});
});
</script>
</head>
<body>
<div class='container'>
	<div class='text'>
		<p>
			Служба Яндекс.Рефераты предназначена для студентов и школьников, 
			дизайнеров и журналистов, создателей научных заявок и отчетов — 
			для всех, кто относится к тексту, как к количеству знаков.
		</p>
		<button>X</button>
	</div>
</div>
</body>
</html>
сделайте плиз так что бы этот контейнер при закрытии 3 раза больше не выводился на странице пользователя....

Последний раз редактировалось olehpdatu, 05.04.2013 в 17:46.
Ответить с цитированием
  #4 (permalink)  
Старый 06.04.2013, 17:28
Интересующийся
Отправить личное сообщение для olehpdatu Посмотреть профиль Найти все сообщения от olehpdatu
 
Регистрация: 18.02.2013
Сообщений: 25

:::::::::::::::::____________))))))))))))))
Как сделать так что-бы когда пользователь закрывает приблизительно 3 раза этот блок, он больше в этом браузери и этого дня не воспроизводится , так как на некоторой рекламе?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
HTML5 Как сделать, чтобы можно было двигать картинку мышью? Бобр Общие вопросы Javascript 2 18.06.2010 21:22
Как сделать просмотр большой картинки? greatilya Элементы интерфейса 7 20.05.2010 13:44
Два accordion на сайт, можно как то сделать? Vitaly jQuery 3 09.11.2009 11:37
Как изменить скрипт, что бы им его можно было использовать для нужной страницы Nick50_70 Общие вопросы Javascript 0 28.04.2009 23:30
Может кто подсказать как можно сделать submit из левого фрейма в правый maxander Internet Explorer 1 28.11.2008 10:15