javascript элемент в сценах

Использование системы в различных ситуациях, вопросы программирования сценариев.

Модератор: immortal

Ответить
directman66
Сообщения: 2801
Зарегистрирован: Пн дек 26, 2016 9:51 am
Откуда: Екатеринбург
Благодарил (а): 380 раз
Поблагодарили: 693 раза
Контактная информация:

javascript элемент в сценах

Сообщение directman66 » Пн апр 24, 2017 7:08 pm

Прошу знающих помочь с добавлением элемента http://codepen.io/rednosemonkey/pen/jkiAz на сцену.

1) Копирую стили и ява скрипт из архива по адресу /www/css и /www/js в соответсвующие папки MD
2) добавляю к сцене новый элемент html

в блоке css
СпойлерПоказать
* {
box-sizing: border-box;
}

html {
height: 100%;
background-image: -webkit-radial-gradient(#ffffff, #708090);
background-image: radial-gradient(#ffffff, #708090);
}

#button {
font-family: sans-serif;
position: absolute;
width: 75px;
height: 75px;
left: 50%;
margin: -37.5px;
line-height: 75px;
background-color: black;
border-radius: 50%;
color: white;
text-align: center;
cursor: pointer;
}
#button:before {
content: "\2630";
font-size: 30px;
}

.drop-down,
.drop-down + ul {
-webkit-animation: drop 100ms forwards cubic-bezier(1, 0, 0.755, 1.47);
animation: drop 100ms forwards cubic-bezier(1, 0, 0.755, 1.47);
}

.rise-up,
.rise-up + ul {
-webkit-animation: rise 400ms forwards cubic-bezier(1, 0, 0.755, 1.47);
animation: rise 400ms forwards cubic-bezier(1, 0, 0.755, 1.47);
}

.rise-up + ul li {
pointer-events: none;
}

.rise-up {
z-index: 1;
}

li {
z-index: -1;
position: absolute;
width: 75px;
height: 75px;
left: 50%;
margin: -37.5px;
list-style: none;
border-radius: 50%;
-webkit-transition: -webkit-transform 300ms cubic-bezier(1, 0, 0.755, 1.47);
transition: -webkit-transform 300ms cubic-bezier(1, 0, 0.755, 1.47);
transition: transform 300ms cubic-bezier(1, 0, 0.755, 1.47);
transition: transform 300ms cubic-bezier(1, 0, 0.755, 1.47), -webkit-transform 300ms cubic-bezier(1, 0, 0.755, 1.47);
}
li:nth-child(1) {
background-color: red;
}
.drop-down + ul li:nth-child(1) {
-webkit-transform: translateX(0px) translateY(-100px);
transform: translateX(0px) translateY(-100px);
}
li:nth-child(2) {
background-color: #ffbf00;
}
.drop-down + ul li:nth-child(2) {
-webkit-transform: translateX(70.71068px) translateY(-70.71068px);
transform: translateX(70.71068px) translateY(-70.71068px);
}
li:nth-child(3) {
background-color: #80ff00;
}
.drop-down + ul li:nth-child(3) {
-webkit-transform: translateX(100px) translateY(0px);
transform: translateX(100px) translateY(0px);
}
li:nth-child(4) {
background-color: #00ff40;
}
.drop-down + ul li:nth-child(4) {
-webkit-transform: translateX(70.71068px) translateY(70.71068px);
transform: translateX(70.71068px) translateY(70.71068px);
}
li:nth-child(5) {
background-color: cyan;
}
.drop-down + ul li:nth-child(5) {
-webkit-transform: translateX(0px) translateY(100px);
transform: translateX(0px) translateY(100px);
}
li:nth-child(6) {
background-color: #0040ff;
}
.drop-down + ul li:nth-child(6) {
-webkit-transform: translateX(-70.71068px) translateY(70.71068px);
transform: translateX(-70.71068px) translateY(70.71068px);
}
li:nth-child(7) {
background-color: #8000ff;
}
.drop-down + ul li:nth-child(7) {
-webkit-transform: translateX(-100px) translateY(0px);
transform: translateX(-100px) translateY(0px);
}
li:nth-child(8) {
background-color: #ff00bf;
}
.drop-down + ul li:nth-child(8) {
-webkit-transform: translateX(-70.71068px) translateY(-70.71068px);
transform: translateX(-70.71068px) translateY(-70.71068px);
}

