Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.04.2014, 12:08
Аватар для Scumtron
Новичок на форуме
Отправить личное сообщение для Scumtron Посмотреть профиль Найти все сообщения от Scumtron
 
Регистрация: 05.04.2014
Сообщений: 3

Динамическая высота и ширина картинки и родителя в зависимости от ширины контейнера
Здравствуйте,

Я недавно начал осваивать Javascript и столкнулся с такой задачей. Имею функцию которая задает изображениям и их родителям высоту и ширину в зависимости от ширины контейнера. В контейнере, некоторые изображения имеют высоту в два раза выше стандартной высоты, т.е. вертикальные и помечаются классом "vertical" Проблемные участки (сроки: 21, 25, 27), на которых появляются ошибки "arrImgs[i].find is not a function". Подскажите пожалуйста, что я делаю не так? Может быть есть более изящное решение этой задачи?

function getImageWidthForScreen(containerWidth) {
    var numColumns = 0,
        spaceLeft = 0,
        ratio = 0,
		imageWidth = 300,
		imageHeight = 186,
		itemMargin = 7,
        newImgW, i, len, row, w, h, itemClass;
		numColumns = Math.floor(containerWidth / imageWidth);
		spaceLeft = containerWidth - numColumns * (imageWidth - itemMargin);
		if(spaceLeft > 0) {
			newImgW = 0;
			if(!(numColumns === 1 && imageWidth / 2 > spaceLeft)) {
				numColumns += 1
			}
			newImgW = Math.floor(containerWidth / numColumns) - itemMargin;
			ratio = imageWidth / newImgW;
			
			var arrImgs = $('.content-box');
			for(i = 0, len = arrImgs.length; i < len; i += 1) {
				itemClass = arrImgs[i].find('img').className;
				row = itemClass === 'vertical' ? 2 : 1; 
				w = newImgW;
				h = 0;
				arrImgs[i].width(w).find("img").width(w);
				h = (Math.floor(imageHeight / ratio) + itemMargin) * row - itemMargin;
				arrImgs[i].height(h).find("img").height(h);
			}
		}
		return newImgW + itemMargin
}


<div id="container">
	<div class="content-box">
		<img class="vertical" width="300" height="379" src="img1.jpg">
	</div>
	<div class="content-box">
		<img class="horizontal" width="300" height="186" src="img2.jpg">
	</div>
	...
</div>

Последний раз редактировалось Scumtron, 05.04.2014 в 12:11.
Ответить с цитированием
  #2 (permalink)  
Старый 05.04.2014, 12:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Scumtron,
arrImgs обьект вы из него достали элемент arrImgs[i] у элемента нет никаких свойств find
-- можно так arrImgs.eq(i).find('img')[0].className - но весь этот венигрет из ваниллы и квери -- можно сократить используя методы jquery типа
.each() и зная селекторы либо зная js
Ответить с цитированием
  #3 (permalink)  
Старый 06.04.2014, 10:15
Аватар для Scumtron
Новичок на форуме
Отправить личное сообщение для Scumtron Посмотреть профиль Найти все сообщения от Scumtron
 
Регистрация: 05.04.2014
Сообщений: 3

Может кто-нибудь помочь грамотно переписать эту функцию на чистый JavaScript за не большое вознаграждение?
Ответить с цитированием
  #4 (permalink)  
Старый 06.04.2014, 10:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Scumtron,
пишите в личку
Ответить с цитированием
  #5 (permalink)  
Старый 06.04.2014, 15:03
Аватар для Scumtron
Новичок на форуме
Отправить личное сообщение для Scumtron Посмотреть профиль Найти все сообщения от Scumtron
 
Регистрация: 05.04.2014
Сообщений: 3

Вопрос решен, топик неактуален.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите с калькулятором piton1175 AJAX и COMET 0 16.06.2011 14:29