Deerua about Coding -> Заметки с тегом «tags» @ deer.org.ua

Страницы: 1 | 2

26 октября 2009, 06:26 более 4-х месяцев назад

Забытые теги… CSS: list-style-position

Сегодня речь о свойстве CSS list-style-position? И что, а зачем? Да вот зачастую отступы для булитов в списках, все делают падингами-маргинами, и зачастую они просто вылазят вне своего блока, когда кто-то что-то обнулит и забудет. И тут на помощь приходит это свойство, оно попросту указывает куда тулить эти самые булиты, то ли вне, то ли внутрь ;)

По умолчанию, значение outside, но есть ещё

{ list-style-position: inside }

Выглядит это так:

Пример
Рыбного

текста

Можно даже с помощью джиквери сделать лесенку в одном и том же списке ;)) Каждому чётному или не чётному присвоить это свойство ;)

ps: О, пора переименовать рубрику %) Наверное в забытые уголки HTML, или что-то в этом духе.

Комментировать…

Теги: css, html tags Забытые тэги

6 августа 2009, 02:58 более 7-и месяцев назад

HTML & iframe & IE

Как сделать iframe в ИЕ без границ/бордеров? Написать параметр frameborder=«0»

Как сделать iframe в ИЕ прозрачным? Написать параметр allowTransparency=«true»

Только в ИЕ, не пропусти!

Комментировать…

Теги: html tags iframe

10 июля 2009, 15:14 более 8-и месяцев назад

Забытые теги… tabindex (параметр)

Это параметр, который устанавливает поочерёдность переключения элементов, при помощи кнопки Tab, на хтмл-страничке. Например, нужно для установки очерёдности переключения в форме логина/пароля, когда нажав таб, мы попадаем на ввод пароля, а не на ссылку «забыли пароль» или что-то ещё в таком духе.

Доступен он для <A>, <AREA>, <OBJECT>, <BUTTON>, <INPUT>, <SELECT>, <TEXTAREA>

Параметр как бы есть, и много где встречается, но в большенстве случаем, о нём никто не думает %) Это как бы ньюансировка, на которую не всегда хватает времени.

Комментировать…

Теги: html tags Забытые тэги

12 июня 2009, 16:20 более 9-и месяцев назад

Забытые тэги… BDO

Замечательный тэг %) Кто о нём знает, отпишитесь ;))

BDO — Bi-directional Override

Что же он делает — всего лишь указывает направление текста, слева-направо, справа-налево ;) через параметр dir (дирекшон)

rtl — right to left
ltr — left to right (по умолчанию)

<bdo dir="rtl">Sample Fun Text</bdo>

Выглядит вот так: Sample Fun Text
А на самом деле, направление текста можно изменить у всех текстовых блоках, через css

div { 
  direction: rtl
}

ps: Также параметр dir есть у тега HTML

<HTML dir="RTL">

1 комментарий

Теги: html, html tags Забытые тэги

10 июня 2009, 03:37 более 9-и месяцев назад

Забытые тэги… lowsrc (ну не совсем тэг, параметр)

Если на странице нужно загрузить большие картинки, и что бы наш любимый пользователь не скучал, мы можем ему скормить картинки размером поменьше, или картинку прелоадера

<input type="image" lowsrc="btn_.png"  src="btn.png">
<img lowsrc="img_.png" src="img.png">

Сквозь CSS путь открыт только с современных браузерах, и то с помощью обманки :) Укажем в ЛоуСрц параметр «thumb» и потом используем один селектор, что бы картинке сделать фоновую картинку

img[lowsrc="thumb"] { background-image: url(img_.gif); }

В JavaScript все ещё проще ;)

image_obj.lowsrc = 'img_.gif';

Комментировать…

Теги: html tags img lowsrc, html tags Забытые тэги

5 июня 2009, 18:09 более 9-и месяцев назад

Забытые тэги… COL

Эта заметка о забытых тэгах. Она будет со временем пополняться, ибо таких уже достаточно, как ни странно ;)
Ну что же, начнём:

У table есть замечательный тэг col, который я, честно говоря, не встречал нигде, случайно наткнувшись на него в каких-то мануалах. Что же он нам даёт? :) Спросите вы ;) А всё просто, мы можем установить любой колонке фиксированную длину (width). Использовать его очень прочто, структура такова:
```
<table border="1">
	<col width="140"/>
	<col width="360"/>
	<tr>
		<td>Колонка 1</td>
		<td>Колонка 2</td>
	</tr>
</table>
```
Это нам даёт огромное преимущество в управлении таблицами, ибо раньше нужно было много гемора, что бы выровнять длину колонок двух разных таблиц ;)

to be continued…

1 комментарий

Теги: html, html tags Забытые тэги

12 мая 2009, 02:56 более 10-и месяцев назад

Javascript add/remove TD/TR in TABLE

Манипулирование таблицей:

Для того что бы добавить/удалить строку(ряд) TR есть функция insertRow/deleteRow. Применяется она только к объекту TABLE.
Что бы посчитать количество рядов в таблице, вызываем у объекта TABLE функцию rows.length
Для того что бы добавить/удалить ячейку TD в строке, мы используем insertCell/deleteCell, применяется только к объекту TR.
Что бы посчитать количество колонок в рядке, вызываем у объекта TR функцию cells.length

Рассмотрим простой пример:

