Jump to content

Great Rash

Expert
 View Profile  See their activity

  • Posts

    7,974

  • Joined

  • Last visited

  • Days Won

    144

 Content Type 

Everything posted by Great Rash

  1. Great Rash
    http://codepen.io/GreatRash/pen/PwROMg
  2. Great Rash
    Ну можно заняться всякими извращениями: грузить в shadow DOM стили, потом лезть в document.styleSheets с определенным интервалом и смотреть не появилась ли там новая таблица стилей. Как только начальное значение length поменялось значит стили загрузились и пора аппендить их в <head>.
  3. Great Rash
    Событие onload у <link> не везде работает.
  4. Great Rash
    FireFox не понимает body.scrollTop. Для него нужно писать костыль: scrollPercent = (body.scrollTop || document.documentElement.scrollTop) / scrollHeight;В целом код не кроссбраузерный, я лишь показал идею. Опять же, в реальном проекте надо как минимум дождаться загрузки видео.
  5. Great Rash
    Ну тогда я могу посоветовать разве что юзать сервер. Т.е. формировать страницу на сервере и перезагружать на клиенте с новыми стилями.
  6. Great Rash
    В документации к jQuery например написано, что по умолчанию запросы кешируются.
  7. Great Rash
    Нужно отследить когда стили загрузились и только после этого менять href. Например при помощи ajax. Хотя я бы сделал проще: грузил бы все стили сразу, а потом менял бы класс у <html>, в зависимости от которого менялось бы оформление.
  8. Great Rash
    Привет тебе читатель, эт снова я, снова выдалась свободная минутка и я спешу поделиться с тобой интересным рецептом, который позволит создать у потенциального клиента так называемый вау-эффект. Не секрет, что сейчас очень популярны лендинг пейджи (лендинги, посадочные страницы, называйте как хотите). Нужны они для того, чтобы по-быстрому привлечь внимание у посетителя к вашему проекту. На какие только ухищрения не идут дизайнеры таких страниц: это и, ставший очень популярным в последнее время, параллакс-эффект, и красочные картинки из фотобанка, и сумасшедшего вида карусели изображений... И вот в последнее время редко-редко можно увидеть видео на фоне. Собственно видео я и заинтересовался. Я долго думал как бы мне это повторить, может я плохо гуглил, но туториала в сети я так и не нашел. Поэтому взял да и сделал всё сам Сперва думал написать сюда развернутый туториал, но потом подумал и решил просто дать ссылку на своё решение. Уж слишком простым оно оказалось, нет смысла тут много расписывать. В общем глядите чо я умею: http://codepen.io/GreatRash/pen/MYVjVE А вот чего можно замутить в дикой природе, используя эту технику: раз два А то привязались, понимаешь к параллаксу... Творите и удивляйте, товарищи!
  9. Great Rash
    Лень читать весь код, но в первом блоке переменная $array не определена. Может потому и 0?
  10. Great Rash
    Обязательно нужно рассказать что такое repaint и reflow. Подключение нестандартных шрифтов. Что из-за медленного инета лучше избегать, и что сейчас почти везде работает .ttf, так что можно не заморачиваться с конвертацией в разные форматы. SVG - настолько обширная тема... из багов, что я знаю: при повторной вставке элемента (при помощи <use xlink:href="" />) на Андроиде не отрисовываются градиенты (нативный браузер, WebView до версии 4.4 включительно) как минимум на Андроиде не работают SMIL-анимации (опять же нативный браузер) как минимум на Андроиде не работают трансформации если они задаются в CSS (только атрибуты работают) SVG-спрайты - это почти всегда гемор анимированный SVG - это почти всегда гемор
  11. Great Rash
    Нарушена вложенность тегов. Все теги должны быть в нижнем регистре. Повторю ещё раз: про структуру папок не стоит париться вообще. Как удобно так и делайте. Это всё потом понадобится, когда реальные задачи решаться будут. А на этапе обучения вам это пока не нужно и не скоро понадобится.
  12. Great Rash
    Вам рано ещё думать о структуре папок. Пока у вас ошибки в HTML не пропадут.
  13. Great Rash
    Вам надо прочитать про свойство rowspan. И установить его первым трём ячейкам.
  14. Great Rash
    http://codepen.io/GreatRash/pen/azYomg
  15. Great Rash
    Сдаётся мне, что у вас разные кодировки у шаблонов и самого вордпреса. Может БД для него в кодировке, отличной от utf-8.
  16. Great Rash
    Для увеличения 100% используется colorbox. Для слайдера подойдёт вообще любой слайдер. Например тот, что у меня в подписи.
  17. Great Rash
    https://github.com/devote/HTML5-History-API
  18. Great Rash
    History API
  19. Great Rash
    Как правило проблема решается просто: юзеру просто не надо давать никакой wysiwyg. Ему надо дать ограниченный набор инструментов и сделать его так, чтобы юзер не мог сделать шаг влево или вправо. Например в том же TinyMCE просто убираются нафиг все кнопки кроме тупо . А гипотетическая секретарша после копипасты из ворда правит всё ручками.
  20. Great Rash
    У функции preg_replace нет модификатора g. О чем вам и сообщается в тексте ошибки.
  21. Great Rash
    Так у вас же таблица. Там где нет т.н. паддингов просто картинка в середине по высоте больше. Подозреваю, что если вы всем ячейкам скажете vertical-align: top;, то ваши "паддинги" внезапно снизу окажутся
  22. Great Rash
    А вот захотелось мне попробовать писать скрипты для фотошопа. Знал же ведь давно, что делать это можно, причём используя мой любимый JS. Но не писать же "Hello World" в конце концов - не спортивно это как-то. Да и хочется создать что-то более-менее полезное для сообщества. Мы верстальщики, конечно ни разу не дизайнеры, но я стал за собой замечать, что частенько поучаю дизайнеров делать так а не эдак. И вот подумал как-то раз: дай-ка я для коллег замучу чо-нить полезное. Короче, давайте уже без лишних слов делать гриды, а? Значит так, первым делом нам надо заиметь Photoshop CC, потом нам нужно будет выполнить самую скучную часть работы, а именно прочитать документацию. Согласен - "БУЭ!" - сам терпеть не могу это дело. Причём, нам даже две (!) книжки прочитать придётся! Но иначе как научиться то? Значит первым делом читаем Scripting Guide(PDF): там написано как вообще писать скрипты для Photoshop CC, и как в частности сделать тот самый "Hello World" (хе-хе). А после того как вы замутите свой первый скрипт можно начинать мутить магию. Для магии нам понадобится справочник(PDF). Целиком его читать не будем, а только то, что нас интересует. Теперь определимся с тем, что будет делать наш скрипт. А будет он работать так: 1) Открываем новый документ или юзаем уже открытый 2) Спрашиваем какую ширину колонки хочет наш дизайнер 3) Спрашиваем какое расстояние между колонками (в инглише - gutter) хочет наш дизайнер 4) Создаём гайдлайны поверх открытого макета или в новом файле. 5) Все дизайнеры радуются и благодарят нас 6) Мы прохажываемся туда-сюда такие важные Открывайте ваш любимый текстовый редактор (я открыл Atom), создавайте новый файл с расширением .js и погнали писать код: // Первым делом получаем ссылку на документ с которым работаем var currentDocument = app.activeDocument; // Дальше лезем в справочник, нажимаем CTRL+F и ищем "guides". // Угу нашли, получаем сылку на интерфейс гайдов var guides = currentDocument.guides; // Получаем ширину и высоту открытого документа var docWidth = currentDocument.width; var docHeight = currentDocument.height; // Функция, которая будет делать основную работу за нас function createGrid(colSize, colGutter, rowSize, rowGutter) { if (colSize !== 0) { // запомним ширину колонки вместе с отступом var colTotalSize = colSize + colGutter; // посчитаем сколько всего колонок поместится в документе var cols = docWidth / colTotalSize; // нас интересует только целая часть - полумеры для слабаков! cols = parseInt(cols); // интересно, а какая ширина у всех колонок? var totalColWidth = cols * colTotalSize; // а сколько нам от края надо отступить, чтобы всё это дело по центру встало? var offsetLeft = (docWidth - totalColWidth) / 2; // цикл... // // Раз подругу посадил на мотоцикл, // У неё от страха прекратился цикл for (var i = 0; i <= cols; i++) { // первый гайд рисовать не надо (он всё равно за пределами документа может оказаться) if (i > 0) { guides.add(Direction.VERTICAL, offsetLeft + (i * colTotalSize) - parseInt(colGutter / 2)); } // последний гайд тоже не рисуем, т.к. он с другой стороны тоже вылезет за пределы документа if (i < cols) { guides.add(Direction.VERTICAL, offsetLeft + (i * colTotalSize) + parseInt(colGutter / 2)); } } } if (rowSize !== 0) { // запомним высоту строки вместе с отступом var rowTotalSize = rowSize + rowGutter; // посчитаем сколько всего строк поместится в документе var rows = docHeight / rowTotalSize; // нас интересует только целая часть - полумеры для слабаков! rows = parseInt(rows); // интересно, а какая высота у всех строк? var totalRowHeight = rows * rowTotalSize; // а сколько нам сверху надо отступить, чтобы всё это дело по центру встало? var offsetTop = (docHeight - totalRowHeight) / 2; // эта... кхм for (var i = 0; i <= rows; i++) { // ну, как и ранее, первая и последняя полосочка нас мало волнует if (i > 0) { guides.add(Direction.HORIZONTAL, offsetTop + (i * rowTotalSize) - parseInt(rowGutter / 2)); } if (i < rows) { guides.add(Direction.HORIZONTAL, offsetTop + (i * rowTotalSize) + parseInt(rowGutter / 2)); } } } } // запустим функцию и спросим у товарища юзера какую он сетку хочет собссно createGrid( parseInt(prompt('Друг, введи ширину колонки пжалста', 30)), parseInt(prompt('Друг, введи отступ по ширине, а', 10)), parseInt(prompt('Друг, введи высоту колонки пжалста', 30)), parseInt(prompt('Друг, введи отступ по высоте, а', 10)) ); Далее я загуглил себе хомячка для опытов, а именно подумал какую я сетку хочу попробовать замутить. Выбор пал на iPhone 4... а вот потому что я ща под мобилки верстаю. Ну и просто по приколу (потому кстати значения по умолчанию 30 и 10 в коде). Вот зверёк: Там 60 и 20, но мы то знаем, что во всём коварная ретина виновата! Так что не верим ей и уменьшаем всё в 2 раза. Двухмегабайтная гифка процесса! Простите, ужимал как мог. Всем спасибо за внимание
  23. Great Rash
    Вообще непонятно что это и как этим пользоваться. Страница about должна открываться первой. Нужно сделать типичный лендинг, где замутить мини-презентацию о том, что это вообще такое и зачем оно мне нужно. Сейчас about ничего не объясняет: чек-листы это чек-листы. Короче фигня какая-то.
  24. Great Rash
    <table role="presentation">
  25. Great Rash
    А, тогда ясно, а то читаю: Ну я и подумал всякое...
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept