Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [PHP][JavaScript] Ukrywanie części tekstu w divie.
xebo
post 10.02.2012, 19:26:06
Post #1





Grupa: Zarejestrowani
Postów: 26
Pomógł: 0
Dołączył: 9.04.2011

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

Witam

Mma pewien problem z tym skryptem.


[PHP] pobierz, plaintext 
  1. <script type="text/javascript">
  2. function hideshow(which){
  3. if (!document.getElementById)
  4. return
  5. if (which.style.display=="block")
  6. which.style.display="none"
  7. else
  8. which.style.display="block"
  9. }
  10. </script>
[PHP] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <a href="java script:hideshow(document.getElementById('tresc'))">Click here</a>
[HTML] pobierz, plaintext



Chodiz o to że po kliknieciu na "Click here" w kazdym z newsów zamiast otwierac ukrytą zawartośc tego którego klikam, otwiera wartośc tylko pierwszego newsa.

podaję link do sprawdzenia

http://pogaduchynaluzie.xaa.pl/naluziefm/

pozdrawiam
Go to the top of the page
+Quote Post
potreb
post 10.02.2012, 19:36:08
Post #2





Grupa: Zarejestrowani
Postów: 1 568
Pomógł: 192
Dołączył: 7.03.2005
Skąd: Warszawa

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

Najlepiej jak zastosujesz do tego jquery.

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. 	$(function(){
  3. 			var current;
  4. 			$(".link").click(function() {
  5. 				current = $(this).next("#tresc");
  6. 				$("#tresc").not(current).slideUp('fast');
  7. 				current.slideDown("fast");
  8. 			});
  9. 	});
  10. </script>
[HTML] pobierz, plaintext


Podepnij jquery, klasę link do odnośników i sprawdź czy działa.

Ten post edytował potreb 10.02.2012, 19:37:43


--------------------
Go to the top of the page
+Quote Post
xebo
post 10.02.2012, 19:44:13
Post #3





Grupa: Zarejestrowani
Postów: 26
Pomógł: 0
Dołączył: 9.04.2011

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

Niestety ale nie kopie...
W tej chwili jest brak reakcji na klikniecie.
Go to the top of the page
+Quote Post
bzeebzee
post 10.02.2012, 19:47:58
Post #4





Grupa: Zarejestrowani
Postów: 38
Pomógł: 3
Dołączył: 25.12.2011

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

[HTML] pobierz, plaintext 
  1. <script>
  2.     $(".link").click(function () {
  3.       $("#div").slideToggle("slow");
  4.     });
  5. </script>
[HTML] pobierz, plaintext


Spróbuj tego tongue.gif
Go to the top of the page
+Quote Post
kaem
post 10.02.2012, 19:50:32
Post #5





Grupa: Zarejestrowani
Postów: 248
Pomógł: 38
Dołączył: 29.06.2008

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

Czy ja dobrze widzę? Ty ten kod JS wklejasz pod każdym newsem? A po za tym niedadaje się takiego samego id kilku elementom.
Zamiast id='tresc' daj class="tresc" i modyfikując skrypt @potreb
[HTML] pobierz, plaintext 
  1. $(".link").click(function() {
  2. current = $(this).next(".tresc");
  3. $(".tresc").not(current).slideUp('fast');
  4. current.slideDown("fast");
  5. })
[HTML] pobierz, plaintext

Tylko ten skrypt wrzuć raz w <head>...

Acha i wywal kod js z href="" bo po Ci on jest?

Ten post edytował kaem 10.02.2012, 19:51:37
Go to the top of the page
+Quote Post
xebo
post 10.02.2012, 20:14:48
Post #6





Grupa: Zarejestrowani
Postów: 26
Pomógł: 0
Dołączył: 9.04.2011

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

W tej chwili treść jest caly czas na wierzchu.


Mam nadzieję że wiecie o co mi chodzi.

W pierwszej kolejności ma być widoczny opis.
Gdy klikniemy np "czytaj wiecej" otwiera się cała treśc newsa.
Powiem jeszcze że chciałbym aby przycisk był pod otwierana treścia a nie nad ( testowałem skrypt i działał tylko wtedy gdy otwierana treść była pod odnosnikiem).
Go to the top of the page
+Quote Post
potreb
post 10.02.2012, 20:42:26
Post #7





Grupa: Zarejestrowani
Postów: 1 568
Pomógł: 192
Dołączył: 7.03.2005
Skąd: Warszawa

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

A jak ci zadziała jak nie masz podpiętej biblioteki jquery??