function addRow(i) {
	// объект myTable
	var table = document.getElementById('myTable');
	// количество рядов меньше вставляемого ряда - выходим
	var rowz = table.rows.length;
	if (rowz < i+1 && i > 0) 
		{alert("row " + (i+1) + " not exist");return;}
	// вставляем ряд без ячеек
	var row=table.insertRow(i);
	// предполагаем ячеек будет 2
	var countCells = 2;
	// берём количество ячеек со следующего ряда
	if (row.nextSibling != null && rowz > 0) 
		countCells = row.nextSibling.cells.length;
	// нет следующего берём с предыдущего, если есть ряды
	else if (row.previousSibling != null  && rowz > 0) 
		countCells = row.previousSibling.cells.length;
	// в цикле вставляем новые ячейки
	for (var j = 0; j < countCells; j++ ) {
		// вставляем ячейку
		var cell=row.insertCell(j);
		// наполняем ячейку
		cell.innerHTML="new cell " + (j+1) + " from line "+(i+1);
	}
}
function removeRow(i) {
	// объект myTable
	var table = document.getElementById('myTable');
	// нет рядов - выходим
	if (!table.rows.length) 
		{alert("No rows, insert first");return;}		
	// количество рядов меньше удаляемого ряда - выходим
	if (table.rows.length < i+1 ) 
		{alert("row " + (i+1) + " not exist");	return;}
	var row=table.deleteRow(i);
}	
function addCell(i) {
	// объект myTr
	var row = document.getElementById('myTr');	
	// Если номер вставляемой ячейки больше 
	// количества ячеек - выходим
	var rowz = row.cells.length;
	if (rowz < i+1 && i > 0) 
		{alert("cell " + (i+1) + " not exist");	return;}
	// вставляем ячейку
	var cell=row.insertCell(i);
	// наполняем ячейку
	cell.innerHTML="new cell after cell "+(i+1);
}	
function removeCell(i) {
	// объект myTr
	var row = document.getElementById('myTr');	
	// нет ячеек - выходим
	if (!row.cells.length) 
		{alert("No cells, insert first");return;}
	// Если ячейки которую нужно удалить нет - выходим
	if (row.cells.length < i+1 ) 
		{alert("cell " + (i+1) + " not exist");	return;}
	// удаляем ячейку
	var cell=row.deleteCell(i);
}

Посмотреть пример

Комментировать…

Теги: javascript, html tags table tr td

6 мая 2009, 09:43 более 10-и месяцев назад

Events (OnMouseOver, OnMouseOut) для DIVа (и вложеных елементов)

Если просто отобразить див по МаусОвер, то при наведении мыши, на любой из его внутренних елементов, он сразу исчезнет, а нам это не нужно ;)

Для того что бы этого небыло, используем простой код:

//Обьявляем ивент для всех браузеров и Експлорера	
function addHandler(node, evt, func) {
    if (node.addEventListener) {
        node.addEventListener(evt, func, false); 
    } else {
        node.attachEvent('on' + evt, func);     
    }
};
//Получаем список парент елементов обьекта - рекурсивно
function isParent(child, parent) {
    if (!child || !parent) {
        return false;
    }
    while (true) {
        if (child == parent) {
            return true;
        }
        if (child.parentElement) {
            child = child.parentElement;
        } else if (child.parentNode) {
            child = child.parentNode;
        } else {
            return false;
        }
    }
}
// Простой текст-заготовка
var preperedText = "<div style='position: absolute; width: 300px; background: #ccc;'>
<h1>Cool Popup</h1>\
<p>Here the sample Text (<b>in paragraph</b>)\
with <i>some</i> <u>styling</u> and picture above<br/>\
<img src='Astronaut.gif' title='Picture'></p></div>";
function zaatachim(container) {
	var injection = document.getElementById(container);
	// Вставляем в контейнер приготовленный текст
	// Текст можно получить и через Ajax ;)
	injection.innerHTML = preperedText;
	// Цепляем ивент на контейнер с Айди container
	addHandler(injection, 'mouseout', function(e) {
	    var target = e.relatedTarget || e.toElement;
	    if(!isParent(target, injection) ) {
	       	injection.innerHTML = '';
	    }
	});
	// если текст цепляем через Ajax, не забываем о задержках ;)
}

Комментировать…

Теги: javascript event OnMouseOver, html tags div

26 февраля 2009, 20:04 более года назад

Как спрятать предустановленный текст в поле формы (input) при клике(onclick) или фокусе(onfocus)

у инпута есть свойство defaultValue, что отдаёт ДжаваСкрипту значение инпута в момент загрузки страницы. Когда кто-то клацнет (перейдёт) на поле формы, можно сравнить значения инпута (value) с тем значением, и если они равны, обнулить инпут. Просто и красиво :)

Вот такой вот скриптик с этим легко справится ;)

function clearText(thefield){
	if (thefield.defaultValue==thefield.value) 
		thefield.value = "";
}

и ещё премер формы

<form action="/" method="get">
	Введите текст: 
	<input type="text" name="ourtext" value="e-mail" onfocus="clearText(this)"/> 
	Нажмите кнопку: 
	<input type="submit" name="OK" value="OK" class="btn" onfocus="blur()"/>
</form>

Комментировать…

Теги: html tags form input, javascript

27 июня 2008, 14:22 более года назад

javascript and form (input, text, hidden) и элементы формы

document.forms["formname"].inputname.value

где formname — id формы, а inputname — имя (name) инпута (text, hidden, password, etc)

1 комментарий

Теги: javascript, html tags form input, html tag values hidden

Страницы: 1 | 2

Deerua about Coding -> Заметки с тегом «tags»

Блог о кодинге, автор Deerua

coding, javascript, css, html, php, jquery, mysql, deerua