Раскрытие div из центра экрана

Ответить
  1. 3 г. назад

    #0 Дуб

    10.11.2021 10:15:13

    Господа. Хочу, чтобы некий div из "нулевой позиции" (не отображается, без z-индекса, без контента и без рамок) разворачивался в полноэкранный.
    В упор не пойму, как мне это сделать.
    Понятно, что добавлять/убирать классы надо.

    		function hide_details(current_position){
			current_position.classList.add('hide_details');
			current_position.classList.remove('show_details');
		}
		
		function show_details(current_position){
			current_position.classList.add('show_details');
			current_position.classList.remove('hide_details');
		}

    Но что в классе писать?

  2. #1 Дуб

    10.11.2021 10:16:05 
    		.hide_details{
			position: absolute;
			opacity: 0;
			width: 0;
			height: 0;
			left: 0;
		}

    Это, видимо, так.
    Но что дальше?

  3. #2 Дуб

    10.11.2021 10:19:04

    Вот если так, то почти оно:

    		.show_details{
			position: absolute;
			left: 50%;
			background-color: #aaa;
			opacity: 100;
			width: 100%;
			height: 100%;
			left: 0;
			transition: left 2s, width 2s, height 2s, background-color 2s;
			border-radius: 20px; 
			border: 1px solid #88a;

		}

  4. #3 Дуб

    10.11.2021 10:39:31

    А вроде разобрался... Там всё через transition...

  5. #4 sda553

    10.11.2021 11:37:23

    Во первых в таких случаях (вопросы по верстке) надо не сюда свой код вываливать, а в песочницу, например http://jsfiddle.net/uq2synb1/#&togetherjs=UbLK2qgeHR
    Во вторых уже не важно, раз сам разобрался, пока я во первых писал :)

  6. #5 mx_kliw

    10.11.2021 12:55:18

    Главное, сразу не накидывать варианты ответа и Дуб сам разберется.

  7. #6 Дуб

    11.11.2021 16:27:47

    Это да. Сразу не надо. Я обычно сам разбираюсь.

  8. #7 Дуб

    11.11.2021 16:30:50

    Но вот сейчас у меня почему-то перестало искать по id...
    В документе есть таблица, строки таблицы имеют id, соответствующие штрих-коду товара ('id_' + ШК).
    Читаю ШК и делаю let c_pos = document.getElementById('id_' + row_id);
    И эта самая c_pos у меня стабильно == null...
    Хрень какая-то...

    Ответы: (11)

  9. #8 Дуб

    11.11.2021 17:01:32
    11.11.2021 17:02:07 отредактировано Дуб 
    		function process_row(row_id){
			if(row_id.length > 3 && row_id.substring(0, 3) != 'id_'){
				row_id = 'id_' + row_id;
			}
			console.log(typeof row_id);
			let c_pos = document.getElementById(row_id);
			if(c_pos != null){
				let current_position = document.getElementById('current_position');
				hide_details(current_position);
				show_details(current_position, c_pos);
			}
			else{
				console.log('not found ' + row_id);
			}
		}

    Думал - мож тип криво определяется. Но нет. Строка там... При этом если вызываю по клику, то без проблем отрабатывает. А по вводу ШК - куй.

    Вот, например, такая строка:

    <tr id="id_10603295232049" art="960015" name="PFC Sigma CR Феморальный комп. цем.фикс., правый р.5">
<td class="name"><span class="art">960015</span><br>PFC Sigma CR Феморальный комп. цем.фикс., правый р.5</td>
<td class="count">1</td><td class="r_count" onclick ="process_r_count('id_10603295232049')">0</td>
</tr>

  10. #9 Дуб

    11.11.2021 17:02:55

    Да, если что, то

    		function process_r_count(c_id){
			process_row(c_id);
		}

  11. #10 Дуб

    11.11.2021 17:03:11

    Как?!

  12. #11 andrewks

    11.11.2021 17:03:25

    (7) может, у тебя более одного элемента с данным id?

    Ответы: (12)

  13. #12 Дуб

    11.11.2021 17:04:39

    (11) нет. Они уникальны. Но даже не в этом вопрос: по клику же отрабатывает ровно та же самая функция с тем же самым параметром...

    Ответы: (14)

  14. #13 Дуб

    11.11.2021 17:04:59

    И ведь стопудово - в моих криворучках дело...

  15. #14 andrewks

    11.11.2021 17:06:23

    (12) а что у тебя в document в случае, когда не работает?

    Ответы: (15)

  16. #15 Дуб

    11.11.2021 17:08:41

    (14) в смысле? Вызов-то в рамках одного и того же документа. Просто в одном случае - по клику на ячейке, а в другом - по набору нужной длины строки (чтение ШК). Тот же документ, та же функция..

    Ответы: (16)

  17. #16 andrewks

    11.11.2021 17:09:23

    (15) проверь

  18. #17 andrewks

    11.11.2021 17:10:22

    html динамически формируется?

    Ответы: (19)

  19. #18 Дуб

    11.11.2021 17:10:34

    console.log(document); ?

  20. #19 Дуб

    11.11.2021 17:11:19

    andrewks html динамически формируется?

    не. В данном случае нет. Страница с сервера целиком приходит. Там есть возможность обращения по ajax, но не используется

  21. #20 Дуб

    11.11.2021 17:13:32

    Лан, надо с этой гадостью переспать...

  22. #21 Дуб

    12.11.2021 08:02:29

    Переспал. Не помогло.
    Чертовщина какая-то…
    На случай, если я неверно отработал восстановление символов при сканировании - вывел считанное в консоль и скопипастил в тестовую функцию:

    		function tst(){
			let c_id = 'id_10603295062608';
			process_row(c_id);
		}

    Вот прямо скопипастил, с без вариантов.
    И - куй. Из tst() отрабатывает корректно, а из процедуры сканирования - нет.

    И опять же - ладно бы тут что непроверенное было. Так нет. Я-ж под этот сканер до этой шняги уже три софтины рабочих нарисовал...

  23. #22 Дуб

    12.11.2021 09:45:41

    Бляцтво. Сделяль row_id = row_id.trim(); Заработало. При том, что визуально ничто не предвещало. По ходу - сканер лепит непечатаемый символ какой-то...
    Мать его ити.
    Ну как так-то?!

или зарегистрируйтесь чтобы ответить!