isaac_cm Posted September 19, 2007 Share Posted September 19, 2007 Hello, Is it possible to make the drop down list of a combo box animated ? for example slide down transition ? Thanks Link to comment https://forums.phpfreaks.com/topic/69978-animation-with-combo-box/ Share on other sites More sharing options...
Psycho Posted September 20, 2007 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/69978-animation-with-combo-box/#findComment-351569 Share on other sites More sharing options...
isaac_cm Posted September 20, 2007 Author Share Posted 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 Link to comment https://forums.phpfreaks.com/topic/69978-animation-with-combo-box/#findComment-351586 Share on other sites More sharing options...
Psycho Posted September 20, 2007 Share Posted 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> Link to comment https://forums.phpfreaks.com/topic/69978-animation-with-combo-box/#findComment-351666 Share on other sites More sharing options...
isaac_cm Posted September 21, 2007 Author Share Posted 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 Link to comment https://forums.phpfreaks.com/topic/69978-animation-with-combo-box/#findComment-352290 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.