animation with combo box

isaac_cm · September 19, 2007

Hello,

Is it possible to make the drop down list of a combo box animated ? for example slide down transition ?

Thanks

Psycho · September 20, 2007

Not a "true" select list, but you could do it with CSS and javascript. But, personally, I think it would not be worth it. The added "flair" would be outweighed by the fact of possible browser incompatibility and people with JS disabled.

isaac_cm · September 20, 2007

I just tired of old look of combo box, many people now uses flash components which make my site looks ugly even with a good CSS colors, is there a solution to this or UI library has all that ?

thanks

Psycho · September 20, 2007

Here is a quick and dirty rewrite of a function I am working on for expandable divs. This could be reworked to act similar to a select list (populating a text or hidden field when selecting a value).

<html>

<head>

<style type="text/css">

body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
margin:10px;

}

.question{	/* Styling question */
/* Start layout CSS */
color:#FFF;
font-size:0.9em;
background-color:#317082;
width:430px;
margin-bottom:2px;
margin-top:2px;
padding-left:2px;
background-image:url('images/bg_answer.gif');
background-repeat:no-repeat;
background-position:top right;	
height:20px;

/* End layout CSS */

overflow:hidden;
cursor:pointer;
}
.answer{	/* Parent box of slide down content */
/* Start layout CSS */
border:1px solid #317082;
background-color:#E2EBED;
width:400px;

/* End layout CSS */

visibility:hidden;
height:0px;
overflow:hidden;
position:relative;

}
.answer_content{	/* Content that is slided down */
padding:1px;
font-size:0.9em;	
position:relative;
}

</style>
<script type="text/javascript">

var slideSpeed = 7;	// Higher value = faster
var timer = 1;	// Lower value = faster
var slideInProgress = false;

function showHideContent(displayDiv)
{
if(slideInProgress)return;
slideInProgress = true;

var answerDiv = document.getElementById(displayDiv);

if(!answerDiv.style.display || answerDiv.style.display=='none'){
	answerDiv.style.display='block';
	answerDiv.style.visibility = 'visible';
	slideContent(displayDiv, slideSpeed*1);
}else{
	slideContent(displayDiv, (slideSpeed*-1));
}	
}

function slideContent(displayDiv, direction)
{

var obj =document.getElementById(displayDiv);
var contentObj = obj.childNodes[0];

        height = (obj.clientHeight==0)? obj.offsetHeight : obj.clientHeight;
height = height + direction;
rerunFunction = true;

if(height>contentObj.offsetHeight){
	height = contentObj.offsetHeight;
	rerunFunction = false;
}
if(height<=1){
	height = 1;
	rerunFunction = false;
}

obj.style.height = height + 'px';

var topPos = height - contentObj.offsetHeight;
if(topPos>0)topPos=0;
//	contentObj.style.top = topPos + 'px';
if(rerunFunction){
	setTimeout('slideContent(\'' + displayDiv + '\',' + direction + ')',timer);
}else{
	if(height<=1){
		obj.style.display='none'; 

		slideInProgress = false;
	}else{
		slideInProgress = false;
	}
}
}

</script>

</head>

<body>


<div class="question" id="q1" onclick="showHideContent('a1');">Select List</div>
<div class="answer" id="a1" style="display:none;height:1px;">
<div class="answer_content" id="ac1">
	<ul>
		<li>Option 1</li>
		<li>Option 2</li>
		<li>Option 3</li>

	</ul>
</div>
</div>


<script>

var divHeight = new Array();
var expandInProgress = false;

function expandDiv(divID, direction) {  //Need switch for open only, close only or Alternate

  if(expandInProgress) { return; }
  expandInProgress = true;

  divObj = document.getElementById(divID);

  if (!divHeight[divID]) { divHeight[divID] = divObj.offsetHeight; }
//  height = divObj.offsetHeight;



if (divObj.style.position=='absolute') {
alert(divObj.style.position);
//alert('d');
  divObj.style.height = '1px';
  divObj.style.position = 'relative';
  divObj.style.visibility = '';
//  for (i=1; i<=divHeight[divID]; i++) {
//    divObj.style.height = i;
//  }
//  setTimeout('expandDiv(\'' + divID + '\')', 200);

}
//else {
  currentheight = parseInt(divObj.style.height.replace(/[^0-9]/g,''));
//alert(currentheight);
  if (currentheight<=divHeight[divID]) {
    divObj.style.height = (currentheight+2) + 'px';
    setTimeout('expandDiv(\'' + divID + '\')', 10);
  }
//  divObj.style.visibility = 'hidden';
//  divObj.style.position = 'absolute';
//}


  expandInProgress = false;
//alert(tmpObj.offsetHeight+":"+tmpObj.clientHeight);

}
</script>

</body>
</html>

isaac_cm · September 21, 2007

yes something like that, but it is really a headache to use all this scripts

however I am thinking now of using flex as a front end and PHP as a back

end

Thanks

Sign In

animation with combo box

Recommended Posts

isaac_cm

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

isaac_cm

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

isaac_cm

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information