[JavaScript] Zmiana wysokości diva po wczytaniu strony Opcje

[Oczko21]

Witam,
Mam pewien problem(właściwie to dwa, ale jeden jest piorytetowy), pozwole sobie go przedstawić za pomocą rysunku, aby łatwiej byłoby zorientować się o co mi chodzi.
1. Na stronie znajduje się div o stałej szerokości i zmiennej(uzależnionej od ilości elementów) wysokości.
Wygląda to mniej więcej tak:
Rys. 1

W momencie wczytania strony w skrypcie JS losuję położenie tych boxów. Czasami zdarza się tak że wszystkie znajdują się na tej samej poziomej lini.
Rys. 2

I tutaj pojawia się problem- scroll. Strona cały czas ma początkową wysokość i w momencie kiedy te elementy zostaną rozłożone w jednej lini zostaje zapas wolnego miejsca, wygląda to nieestetycznie i chciałbym się tego pozbyć. Mam coś takiego(fragment):

[HTML] pobierz, plaintext 
$(function(){
	var divArray = $('.example'),
	divArrLength = divArray.length,
	h = document.getElementById('boxes');
	h = h.clientHeight;
	for(i=0; i < divArrLength; i++)
	{
	randomLeft = Math.floor((Math.random()*(screenWidth-235))+1);
	randomTop = Math.floor((Math.random()*((h+1)-180))-(i*180));
 
	if(randomTop+(i*180) > max)
		max = randomTop+(i*180);
 
	$(divArray[i]).css("top", randomTop);
	$(divArray[i]).css("left", randomLeft);
	}
 
	maxHeight = max+180;
	if(maxHeight < screenHeight-200)
		maxHeight = (screenHeight-200);
 
	$("#boxes").css("height", maxHeight);
[HTML] pobierz, plaintext 

Ostatnia linijka $("#boxes").css("height", maxHeight) dopisuje mi taką wysokość jaka jest niezbędna, jednak wygląda na to że div aby przybrał tą wysokość musi być 'przeładowany'- odświeżony.
Probowałem na końcu daj:
$("#boxes").html();
Ale niestety nic to nie pomogło. Byłbym wdzięczny za wskazanie z jakiej strony mam to ugryźć.

2. Drugi problem dotyczy również tej sytuacji, jednak o coś innego się rozchodzi.
Do przesuwania elementów, używam jQuery UI, pytanie czy można łączyć funkcje z UI ze zwykłym jQuery?
Chciałbym aby po kliknięciu w jeden z tych boxów, przybierał on z-index 1000, tak aby aktywny element był zawsze na wierzchu.
Próbowałem coś takiego:

[HTML] pobierz, plaintext 
$(function(){
	$(".example").draggable({
		 containment: 'parent',
		 opacity: 0.7,
		 scroll: false
	},click(function(){
		$(".example").css("z-index", 10),
		$(this).css("z-index", 1000);
	})
	)
});
[HTML] pobierz, plaintext 

Jak można się domyślić nie działa to, nawet samo przesuwanie w takim przypadku nie działa, stąd też moje pytanie czy funkcje UI można łączyć ze zwykłymi. Z tego co patrzyłem w dokumentacji jQuery UI nie widnieje tam żadna funkcja odpowiadająca click(). Znalazłem jedynie argument zIndex, ale w przypadku gdy ją używam wszystkie elementy klasy .example mają wartość z-index: auto.
Jakieś sugestie w jaki sposób mogę osiągnąć zamierzony cel, czyli aby aktywny(box po kliknięciu lub ostatni przesunięty) dostawał z-index wyższy/większy od pozostałych?
Dziękuje za każde sugestie, nawet te najdrobniejsze.

[jaslanin]

1. Nigdzie nie masz przypisanej wartości do zmiennej screenHeight i szerokośći
2. Masz opisane w

http://jqueryui.com/demos/draggable/#event-create


This event is triggered when dragging starts.

Code examples

Supply a callback function to handle the start event as an init option.

Kod

$( ".selector" ).draggable({
   start: function(event, ui) { ... }
});

Bind to the start event by type: dragstart.

Kod

$( ".selector" ).bind( "dragstart", function(event, ui) {
  ...
});

[Oczko21]

Wspomniałem że podany kod jest tylko fragmentem, dlatego nie widać deklaracji.
Jak już pisałem, cały kod działa. Problem jest jedynie z divem który chyba potrzebuje przeładowania/odświeżenia aby wyświetlił prawidłową wyskość i tutaj pojawia się problem.
Jak odświeżyć takiego diva bez przeładowania strony?

Co do drugiego podpunktu to poradziłem sobie używając opcji stack z biblioteki jQuery UI