Master Page

Сообщение **serega** » 10 авг 2022, 20:38

коллеги, вопрос:

в Собственном стиле объекта есть анимация

onmouseenter="AnimateCss('Ext-CSS-Animation-Menu', 'a_Down_Random', 2000, 6000); return false"

Я очень долго искал возможность связи CSS-переменных с JS . Когда я пишу

onmouseenter="AnimateCss('Ext-CSS-Animation-Menu', 'a_Down_Random', 2000, var(--random)); return false"

-- ничего не работает. Почему так ?
Тут все перемешано. var(--random) -- это CSS-переменная , AnimateCss -- это все-таки JS . Они что, не понимают друг друга ?

Сообщение **spoon** » 10 авг 2022, 21:15

var это что? Имя функции или переменная? Переменная объявляется так var num= '--random';
А вообще var давно не используется, используют let.
В этом варианте вы объявили переменную в функции в качестве параметра это не правильно, так как ваша переменная внутри функции ни кто кроме этой функции не увидит))

Сообщение **serega** » 11 авг 2022, 00:46

тогда надо уточнить. Короче, я тут экспериментировал, и запорол свой сайт с котом. Там меню падало сверху. Шас оно запорото . и не понимаю почему. Даже не могу откатить назад.
Но есть точно такой же сайт с такой же анимацией. И там все работает.
Vivaldi

там есть скрипт , который я где-то накопал

а эта Math.random() -- прямо с сайта HELP от Mozilla

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

 <script>
function RandomInt(min, max) {return Math.floor(Math.random() * (max - min) + min)}
let root = document.querySelector(":root");
root.style.setProperty("--random", RandomInt(2, 4))
</script>

и ниже анимация , которую я выстрадал и немного стащил у других

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

<style>
@keyframes a_Down_Random {
  0% {transform-origin: 50% 50%}
 75% {transform-origin: 50% 50%;
      transform: perspective(500px)
      translate3d(200px, var(--visota_real), 0px)
      rotateX(calc(var(--random, 1) * 180deg)) 
      rotateY(calc(var(--random, 1) * 360deg))} }
</style>

как видишь, здесь все работает. И переменная нормально используется var(--random, 1).

То , что ты говоришь , это относится к JS , а здесь СSS-переменная

Отправлено спустя 13 минут 55 секунд:
не знаю, зачем вы на форуме отключили возможность редактирования старых сообщений. Это же форум для кодов, а не показаний преступников. Это же не под протокол пишется, УК РФ тут никому не приклеишь.
Будем копировать:

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

onmouseenter="AnimateCss('Ext-CSS-Animation-Menu', 'a_Down_Random', 2000, var(--random)); return false"

Если смотреть выше, то var(--random) изменяется от 2 до 4, в случайном порядке. А в AnimateCss () на этом место стоит число , измеряемое в ms . Правильнее было бы написать:

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

onmouseenter="AnimateCss('Ext-CSS-Animation-Menu', 'a_Down_Random', 2000, calc(var(--random) * 6000)); return false"

Но все равно не работает.

Еще раз вопрос. Эта var(--random) находится в Собственном Стиле, значит точно CSS . Но как заставить ее работать ?

Сообщение **spoon** » 11 авг 2022, 02:54

Возможно --random не прописано
https://developer.mozilla.org/ru/docs/Web/CSS/var

Сообщение **serega** » 11 авг 2022, 09:48

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

<body>
Root: {
      --random}
</body>

Она описана здесь, и работает в кейфреймах, которые тоже описаны в <body>

А в Собственном Стиле менюшки , которая падает, в Animatecss() не работает

Отправлено спустя 7 минут 58 секунд:
На том сайте про Vivaldi
(меня на их форуме заблокировали, за правду ;) я слишком много ошибок находил, создавал красивые темы с картинками их ошибок)
var(--random) отвечает за целое число полуоборотов. Это видно в коде.
Я просто хотел ту же переменную всунуть в animatecss(). И ответить за время падения меню.
Вроде, все просто, но все застряло. Я стал переставлять местами строки и все сломалось ( на сайте про кота). Все проверил, назад вернуть не могу.
А на Vivaldi все работает, даже с незакрытой } в кейфреймах.

