Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Onclick = menu podjeżdża
Forum PHP.pl > Forum > Po stronie przeglądarki
mambus
1.08.2012, 14:26:15
Witajcie.
Zwracam się do Was z pewną prośbą, mianowicie: mam pewien skrypt w JS który działa w taki sposób, że po kliknięciu w np linka, od razu mi otwiera schowaną w div-ie zawartość. Działa to dobrze, ale chciałbym w pewien sposób go zmodyfikować - docelowo ma to działać tak że po kliknięciu ten div będzie jechał do góry a nie pojawiał się od razu.

Za pewne będzie trzeba to zrobić w jquery. Niestety nie mam zielonego pojęcia jak to zrobić. Znalazłem kilka rozwiązań w internecie ale żadne nie odpowiada mojemu ani metodologia jaką zostały wykonane.

Skrypt poniżej.

[PHP] pobierz, plaintext 
  1. 			function openClose(id)
  2. 			{
  3. 			   if(document.getElementById) {
  4. 				  element = document.getElementById(id);
  5. 			   } else if(document.all) {
  6. 				  element = document.all[id];
  7. 			   } else return;
  8.  
  9. 			   if(element.style) {
  10. 				  if(element.style.display == 'block' ){
  11. 					 element.style.display = 'none';
  12. 				  } else {
  13. 					 element.style.display = 'block';
  14. 				  }
  15. 			   }
  16. 			}
[PHP] pobierz, plaintext


Czy ktoś mógłby mi pomóc ?
ukaszf9
1.08.2012, 19:45:40 
[PHP] pobierz, plaintext 
  1. <script>
  2. $('#click').click(function() {
  3.   $('#top').show('slow');
  4. });
  5. </script>
  6.  
  7. <a href="#" id="click">click</a>
  8. <div id="top" style="display:none;">TOP</div>
[PHP] pobierz, plaintext

Chodzi o coś takiego czy ten div ma lecieć do góry ekranu wybranego miejsca?
mambus
1.08.2012, 23:01:43
tak, ma lecieć do góry ekranu. Niestety nie działa to co kolega podał.

EDIT: Udało mi się. Wygooglowałem sobie tę funkcję show w jquery. Tylko problem jest w tym że div wjeżdża od lewej a chciałbym żeby wjeżdżał od góry - da się to zmodyfikować ?
ukaszf9
2.08.2012, 09:36:27
Podaj co wklejasz.
mambus
2.08.2012, 10:22:56 
[PHP] pobierz, plaintext 
  1. 		<script>
  2. 			$("#showit").click(function () {
  3. 			$("#menu_before2").hide("slow");
  4. 			$("#container").show("slow");
  5.  
  6. 			});
  7. 		</script>
[PHP] pobierz, plaintext


tutaj chyba się to modyfikuje ?
ethann
2.08.2012, 10:48:11
Z użyciem jQuery.

[HTML] pobierz, plaintext 
  1. <!doctype html>
  2. <html><head>
  3. 	<meta charset="UTF-8" />
  4. 	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  5. 	<script type="text/javascript">
  6. 		$(function() {
  7. 			$("dl#menu dt").click(function() {
  8. 				$(this).nextAll().slideToggle('fast');
  9. 			});
  10. 		});
  11. 	</script>
  12. 	<style type="text/css">
  13. 		dl#menu {margin:0; float:left; border:2px solid #333;}
  14. 		dl#menu dt {width:120px; height:25px; display:block; background-color:#666; color:#fff; font-weight:bold; text-align:center; cursor:pointer;}
  15. 		dl#menu dd {width:120px; height:25px; display:block; background-color:#aaa; color:#fff; font-weight:bold; text-align:center; margin:0; padding:0; display:none;}
  16. 	</style>
  17. </head><body>
  18.  
  19. 	<dl id="menu">
  20. 		<dt>Nawigacja</dt>
  21. 		<dd>Strona główna</dd>
  22. 		<dd>Chat</dd>
  23. 		<dd>Artykuły</dd>
  24. 		<dd>Linki</dd>
  25. 	</dl>
  26.  
  27. 	<dl id="menu">
  28. 		<dt>Nawigacja #2</dt>
  29. 		<dd>Strona główna</dd>
  30. 		<dd>Chat</dd>
  31. 		<dd>Artykuły</dd>
  32. 		<dd>Linki</dd>
  33. 	</dl>
  34.  
  35. 	<dl id="menu">
  36. 		<dt>Nawigacja #3</dt>
  37. 		<dd>Strona główna</dd>
  38. 		<dd>Chat</dd>
  39. 		<dd>Artykuły</dd>
  40. 		<dd>Linki</dd>
  41. 	</dl>
  42.  
  43. </body></html>
