Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Регистрируясь, я даю согласие на обработку данных и условия почтовых рассылок.
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр Герои войны — это продуманное сочетание стратегии и RPG. Собери мощнейшую армию и одолей всех противников! В игре представлено 7  режимов — как для поклонников сражений с PvE, так и PvP.

Герои Войны

Стратегии, Мидкорные, Экшены

Играть

Топ прошлой недели

  • Animalrescueed Animalrescueed 43 поста
  • XCVmind XCVmind 7 постов
  • tablepedia tablepedia 43 поста
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая «Подписаться», я даю согласие на обработку данных и условия почтовых рассылок.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Маркет Промокоды Пятерочка Промокоды Aroma Butik Промокоды Яндекс Путешествия Промокоды Яндекс Еда Постила Футбол сегодня
0 просмотренных постов скрыто
1
UltraStalker
UltraStalker
ИТ-проекты пикабушников

Социальная инженерия до жжения в глазах⁠⁠

7 лет назад
Социальная инженерия до жжения в глазах

Решив немного порадовать себя — приобрёл очередное доменное имя и создал на его основе интернет-лабораторию по изучению визуальных эффектов с использованием JQuery, параллакса, прозрачного PNG, видео и многого другого .  Поставленная самому себе задача — создать максимально суетливый, до тошноты интерактивный интерфейс, услужливо откликающийся буквально на каждый чих посетителя, и разумеется — изучить влияние такого подхода на поведение, конверсию и на другие показатели. Другими словами, создать некое слегка вырвиглазное подобие Landing Page (тема, крайне нелюбимая мной в силу чрезмерного преобладания эмоциональной составляющей в противовес рациональному мышлению). И одновременно — потренироваться в нащупывании определённого, пусть и варварского стиля.


Коротко говоря, это мой первый интернет-сайт, который на 99% создан не о чём, а каким. Фактический вопрос — какие элементы рациональной поведенческой модели (о которой у меня данных уже предостаточно) будут использовать посетители при посещении данной площадки. Проще говоря, будет ли эмоциональная оценка переходить в рациональную и в каких точках будут пересекаться та и другая.


По крайней мере одной цели уже достиг: площадка с разгону влетела в индекс поисковых систем Yandex и Google через две недели после регистрации доменного имени. Пустячок, но приятно (но это как раз из области эмоций). Поведенческий фактор растёт в основном за счёт любителей подрыгать курсором мыши туда-сюда с целью полюбоваться на отзывчивый трёхуровневый параллакс (в связи с чем подумываю, не увеличить ли количество слоёв до пяти-семи). Глубину просмотров качает раздел юмора (правда, это я его ещё толком не пополнял). Текстовые материалы есть, с обилием умных слов и глубоких мыслей, но запрятаны они сравнительно далеко, за три клика от главной, и для широкой общественности не предназначены.


Ну а как только наступит время обобщить первые данные — можно будет делать и выводы.

Показать полностью
[моё] Jquery Визуальные эффекты Лендинг
16
YuriiHets

Вертикальная прокрутка (popup) модального окна⁠⁠

7 лет назад

Есть (попап) модальное окно которое на мобильных устройствах, из-за длинного текста  – выходит вертикально (вниз) за границы экрана.


Так вот...


Нужно чтобы при открытии модального окна (popup) – фон фиксировался и можно было прокрутить вниз само модальное окно, не прокручивая фон за ним.


Чего нужно избежать:

1) Появление полосы прокрутки (скроллинга).

2) Сложных ответов, которые не смогут понять новички.


Исходный код тут:

view-source:https://yurii-hets.БЛОГСПОТ.КОМ/


Вот сам сайт (кнопки вызывающие Popup – выделены зелёным цветом):

https://yurii-hets.БЛОГСПОТ.com/#prices


Замените слово БЛОГСПОТ.com на английское, иначе система не пропустила пост.

Показать полностью
Javascript Jquery Модальное окно Всплывающее окно Попап Текст
10
5
DELETED

Разработка мобильного приложения под Android. Часть 1.⁠⁠

7 лет назад

Всем привет! Всё ни как не мог добраться до пикабу, чтобы написать статью о том, как можно разработать мобильное приложение для смартфона, которое работает на базе операционной системы Android.


В этом посте я не буду рассказывать о том, как заработать миллион на приложениях одним щелчком мышки! Моя цель показать вам, как можно войти в разработку мобильных приложений имея базовые знания в области: HTML, CSS, PHP, MySQL и JavaScript&jQuery.


Разрабатывать мобильные приложения можно несколькими способами, но сегодня мы остановимся и рассмотрим один из вариантов, который называется - Фреймворк jQuery Mobile.


Что такое jQuery Mobile?


jQuery Mobile — сенсорно-ориентированный веб фреймворк. Разрабатывается и поддерживается командой jQuery. Фреймворк jQuery Mobile сфокусирован на кроссбраузерности с уклоном в сторону смартфонов и планшетов.


Если говорить совсем вкратце и по простому - библиотека, которая позволяет разрабатывать адаптивные мобильные сайты.


Что необходимо для начала разработки?


1. Установленный и настроенный локальный сервер (Windows: Denwer, XAMPP или Open Server, для Ubuntu: LAMP server).


2. Загрузить последнюю стабильную версию фреймворка с официального сайта http://jquerymobile.com/


Этапы разработки


Любой процесс разработки начинается с самых основных вещей:

- проектирование архитектуры приложения;

- разработка дизайна;

- улучшение юзабилити;

- приступаем к разработке.


Проектирование архитектуры приложения


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

- главный экран с приветствием посетителя;

- категория с выводом всех записей;

- страница на которой будет отображаться полный текст записи;

- информация о приложении.ых


Дизайн


Нарисуем небольшой эскиз для будущего приложения, можете использовать любой графический редактор. Главное чтобы суть эскиза была понятна.

Разработка мобильного приложения под Android. Часть 1.

На сегодня закончим вводный курс в разработку приложений.

В следующем уроке поговорим о том, что такое юзабилити :-)

Показать полностью 1
[моё] Android Приложение Разработка Framework Jquery Смартфон Google Программирование
13
slusarvitaliy
slusarvitaliy
Web-технологии

Модальное окно на jQuery⁠⁠

7 лет назад

Привет, юные и не очень кодеры!

Сегодня хочу показать вам как делать модальное окно на jQuery! Специально для этого дела я накидал небольшой сайтик по продаже батона)).

Что же умеет делать наша модалочка. При клике на кнопку «Оформить заказ», появляется окошко, с полями для имени и телефона. Если их заполнить и нажать кнопку отправить, то высветиться сообщение о том, что заказ отправлен и ваши данные с формы.

Структура сайта проста:



корне index.html



<!DOCTYPE html>


<html>


<head>


<meta charset="UTF-8">


<title>Продам батон</title>


<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">


<link rel="stylesheet" href="css/main.css">


<script src="js/jquery-3.2.1.min.js"></script>


<script src="js/main.js"></script>


</head>


<body>



<div class="wrapper">


<!-- -------------- Шапка ----------------- -->


<div class="header"><h1>Купить Батон</h1></div>



<!-- -------------- Контент ---------------- -->


<div class="content">


<h2>Хороший батон</h2>


<img src="img/baton.png" alt="">


<p>Текст про батон, текст про батон, текст про батон, текст про батон. Текст про батон, текст про батон, текст про батон, текст про батон.Текст про батон, текст про батон, текст про батон, текст про батон.Текст про батон, текст про батон, текст про батон, текст про батон.Текст про батон, текст про батон, текст про батон, текст про батон.</p>


<button type="button" class="open">СДЕЛАТЬ ЗАКАЗ</button>


</div>


<!-- --------------- Футер ------------------ -->


<div class="footer"><p>SLUSAR.SU 2017г.</p></div>



<!-- ----------------- Модально окно ---------------- -->


<div class="modal">


<p><b>ОФОРМЛЕНИЕ ЗАКАЗА</b></p>


<form action="">


<input id="name" type="text" name="name" placeholder="Введите ваше имя*"><br>


<input id="phone" type="text" name="phone" placeholder="Введите ваш телефон*"><br>


<button type="button" class="cansel">ЗАКРЫТЬ</button>


<button type="button" class="send">ОТПРАВИТЬ</button>


</form>


</div>


<!-- --------------------------------- -->


</div>



</body>


</html>


папка css с файлом main.css



body{


background: #A6D585;


font-size: 18px;


}


button{


height: 32px;


margin: 5px;


color: #fff;


border: none;


}


input{


height: 32px;


margin: 10px;


width: 300px


}


.wrapper{


width: 800px;


margin: 0 auto;


background: #fff;


font-family: 'Lora', serif;


}


.header, .footer{


text-align: center;


height: 50px;


color: #fff;


background: #598F32;



}


.content{


padding: 15px;


text-align: center;


}


.content p{


text-align: justify;


}


.content img{


width: 300px;


}


.modal{


position: absolute;


display: none;


top: 24%;


right: 38%;


width: 320px;


background: #fff;


padding: 10px;


border: 1px solid #ccc;


box-shadow: 0 0 10px rgba(0,0,0,0.5);


}


.footer{


padding: 10px;


}


.modal p{


text-align: center;


}


.open, .send{


background: #598F32;


}


.cansel{


background: #993022;


margin-left: 10px;


}


папка js с файлом main.js (код ниже) и jquery-3.2.1.min.js (скачайте сами)



$(document).ready(function (){


openModal();//вызываем нашу функцию


});


//функция modal


function openModal() {


//Открываем модалку при клике на кнопку Сделать заказ


$(".open").click(function () {


$(".modal").show('fast');//показывает див модалки


});



//закрывает модалку при клике на кнопку Закрыть


$(".cansel").click(function () {


$(".modal").hide('fast');//скрывает див модалки


});



//действия при нажатии на кнопку Отправить


$(".send").click(function () {


//Считываем данные с полей формы


var name = $("input#name:text").val();


var phone = $("input#phone:text").val();



//если они не пустые


if(name !=="" && phone !==""){


var text = "Ваше имя: " +name + "\n" +"Ваш телефон: "+phone;//строка с значениями из формы


alert("Заказ отправлен\n"+text);//выводим информацию о успешном хаказе


$(".modal").hide('fast');//закрываем модалку


}else{


alert("ВОУ! ВОУ! АЛАРМ! ЗАПОЛНИ ВСЕ ПОЛЯ!");//если поля формы пустые, выводи сообщение


}



});


}


папка img с файлом baton.png


Исходники, как всегда, прилагаются.


Скачать Исходники: http://slusar.su/modalnoe-okno-na-jquery/

Показать полностью 1
[моё] Javascript Jquery Fronten Длиннопост
7
1
Arant
Web-технологии

Работа со "светом"⁠⁠

8 лет назад

Заранее уточняю, пост - вопрос. От безысходности хочу обратиться к сообществу, которое никогда не подводило.

Уважаемые WEB разработчики, подскажите, дело встало..

Есть меню с контактными данными над ним:

Работа со &quot;светом&quot;

Задача следующая: При клике на пункт меню "Контакты" верхние поля с телефонами, адресом и режимом работы должны подсвечиваться, или выделяться средствами CSS.

Очень давно встречал такой скрипт, но несколько часов поиска не дали результата.

Очень надеюсь на вашу помощь :)

Заранее спасибо товарищи)

[моё] Программирование Jquery Хеллоуворлдщик
18
254
WhiskeyJay
IT-юмор

Как правильно складывать числа на фронтенде.⁠⁠

8 лет назад

Обсуждение в одном из telegram чатов.


-- Мне правда надо использовать jQuery чтобы сложить два числа?
-- Я несколько лет назад решил эту проблему, теперь складывать числа можно простыми запросами к rest api. https://arithmetic-as-a-service.*******.com/

Jquery Javascript IT Программирование Текст
33
9
MadFlySamara
MadFlySamara

