Блокнот — @дневники: асоциальная сеть

	<sсriрt>
	$(document).ready(function(){
		$('.caption img').click(function(){
			var body$ = $(this).closest('.module').find('.body');
				if (body$.is(':hidden')) {
					body$.show();
				}
				else {
					body$.hide();
				}
			});
	});
	</sсriрt>

Вместо closest можно использовать parents

HTML-код

	<div class="module">
		<div class="caption">
			<span>Заголовок модуля</span>
			<img src="http://i.imgur.com/qLEB0.png" alt="" title="Свернуть/развернуть блок" style="cursor: pointer;"/>
		</div>
		<div class="body">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nibh non eros scelerisque blandit ut quis sapien. Phasellus quis ultrices turpis. Vestibulum facilisis convallis lorem, at fermentum libero sagittis at. 
		</div>
	</div>
	
	<div class="module">
		<div class="caption">
			<span>Заголовок модуля</span>
			<img src="http://i.imgur.com/qLEB0.png" alt="" title="Свернуть/развернуть блок" style="cursor: pointer;"/>
		</div>
		<div class="body">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nibh non eros scelerisque blandit ut quis sapien. Phasellus quis ultrices turpis. Vestibulum facilisis convallis lorem, at fermentum libero sagittis at. 
		</div>
	</div>

http://jsfiddle.net/ZZszj/4/

2 вариант

	<sсriрt>
	$(function(){
		$('.caption img').click(function(){
			var body$ = $(this).parents('.module').find('.body').toggle();
			});
	});
	</sсriрt>

http://jsfiddle.net/ZZszj/3/

3 вариант Изменения заголовка после сворачивания/разворачивания текста

	<sсriрt>
	$(function(){
		$('.caption img').click(function(){
			var body$ = $(this).parents('.module').find('.body')
				.toggle('slow', function(){
					$(this).closest('.module')
						.toggleClass('rolledup', $(this).is(':hidden'));
						});
			});
	});
	</sсriрt>

http://jsfiddle.net/ZZszj/8/

UPD
У каждого пункта списка есть скрытый текст, при клике на пункт списка текст показывается.
http://jsfiddle.net/ZZszj/23/

изменение кликнутого пункта списка (путем добавления/убирания класса)
http://jsfiddle.net/ZZszj/27/

@темы: jQuery, Ссылки

URL

пятница, 25 января 2013

22:46

Javascript Проверка поля ввода емейла через регулярное выражение

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

<sсriрt>
	function f(){
		var a = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/;
		var inp = document.getElementById('inp');
		var right = document.getElementById('right');
		var wrong = document.getElementById('wrong');
		
		if(inp.value.search(a) !== -1){
			right.style.display = "inline";
			wrong.style.display = "none";
			document.form[0].submit();
		}
		else {
			wrong.style.display = "inline";
			right.style.display = "none";
		}
	}
	</sсriрt>

	<input type="text" id="inp"  onblur="f()" />
	<div style="display: none; color:#DDFF00;" id="right">Верно</div>
	<div style="display: none; color:red;" id="wrong">Неверно</div>
	<input type="button" value="Отправить" />

@темы: Javascript

URL

21:08

Видеоуроки

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

www.youtube.com/user/gromitsu?feature=watch

@темы: AJAX, Ссылки

URL

21:01

Javascript Выплывающая подсказка

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

<sсriрt>
          function f(){
		this.show = function(text,x,y){
			var div = document.createElement("div");
			div.className="tip";
			div.id="metka";
			div.innerHTML = text;
			var koordx = x + 10;
			var koordy = y + 20;
			div.style.left = koordx + 'px';
			div.style.top = koordy + 'px';
			document.body.appendChild(div);
		}
		this.hide = function(){
			var metka = document.getElementById('metka');
			metka.parentNode.removeChild(metka);
		}
	}
	var tip = new f();
</sсriрt>

<p onmouseover="tip.show('Первый абзац', this.offsetLeft, this.offsetTop)" onmouseout="tip.hide()">
	Текст абзаца</p>

@темы: Javascript

URL

20:41

Javascript Ограничение количества символов в textarea

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

Скрипт

<sсriрt>	
           function f(n){
		var text = document.getElementById('text');
		var content = text.value;
		var len = content.length;
		if (len >= n)
			text.value = content.substr(0,n-1);
		
		var remark = document.getElementById('remark');
		var rest = n - len;
		remark.innerHTML = "Осталось символов: " + rest;
		if(rest <= 0) {rest = 0;}
	}
</sсriрt>

HTML-код

<p id="remark">Осталось символов: 25</p>
&lt;textarea onclick="f(25)" onkeyup="f(25)" id="text">&lt;/textarea>

@темы: Javascript

URL

среда, 23 января 2013

17:28

Верстка таблиц

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

http://www.xiper.net/learn/tegofenshuj/semantic-html-table.html

@темы: Таблицы, Верстка, Ссылки

URL

17:18

Верстка формы через список определений

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

<форм action="">
<dl>
	<dt><label>Имя:</label></dt>
	<dd><input type="text" /></dd>
</dl>
<div><input type="submit" value="отправить" /></div>
</форм>

http://www.xiper.net/learn/tegofenshuj/semantic-html-forms.html

@темы: Верстка, Формы, Список определений, Ссылки

URL

15:18

Логотип-заголовок страницы

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

html-код

<h1>Фирма Рога и копыта</h1>

css

h1 {
	width: 250px;
	height: 100px;
	background: url(path-to/logo.png);
	text-indent: -9999px; /* прячем текст за пределами заголовка, прием предложен Джеффри Зельдманом */
	overflow: hidden;
}

http://www.xiper.net/learn/tegofenshuj/headings-in-html.html

Подмена текста изображением

@темы: Верстка, Ссылки

URL

14:36

Free PDS

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

http://www.templatemonster.com/free-html5-templates.php?utm_source=html5doctor&utm_medium=banner&utm_campaign=bsafreehtml5

@темы: Макеты, PDS, Ссылки

URL

14:30

HTML 5 Demos and Examples

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

http://html5demos.com/

@темы: HTML5, Ссылки

URL

13:19

Flot

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

Javasсript plotting library for jQuery для рисования графиков http://www.flotcharts.org/

@темы: jQuery, Javascript, Ссылки

URL

вторник, 22 января 2013

17:58

Настройки Notepad++

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

http://habrahabr.ru/post/55552/

@темы: Notepad++, Ссылки

URL

14:15

DIV верстка видеокурс

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

http://www.sdelaysite.com/kniga/verstka-kniga/blochnaya-verstka-div-0

@темы: Видеоуроки, Верстка, Ссылки

URL

понедельник, 21 января 2013

13:57

Javascript Создание объектов и вложенных объектов

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

var ride = {
  make: ‘Yamaha’,
  model: ‘V-Star Silverado 1100’,
  year: 2005,
  purchased: new Date(2005,3,12),
  owner: {
    name: ‘Spike Spiegel’,
    occupation: ‘bounty hunter’
  }
};

@темы: Javascript

URL

13:27

jQuery Form Plugin

все записи пользователя в сообществе Heidel

If it's stupid but works, it isn't stupid.

jQuery Form Plugin - обработка элементов форм
http://jquery.malsup.com/form/

@темы: jQuery Form Plugin, jQuery, Ссылки

URL


Запомнить