31.07.2012
Самое обычное решение - создать инлайновый элемент (у блочных ширина обычно или 100%, или заданная), например, span, задать его текст, шрифт и измерить его ширину функцией width().
Например, это можно сделать так:
function textWidth(text,fsize){
var newelem = $('<span>');
newelem.text(text);
newelem.css('font-size', fsize);
newelem.hide();
$('body').append(newelem);
var w = newelem.width();
newelem.remove();
return w;
};
Использовать следующим образом:
var mytextwidth = textWidth('lalala','16px');
В прошлом примере мы не определяем шрифт, а следовало бы. Конечно, передачу шрифта через параметр сделать проще простого, но раз уж мы используем jquery, сделаем так:
$.fn.textWidth = function(){
var newelem = $('<span>');
newelem.text($(this).text());
newelem.css({
'font-size': $(this).css('font-size'),
'font-weight':$(this).css('font-weight'),
'font-family':$(this).css('font-family'),
'font-style':$(this).css('font-style')
});
newelem.hide();
$('body').append(newelem);
var w = newelem.width();
newelem.remove();
return w;
};
И мы можем использовать эту функцию для любого jquery-объекта:
var mytextwidth = $('#myelement').textWidth();
javascript
02.07.2012
Эта ошибка возникает, когда вы пытаетесь сделать ajax-запрос к какому-либо сервису с локалхоста. Исправляется очень просто - припишите в конце адреса, на который делаете запрос, &callback=?.
Пример:
$.ajax({
type : "GET",
url : "http://api.twitter.com/1/users/show.json?screen_name="+groupname+'&callback=?',
dataType: "json",
success : function(data) { ... }
});
Подробнее читайте тут.
javascript
27.06.2012
Можно сделать красивый якорь - т.е. плавное перемещение к любому DOM-элементу. Для этого сделаем такой скрипт:
$('a[href^="#"]').click(function() {
$('html:not(:animated)' +( !$.browser.opera ? ',body:not(:animated)' : '')).animate({ scrollTop: $($(this).attr('href')).offset().top}, 1000 );
return false;
});
Этот код заменяет все якоря на плавные. Время перемещения до якоря - 1000 мс, вы, конечно же, можете легко поменять его.
$('element').offset().top - определить расстояние (высоту) от начала (самого верха) страницы до выбранного элемента.
Проверил работу в браузерах IE8, Chrome 19, Opera 12.00, Firefox 13.01. Везде хорошо работает.
И не забудьте подключить jQuery в блоке head!
<head>
...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
...
</head>
Источники:
http://loco.ru/materials/96-jquery-scroll-to-top
http://api.jquery.com/offset/
javascript
14.06.2012
<p>Обнаружил такую проблему: <a title=”Cufon” href="https://github.com/sorccu/cufon” target=”_blank” rel=”noopener”>Cufon</a> (заменитель шрифтов, см. <a title=”Cufón – используйте шрифты, какие душа пожелает” href=”http://habrahabr.ru/post/61033/" target=”_blank” rel=”noopener”>здесь</a> и <a title=”Нестандартный шрифт средствами js” href=”http://www.marketer.ru/adv/production/dizajn/tipografika/cufon-nestandartnyj-shrift-sredstvami-js/" target=”_blank” rel=”noopener”>здесь</a>) прекрасно менял все шрифты, цвета и т.п. Но в одном месте ни в какую не хотел изменять цвет шрифта при наведении (:hover).<br />Оказалось, что если ссылка, которая должна hover’иться, находится внутри другого блока текста, который уже обработан Cufon’ом, то она не сможет изменить цвет (!), border и некоторые другие свойства будут меняться без проблем.<br />Итак, ниже показываю, в каких случаях hover’а не происходит, а в каких происходит (в коде все понятно). Либо можно скачать <a href=”/media/uploads/2018/11/09/cufon-test.zip” target=”_blank” rel=”noopener”>архив, вместе со шрифтами</a>, и самому посмотреть.</p>
<!doctype html>
<html>
<head>
<script type="text/javascript" src="test/jquery00.js"></script>
<script type="text/javascript" src="test/cufon-yu.js"></script>
<script type="text/javascript" src="test/Plumb_20.js"></script>
<style>
a, a:link, a:visited { color : #0000cc; }
</style>
</head>
<body>
<div class="example">Lorem <a href="#" class="ahref">Ссылка, вложенная в другой элемент с Cufon'ом, обработка сначала внешнего блока, потом ссылки [hover'а нет]</a> ipsum</div>
<div class="example2"><span class="example">Lorem</span> <a href="#" class="ahref">Ссылка, не вложенная в элемент с Cufon'ом, внутри текста</a> <span class="example">ipsum</span></div>
<div class="example2">Lorem <a href="#" class="ahref">Ссылка, вложенная в другой элемент с Cufon'ом, обработка сначала ссылки, потом внешнего блока</a> ipsum</div>
<div class="example2">Lorem <a href="#">Ссылка без явного указания класса [hover'а нет]</a> ipsum</div>
<a class="ahref" href="#" >Ссылка, не вложенная в другие элементы, которые обрабатываются Cufon'ом</a></p>
<p><script type="text/javascript">
Cufon('.example');
Cufon('.ahref', {
color: '#0000cc',
hover: true,
hover: {
color: '#ccc'
}
});
Cufon('.example a', {
color: '#0000cc',
hover: true,
hover: {
color: '#ccc'
}
});
Cufon('.example2');
</script>
</body>
</html>
верстка
18.03.2012
function filterforme() {
v = $('#filterbox-input').val().toLowerCase();
nowCount = 0;
$('#listtable tbody tr').hide();
$('#listtable tbody tr').filter(function(index) {
b = ($(this).text().toLowerCase().indexOf(v) != -1) || (v == '') ? true : false;
nowCount += b;
return b;
}).show();
$('#countRecords').text(nowCount+' из '+fullCount);
}
$('#filterbox-input').keyup(function () {
filterforme();
});
<div class="filterbox"><label for="filterbox-input">Фильтр</label><input type="text" value="" id="filterbox-input" name="filterbox-input"></input></div>
<table class="sort-table" id="listtable">
<thead>
<tr>
<th>Код</th>
<th>Наименование</th>
<th>Описание</th>
<th>Редактировать</th>
<th>Удалить</th>
</tr>
</thead>
<tbody>
<tr>
<td>И</td>
<td>Используется</td>
<td>СИ используется по назначению</td>
<td align="center"><a href="/spravochnik/sostoyanie/edit/1/"><img title="редактировать" alt="редактировать" src="/media/static/images/system/pencil_16.png" /></a></td>
<td align="center"><a href="/spravochnik/sostoyanie/delete/1/" onclick="return deleteQuest();"><img title="удалить" alt="удалить" src="/media/static/images/system/delete_16.png" /></a></td>
</tr>
<tr>
<td>К</td>
<td>Консервация</td>
<td>СИ законсервировано, находится на длительном хранении</td>
<td align="center"><a href="/spravochnik/sostoyanie/edit/2/"><img title="редактировать" alt="редактировать" src="/media/static/images/system/pencil_16.png" /></a></td>
<td align="center"><a href="/spravochnik/sostoyanie/delete/2/" onclick="return deleteQuest();"><img title="удалить" alt="удалить" src="/media/static/images/system/delete_16.png" /></a></td>
</tr>
<tr>
<td>Р</td>
<td>Ремонт</td>
<td>СИ находится в ремонте</td>
<td align="center"><a href="/spravochnik/sostoyanie/edit/3/"><img title="редактировать" alt="редактировать" src="/media/static/images/system/pencil_16.png" /></a></td>
<td align="center"><a href="/spravochnik/sostoyanie/delete/3/" onclick="return deleteQuest();"><img title="удалить" alt="удалить" src="/media/static/images/system/delete_16.png" /></a></td>
</tr>
</tbody>
</table>
<div class="countTable">Отображено записей: <span id="countRecords">0</span></div>
javascript