Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JS] Slide na Jquery pytanko
Spyder
post 14.06.2009, 13:02:24
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?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.


--------------------
Portfolio

Windows Vista Business SP1
DELL VOSTRO 200, Intel Core2 DUO E4600 2.4GHz, 3 GB RAM, ATI Radeon HD 2400 Pro, Screen DELL 22"

Pomogłem ci -> Kliknij "Pomógł" -> Dzięki
Go to the top of the page
+Quote Post
erix
post 15.06.2009, 09:51:59
Post #2





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




Daj to gdzieś działające.

I popraw sygnaturkę na regulaminową.


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
Spyder
post 15.06.2009, 21:28:52
Post #3





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

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


Pewnie oto przyklad

http://www.rafalrutyna.co.uk/test.php

A co jest zlego w mojej stopce tak na marginesie bo od 2 lat nie bylo z nia problemow?questionmark.gif?


--------------------
Portfolio

Windows Vista Business SP1
DELL VOSTRO 200, Intel Core2 DUO E4600 2.4GHz, 3 GB RAM, ATI Radeon HD 2400 Pro, Screen DELL 22"

Pomogłem ci -> Kliknij "Pomógł" -> Dzięki
Go to the top of the page
+Quote Post
erix
post 15.06.2009, 23:11:12
Post #4





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




init zwykle jest używany tylko raz, przy renderowaniu strony. IMHO trzeba użyć showHideContent w linku zamykającym.

Cytat
A co jest zlego w mojej stopce tak na marginesie bo od 2 lat nie bylo z nia problemow??

Dopiero teraz widzę jakieś Twoje wypowiedzi, a co do niej:
Cytat
Podpis może mieć maksymalne rozmiary 700px szerokości i 70px wysokości (5 linii w czcionce domyślnej i rozdzielczości 1024x768).

A Twoja ma 120px tongue.gif


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
Spyder
post 20.06.2009, 00:19:09
Post #5





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

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


Cytat(erix @ 15.06.2009, 23:11:12 ) *
init zwykle jest używany tylko raz, przy renderowaniu strony. IMHO trzeba użyć showHideContent w linku zamykającym.


Zmienilem tak jak sugerowales ale cos nie dziala moze inny pomysl ? THX


--------------------
Portfolio

Windows Vista Business SP1
DELL VOSTRO 200, Intel Core2 DUO E4600 2.4GHz, 3 GB RAM, ATI Radeon HD 2400 Pro, Screen DELL 22"

Pomogłem ci -> Kliknij "Pomógł" -> Dzięki
Go to the top of the page
+Quote Post
ayeo
post 20.06.2009, 05:57:18
Post #6





Grupa: Przyjaciele php.pl
Postów: 1 202
Pomógł: 117
Dołączył: 13.04.2007
Skąd: 127.0.0.1

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


Witam!

Czemu nie użyjesz:
Kod
$("#jakiś_div").toggleSlide();


Co do efektu odbijania to musisz ściągnąć sobie jquery.easing.js. Tam są podstawowe efekty tego typu. Użycie jak w każdej metodzie typu animate.

Pozdrawiam!


--------------------
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 24.07.2025 - 17:48