Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.01.2017, 03:34
Кандидат Javascript-наук
Отправить личное сообщение для Diphenyl Oxalate Посмотреть профиль Найти все сообщения от Diphenyl Oxalate
 
Регистрация: 21.01.2017
Сообщений: 139

За последние 5 лет не написал ни строчки кода и вот что из этого вышло
На одном форуме придумали игру, суть такова.
Даётся картинка на которой фото известного человека, разделённая на 12х12 ячеек. Человек пишет номер ячейки (например, G5) и если номер его сообщения кончается на 0, автор открывает ячейку. Кто первый сможет распознать что это за известный человек, тот и выиграл.

Вручную править всё в пэинте неудобно, поэтому я решил расчехлить покрывшиеся пылью навыки и написать скрипт. Вот собственно и он: http://tiles.ucoz.net/main.html

Щёлкаешь по ячейкам - они открываются.

Проблема - в IE не работает, в Opera/Chrome - при первом запуске всё куда-то съезжает, но если нажать на кнопку ещё раз, то всё встаёт на места. Не знаю что и думать.
Ответить с цитированием
  #2 (permalink)  
Старый 21.01.2017, 03:38
Кандидат Javascript-наук
Отправить личное сообщение для Diphenyl Oxalate Посмотреть профиль Найти все сообщения от Diphenyl Oxalate
 
Регистрация: 21.01.2017
Сообщений: 139

Только что понял, какой же я индус.
Можно же было просто картинку перекрыть дивами и удалять их по клику!
А не создавать 144 висячих дива, в каждый пихать картинку и смещать её маргинами...
Буду переписывать но всё равно интересно, почему так
Ответить с цитированием
  #3 (permalink)  
Старый 21.01.2017, 05:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Diphenyl Oxalate,
картинку надо сначала загрузить и только потом запустить весь остальной код создания. нет картинки - нет размеров, или самому их назначить изначально.
Ответить с цитированием
  #4 (permalink)  
Старый 21.01.2017, 06:08
Кандидат Javascript-наук
Отправить личное сообщение для Diphenyl Oxalate Посмотреть профиль Найти все сообщения от Diphenyl Oxalate
 
Регистрация: 21.01.2017
Сообщений: 139

Сообщение от рони Посмотреть сообщение
Diphenyl Oxalate,
картинку надо сначала загрузить и только потом запустить весь остальной код создания. нет картинки - нет размеров, или самому их назначить изначально.
Я так и делаю
Написал по-другому:
http://tiles.ucoz.net/new.html

Вот так оно выглядит по крайней мере у меня: http://i.imgur.com/pX7B8zN.jpg

Но ведёт скрипт себя всё равно странно. Если запросить другую картинку, то вместо неё появляется пустое место, при повторном нажатии на кнопку всё становится нормально.

В целом как работает скрипт:
1) вычисляем размеры картинки
2) уменьшаем её так чтобы умещалась на экране
3) дивы, которые закрывают картинку, уже созданы заранее
4) задаём этим дивам размеры и позицию в зав-ти от размера картинки
5) при клике на див делаем его невидимым, часть картинки под ним проявляется
6) при выборе новой картинки проходимся по всем дивам и делаем их вновь visible
Ответить с цитированием
  #5 (permalink)  
Старый 21.01.2017, 06:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Diphenyl Oxalate,
тоже самое
структура условно
function GO(){
var img = document.createElement('img');
img.onload = function() {
// здесь весь остальной код
}
var imgS = document.getElementById("imgsrc").value;
img.src = imgS;
}
Ответить с цитированием
  #6 (permalink)  
Старый 21.01.2017, 06:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Diphenyl Oxalate,
function GO(){
//создание строки "загрузка"
var img = document.createElement('img');
img.onload = function() {
//удаление строки "загрузка"
// здесь весь остальной код
}
var imgS = document.getElementById("imgsrc").value;
img.src = imgS;
}
Ответить с цитированием
  #7 (permalink)  
Старый 21.01.2017, 06:41
Кандидат Javascript-наук
Отправить личное сообщение для Diphenyl Oxalate Посмотреть профиль Найти все сообщения от Diphenyl Oxalate
 
Регистрация: 21.01.2017
Сообщений: 139

Спасибо, оказалось дело было в рассинхроне

Осталось только понять, почему не работает в IE.
Ответить с цитированием
  #8 (permalink)  
Старый 21.01.2017, 06:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Diphenyl Oxalate
почему не работает в IE.
у меня работает, какая версия у вас?
Ответить с цитированием
  #9 (permalink)  
Старый 21.01.2017, 07:10
Кандидат Javascript-наук
Отправить личное сообщение для Diphenyl Oxalate Посмотреть профиль Найти все сообщения от Diphenyl Oxalate
 
Регистрация: 21.01.2017
Сообщений: 139

Сообщение от рони Посмотреть сообщение
у меня работает, какая версия у вас?
IE8
Выглядит эта красота вот так: http://i.imgur.com/Q1CeYWC.jpg

Страничка со скриптом теперь здесь http://tiles.ucoz.org/Ch.html
Добавил onload, вроде нормально работает в опере/хроме.
Ответить с цитированием
  #10 (permalink)  
Старый 21.01.2017, 07:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Diphenyl Oxalate
IE8
не могу проверить IE8, в 11 нормально, только src ставят после onload, смотрите код выше.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смишных картинок тред megaupload Оффтопик 3448 03.07.2023 09:47
Мой собственный башорг в скайпе))) devote Оффтопик 81 03.10.2012 00:56
Психологическая деформация программистов DreamTheater Оффтопик 59 24.03.2012 05:03
фрактальный сыр x-yuri Оффтопик 76 23.11.2011 21:59
О фрилансе (Личный опыт) free Оффтопик 105 18.08.2011 17:02