[HTML] pobierz, plaintext
mambus
3.08.2012, 12:20:15
wszystko okej - ale nie zrozumieliśmy się. Takie rozwiązanie już znalazłem, w przypadku jaki kolega podał, menu rozwija się do dołu, a ja chciałbym żeby rozwijało się do góry, stąd też pytałem czy może nie da się zmienić gdzieś kierunku rozwijania w jquery, nie widziałem by funkcje ani slide, ani show miały możliwość nadawania kierunków od których miały by "jechać".
ukaszf9
3.08.2012, 12:32:33
Trzeba było od razu tak napisać smile.gif od tego jest funkcja slideUp();
- http://api.jquery.com/slideUp/
mambus
3.08.2012, 12:34:55
A właśnie nie - bo slideUP chowa.
Ale udało mi się znaleźć bardzo podobne rozwiązanie do tego co chcę - jedyna różnica że podjeżdża kawałek, a ja chce żeby do samej góry podlatywało.

http://atomicrobotdesign.com/blog/web-deve...rom-the-bottom/
ethann
3.08.2012, 15:32:42
Zmodyfikowany kod z przykładu podanego przez Ciebie.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html><head>
  3. 	<meta charset="utf-8" />
  4. 	<title>toggleSlide Up</title>
  5. 	<style>
  6. 		html, body {
  7. 		  height:100%;
  8. 		}
  9. 		body {
  10. 		  padding:0;
  11. 		  margin:0;
  12. 		  background:#000;
  13. 		  font-family:Arial, Helvetica, sans-serif;
  14. 		}
  15. 		.container {
  16. 		  width:960px;
  17. 		  height:100%;
  18. 		  margin:0 auto;
  19. 		  position:relative;
  20. 		}
  21. 		.about_popup {
  22. 		  width:360px;
  23. 		  height:100%;
  24. 		  padding:0 20px;
  25. 		  background:#333;
  26. 		  position:absolute;
  27. 		  left:0;
  28. 		  bottom:0;
  29. 		  display:none;
  30. 		  -moz-border-radius-topleft:20px;
  31. 		  -moz-border-radius-topright:20px;
  32. 		  -webkit-border-top-left-radius:20px;
  33. 		  -webkit-border-top-right-radius:20px;
  34. 		}
  35. 		.about_popup h1 {
  36. 		  color:#fff;
  37. 		  margin:0;
  38. 		  font-size:20px;
  39. 		}
  40. 		.about_popup p {
  41. 		  margin:0;
  42. 		  color:#fff;
  43. 		}
  44. 		.bottom_bar {
  45. 		  width:100%;
  46. 		  height:40px;
  47. 		  background:#333;
  48. 		  background:-moz-linear-gradient(#333,#000);
  49. 		  background:-webkit-gradient(linear, left top, left bottom, from(#333), to(#000));
  50. 		  box-shadow:-4px 0 4px #111;
  51. 		  position:absolute;
  52. 		  bottom:0;
  53. 		}
  54. 		.bottom_bar ul {
  55. 		  list-style:none;
  56. 		  width:960px;
  57. 		  margin:0 auto;
  58. 		}
  59. 		.bottom_bar ul li {
  60. 		  float:left;
  61. 		  line-height:40px;
  62. 		}
  63. 		.bottom_bar ul li a {
  64. 		  color:#fff;
  65. 		  text-decoration:none;
  66. 		  margin-right:20px;
  67. 		}
  68. 		a {
  69. 			text-decoration:none;
  70. 			font-family:helvetica, arial, sans-serif;
  71. 			color:#000;
  72. 		}
  73. 	</style>
  74. 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  75. 	<script>
  76. 		$(function() {
  77. 		  $('#bottom_menu a').click(function() {
  78. 			var elem = $($(this).attr('href') + '_popup');
  79.  
  80. 			$('div.container div').not(elem).slideUp();
  81. 			elem.slideToggle();
  82. 		  });
  83. 		});
  84. 	</script>
  85. </head>
  86.  
  87. <body>
  88. <div class="container">
  89.   <div id="about_popup" class="about_popup">
  90.     <h1>About</h1>
  91.     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>
  92.   </div>
  93.   <div id="info_popup" class="about_popup">
  94.     <h1>Info</h1>
  95.     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>
  96.   </div>
  97.   <div id="else_popup" class="about_popup">
  98.     <h1>Else</h1>
  99.     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>
  100.   </div>
  101. </div>
  102. <div class="bottom_bar">
  103.   <ul id="bottom_menu">
  104.     <li><a href="#about">About</a></li>
  105.     <li><a href="#info">Info</a></li>
  106.     <li><a href="#else">Else</a></li>
  107.   </ul>
  108. </div>
  109. </body>
  110. </html>
[HTML] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.