Архів категорії: JQuery & JavaScript

bootstrap автоматическое подстаивание картинки

Бутстрап с таким не справляется, так как он растягивает очень маленькую картинку на всю ширину контейнера. С большими картинками конечно справляется.

Так что нечего экспериментировать, просто это работа для Jquery:

  1. // Now we need to use only maximum image size
  2. function doImageResizingWork(parentSelector, imageSelector){ // ‘.image’, ‘p img’
  3. var destElem = $(parentSelector);
  4. $(parentSelector + ‘ ‘+ imageSelector).each(function () {
  5. var img = $(this);
  6. // get actual img size
  7. var img_copy = new Image();
  8. img_copy.onload = function () {
  9. // now we working inside this callback
  10. var realW = this.width;
  11. var realH = this.height;
  12. var destW = destElem.width() – 7;
  13. // only if image bigger parent
  14. if (realW > destW)
  15. {
  16. var scaleRatio = realW / realH;
  17. var newH = destW / scaleRatio;
  18. } else
  19. {
  20. var destW = realW;
  21. var newH = realH;
  22. }
  23. img.attr(‘width’, destW);
  24. img.attr(‘height’, newH);
  25. };
  26. img_copy.src = img.attr(‘src’);
  27. });
  28. }
  29. function doSomething() {
  30. doImageResizingWork(‘#rotating_items’,‘img’);
  31. doImageResizingWork(‘.image’,‘img’);
  32. }
  33. $(function () {
  34. doImageResizingWork(‘.image’,‘img’);
  35. doImageResizingWork(‘#rotating_items’,‘img’);
  36. var resizeTimer;
  37. $(window).resize(function () {
  38. clearTimeout(resizeTimer);
  39. resizeTimer = setTimeout(doSomething, 500);
  40. });
  41. });

error 406 ajax cpanel – ошибка 406 POST

Решил делать сайты на хостинге с cPanel – и выявил странности. Некоторые ajax запросы начали возвращать код ошибки 406 – 406 Not Acceptable Error.

Помучился с этим и выявил. Ошибка появлялась тогда, когда в POST-переменных пустота. Работаем на jquery.

Пример – ОШИБКА:

$.ajax({
type: “POST”,
url: “http://anydotmoc.com/ajaxDo”,
data: { },
timeout: 25000,
success: function(data){

Пример – все правильно теперь:

$.ajax({
type: “POST”,
url: “http://anydotmoc.com/ajaxDo”,
data: {test: ‘test’},
timeout: 25000,
success: function(data){

data: { } – так лучше не делать, хотя на хостинге с ISPmanager и дома на XAMPP проблем не возникало.

Не очень мне нравится cPanel…

jquery.cookie примеры

Использование простое.

Это чтение:

$.cookie(“disableTeaserHint”) == “disabled2012”

Это запись:

$.cookie(“cookieName”, “cookieValue”, { expires: 7, path: ‘/’ });

В моей модификации этого плагина, если кука нет, то возвращается пустая строка : “” или ”.

Число 7 в примере – это количество дней (или суток наверное).

Скачайте бесплатно нахаляву: /files/jquery.cookie.js

Отказ от JQuery UI

Если вы хотите использовать мой UI, скачайте Файлы blohher.ui.7z

Краткая документация:

Регистрируем окно UI, указывая необходимые callback-функции:

$(‘#ui-dialog’).blohherui({
cbUiClose : anyShow,
cbUiOk : function(){ any1(); any2(); },
cbUiShow : anyHide
});

Собственная кнопка закрытия окна

$(‘#ui-close-link’).click(function(){
$(‘#ui-dialog’).blohherui(‘uiClose’);
});

А вот так можно заменить текст сообщения и надпись на кнопке

$(‘#ui-dialog .ui-buttons button span’).html(‘1’);
$(‘#ui-dialog .ui-text p’).html(‘2’);

Фунцкии:

  • uiReg(options) – явно не указывается, просто передавайте объект опций
  • uiShow() – показать окно
  • uiClose() – закрыть окно

Ссылка на пример использования: удалена после переноса сайта на WordPress

Как очистить фокус, как снять выделение текста на странице

Вот вам функция:

function clearPageSelection()
{
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) { // IE?
document.selection.empty();
}
}

В опере тоже работает

Шаблон AJAX функции

Раньше я начинал строить такое с использованием отдельных функций, но позже понял что лучше их не использовать. По этому здесь только анонимные функции.

Современный пример

function ajax()
{
$.ajax({
type: “POST”,
url: “”,
data: {test: ‘test’},
success: function(data){
p = tryEval(‘(‘ + data + ‘)’);
if(p===false)
{
return false;
}
if (typeof(p[‘error’]) != ‘undefined’)
{
if (p[‘error’] == ‘FAIL’) return false;
}
else
{
// do success here
}
},
error: function(s, e){
return false;
},
timeout: 25000
});
}

Вот идентичный пример, но без использования return false

function ajaxGet()
{
$.ajax({
type: “POST”,
url: ““,
data: {},
success: function(data){
p = tryEval(‘(‘ + data + ‘)’);
if(p===false)
{
CB.attr(‘value’, ‘Помилка!’);
}
else
{
if (typeof(p[‘error’]) != ‘undefined’)
{
CB.attr(‘value’, ‘Помилка!’);
}
else
{
CB.attr(‘value’, ‘OK’);
}
}

},
error: function(s, e){
CB.attr(‘value’, ‘Помилка!’);
},
timeout: 25000
});
}

Тут используется функция tryEval, можете и ее скачать у меня.

function tryEval(code)
{
var res;
try
{
res = eval(code)
}
catch(e)
{
Log(‘———— * * * eval error * * * ——————– < [ ' + e.name + ' ]');
res = false;
}
return res;
}

Использование ссылки как управляющий элемент для скрипта

Мы хотим, чтобы при нажатии на ссылку, вызывалась наша функция, но чтобы браузер не следовал ссылке. Вот как это делается.

Открыть что-то

$(‘#test-click’).click(function(){
vashaFunction();
return false;
});

Из приведенного кода именно return false; выполняет функцию по предотвращению следования браузера по ссылке.

Jquery mutli load – подключение библиотеки с двух источников.

Данная идея возникла когда я отключил интернет из страха о поражении ПК через грозу. У меня Jquery загружается с статического хранилища яндекса:

Так говорят быстрее, сервер меньше грузит. Может оно и так, но Яндекс не Бог, иногда и сам висит.

Сразу же оговорюсь. Один день Яндекс так висел, что много сайтов загружались на половину. Особенно меня удивил сайт webmasters.ru, висевший секунд 30. По-этому лично я отказался от использования Яндексовского кода, и всем рекомендую гугловский. Мне сложно припомнить когда гугл висел. Все-таки американцы – профи!

Задача в том, что бы подключать библиотеку со своего сервера, в случае если Яндексовский не доступен. Как это сделать? Все оказалось просто:

Собственно это работает, так как в случае неудачи скачивания библиотеки с Яндекса, он тут же, не дожидаясь window.onload начинает грузить вашу библиотеку. Вот только путь http://localhost/blohher/_/js/jquery.js придется написать полный и ваш! Лично я сейчас его на РНР настрою, чтобы все было автоматически.

Читы по использованию библиотеки

Применить к элементу CSS стиль. Учтите, данный код добавляет инлайн style=”;”

$(“#ui-dialog”).css(“display”, “block”);

Удалить этот стиль (проверено). Косовато, но если нужно много свойств, применяйте классы

$(‘#tvButtonNibiru’).removeAttr(“style”);

Поменять текст внутри контейнера (div, p, span)

$(‘#dialog_p’).text(“Новый текст”);

Взять значение поля input

$(‘#emailinput’).val()

Установить значение поля input

$(“#emailinput”).attr(“value”, “новый@значение.вот”);