-
Laravel. Как вывести заглавную букву в Blade?
Короткая статья с несколькими вариантами вывода заглавной буквы в laravel blade. Чистый php Выводим привычную нам функцию ucfirst обернутую в {{ … }} {{ ucfirst(trans(‘messages.welcome’)) }} {{ ucfirst(‘welcome’) }} Blade-директива Добавляем новую директиву в метод boot() в app/Providers/AppServiceProvider. public function boot() { Blade::directive(‘capitalize’, function ($s) { return «»; }); } Далее вызываем, как обычную директиву […]
-
Javascript. jQuery. Как подключить css-файл (аналог $.getScript)
Подключать внешний css-файл через javascript (jQuery) — задача нечастая, но вероятная. В этой статье пример простого решения задачи. Итак, Вашему вниманию два варианта решения задачи. jQuery: $(», { rel: ‘stylesheet’, type: ‘text/css’, href: ‘path_to_the.css’ }).appendTo(‘head’); JavaScript: var linkElem = document.createElement(‘link’); document.getElementsByTagName(‘head’)[0].appendChild(linkElem); linkElem.rel = ‘stylesheet’; linkElem.type = ‘text/css’; linkElem.href = ‘path_to_the.css’; Вот, в зависимости от Ваших […]
-
Как сделать ссылку на Скайп в HTML?
Удобство пользователя на первом месте — поэтому иногда нужно вставить прямую ссылку на диалог в Скайпе. В этой статье расскажу, как можно это сделать. Итак, рассмотрим несколько примеров. Простая ссылка (без действий над профилем): Skype_User Ссылка на Звонок в Скайп или указанный телефонный номер: Skype_User +12345678 Ссылка на конференц-связь (логины через запятую): Skype_User Добавление Контакта […]
-
jQuery. Как обновить изображение в image?
Иногда бывает надо обновить изображение в теге img при помощи jquery. В этой статье пример, как можно сделать refresh для img. Главное, что нужно знать — это то, что браузер кеширует изображения, что как раз и может мешать обновлению его на странице, если, к примеру, оно уже изменилось на сервере. В таком случае можно обновить […]
-
Html. Css. Стилизация кнопки input type=»file»?
Нативный элемент загрузки файла в Html выглядит, мягко говоря, не очень хорошо — поэтому в этой короткой статье я приведу пример, как при помощи css стилизировать кнопку input type=file. Итак, решение включает две части — Html и CSS. Html. Оберните input в тег label: Custom Upload Также можно вынести элемент формы за предел : Custom […]
-
jQuery. Autocomplete. Как обновить данные в виджете?
Плагин Autocomplete используется для быстрой подсказки пользователю вариантов ввода из определенного списка. Но в случае зависимости эти вариантов от других полей — обновление данных очень неочевидно. В этой статье — пример решения задачи. Самый простой пример — это зависимость условных моделей авто от марки. Когда пользователь выбрал Марку «Mercedes» — в поле модель ему должны […]
-
Как прокрутить div вниз с помощью JavaScript и jQuery?
Задача программной прокрутки вниз может быть актуальна, например, при разработке чата. Блок сообщений всегда должен быть внизу, а последние сообщения всегда должны быть видны. Очень короткое решение — в этой статье. Пример для нативного Javascript: element.scrollTop = element.scrollHeight Пример для jQuery использует scrollTop: var targetDiv = $(«#some-div»); targetDiv.scrollTop( targetDiv.prop(‘scrollHeight’) ); Оба эти примера позволят Вам […]
-
Bootstrap. Как сделать боковое всплывающее окно (sidebar modal)?
В различных дизайнах и интерфейсах иногда уместно сделать модальное окно на всю высоту и прижатым к одной стороне. В статье — пример реализации этой идеи. По большому счету всё достаточно просто: К обычной разметке модального окна следует добавить новые классы left или right соответственно. Html: × Левый сайдбар Контент × Правый сайдбар Контент Также нужно […]
-
Css. Как отцентровать по вертикали блок внутри абсолютно-позиционированного блока?
Вопрос вертикального выравнивания в CSS часто вызывает проблемы. Особенно они актуальны при необходимости выровнять блок внутри абсолютно-позиционированного блока. Но есть простое решение, о котором сейчас и пойдет речь. Итак, решение достатоно простое, но не очевидное. Итак. CSS: .valign { position: relative; top: 50%; transform: translateY(-50%); /* vendor prefixes omitted due to brevity */ } HTML: […]