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

Для того что бы отобразить произвольный текст под углом, мы в нормальных браузерах используем тип svg+xml для object, и через параметр data, передаём нужные данные для обработки!
А именно параметры, и теги:

• x=’-200’ — координата начала строки текста от верхней стороны object;
• y=’18’ — координата базовой линии строки текста от левой стороны object;
• font-family=’Arial’ font-size=’12’ — размер, гарнитура шрифта;
• fill=’#000000’ — цвет текста;
• transform=’rotate(-90)’ — поворачиваем текст на -90 градусов.

<object type="image/svg+xml" data="data:image/svg+xml; charset=utf-8,
<svg xmlns='http://www.w3.org/2000/svg'>
<text x='-200' y='18' font-family='Arial' font-size='12' fill='#000000' 
transform='rotate(-90)' text-rendering='optimizeSpeed'>
вертикальный текст
</text>
</svg>">
</object>

Но есть ещё друг ИЕ (буеее:), и для него есть css filter, а именно:

• вертикальный фильтр %)
• горизонтальный фильтр 8)
• под произвольным углом :D

.vertical object { 
	/* скрываем svg */
	display:none­; 
} 
.vertical span { 
	filter: flipv() fliph()­; 
	writing-mode: tb-rl­; 
}
.vertical_angle span { 
	writing-mode:lr-tb­;
	filter:progid:DXImageTransform.Microsoft.Matrix(
	M11='0.985', M12='-0.174', M21='0.174', M22='0.985', 
	SizingMethod="auto expand")­;
}

• M11 = cos(угла в градусах)
• M12 = -sin(угла в градусах)
• M21 = sin(угла в градусах)
• M22 = cos(угла в градусах)

• Пример с сайта автора

ps: Текст будет непредсказуемо размещаться на странице, поэтому делаем ему абсолютное позиционирование! А блок в котором будет текст, вместе с объектом делаем фиксированной длины/ширины

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

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

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

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

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

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

• Посмотреть пример
• Скачать пример (zip 53.1Kb с картинкой)

Просто для себя, очень часто нужно скопировать %)
Итак, девять различных чёрточек:

Знак	HTML	Название	Назначение и употребление
-	-	дефисоминус	вместо всех остальных чёрточек при отсутствии технической возможности
‐	‐	дефис	для разделения частей слова: «светло‐серый», «по‐моему», «кое‐кто» и т. п.
−	−	минус	математические выражения: 2 − 3 = −1
‒	‒	цифровая чёрточка	номера телефонов и другие цифровые коды
­	­	символ переноса	в (длинных) словах в тех местах, где можно сделать перенос
⁃	⁃	чёрточный буллит	маркер списка
—	–	короткое тире	западная типографика
—	—	длинное тире	русская типографика
―	―	горизонтальная черта	диалоги (в западной типографике)

И, для сравнения, в одной строке: - ‐ − ‒ ­ ⁃ — — ―

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

Вот тут можно скачать YASS, который поможет быстрее всех выбрать все нужные DOM элементы по маске!
как использовать? :) всё просто:

_('a.link'); // выбрать все теги <a> с class="link"
_('.link span'); //выбрать все теги <span> внутри тега с class="link"
_('p'); //выбрать все теги <p>
_('#p'); //выбрать все теги с id="p" 
_('#p .link'); //выбрать все теги с class="link" внутри тега с id="p"
_('#p #sp1'); //выбрать все теги с id="sp1" внутри тега с id="p"
_('p#p'); //выбрать все теги <p> с id="p"
_('p a'); //выбрать все теги <a> внутри тега <p>
_('.link'); //выбрать все теги с class="link"
_('.link #sp1'); //выбрать все теги с id="sp1" внутри тегов с class="link"
_('img'); //выбрать все теги <img>
_('body p img'); //выбрать все теги <img> внутри тега <p>, что внутри <body>
_('a, img'); // выбрать все теги <a> и <img>

скачать 0.1ю версию для ознакомления с принципом работы 6Kb (русские комментарии)

Determine the coordinates {X, Y} using JavaScript

/* Определяем через паренты начало элемента по оси Х
Входной парметр, АйДи элемента
Возвращает Int*/
function findPosX(obj){
  var curleft = 0;
  if(obj.offsetParent)
    while(1) {
      curleft += obj.offsetLeft;
      if(!obj.offsetParent)break;
      obj = obj.offsetParent;
    }
  else if(obj.x) curleft += obj.x;
  return curleft;
}
/* Определяем Не Ие ли Броузер :)
Возвращает Bool*/
function isIE (){
    return navigator.userAgent.toLowerCase().indexOf("msie") > -1;}
/* Определяем через паренты начало элемента по оси Y
Входной парметр, АйДи элемента
Возвращает Int*/
function findPosY(obj){
  var curTop= 0;
  if(!isIE) curTop= obj.offsetHeight;
  if(obj.offsetParent)
    while(1){
     curTop+= obj.offsetTop;
     if(!obj.offsetParent) break;
     obj= obj.offsetParent;
    } 
  else if(obj.y) curTop+= obj.y; 
  return curTop;
} 
/* Определяем через функции findPosХ и findPosY координаты елемента
Входной парметр, АйДи элемента
Возвращает масив координат array {x,y}*/
function getPositionMy(e){
  return {x:findPosX(e), y:findPosY(e)};
}

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

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

<script type="text/javascript">
function getTagsIdList (id){
  //получаем div id через id.parentNode
  //и с помощью getElementsByTagName собираем все элементы с тегом "а"
  var tagaelm = id.parentNode.getElementsByTagName('a');
  //в цыкле выводим название элемента(объекта, тега) и его содержимое
  for(var i=0; i < tagaelm.length; i++) 
  alert(tagaelm[i].id + "\n" + tagaelm[i].innerHTML);
}
</script>
<div>
  <a id="a1" onClick="getTagsIdList(this);" href="#">link1</a>
  <a id="a2" onClick="getTagsIdList(this);" href="#">link2</a>
  <a id="a3" onClick="getTagsIdList(this);" href="#">link3</a>
</div> 

Найдено методом тыка! :)
После часового копания в свалке доков и стандартов

Все просто:

<a id="id_elementa" onClick="alert(this.id)">click</a>