.selected {
z-index: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

@-webkit-keyframes rise {
from {
-webkit-transform: translateY(200px);
transform: translateY(200px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}

@keyframes rise {
from {
-webkit-transform: translateY(200px);
transform: translateY(200px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes drop {
to {
-webkit-transform: translateY(200px);
transform: translateY(200px);
}
}
@keyframes drop {
to {
-webkit-transform: translateY(200px);
transform: translateY(200px);
}
}
добавляю новое состояние work c кодом
СпойлерПоказать
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>color picker menu</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ ... ze.min.css">


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


</head>

<body>
<div id='button'></div>
<ul id='swatches'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script src='http://cdnjs.cloudflare.com/ajax/libs/j ... '></script>

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

</body>
</html>

кнопка из стилей появляется, но видимо код яваскрипта не вызывается. Как вариант попробовал прямо в коде состояния элемента прописать код скрипта, результат тот же.Если добавить в тело скрипта команду alert("Привет это JavaScript!"); то сообщение на экран выскакивает, т.е. код яваскрипта выполняется. Если открывать этот же код из домашней страницы (не со сцены), то элемент отображается. Взываю о помощи.


upd: само заработало, отчего сразу не работало, понять не могу
Если вам помогло данное сообщение, не поленитесь нажать кнопку "спасибо".
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
Аватара пользователя
Vovix
Сообщения: 1155
Зарегистрирован: Пн янв 27, 2014 1:43 am
Откуда: г.Ижевск
Благодарил (а): 60 раз
Поблагодарили: 531 раз
Контактная информация:

Re: javascript элемент в сценах

Сообщение Vovix » Пн апр 24, 2017 10:00 pm

directman66 писал(а):...
upd: само заработало, отчего сразу не работало, понять не могу
при экспериментах с Javascript нужно периодически чистить историю браузера!!!
это самый простой вариант избавиться от кэшированых вариантов своего творчества!
Мой -CONNECT-
Windows 7(PHP 7.2) + Raspberry Pi(освещение на 1-Wire) + MP751(управление) + ESP8266(сенсоры) + LAN(сенсоры)
-=: Если вам помогло моё сообщение, нажмите кнопку "Поблагодарить за сообщение автора: Vovix" (кнопка Спасибо) справа! :=-
Аватара пользователя
Vovix
Сообщения: 1155
Зарегистрирован: Пн янв 27, 2014 1:43 am
Откуда: г.Ижевск
Благодарил (а): 60 раз
Поблагодарили: 531 раз
Контактная информация:

Re: javascript элемент в сценах

Сообщение Vovix » Пн апр 24, 2017 10:06 pm

совет номер два:
нельзя бездумно переносить CSS с сайта codepen
наименование стилей может пересекаться с наименованием стилей в MajorDoMo, что приводит к безобразиям разным!

совет номер три:
не переносите стили глобальных тегов (элементов) - например html, body и т.п.
За это сообщение автора Vovix поблагодарил:
directman66 (Пн апр 24, 2017 10:09 pm)
Рейтинг: 1.16%
Мой -CONNECT-
Windows 7(PHP 7.2) + Raspberry Pi(освещение на 1-Wire) + MP751(управление) + ESP8266(сенсоры) + LAN(сенсоры)
-=: Если вам помогло моё сообщение, нажмите кнопку "Поблагодарить за сообщение автора: Vovix" (кнопка Спасибо) справа! :=-
Аватара пользователя
adzam
Сообщения: 602
Зарегистрирован: Сб дек 08, 2012 10:28 pm
Откуда: Кишинев
Благодарил (а): 20 раз
Поблагодарили: 138 раз

Re: javascript элемент в сценах

Сообщение adzam » Вт апр 25, 2017 8:40 pm

подскажите пож. в сценах есть условия отображения:
Безымянный.png
Безымянный.png (20.75 КБ) 5527 просмотров
не могу разобраться с расширенным условием отображения
Как сделать чтоб при включении котла boiler.on и открытом кранике подачи boiler.Boiler_outlet сработала сцена $display=1;
Мои проекты здесь...https://connect.smartliving.ru/profile/41/blog213.htm
Если вам помогло какое-либо мое сообщение - не ленитесь пользоваться кнопкой СПАСИБО.
Аватара пользователя
xor
Сообщения: 2038
Зарегистрирован: Сб ноя 22, 2014 8:45 pm
Благодарил (а): 284 раза
Поблагодарили: 629 раз

Re: javascript элемент в сценах

Сообщение xor » Вт апр 25, 2017 9:01 pm

По-моему, условие отображения не к сцене относится, а к элементу.
Вы пишете, наверное, про переключить на сцену при активации
Аватара пользователя
adzam
Сообщения: 602
Зарегистрирован: Сб дек 08, 2012 10:28 pm
Откуда: Кишинев
Благодарил (а): 20 раз
Поблагодарили: 138 раз

Re: javascript элемент в сценах

Сообщение adzam » Вт апр 25, 2017 9:13 pm

Да извиняюсь, условие отображения элемента.
Мне нужно чтоб элемент отображался при совпадении двух условий,
когда включен котел и когда открыт кран, в принципе любые 2 условия если они равны 1 то элемент должен отобразиться
Мои проекты здесь...https://connect.smartliving.ru/profile/41/blog213.htm
Если вам помогло какое-либо мое сообщение - не ленитесь пользоваться кнопкой СПАСИБО.
Аватара пользователя
adzam
Сообщения: 602
Зарегистрирован: Сб дек 08, 2012 10:28 pm
Откуда: Кишинев
Благодарил (а): 20 раз
Поблагодарили: 138 раз

Re: javascript элемент в сценах

Сообщение adzam » Вт апр 25, 2017 10:48 pm

Подскажите что в этом примере значит $a и $b и как присвоить им свойство какого либо обьекта
1.png
1.png (8.11 КБ) 5505 просмотров
Мои проекты здесь...https://connect.smartliving.ru/profile/41/blog213.htm
Если вам помогло какое-либо мое сообщение - не ленитесь пользоваться кнопкой СПАСИБО.
Аватара пользователя
xor
Сообщения: 2038
Зарегистрирован: Сб ноя 22, 2014 8:45 pm
Благодарил (а): 284 раза
Поблагодарили: 629 раз

Re: javascript элемент в сценах

Сообщение xor » Вт апр 25, 2017 11:57 pm

у меня получилось.
Создаю состояние (для элемента Изображение), называю его on.
Выбираю картинку, выбираю Условие отображения расширенное
пишу код

Код: Выделить всё

$a=0;
$b=1;
if($a==1&&$b==1){
$display=1;
}else{
$display=0;
}

при $a=0;
$b=1; картинки нет
при $a=1;
$b=1; картинка есть
Вместо 0 и 1 подставлял gg() реальные, всё работает.
Попробуйте с константами, если заработает, переходите на переменные

зы. Подставлял переменные так же, как у вас
$a=gg('query.value');
Аватара пользователя
adzam
Сообщения: 602
Зарегистрирован: Сб дек 08, 2012 10:28 pm
Откуда: Кишинев
Благодарил (а): 20 раз
Поблагодарили: 138 раз

Re: javascript элемент в сценах

Сообщение adzam » Ср апр 26, 2017 12:27 am

xor писал(а):у меня получилось.
Создаю состояние (для элемента Изображение), называю его on.
Выбираю картинку, выбираю Условие отображения расширенное
картинку как вводите через <div> или <img src="/
У меня работает если после смены каждого состояния перезагрузить страницу, атак может показать а может и нет.
Мои проекты здесь...https://connect.smartliving.ru/profile/41/blog213.htm
Если вам помогло какое-либо мое сообщение - не ленитесь пользоваться кнопкой СПАСИБО.
Аватара пользователя
xor
Сообщения: 2038
Зарегистрирован: Сб ноя 22, 2014 8:45 pm
Благодарил (а): 284 раза
Поблагодарили: 629 раз

Re: javascript элемент в сценах

Сообщение xor » Ср апр 26, 2017 1:20 am

Картинку выбираю из открывающейся стандартного диалога выбора файла

Отправлено с моего Nexus 5 через Tapatalk
Ответить