rajeshg · February 8, 2010 14:36
diff --git a/gistfile1.htm b/gistfile1.htm
 <html>
 <head>
 	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js'></script>
 	<style type='text/css'>
 		body {
 			margin: 0 auto;
 			width: 900px;
 			padding-top: 100px;
 		}
 		#one , #two{
 			width: 150px;
 			position: relative;
 			border: 2px solid black;
 		}
 		#two{ display: none; }
 	</style>
 	<script type='text/javascript'>
 		$(document).ready(function() {
 			$containerDiv = $('#one');
 			$('#one').click(function() {
 				var one_height = parseInt($('#one').height()) + parseInt($('#one').css('border-top-width')) +
 				parseInt($('#one').css('border-bottom-width'));
 				var two_height = parseInt($('#two').height()) + parseInt($('#two').css('border-top-width')) +
 				parseInt($('#two').css('border-bottom-width'));				
 				if(newUIPos()){
 					if($('#two:visible').length > 0) {
 						$('#two').hide();
 						$('#two').css('top','0px');
 					} else {
 						$('#two').hide().css({'height': 0, 'top':'-'+one_height+'px'}).show().animate({'height': two_height, 'top':'-='+two_height+'px'}, { duration: 'slow', 'specialEasing': 'easeOut'});
 					}
 				} else {
 					$('#two').slideToggle();
 				}
 			});

 	    //decide if to place the new list above or below the drop-down
            function newUIPos(){
                var containerPosY = $containerDiv.offset().top,
                docHeight = jQuery(window).height(),
                scrollTop = jQuery(window).scrollTop();
                //if height of list is greater then max height, set list height to max height value
 		var newUIHeight = $('#two').height();
                containerPosY = containerPosY-scrollTop;
                if (containerPosY+newUIHeight >= docHeight){
 					console.log('#two should appear above');
 					return true;
                } else {
 					console.log('#two should appear below');
 					return false;
                }
            }

 		});
 	</script>
 </head>
 <body>
 	<div id='one'>
 		div id one content
 	</div>
 	<div id='two'>
 		div id two content
 		<ul>
 			<li>Campaign 1 </li>
 			<li>Campaign 2 </li>
 		</ul>
 	</div>
 </body>
 </html>
	<html>
	<head>
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js'></script>
	<style type='text/css'>
	body {
	margin: 0 auto;
	width: 900px;
	padding-top: 100px;
	}
	#one , #two{
	width: 150px;
	position: relative;
	border: 2px solid black;
	}
	#two{ display: none; }
	</style>
	<script type='text/javascript'>
	$(document).ready(function() {
	$containerDiv = $('#one');
	$('#one').click(function() {
	var one_height = parseInt($('#one').height()) + parseInt($('#one').css('border-top-width')) +
	parseInt($('#one').css('border-bottom-width'));
	var two_height = parseInt($('#two').height()) + parseInt($('#two').css('border-top-width')) +
	parseInt($('#two').css('border-bottom-width'));
	if(newUIPos()){
	if($('#two:visible').length > 0) {
	$('#two').hide();
	$('#two').css('top','0px');
	} else {
	$('#two').hide().css({'height': 0, 'top':'-'+one_height+'px'}).show().animate({'height': two_height, 'top':'-='+two_height+'px'}, { duration: 'slow', 'specialEasing': 'easeOut'});
	}
	} else {
	$('#two').slideToggle();
	}
	});

	//decide if to place the new list above or below the drop-down
	function newUIPos(){
	var containerPosY = $containerDiv.offset().top,
	docHeight = jQuery(window).height(),
	scrollTop = jQuery(window).scrollTop();
	//if height of list is greater then max height, set list height to max height value
	var newUIHeight = $('#two').height();
	containerPosY = containerPosY-scrollTop;
	if (containerPosY+newUIHeight >= docHeight){
	console.log('#two should appear above');
	return true;
	} else {
	console.log('#two should appear below');
	return false;
	}
	}

	});
	</script>
	</head>
	<body>
	<div id='one'>
	div id one content
	</div>
	<div id='two'>
	div id two content
	<ul>
	<li>Campaign 1 </li>
	<li>Campaign 2 </li>
	</ul>
	</div>
	</body>
	</html>