Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][JavaScript] Ukrywanie części tekstu w divie.
Forum PHP.pl > Forum > Przedszkole
xebo
10.02.2012, 19:26:06
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
potreb
10.02.2012, 19:36:08
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.
xebo
10.02.2012, 19:44:13
Niestety ale nie kopie...
W tej chwili jest brak reakcji na klikniecie.
bzeebzee
10.02.2012, 19:47:58 
[HTML] pobierz, plaintext 
  1. <script>
  2.     $(".link").click(function () {
  3.       $("#div").slideToggle("slow");
  4.     });
  5. </script>
[HTML] pobierz, plaintext


Spróbuj tego tongue.gif
kaem
10.02.2012, 19:50:32
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?
xebo
10.02.2012, 20:14:48
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).
potreb
10.02.2012, 20:42:26
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
xebo
10.02.2012, 20:50:42
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.
Robert1985
10.02.2012, 21:01:00 
[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 ?
potreb
10.02.2012, 21:02:45
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.
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.