Перейти из форума на сайт.


Система IP-видеонаблюдения "Линия". Скачать бесплатную демо-версию для 16 камер. НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Помощь Html

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2 3 4 5 6 7

Открыть новую тему     Написать ответ в эту тему

Niko0808

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
"добавляете класс цвета фона в <div class="sphere">"
Можно целиком пример?  
 
"или выставляете background-color: нужного цвета в  
Цитата:
.sphere {"
 
Вот смотрите, сейчас мне нужен зеленый шарик. А например кнопку нажали и шарик стал красным.  
Можете такой пример прислать, самой простой реализации. Видел примеры, где фон страницы меняют, где картинки добавляют.  
Мне нужно закрасить кружок разными цветами пусть хоть по нажатию кнопки.Например две кнопки одну нажимаем кружок зеленый, другую нажимаем кружок красный.  
 

Всего записей: 3 | Зарегистр. 21-03-2012 | Отправлено: 23:16 10-08-2017
Mavrikii

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Niko0808

Цитата:
Можно целиком пример?  

нельзя, я понятия не имею о какой внешней переменной вы говорите.
в простейшем виде у вас должно получиться <div class="sphere red">
 

Цитата:
 А например кнопку нажали и шарик стал красным.  

ну так и нужно говорить сразу. https://jsfiddle.net/opu00r7z/

Всего записей: 4949 | Зарегистр. 20-09-2014 | Отправлено: 00:25 11-08-2017 | Исправлено: Mavrikii, 00:27 11-08-2017
Niko0808

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Спасибо. Отличный пример, буду разбираться дальше.

Всего записей: 3 | Зарегистр. 21-03-2012 | Отправлено: 07:09 11-08-2017
Alexey87

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Уважаемые форумчане, помогите, пожалуйста, в реализации задуманного с использованием html+css или нужна программная оснастка (php, скрипты и пр.)...
 
Хочу разместить на сайте афишу с новостями сообразно скриншоту.
Особого функционала не требуется:
1. От 3 до 5 активных новостей (остальные - прокруткой или по нажатию кнопок/ссылок и т.д.).
2. Смена новостей при использовании кнопок ГОД или МЕСЯЦ (на данный момент кнопка ГОД не нужна).
3. Открытие полной версии новости на новой странице сайта по нажатию ссылки (например, слово "Подробнее") или новостного блока (желательно наименование страниц по дате новости, в случае совпадения дат новостей - возможность переименования страниц).
4. Реализация афиши - любая (возможна прокрутка или что-то другое).
 
Если реализация задуманного возможна, то каким образом?

Всего записей: 471 | Зарегистр. 27-01-2008 | Отправлено: 10:36 29-09-2017 | Исправлено: Alexey87, 10:37 29-09-2017
Mavrikii

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Alexey87
новости откуда брать то будете?  
а так - html + css + javascript

Всего записей: 4949 | Зарегистр. 20-09-2014 | Отправлено: 21:12 29-09-2017
Alexey87

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
новости откуда брать то будете?

каждая новость будет формироваться на отдельной странице
 

Цитата:
html + css + javascript

пример посмотреть можно?

Всего записей: 471 | Зарегистр. 27-01-2008 | Отправлено: 20:44 05-10-2017
Mavrikii

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Alexey87

Цитата:
каждая новость будет формироваться на отдельной странице  

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

Цитата:
пример посмотреть можно?

под конкретный дизайн - нет, ибо это займет время. а слайдеров (вернее тикеры) полно.
http://jquery-plugins.net/responsive-jquery-news-ticker-plugin-with-bootstrap
https://www.aakashweb.com/jquery-plugins/easy-ticker/
к любому вертикальному тикеру приделать кнопки и все, по сути
 
ps: ну раз не поняли, вот накидал простейший тикер - https://jsfiddle.net/3mga690y/

Всего записей: 4949 | Зарегистр. 20-09-2014 | Отправлено: 21:00 05-10-2017 | Исправлено: Mavrikii, 22:23 05-10-2017
Alexey87

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
список же как то нужно генерить

в моём представлении это выглядит так:
каждая новость формируется на отдельной странице, а её отображение в списке - из одной фотографии и первого предложения/абзаца полной версии новости (т.е. из новости на отдельной странице)

Всего записей: 471 | Зарегистр. 27-01-2008 | Отправлено: 11:11 07-10-2017
Mavrikii

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Alexey87

Цитата:
в моём представлении это выглядит так

Я все это понимаю. Картинка в тикере и ссылка, ведущая на полную новость, это уже мелочи.

Всего записей: 4949 | Зарегистр. 20-09-2014 | Отправлено: 20:38 07-10-2017
Alexey87

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii, а как бы использовать Ваш код для таблицы?

Всего записей: 471 | Зарегистр. 27-01-2008 | Отправлено: 18:03 08-10-2017
Mavrikii

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Alexey87
Какой таблицы?

Всего записей: 4949 | Зарегистр. 20-09-2014 | Отправлено: 19:03 08-10-2017
Alexey87

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
Какой таблицы?

вместо списка
например:
<table>
<tr><td>дата</td><td>картинка</td><td>описание</td></tr>
<tr><td>дата</td><td>картинка</td><td>описание</td></tr>
<tr><td>дата</td><td>картинка</td><td>описание</td></tr>
и т.д.
</table>

Всего записей: 471 | Зарегистр. 27-01-2008 | Отправлено: 20:48 08-10-2017
Mavrikii

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Alexey87

Цитата:
вместо списка  

не нужно использовать таблицы там, где в них нет необходимости.
все это реализуется через дивы и css
https://jsfiddle.net/3mga690y/1/
можно обойтись и без списка. аналогично можно сделать и с таблицей, но я старательно избегаю ее использование.
http://htmlbook.ru/content/preimushchestva-i-nedostatki-tablits

Всего записей: 4949 | Зарегистр. 20-09-2014 | Отправлено: 21:07 08-10-2017
Alexey87

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii, а как для последнего кода сделать следующее:
- вертикальное и горизонтальное выравнивание даты и картинки по середине относительно соседних элементов списка;
- для описания: вертикальное выравнивание по середине, а горизонтальное - по левому краю или по ширине
 
для таблиц есть align и valign...

Всего записей: 471 | Зарегистр. 27-01-2008 | Отправлено: 22:10 08-10-2017
Mavrikii

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Alexey87
ну хотите делать таблицами, сделайте по таблице внутри li элемента.
можно и целиком строками tr в таблице манипулировать, вместо li, но.. я писал уже выше.
но дело в том, что даже div можно заставить себя вести как таблицу, без лишних элементов разметки: https://jsfiddle.net/3mga690y/3/
 
ps: там есть небольшой баг, если очень быстро жать на кнопки, но легко исправляется, к примеру так - https://jsfiddle.net/3mga690y/4/

Всего записей: 4949 | Зарегистр. 20-09-2014 | Отправлено: 22:32 08-10-2017 | Исправлено: Mavrikii, 04:52 09-10-2017
Alexey87

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii, каким образом переписать последний код на чистом JS без использования других FRAMEWORKS & EXTENSIONS?

Всего записей: 471 | Зарегистр. 27-01-2008 | Отправлено: 20:38 09-10-2017
Mavrikii

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Alexey87

Цитата:
каким образом переписать последний код на чистом JS

изучить что делает каждая использованная функция и записать ее аналогом на чистом js.
вот этого я делать точно не буду, дабы не возиться с анимацией (хотя ее можно сделать на чистом CSS3, но я и так уже много вам подсказал)
+ http://youmightnotneedjquery.com/

Всего записей: 4949 | Зарегистр. 20-09-2014 | Отправлено: 20:42 09-10-2017
Alexey87

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Всё ещё нуждаюсь в решении вопроса (в новой трактовке).

Всего записей: 471 | Зарегистр. 27-01-2008 | Отправлено: 20:43 13-10-2017 | Исправлено: Alexey87, 21:55 20-10-2017
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3 4 5 6 7

Компьютерный форум Ru.Board » Интернет » Web-программирование » Помощь Html

Имя:
Пароль:
Сообщение

Для вставки имени, кликните на нем.

Опции сообщенияДобавить свою подпись
Подписаться на получение ответов по e-mail
Добавить тему в личные закладки
Разрешить смайлики?
Запретить коды


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.Board
© Ru.Board 2000-2017

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru