Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Onclick = menu podjeżdża, js na jquery
mambus
post 1.08.2012, 14:26:15
Post #1





Grupa: Zarejestrowani
Postów: 53
Pomógł: 0
Dołączył: 30.11.2010

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

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 ?
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 9)
ukaszf9
post 1.08.2012, 19:45:40
Post #2





Grupa: Zarejestrowani
Postów: 33
Pomógł: 3
Dołączył: 23.10.2011

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

[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?

Ten post edytował ukaszf9 1.08.2012, 19:46:26
Go to the top of the page
+Quote Post
mambus
post 1.08.2012, 23:01:43
Post #3





Grupa: Zarejestrowani
Postów: 53
Pomógł: 0
Dołączył: 30.11.2010

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

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ć ?

Ten post edytował mambus 1.08.2012, 23:49:50
Go to the top of the page
+Quote Post
ukaszf9
post 2.08.2012, 09:36:27
Post #4





Grupa: Zarejestrowani
Postów: 33
Pomógł: 3
Dołączył: 23.10.2011

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

Podaj co wklejasz.
Go to the top of the page
+Quote Post
mambus
post 2.08.2012, 10:22:56
Post #5





Grupa: Zarejestrowani
Postów: 53
Pomógł: 0
Dołączył: 30.11.2010

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

[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 ?
Go to the top of the page
+Quote Post
ethann
post 2.08.2012, 10:48:11
Post #6





Grupa: Zarejestrowani
Postów: 56
Pomógł: 18
Dołączył: 7.04.2012

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

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


Ten post edytował ethann 2.08.2012, 10:49:35
Go to the top of the page
+Quote Post
mambus
post 3.08.2012, 12:20:15
Post #7





Grupa: Zarejestrowani
Postów: 53
Pomógł: 0
Dołączył: 30.11.2010

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

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ć".
Go to the top of the page
+Quote Post
ukaszf9
post 3.08.2012, 12:32:33
Post #8





Grupa: Zarejestrowani
Postów: 33
Pomógł: 3
Dołączył: 23.10.2011

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

Trzeba było od razu tak napisać smile.gif od tego jest funkcja slideUp();
- http://api.jquery.com/slideUp/
Go to the top of the page
+Quote Post
mambus
post 3.08.2012, 12:34:55
Post #9





Grupa: Zarejestrowani
Postów: 53
Pomógł: 0
Dołączył: 30.11.2010

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

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/
Go to the top of the page
+Quote Post
ethann
post 3.08.2012, 15:32:42
Post #10





Grupa: Zarejestrowani
Postów: 56
Pomógł: 18
Dołączył: 7.04.2012

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

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
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

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

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 04:56
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn