Для получения полного доступа
зарегистрируйтесь.

Раздел:
Подраздел:
Языки:


Gravatar image
rowario
  • Репутация: 12
  • Сниппеты: 1
  • Ревизии: 0

Нужно загрузить файл на сервер, без перезагрузки страницы? Видел много костылей на эту тему, вот вам простой вариант, который мспользую сам)

var form = new FormData(document.getElementById('идентификатор формы'));
$.ajax({
    url: "/upload.php",
    type: "POST",
    data: form,
    enctype: 'multipart/form-data',
    processData: false,
    contentType: false,
    success: function (data) {
        // здесь обработка ответа от сервер
    }
});
dfatt
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

Задача была следующей, сделать красивую полосу прокрутки для кода сниппетов. В MacOS, полоса прокрутки очень минималистична и красиво вписывается в наш интерфейс. Но, в Windows и других OS, полоса прокрутки выглядет везде по разному. Поэтому было решено заменить системный скроллбар на свой.

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

89f82efb23d7643ffb367b9adf801611.gif

Продолжение »

jestonedev
  • Репутация: 99
  • Сниппеты: 11
  • Ревизии: 1

Этим скриптом можно получить изображение из буфера обмена при нажатии ctrl+v на js. Работает только в хроме и мозиле. Может кто обращал внимание, в вк, в переписке есть возможность прикрепления картинки в диалог прямо из буфера, с этим скриптом вы можете реализовать то же самое.

// проверяем, поддерживает ли браузер объект Clipboard
// если нет создаем элемент с атрибутом contenteditable
if (!window.Clipboard) {
   var pasteCatcher = document.createElement("div");
    
   // Firefox вставляет все изображения в элементы с contenteditable
   pasteCatcher.setAttribute("contenteditable", "");
    
   pasteCatcher.style.position = "absolute";
   pasteCatcher.style.left = "-3000px";
   document.body.appendChild(pasteCatcher);
 
   // элемент должен быть в фокусе
   pasteCatcher.focus();
   document.addEventListener("click", function() { pasteCatcher.focus(); });
} 
// добавляем обработчик событию
window.addEventListener("paste", pasteHandler);
 
function pasteHandler(e) {
// если поддерживается event.clipboardData (Chrome)
      if (e.clipboardData && e.clipboardData.items) {
      // получаем все содержимое буфера
      var items = e.clipboardData.items;
      if (items) {
         // находим изображение
         for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf("image") !== -1) {
               // представляем изображение в виде файла
               var blob = items[i].getAsFile();
               // создаем временный урл объекта
               var URLObj = window.URL || window.webkitURL;
               var source = URLObj.createObjectURL(blob);                
               // добавляем картинку в DOM
               createImage(source);
            }
         }
      }
   // для Firefox проверяем элемент с атрибутом contenteditable
   } else {      
      setTimeout(checkInput, 1);
   }
}
 
function checkInput() {
    var child = pasteCatcher.childNodes[0];   
   pasteCatcher.innerHTML = "";    
   if (child) {
// если пользователь вставил изображение – создаем изображение
      if (child.tagName === "IMG") {
         createImage(child.src);
      }
   }
}
 
function createImage(source) {
   var pastedImage = new Image();
   pastedImage.onload = function() {
      // теперь у нас есть изображение из буфера
   }
   pastedImage.src = source;
}

Артем Леготин
  • Репутация: 18
  • Сниппеты: 5
  • Ревизии: 0

Возвращает линейную функцию f(x), построенную следующим образом:

f(a) = A; f(b) = B;

var linear = function( a, b, A, B, is_ext ) {
	return function( x ) {
		if ( x <= a && is_ext !== true ) {
			return A;
		} else if ( x >= b && is_ext !== true ) {
			return B;
		} else {
			return x * ( B - A ) / ( b - a ) + ( A * b - B * a ) / ( b - a );
		}
	};
};

/*
	По умолчанию, за пределами области определения функция будет возвращать крайние значения, то есть:

	f(x) = A, если x < a;
	f(x) = B, если x > b;

	Однако, если передать параметр is_ext в значении true, f(x) будет экстраполировать значения линейным образом.
*/

var f = linear( -50, 50, 0, 1 );// без экстраполяции

f(-60);// 0
f(-50);// 0
f(0);// 0.5
f(50);// 1
f(100);// 1

var g = linear( 0, 10, 0, 100, true );// c экстраполяцией

g(-5);// -50
g(0);// 0
g(5);// 50
g(10);// 100
g(20);// 200
Gravatar image
Антон
  • Репутация: 3
  • Сниппеты: 1
  • Ревизии: 0

JS-костыль, чтобы писать отдельные CSS или JS под MacOS

//если нет Modernizr на проекте
if (navigator.userAgent.indexOf('Mac') > 0) {
    var elemHTML = document.getElementsByTagName('html')[0];
 
    elemHTML.className += " mac-os";
 
    if (navigator.userAgent.indexOf('Safari') > 0) elemHTML.className += " mac-safari";
    if (navigator.userAgent.indexOf('Chrome') > 0) elemHTML.className += " mac-chrome";
}

//если есть Modernizr на проекте
Modernizr.addTest({ macos: !!(navigator.userAgent.indexOf('Mac') + 1) });

Modernizr.addTest({
    macsafari: Modernizr.macos ? !!(navigator.userAgent.indexOf('Safari') + 1) : false,
    macchrome: Modernizr.macos ? !!(navigator.userAgent.indexOf('Chrome') + 1) : false
});

Gravatar image
dkrnl
  • Репутация: 17
  • Сниппеты: 2
  • Ревизии: 0

При копировании любого выделенного текста, в конец текста автоматически добавляется ссылка на сайт.

jQuery(function($){
    
    $(document).on("copy", function () {
        var selection, html = "", minLength = 10;
        if (window.getSelection || document.getSelection) {
            selection = window.getSelection ? window.getSelection() : document.getSelection();
            if (selection.rangeCount) {
                html = document.createElement("div");
                for (var i = 0, n = selection.rangeCount; i < n; ++i) {
                    html.appendChild(selection.getRangeAt(i).cloneContents());
                }
                html = html.innerHTML;
            }
        } else if (document.selection && document.selection.type == "Text") {
            selection = document.selection.createRange();
            html = selection.htmlText;
        }
        if (html.length <= minLength) { // проверка минимальной длины
            return;
        }
        html += "<br>\n<br>\n" + document.location.href; // тут можно добавить название сайта
        var container = $("<div style=\"position:absolute;left:-99999px\"></div>").appendTo("body");
        container.html(html);
        selection.selectAllChildren(container.get(0));
        setTimeout(function() {
            container.remove();
        }, 0);
    });
    
});
Gravatar image
dtestyk
  • Репутация: 9
  • Сниппеты: 3
  • Ревизии: 0

Нажимать когда страница долго грузится. Позволяет ускорить загрузку страницы и уменьшить трафик. Удобно использовать для текствых сайтов. С некоторыми сайтами работает плохо.

javascript:(function(){
  location='http://www.google.com/search?strip=1&q=cache:'+location.hostname+location.pathname
}())
Gravatar image
dtestyk
  • Репутация: 9
  • Сниппеты: 3
  • Ревизии: 0

Букмарклет медленной прокрутки страницы. Прокрутка прекращается, когда страница прокручена до самого низа.

javascript:(function(){
  var scrollY_before = scrollY;
  scrollTo(0,scrollY_before+1);
  if(scrollY_before < scrollY){
    setTimeout(arguments.callee, 300)
  }
}())
Valentin Sayik
  • Репутация: 37
  • Сниппеты: 5
  • Ревизии: 0

Этим скриптом можно получить изображение из буфера обмена при нажатии ctrl+v на js. Работает только в хроме и мозиле. Может кто обращал внимание, в вк, в переписке есть возможность прикрепления картинки в диалог прямо из буфера, с этим скриптом вы можете реализовать то же самое.

// проверяем, поддерживает ли браузер объект Clipboard
// если нет создаем элемент с атрибутом contenteditable
if (!window.Clipboard) {
   var pasteCatcher = document.createElement("div");
    
   // Firefox вставляет все изображения в элементы с contenteditable
   pasteCatcher.setAttribute("contenteditable", "");
    
   pasteCatcher.style.display = "none";
   document.body.appendChild(pasteCatcher);
 
   // элемент должен быть в фокусе
   pasteCatcher.focus();
   document.addEventListener("click", function() { pasteCatcher.focus(); });
} 
// добавляем обработчик событию
window.addEventListener("paste", pasteHandler);
 
function pasteHandler(e) {
// если поддерживается event.clipboardData (Chrome)
      if (e.clipboardData) {
      // получаем все содержимое буфера
      var items = e.clipboardData.items;
      if (items) {
         // находим изображение
         for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf("image") !== -1) {
               // представляем изображение в виде файла
               var blob = items[i].getAsFile();
               // создаем временный урл объекта
               var URLObj = window.URL || window.webkitURL;
               var source = URLObj.createObjectURL(blob);                
               // добавляем картинку в DOM
               createImage(source);
            }
         }
      }
   // для Firefox проверяем элемент с атрибутом contenteditable
   } else {      
      setTimeout(checkInput, 1);
   }
}
 
function checkInput() {
    var child = pasteCatcher.childNodes[0];   
   pasteCatcher.innerHTML = "";    
   if (child) {
// если пользователь вставил изображение – создаем изображение
      if (child.tagName === "IMG") {
         createImage(child.src);
      }
   }
}
 
function createImage(source) {
   var pastedImage = new Image();
   pastedImage.onload = function() {
      // теперь у нас есть изображение из буфера
   }
   pastedImage.src = source;
}

Иван Бармашов
  • Репутация: 71
  • Сниппеты: 7
  • Ревизии: 0

В соц. сетях, например в Twitter, вы заметите, что даты выводятся в формате — 1 hour ago. Чтобы сделать на своё сайте также, нам достаточно использовать timeago.js

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

<script src="https://raw.githubusercontent.com/rmm5t/jquery-timeago/master/jquery.timeago.js"></script>
<script src="https://raw.githubusercontent.com/rmm5t/jquery-timeago/master/locales/jquery.timeago.ru.js"></script>

Другие локализации можете найти тут — locales

// JS
jQuery(function ($) {
    $(document).ready(function() {
        $('.time').timeago();
    });
});

// Html
<span class="time" title="2015-08-18T09:24:17Z"></span>