Поиск

Найдены 15 статей по слову "java"

Как определить ширину текста javascript / jquery

Самое обычное решение - создать инлайновый элемент (у блочных ширина обычно или 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

API Twitter - Origin null is not allowed by Access-Control-Allow-Origin

Эта ошибка возникает, когда вы пытаетесь сделать ajax-запрос к какому-либо сервису с локалхоста. Исправляется очень просто - припишите в конце адреса, на который делаете запрос, &callback=?.

Пример:

$.ajax({
    type : "GET",
    url : "http://api.twitter.com/1/users/show.json?screen_name="+groupname+'&callback=?',
    dataType: "json",
    success : function(data) { ... }
});

Подробнее читайте тут.

javascript

Плавно перемещаем скролл к элементу

Можно сделать красивый якорь - т.е. плавное перемещение к любому 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

Cufon не меняет цвет ссылок при наведении

<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>
верстка

Фильтр записей таблицы на jQuery

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