Отправлено спустя 6 минут 31 секунду:
Я даже просто ставил calc(2 * 6000) , внутри animatecss() и тоже не работает.
Значит в этой animatecss() никакие вычисления нельзя ?

Сообщение **serega** » 11 авг 2022, 14:27

нашел ошибку . Меню в сайте с котом тоже падает.
transform-origin: center bottom ;
для других подсвойств эта точ.запятяя не нужна.
Осталось только понять, как в Анимацию вставить var(--random) ?
Или даже просто calc(2 * 12000) ?

Я ,конечно, нашел страницу про эту AnimateCss , но там даже простой синтаксис не указан --- AnimateCss( ... ... ....). Что за чем ? Я даже не уверен, что эта страница относится к AnimateCss().

Сообщение **serega** » 14 авг 2022, 13:53

Я понял, не все здесь сильны в JS, который должен работать в CSS. Я даже спрашивал у модератора html5book.ru , кто пишет целые учебники - тоже не знает.
Вопрос по WWB. Почему на
странице с погодой. <iframe> обрезается ?
И эта вечная проблема - страница, ее Master Page - все выравнено по центру, но в Андроиде приклеено слева, никакой fullwight не работает

Сообщение **anonimus** » 14 авг 2022, 16:50

Вам же сказали что, что ничто никуда не прилипает. Вы просто неправильно что-то делаете.

Сообщение **serega** » 14 авг 2022, 23:24

Вот настройки Content Place Holder . "Expand" или "Floating" -- роли не играет.

все что я смог догадаться , это прописать в его Собственном Стиле :
(Inside Tag)

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

width: 100%;

Но это тоже ничего не изменило, и без этого стиля тоже самое.
Если на Windows это выглядит более менее правильно, то вот так это все выглядит на Андроид в браузере Vivaldi

Причем, на странице есть 2 шт <iframe> , мелкий с луной -- вроде нормально рисуется, еще и выполняет сложную самодельную анимацию. В вот <iframe> с картой РБ -- просто обрезается на 70% непонятно почему именно так режется.
(Уточнение : это не родные <iframe>, а HTML-объекты с <iframe> внутри, которые взяты с сайтов погоды)
Как будто, для Андроид нужна отдельная оптимизация кода от WWB.
И что тут можно сделать ?

Сообщение **anonimus** » 14 авг 2022, 23:34

Вам не кажется странным, что кроме вас никто не жалуется на подобные проблемы web? А это что значит?)))

Сообщение **serega** » 15 авг 2022, 00:00

И сто это значит ? Я еще могу понять, что нет адаптивности, не растягивается.
Но почему все слева ? , почему не центрируется в Андроиде, если все что можно включено по "центру" ?

еще прикол , та верхняя карта РБ сейчас имеет код

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

<iframe scrolling="no" 
                      frameBorder="0" 
                      src="https://pogoda.turtella.ru/i/fxb2l/map/#weather,,28.740234375000007,52.90158702578675,6" 
                      style="width: 100%; 
                                height: 100%; 
                                border: none;">
</iframe>

и в Windows она показывается как, надо , с учетом рамок 50 px. А ниже такой же простой <iframe> с Луной. И там стиль указан еще проще.

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

<iframe src="https://voshod-solnca.ru/widget_moon.php?idcity=49402&phases=true" 
        scrolling="no" 
        width="280" 
        height="510" 
        frameborder="0">
</iframe>

Луна работает везде и правильно.
Я изменил по аналогии. И укоротил еще верхний код

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

<iframe scrolling="no" 
                      frameBorder="0" 
                      src="https://pogoda.turtella.ru/i/fxb2l/map/#weather,,28.740234375000007,52.90158702578675,6" 
                      width: "100%" 
                      height: "100%" 
                      border: "none">
</iframe>

И на Windows эта карта стала обрезана примерно 100 на 200 px. На Андрюще уже не смотрел. Ну откуда взялись 100 на 200 px ???

Сообщение **serega** » 13 сен 2022, 15:19

Коллеги, почему мой сайт с котом на Андроиде обрезается ? Остается слева 30%. Я бы даже если хотел, не смог бы так сделать. Верхнее меня не обрезается, а содержание страницы режется. Очевидно, что содержание находится внутри Content Place Holder, что соответствует названию темы. Но некоторые страницы показываются нормально и даже строго по центру. Почему так жестоко ?

Сообщение **anonimus** » 13 сен 2022, 15:22

Значит вы что-то неправильно делаете или невнимательно. У меня никогда ничего не обрезается.

Сообщение **serega** » 13 сен 2022, 15:55

anonimus, а у вас тоже режется ? Даже не представляю, как это сделать принудительно. Может, у меня андроид неправильный ?

Сообщение **anonimus** » 13 сен 2022, 16:14

Вы спрашиваете режется ли на моём телефоне ваш сайт?

Сообщение **serega** » 13 сен 2022, 16:16

Абсолютно верно. Я бы даже согласился обменять ваш телефон на мой сайт

Сообщение **anonimus** » 13 сен 2022, 16:16

Верхнее меню у вас выходит за пределы экрана сайта и на сайте при просмотре на Андроиде появляется горизонтальная прокрутка

Сообщение **serega** » 13 сен 2022, 16:53

spoon писал(а):post=42948

Прошло уже время, я так и не проверил ваш совет. Может и правда, переменную не видно снаружи ? Не проверил.
Хотя нет, в той функции Animatecss() даже простые вычисления не работают, без переменной. Значит, будем считать снаружи. Надо тестировать

Отправлено спустя 8 минут 38 секунд:
anonimus, согласен с прокруткой. А откуда она появиляется, если меню находится внутри LayoutGrid , который находится на Master Page, который шириной одинаковой (там не больше 900px), как и весь сайт.
Может вы ошибаетесь. Прокрутка появляется, когда браузер показывает мою болтанку-анимацию для некоторых блоков сетки . в спокойном состоянии блок вписывается, а когда ему Animate добавляет немного COS c perspective , тогда он становится шире в 2D. Появляется прокрутка ширины. Не знаю, как с эти бороться.
Я бы хотел чтобы браузер не помогал содержимому страницы - выходит за пределы, значит, обрезаем видимость. Эта принудительная помощь только мешает

Сообщение **serega** » 09 окт 2022, 17:56

Меня постоянно Yandex перекидывает на курсы повышения квалификации от Mozilla.developers . -- Using_CSS_animations

Обратите внимание на то, что анимация может сделать страницу шире, чем окно браузера. Этого можно избежать, поместив элемент, который будет анимироваться, в контейнер и установив ему свойство overflow: hidden.

Выше на картинке настройки Content Place Holder указал свойство Overflow: Hidden -- это ничего не изменило.
По идее, этой свойство должно обрезать весь контент -- не только справа, но и снизу. Но обрезать снизу -- это было бы совсем жестоко. Но справа -- очень желательно.

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

<div id="ContentPlaceHolder" width: 100%; style="position:absolute;overflow:hidden;left:0px;top:188px;width:970px;height:392px;z-index:26">
</div>

Прокрутка появляется при любых настройках Overflow:
Для чего она вообще нужна , если не работает в этом WWB ?

Отправлено спустя 1 час 8 минут 8 секунд:

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

overflow-x: hidden;

есть она в каждой странице.css . А что толку ?

Сообщение **tanya96** » 16 окт 2022, 14:18

serega писал(а): И сто это значит ? Я еще могу понять, что нет адаптивности, не растягивается.
Но почему все слева ? , почему не центрируется в Андроиде, если все что можно включено по "центру" ?

Адаптивный iFrame: https://www.wysiwygwebbuilder.com/forum ... hp?t=94957

Master Page [РЕШЕНО]

Master Page

Master Page

Master Page

Master Page

Master Page

Master Page

Master Page

Master Page

Master Page

Master Page

Master Page

Master Page

Master Page

Master Page

Master Page

Master Page

Master Page

Master Page

Master Page

Master Page

Кто сейчас на конференции

Кто сейчас на конференции

Добро пожаловать на форум!