A i jeszczcze html się kłania
[HTML] pobierz, plaintext 
  1. <div id="odtwarzacze">
  2. 		<div id="tytul1">Słuchaj nas!</div>		
  3.  
  4. 		</div>
  5.  
  6. 			<div id="zaglowny">
  7.  
  8. 				<div id="news">
  9. 				<div id="tytul2">Aktualności</div>
  10. 				<head>
  11. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  12.  
  13.  
  14.     <script type="text/javascript">
  15.     $(function(){
  16.     var current;
  17.     $(".link").click(function() {
  18.     current = $(this).next(".tresc");
  19.     $(".tresc").not(current).slideUp('fast');
  20.     current.slideDown("fast");
  21.     })
  22.     </script>
  23.  
  24. </head>
  25.  
  26.  
  27. <div style="background:#0077CF; color:white; font-weight:bold;">Cos cos          <div style="background:#0077CF; color:white; font-weight:bold; float:right;">2012-02-10 20:09:24</div></div>
  28. <div id="opis">
  29.  
  30. </head>
[HTML] pobierz, plaintext


Ten post edytował potreb 10.02.2012, 20:42:42


--------------------
Go to the top of the page
+Quote Post
xebo
post 10.02.2012, 20:50:42
Post #8





Grupa: Zarejestrowani
Postów: 26
Pomógł: 0
Dołączył: 9.04.2011

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

Biblioteka jest dodana, a i tak bez zmian.

Takie źródła kodu zbierasz po includowaniu pliku. Szukałem sposoobu do jezyka na stronie, w tej chwili nie zajmuje się tym chce zrobic z newsami porzadek.
Go to the top of the page
+Quote Post
Robert1985
post 10.02.2012, 21:01:00
Post #9





Grupa: Zarejestrowani
Postów: 84
Pomógł: 7
Dołączył: 5.08.2009
Skąd: Tychy

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

[PHP] pobierz, plaintext 
  1. $(document).ready(function(){
  2.      var current;
  3.      $(".link").click(function(event) {
  4.        event.PreventDefault();
  5.        current = $(this).next(".tresc");
  6.        $(".tresc").not(current).slideUp('fast');
  7.        current.slideDown("fast");
  8.    });
  9. });
[PHP] pobierz, plaintext

Czy ta funkcja zadziała ?

Ten post edytował Robert1985 10.02.2012, 21:07:10


--------------------
"Istnieją dwa sposoby projektowania oprogramowania. Można napisać je tak prosto, że w oczywisty sposób nie będzie w nim niedoskonałości; można też uczynić je tak skomplikowanym ,że nie będzie w nim żadnych oczywistych niedociągnięć.Pierwsza metoda jest znacznie trudniejsza." C.A.R Hoare
Go to the top of the page
+Quote Post
potreb
post 10.02.2012, 21:02:45
Post #10





Grupa: Zarejestrowani
Postów: 1 568
Pomógł: 192
Dołączył: 7.03.2005
Skąd: Warszawa

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

Nie posiadasz znajomości html-a a co dopiero jquery. Wklejasz z błedami:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html 
  2. 	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5. <head>
  6. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. 	<meta name="Description" content="Na luzie FM" />
  8. 	<meta name="Keywords" content="Na Luzie FM" />
  9. 	<title>Na Luzie FM ! Pozytywne radio młodzieżowe. </title>
  10. 		<script src="http://code.jquery.com/jquery-latest.js"></script>
  11.     <script type="text/javascript">
  12.     $(function(){
  13.     var current;
  14.     $(".link").click(function() {
  15.     current = $(this).next(".tresc");
  16.     $(".tresc").not(current).slideUp('fast');
  17.     current.slideDown("fast");
  18.     })
  19.     })
  20.     </script>
  21. <style type="text/css" >
  22. .tresc {display: none;}
  23. </style>
  24. 	</head>
  25. <body>
  26.  
  27.  
  28.  
  29. <div class="opis"> news 1
  30. 	<a href="#" class="link">Click here</a>
  31. 	<div class="tresc">Opis1 opis1 opis1</div>
  32. </div>
  33.  
  34. <div class="opis">news 2
  35. 	<a href="#" class="link">Click here</a>
  36. 	<div class="tresc">Opis2 opis2 opis 2</div>
  37. </div>
  38.  
  39.  
  40. <div class="opis">news 3
  41. 	<a href="#" class="link">Click here</a>
  42. 	<div class="tresc">Opis3 opis3 opis3 3</div>
  43. </div>
  44.  
  45.  
  46.  
  47.  
  48.  
  49.  
  50.  
  51.  
  52. </div>
  53.  
  54. </body>
  55. </html>
[HTML] pobierz, plaintext


Ten przykład działa.


--------------------
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: Standardowy · Przełącz na: 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: 19.07.2025 - 05:43
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn