Javascript.RU

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

при изменении размера div элементы съезжают
Ситуация такова. Есть родительский div. В нем имеется еще три div в виде видимых колонок, имеющих набор элементов. И еще две колонки, которые скрыты, пока пользователь не кликнет по шапке, тогда колонка выедет. При раскрытии такой колонки размеры всех остальных меняются, скролл остается на месте, а элементы из-за уменьшения размера колонки опускаются ниже.
Так как элементы можно на лету перетаскивать из колонки в колонку, то неудобно после открытия скрытой колонки искать опустившийся ниже элемент в обычной колонке для перетаскивания.
Есть ли примерные предложения, как этого избежать? Заранее, спасибо. Если что, готов детализировать.
Ответить с цитированием
  #2 (permalink)  
Старый 22.08.2012, 09:58
Аватар для LittlePony
Кандидат Javascript-наук
Отправить личное сообщение для LittlePony Посмотреть профиль Найти все сообщения от LittlePony
 
Регистрация: 19.08.2012
Сообщений: 100

Детализировать сразу надо было, лучше всего даже показать. Но судя по всему нужно просто задавать фиксированные размеры
Ответить с цитированием
  #3 (permalink)  
Старый 22.08.2012, 10:09
Новичок на форуме
Отправить личное сообщение для gallyamov Посмотреть профиль Найти все сообщения от gallyamov
 
Регистрация: 22.08.2012
Сообщений: 3

детализирую)
вот css колонок
.column {
	&.backlog { 
		float: left;
		margin-left: -4px;
		padding-left: 4px;
	}
	&.done { 
		float: right;
		padding-right: 4px;
	}

	&.backlog, &.done {
		display: none;
		background-color: #EEE5DE;

		.column-content {		
			position: absolute;
			bottom: 0;
			top: 70px;

			width: 20%;
		}
	}
}

.task-column {    
	width: 20%;

	.task-column-header-top, .task-details { padding-left: 10px; }
	.task-column-header-top { margin-top: 8px; }
	.task-column-name { display: inline; }

	.column-content {
		overflow-x: hidden;		
		overflow-y: scroll;
	}
}

вот код скрытия, открытия
ic.showColumn = function (column) {
	$(column).animate({
		width: 'show',
		paddingLeft: 'show',
		paddingRight: 'show',
		marginLeft: 'show',
		marginRight: 'show',
		opacity: 'show'
	}, 300);	
};

ic.hideColumn = function (column, duration) {
	var callback = function () {
		var columnType = column.dattr('taskstate-type');
		var columnName = $('.task-column-name', column).text();
		var tasksCount = parseInt(column.dattr('taskscount'));

		var columnPlaceholder = $('<div></div>', {
			'class': 'column-placeholder ' + columnType,
			'data-column-class': columnType
		}).insertAfter(column);

		$('<span/>', {
			html: columnName + (tasksCount == 0 ? '' : ' (' + tasksCount + ')')
		}).appendTo(columnPlaceholder);		
	};

	if (!duration || duration === 0) {
		column.hide();
		callback();
	} else
		column.animate({
			width: 'hide',
			paddingLeft: 'hide',
			paddingRight: 'hide',
			marginLeft: 'hide',
			marginRight: 'hide',
			opacity: 'hide'
		}, duration, callback);
};

даже не знаю, что еще может пригодиться
Ответить с цитированием
  #4 (permalink)  
Старый 22.08.2012, 10:11
Аватар для LittlePony
Кандидат Javascript-наук
Отправить личное сообщение для LittlePony Посмотреть профиль Найти все сообщения от LittlePony
 
Регистрация: 19.08.2012
Сообщений: 100

показывать лучше на jsfiddle, чтобы можно было видеть сразу в действии, или на своём сайте, где проблема и возникла.
Ответить с цитированием
  #5 (permalink)  
Старый 22.08.2012, 10:16
Новичок на форуме
Отправить личное сообщение для gallyamov Посмотреть профиль Найти все сообщения от gallyamov
 
Регистрация: 22.08.2012
Сообщений: 3

если б я мог, это внутрикорпоративная вещь. мне по сути нужен толчок, просто не понимаю куда рыть
Ответить с цитированием
  #6 (permalink)  
Старый 22.08.2012, 10:24
Аватар для LittlePony
Кандидат Javascript-наук
Отправить личное сообщение для LittlePony Посмотреть профиль Найти все сообщения от LittlePony
 
Регистрация: 19.08.2012
Сообщений: 100

на jsfiddle можно модель рабочую создать, можно с тестовыми данными, чтобы не палить внутрикорпоративные секреты. А sass ещё компилировать надо, не все этим пользуются, не у каждого получится запустить ваш код у себя.

По теме вопроса: да, ширину нужно зафиксировать, тогда не будет ничего съезжать. Чтобы не съезжало в момент анимации, не стесняйтесь лишней обёртки. Если нужно, чтобы тем не менее блоки занимали всю ширину, сколько бы их ни было, пусть по ширине растягиваются контейнеры, которые содержат блоки с фиксированной шириной
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Не срабатывает hover при использовании в div IE 6.0 AlexMak (X)HTML/CSS 5 14.05.2009 18:26
Отрыть DIV блок при переходе с другой страницы BuTbka Общие вопросы Javascript 7 08.04.2009 22:59
Координаты DIV(объекта) при центровке и изменении свойств экрана andrys2007 Элементы интерфейса 1 10.03.2009 20:55
Подвисание IE при динамическом изменении контента Taddy_Bear Общие вопросы Javascript 4 11.12.2008 21:12