Задавайте вопросы

Задавайте вопросы и получайте ответы от нашего сообщества

Отвечайте

Отвечайте на вопросы и станьте экспертом по своей теме

Свяжитесь с администрацией

Наши специалисты готовы ответить на ваши вопросы

Блок для пользовательской биографии

Информация о теме

О теме Здравствуйте, вы читаете тему Блок для пользовательской биографии созданную в в разделе JavaScript пользователем Admin. Эта тема была просмотрена 3 793 раз(а), получила 12 комментариев и 3 очки реакции...
Название категории JavaScript
Название темы Блок для пользовательской биографии
Автор темы Admin
Дата начала
Ответы
Просмотры
Количество реакций
Последнее сообщение #Sam_

Admin

Основатель проекта
Команда форума
Регистрация
12.03.2015
Сообщения
105
Ресурсы
2
Реакции
37
Баллы
35
Сайт
icoder.uz
Лучшие ответы
1
  • Автор темы
  • Администратор
  • #1
Вы можете воспользоваться данной HTML/CSS/jQuery наработкой для того чтобы интересным образом разместить какие-то подробные данные о ваших сотрудниках или пользователях без использования модальных окон.
В некоторых случаях было бы неплохо как-то оригинально отобразить информацию о ваших сотрудниках или пользователях. Для этого необходимо выделить специальное пространство на странице, которое как известно ограничено. Предлагаем вам познакомиться с решением
Пожалуйста, Вход или Регистрация для просмотра содержимого URL-адресов!
: описание плавно выплывает с боковой стороны без необходимости перезагрузки страницы.

Создание структуре


Мы создадим секцию a #cd-team для хранения информации о работниках фирмы:
Скрытое содержимое доступно для зарегистрированных пользователей!
Для каждого работника был создан отдельный блок div.cd-member-bio с подробной информацией.

Стили

Блокам с информацией о работниках фирм будут присвоены свойства: position:fixed;, right: 0; и translateX, равный ширине элемента.
Скрытое содержимое доступно для зарегистрированных пользователей!
При клике по изображению работника, элементу div.cd-member-bio будет присвоен класс .slide-in средствами jQuery. Данный файл выставляет опцию translateX в 0. Запись -webkit-overflow-scrolling: touch; необходима для адекватной работы на тач-устройствах.

Свойство overflow-x: hidden; необходимо для IE, точнее для пресечения отображения горизонтальной полосы прокрутки. Так же задаём overflow: hidden; при отображении панели биографии.
 

Follower

Пользователь
Регистрация
06.12.2015
Сообщения
6
Реакции
0
Баллы
8
Лучшие ответы
0
+++++++++++++++++++++++
 

OneBreath

Пользователь
Регистрация
04.04.2016
Сообщения
1
Реакции
0
Баллы
0
Лучшие ответы
0
Спасибо большое
 

jest666

Пользователь
Регистрация
21.11.2016
Сообщения
3
Реакции
0
Баллы
0
Лучшие ответы
0
+++++++++++++++++++++++++++++++++++++++++++++++++++++
 

Sten

Пользователь
Регистрация
31.03.2015
Сообщения
9
Реакции
4
Баллы
0
Лучшие ответы
0
**Скрытый текст: Ответьте в теме для просмотра**
 

Legolays

Пользователь
Регистрация
29.08.2016
Сообщения
14
Реакции
2
Баллы
0
Лучшие ответы
0
**Скрытый текст: Ответьте в теме для просмотра**
 

qwe

Пользователь
Регистрация
21.03.2018
Сообщения
2
Реакции
0
Баллы
0
Лучшие ответы
0
**Скрытый текст: Ответьте в теме для просмотра**
 

Rovi

Пользователь
Регистрация
13.06.2017
Сообщения
4
Реакции
1
Баллы
0
Лучшие ответы
0
**Скрытый текст: Ответьте в теме для просмотра**
 

SHAZAM

Пользователь
Регистрация
05.08.2018
Сообщения
17
Реакции
4
Баллы
0
Лучшие ответы
0
++++++++++++++++++++++++++++++++
 

scroodgee

Модератор #1
Команда форума
Регистрация
27.09.2016
Сообщения
310
Реакции
188
Баллы
35
Лучшие ответы
0
Написал для того чтоб увидеть скрытые тексты
 

#Sam_

Пользователь
Регистрация
13.03.2018
Сообщения
2
Реакции
0
Баллы
0
Лучшие ответы
0
**Скрытый текст: Ответьте в теме для просмотра**
 
Верх Низ