Deerua about Coding: последние заметки с тегом «tags»

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

Mon, 26 Oct 2009 06:26:10 +0200

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

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

{ list-style-position: inside }

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

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

текста

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

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

Комментарии к заметке

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

HTML & iframe & IE

Thu, 06 Aug 2009 02:58:27 +0200

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

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

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

Комментарии к заметке

Теги:
html > tags > iframe

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

Fri, 10 Jul 2009 15:14:11 +0200

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

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

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

Комментарии к заметке

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

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

Fri, 12 Jun 2009 16:20:58 +0200

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

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">

Комментарии к заметке

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

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

Wed, 10 Jun 2009 03:37:27 +0200

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

<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 > Забытые тэги

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

Wed, 10 Jun 2009 03:37:27 +0200

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

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

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

image_obj.lowsrc = 'img_.gif';

Комментарии к заметке

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

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

Fri, 05 Jun 2009 18:09:23 +0200

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

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

to be continued...

Комментарии к заметке

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

Javascript add/remove TD/TR in TABLE

Tue, 12 May 2009 02:56:13 +0200

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

Для того что бы добавить/удалить строку(ряд) 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

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

Wed, 06 May 2009 09:43:57 +0200

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

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

//Обьявляем ивент для всех браузеров и Експлорера	
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

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

Thu, 26 Feb 2009 20:04:01 +0200

у инпута есть свойство 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