Приховуємо останній елемент у рядку під час зміни ресайзи вікна браузера
Давненько, я нічого не писав про jQuery, все якось руки не доходили, хоча багато цікавих скриптів пишеться в проектах. Так ось про що я: зіткнувся з таким завданням: Є 5 елементів-товарів ширина, яких тягнеться (ресайзиться) на всю ширину обгортки, потрібно зробити, щоб при ширині обгортки менше ніж 1200 пікселів кількість елементів-товарів ставала 4, інакше кількість елементів-товарів має бути 5. Простіше кажучи виглядає це дуже ефектно та й зручно. Вирішенням цього завдання і займемося зараз.
Для загального уявлення, як виглядатиме елемент статті/товару/послуги подивитися на картинку нижче:
Для старту знадобитьсяhtml-каркас сторінки, я беру його звідси, і розмітка рядка товарів.
HTML розмітка рядка товарів
Отже, у нас є загальний контейнер .container, який тягнеться. Є рядок .one_row, який містить товари/послуги/статті. І є відповідно 5 контейнерів .grid_5, для послуг/товарів – у демо-прикладі будуть статті.
Розпишу детальніше про розмітку товару:
- Посилання-контейнер .prod_item
- Бокс для зображення .prod_thumb
- Подвійна стрілка для боксу зображення .prod_arrow
- Назву товару .prod_title
Забув сказати, що коли елементів у рядку стане 4, то рядку додасться слас .col_4 .
Я думаю, що з розміткою більш-менш розібралися, тепер давайте поринемо в правилаCSS.
Стилізація товарів/послуг/статей
Як Ви могли переконатися, вище я описав порядне число класів, яким потрібно задати стилі. До речі, забув згадати, що скидання стилів можна взяти тут. Почнемо із загальних правил:
Пару слів про загальні стилі.
Рядку .one_row за допомогою псевдоелементів :before і :after задаємо скидання обтікання, чому? Бо бокси .grid_5 вирівнюються в ряд обтіканням float і щоб все було чітко, обтікання потрібно скинути. Блокам .grid_5 крім обтікання задаємо ширину 20%, також уточнюємо якщо блоків у рядку буде 4, то ширина їх буде 25%; Тут теж є важливий момент ІЕ7 реально посмикується при ресайзі таких відсоткових широт, тому для .ie7 потрібно вказувати ширину поменше, в даному випадку це 24.8% і 19.8% - можете спробувати зменшити лише на 0.1%. І ще ми задаємо рядку .one_row негативний відступ ліворуч - це відступи між блоками товарів/послуг/статей.
Ще є клас .hidden - він додаватиметься останньому елементу рядка і стилів для нього аж один рядок display: none; . Ось загалом і пояснення для загальних стилів.
Приступимо до стилізації самих блоків товарів/послуг/статей:
В принципі нічого особливого не написав, але розжую)
Контейнер-посилання задаємо як блоковий елемент і вказуємо відступ зліва 20px - для себе Ви можете задати більший відступ, нічого не поламається, тільки не забувайте вказувати аналогічний негативний відступ зліва у рядка .one_row . Назвою задаємо колір, ширину, шрифт. Контейнер картинки задаємо рамку шириною 7px, висоту (також можете вказати ту яка Вам потрібна), вирівнювання картинок по центру, відступ знизу і вказуємо що позиція блоку відносна - це вказується для того, щоб позиціонувати стрілочки контейнера картинки.
Як Ви могли помітити першу стрілку я позиціоную абсолютно щодо контейнера картинки і задаю їй розмір: 20px висоту і 20px скоси з боків та колір червоний.Це дуже важливо, колір потрібно ставити у форматі rgba() тому, що Mozilla Firefox до стандартногозавдання кольору типу #ff0000 відноситься погано і домальовує навколо стрілки рамку і виглядає це жахливо. Природно ІЕ7-8 не розуміє rgba () тому для них окремо вказуємо колір стрілок. Другу стрілочку (білу) позиціонуємо абсолютно щодо першої стрілки, тобто накладаємо її поверх першої. Ось і всі таємниці стилізації.
jQuery скрипт
З написанням стилів покінчено, залишилося написати невеликий (мінімальний) скрипт, який візьме управління нашим завданням під свій контроль. Нагадаю завдання: при ширині обгортки менше ніж 1200 пікселів кількість елементів-товарів стає 4, інакше кількість елементів-товарів стає 5.
Суть завдання ясна, для вирішення скористаємося умовою: Якщо ширина тіла сайту менша ніж 1200px, то додаємо рядку клас .col_4 , знаходимо в ньому останній елемент додаємо йому клас .hidden ; інакше: видаляємо у рядка клас .col_4 і в останнього елемента також видаляємо клас .hidden . Напишемо, що промовили:
Майже ідеально, але головне далі. По суті ми напсіали лише умову, яка спрацює при завантаженні сторінки, а після ресайзу нічого не змінитися, тому потрібно скористатися функцією resize() і злегка дописати скрипт, ось так:
Ось тепер все ідеально! Скрипт досить простий та й усі пояснення криються у постановці завдання. Використанняланцюгових функцій jQuery значно зменшує скрипт.
Результат Ви можете побачити на сторінці демонстрації (нагадаю, що я вже писав статтю як зробити демонстрації уроків у WordPress), а також можете скачати вихідні дані нижче:
Скрипт працює у всіх популярних браузерах та в IE7+, в IE6 не перевіряв, тому що я з ним не працюю, і Вам не раджу)
Висновок
Намагався за таким принципомпобудувати мобільну версію сайту, щоб елементи зменшувалися відповідно до розширення екрану, але щось пішло не так(((
Через медіа запити було б простіше?
Alex, завдання так не стояло, та й тягнувся макет тільки в певних межах
логічно завдання вирішувати, довівши кількість блоків до 1 щоб не було горизонтального прокручування
Оптимізація підключення Google Maps, відключення непотрібних файлів стилів та шрифтів, відтворення картки струму у разі наявності контейнера на сторінці
Сьогодні поділюся з Вами моїм скриптом, який я використовую для простої перевірки полів форм на заповненість перед відправкою їх на сервер, за допомогою jQuery (скрипт може перевіряти кілька форм на сторінці)
Хочу поділитися з Вами HTML розміткою секції head, яку я використовую для верстки сайтів
У даному уроці ми розглянемо 5 кроссбраузерних, сучасних рішень CSS3, які дуже полегшують верстку складних, креативних проектів. Зокрема розберемося як зробити прозорість, тінь, поворот, градієнт та інверсію елементів
Нарешті випала вільна хвилина і на Ваші прохання я написав ще один, маленький скрипт для нециклічного слайдера з горизонтальною прокруткою, без використання плагінів
Responsive design = чуйний дизайн = аксіома. Мінімальна історія розвитку веб дизайну: його шлях від фіксованого до рідкого та до чуйного (реагуючого, адаптивного, responsive) дизайну
Сьогодні створимо дуже простий, можна сказати елементарний анімований циклічний слайдер з горизонтальним прокручуванням своїми руками, без використання плагінів (можна використовувати кілька слайдерів на сторінці)