Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JS] Slide na Jquery pytanko
Spyder
post
Post #1





Grupa: Zarejestrowani
Postów: 269
Pomógł: 7
Dołączył: 12.10.2006
Skąd: Newcastle Upon Tyne

Ostrzeżenie: (0%)
-----


  1. /********************************************************************************
  2. ***************************/
  3.  
  4. var myslider_slideSpeed = 10; // Higher value = faster
  5. var myslider_timer = 10; // Lower value = faster
  6.  
  7. var objectIdToSlideDown = false;
  8. var myslider_activeId = false;
  9. var myslider_slideInProgress = false;
  10. function showHideContent(e,inputId)
  11. {
  12. if(myslider_slideInProgress)return;
  13. myslider_slideInProgress = true;
  14. if(!inputId)inputId = this.id;
  15. inputId = inputId + '';
  16. var numericId = inputId.replace(/[^0-9]/g,'');
  17. var answerDiv = document.getElementById('myslider_a' + numericId);
  18.  
  19. objectIdToSlideDown = false;
  20.  
  21. if(!answerDiv.style.display || answerDiv.style.display=='none'){
  22. if(myslider_activeId && myslider_activeId!=numericId){
  23. objectIdToSlideDown = numericId;
  24. slideContent(myslider_activeId,(myslider_slideSpeed*-1));
  25. }else{
  26.  
  27. answerDiv.style.display='block';
  28. answerDiv.style.visibility = 'visible';
  29.  
  30. slideContent(numericId,myslider_slideSpeed);
  31. }
  32. }else{
  33. slideContent(numericId,(myslider_slideSpeed*-1));
  34. myslider_activeId = false;
  35. }
  36. }
  37.  
  38. function slideContent(inputId,direction)
  39. {
  40.  
  41. var obj =document.getElementById('myslider_a' + inputId);
  42. var contentObj = document.getElementById('myslider_ac' + inputId);
  43. height = obj.clientHeight;
  44. if(height==0)height = obj.offsetHeight;
  45. height = height + direction;
  46. rerunFunction = true;
  47. if(height>contentObj.offsetHeight){
  48. height = contentObj.offsetHeight;
  49. rerunFunction = false;
  50. }
  51. if(height<=1){
  52. height = 1;
  53. rerunFunction = false;
  54. }
  55.  
  56. obj.style.height = height + 'px';
  57. var topPos = height - contentObj.offsetHeight;
  58. if(topPos>0)topPos=0;
  59. contentObj.style.top = topPos + 'px';
  60. if(rerunFunction){
  61. setTimeout('slideContent(' + inputId + ',' + direction + ')',myslider_timer);
  62. }else{
  63. if(height<=1){
  64. obj.style.display='none';
  65. if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
  66. document.getElementById('myslider_a' + objectIdToSlideDown).style.display='block';
  67. document.getElementById('myslider_a' + objectIdToSlideDown).style.visibility='visible';
  68. slideContent(objectIdToSlideDown,myslider_slideSpeed);
  69. }else{
  70. myslider_slideInProgress = false;
  71. }
  72. }else{
  73. myslider_activeId = inputId;
  74. myslider_slideInProgress = false;
  75. }
  76. }
  77. }
  78.  
  79.  
  80.  
  81. function initShowHideDivs()
  82. {
  83. var divs = document.getElementsByTagName('DIV');
  84. var divCounter = 1;
  85. for(var no=0;no<divs.length;no++){
  86. if(divs[no].className=='myslider_question'){
  87. divs[no].onclick = showHideContent;
  88. divs[no].id = 'myslider_q'+divCounter;
  89. var answer = divs[no].nextSibling;
  90. while(answer && answer.tagName!='DIV'){
  91. answer = answer.nextSibling;
  92. }
  93. answer.id = 'myslider_a'+divCounter;
  94. contentDiv = answer.getElementsByTagName('DIV')[0];
  95. contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
  96. contentDiv.className='myslider_answer_content';
  97. contentDiv.id = 'myslider_ac' + divCounter;
  98. answer.style.display='none';
  99. answer.style.height='1px';
  100. divCounter++;
  101. }
  102. }
  103. }


  1. <div class="myslider_question">Open</div>
  2. <div class="myslider_answer">
  3.  
  4. Text tu
  5.  
  6. <a href="#" onclick="javascript: initShowHideDivs()">close</a>
  7.  
  8.  
  9. </div>
  10. </div>



Witam

Mam taki skrypcik odpowiedzialny za rozwijanie i zwijanie diva. Skrypt dziala tak ze jak nacisne Open to mi sie ladnie rozwinie i jak ponowie to mi sie zwinie. Staram sie dorobic guzik w srodku diva ktory bedzie odpowiedzialny za zwijanie (takie zamknij). Puki co mam tak ze div sie zamknie ale nie ma animacji zwijania. Czy ktos moze mi poradzic jak to zrobic?(IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif) Inne pytanko jak dodac taki efekt bounce po rozwinieciu czyli zeby tak leciutko podskoczyl div jak sie rozwinie mozna to znalaezc czasami. Z gory dzieki za pomoc.
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 24.08.2025 - 19:00