Соревнование Web-программистов стартовало!⁠⁠

8 лет назад
Соревнование Web-программистов стартовало!

Коротко:

Регистрация в первый класс идёт через интернет. Кто успел за 5 минут записать ребёнка (а по факту - через минуту уже все места заняты(!)) - тот молодец (дети остальных просиживают штаны в быдлошколах не идут в престижный лицей).

Взял халявку на троих детишек.

Написал пару скриптов на Javascript и JQuery. Тест показал: 24 секунды на всё - GOOD!

Показать полностью 1
[моё] Web-программирование Javascript Jquery 1 класс Очень хочется кушать Моё
33
19
foratf

Программисты издеваются?⁠⁠

9 лет назад

Вчера сонным взглядом зацепилась за пост с крайне странным куском кода:

Программисты издеваются?

http://pikabu.ru/story/sayt_prokuraturyi_moskvyi_prinimaet_z...


В посте было указано, что этот кусок кода запрещает отправку форм на сайте прокуратуры в нерабочие часы.


Теоретически это может работать (поправьте, если ошибаюсь). Но выглядит крайне странно: мало кто будет искать тег input внутри элементов с классом subm для того, чтобы запретить отправку формы.


http://jquery.page2page.ru/index.php5/Селектор_по_классу


Я перешла по ссылке, которая была в посте на pikabu, с целью найти тот самый сайт прокуратуры, на котором было применено это спорное решение. Ссылка вела на оригинал поста на dirty, а уже оттуда можно-таки было попасть на вожделенную страницу с формой для отправки жалоб в прокуратуру. Сначала я просмотрела код страницы с сайта прокуратуры на предмет наличия элементов с class="subm" (вы можете это сделать, нажав ctrl+u, затем ctrl+f, и в открывшемся поиске набрать subm).


Я прошла форму до конца, чтобы убедиться, что нет каких-нибудь кнопок, которые бы загружались с помощью ajax, прошла капчу, просмотрела код конкретных кнопок, и ещё раз проверила весь код страницы.


В общем, я собралась уже закрыть тему. Но перед закрытием просмотрела всё-таки оригинальный пост на dirty, на котором была ссылка на сайт прокуратуры и "разоблачение", уличавшее скрипт в работе строго в рабочие часы. Там я наткнулась на прекрасное.


Цитирую:


"...JavaScript код, размещенный на странице, блокирует кнопку все время кроме как по с понедельника по четверг с 9 до 17 и в пятницу с 10 до 18. Единственный способ пожаловаться — отключить JavaScript в браузере на время отправки формы."

Предложение отключить JavaScript(!) повторено в другой части поста:


"Ну и конечно жаловаться в прокуратуру, отключив предварительно JavaScript, чтобы убрать незаконную агитацию."

https://politota.dirty.ru/internet-po-budniam-s-deviati-do-p...


То есть. У нас есть сайт прокуратуры, на котором кнопки появляются по мере заполнения форм. Формы появляются по мере появления кнопок. Есть капча. Чтобы всё это работало, нужен javaScript. И автор поста предлагает отключить его в браузере.


Нет, я проверила, конечно. Форма, естественно, дальше первого шага вообще не загружается.


После такого открытия я даже не поленилась немного повозиться с firebug, и убедилась, что форма отправляется следующим образом: скрипт проверяет все нужные поля, и уже после этого с помощью javaScript (ок, библиотеки jQuery) производится отправка формы. А именно её производит вот эта строчка кода:


$('form').submit();


Тут я, пожалуй, ещё раз процитирую предложение "жаловаться в прокуратуру, отключив предварительно JavaScript". Мне кажется, этот пост писали программисты, которые делали сайт для прокуратуры, и сейчас они жрут попкорн и внимательно следят за комментариями.

Показать полностью
[моё] Троллинг Прокуратура Россия Javascript Jquery Длиннопост
23
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Маркет Промокоды Пятерочка Промокоды Aroma Butik Промокоды Яндекс Путешествия Промокоды Яндекс Еда Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии