Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.08.2019, 14:50
Аспирант
Отправить личное сообщение для yarnik Посмотреть профиль Найти все сообщения от yarnik
 
Регистрация: 19.11.2011
Сообщений: 34

первый запуск в хроме
приветствую.
помогите понять в чем проблемка зарыта.
при первом запуске и первом клике на картинку в хроме не отображается фотка, второй и последующие разы все нормально.
<img src="foto.jpg" class="right toModal">

<script>
window.onload = function () {
	// Modal window
	var image = document.getElementsByClassName("toModal");
	if (image.length) {
		document.body.innerHTML += '<div id="modalDiv"><img id="modalImg"></div>';
		var modalDiv = document.getElementById("modalDiv");
		var modalImg = document.getElementById('modalImg');
		for (var i = 0; i < image.length; i++) {
			image[i].onclick = function(){
				modalDiv.style.display = "block";
				modalImg.src = this.src;
				var w = window.innerWidth;
				var h = window.innerHeight;
				var coef = 2;
				// смотрим что бы поместились в экран
				if (modalImg.naturalWidth*coef > w || modalImg.naturalHeight*coef > h) {
					coef = modalImg.naturalWidth*coef / w > modalImg.naturalHeight*coef / h ? w / modalImg.naturalWidth : h / modalImg.naturalHeight;
				}
				modalImg.style.height = modalImg.naturalHeight*coef + 'px';
				modalImg.style.width = modalImg.naturalWidth*coef + 'px';
			}
		}
		modalDiv.onclick = function() {
			modalDiv.style.display = "none";
		}
	}
}
</script>

Последний раз редактировалось yarnik, 06.08.2019 в 14:57.
Ответить с цитированием
  #2 (permalink)  
Старый 06.08.2019, 15:34
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,202

Сообщение от yarnik
document.body.innerHTML += '<div id="modalDiv"><img id="modalImg"></div>';
Не делай так...
Ответить с цитированием
  #3 (permalink)  
Старый 06.08.2019, 17:53
Аспирант
Отправить личное сообщение для yarnik Посмотреть профиль Найти все сообщения от yarnik
 
Регистрация: 19.11.2011
Сообщений: 34

Сообщение от ksa Посмотреть сообщение
Не делай так...
Как тогда?
Сеошники требуют не вставлять прямо в html код.
Ответить с цитированием
  #4 (permalink)  
Старый 06.08.2019, 18:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от yarnik
Как тогда?
Изменение документа
Ответить с цитированием
  #5 (permalink)  
Старый 06.08.2019, 20:56
Аспирант
Отправить личное сообщение для yarnik Посмотреть профиль Найти все сообщения от yarnik
 
Регистрация: 19.11.2011
Сообщений: 34

отремонтировал Хром, поломал ИЕ
<script>
window.onload = function () {
	// Modal window
	var image = document.getElementsByClassName("toModal");
	if (image.length) {
		//document.body.innerHTML += '<div id="modalDiv"><img id="modalImg"></div>';
		let div = document.createElement('div');
		div.id = "modalDiv";
		document.body.append(div);
		let img = document.createElement("img");
		img.id = "modalImg";
		document.getElementById("modalDiv").appendChild(img);
		var modalDiv = document.getElementById("modalDiv");
		var modalImg = document.getElementById('modalImg');
		for (var i = 0; i < image.length; i++) {
			image[i].onclick = function(){
				modalDiv.style.display = "block";
				modalImg.src = this.src;
				var w = window.innerWidth;
				var h = window.innerHeight;
				var coef = 2;
				// смотрим что бы поместились в экран
				if (modalImg.naturalWidth*coef > w || modalImg.naturalHeight*coef > h) {
					coef = modalImg.naturalWidth*coef / w > modalImg.naturalHeight*coef / h ? w / modalImg.naturalWidth : h / modalImg.naturalHeight;
				}
				modalImg.style.height = modalImg.naturalHeight*coef + 'px';
				modalImg.style.width = modalImg.naturalWidth*coef + 'px';
			}
		}
		modalDiv.onclick = function() {
			modalDiv.style.display = "none";
		}
	}
}
</script>
Ответить с цитированием
  #6 (permalink)  
Старый 06.08.2019, 21:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

yarnik,
строка 9, сделайте как в строке 12.
Ответить с цитированием
  #7 (permalink)  
Старый 06.08.2019, 23:24
Аспирант
Отправить личное сообщение для yarnik Посмотреть профиль Найти все сообщения от yarnik
 
Регистрация: 19.11.2011
Сообщений: 34

document.body.appendChild(div);


Благодарю, заработало!

Было бы очень великолепно для собственного осознания осознать почему не работало в начальном варианте и почему ИЕ не воспринял append
Ответить с цитированием
  #8 (permalink)  
Старый 06.08.2019, 23:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от yarnik
почему ИЕ не воспринял append
ответ по ссылке, в конце страницы.
https://developer.mozilla.org/ru/doc...entNode/append

Последний раз редактировалось рони, 06.08.2019 в 23:36.
Ответить с цитированием
  #9 (permalink)  
Старый 06.08.2019, 23:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от yarnik
почему не работало в начальном варианте
Будьте внимательны: «innerHTML+=» осуществляет перезапись
Ответить с цитированием
  #10 (permalink)  
Старый 07.08.2019, 00:31
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от yarnik Посмотреть сообщение
Как тогда?
Сеошники требуют не вставлять прямо в html код.
Сеошники из прошлого века, уже года два и яндекс и гугл читает содержимое скриптов
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Запуск скрипта во всех вкладках браузера через console Nyiann Javascript под браузер 3 07.02.2017 00:22
Проблема с cookie в Хроме и Опере Ermite Общие вопросы Javascript 3 12.02.2016 05:42
Помогите развернуть первый блок в выпадающих списках? kate1988 Ваши сайты и скрипты 1 07.10.2013 13:55
Как при быстром многократном клике по кнопке обрабатывать только первый клик battrack jQuery 3 22.03.2012 10:47
Запуск функции crazyrebbit Общие вопросы Javascript 8 27.10.2011 13:42