PHP/ Javascript ukrywanie/pokazywanie opisu.

Criss26 OP · 01-06-2015 22:20

Ale w divie musi byc opis, ktory ma sie chowac i pokazywac. A obrazek ma byc swego rodzaju buttonem, ze po kliknieciu w niego, opis chowa sie i pokazuje. Obrazek ma zastepowac ten button, ktory jest teraz.
http://serwer1556037.home.pl/index.php?id=2

2cztery7 · 01-06-2015 22:40

no dokładnie - otul obrazek w diva o klasie showDescription (albo dodaj ją do img, ale nie wiem czy tak zadziała - jestem newbie w jq), skrypt napisz mniej więcej taki:

Kod:

$('.showDescription').click(function(){
	$(this).next('div').toggle('slow');
});

no i umieszczanie skryptu w window.load a potem document.ready jest trochę bez sensu, wystarczy samo document.ready, albo w skrócie $(function(){//kod here});

Criss26 OP · 01-06-2015 22:51

Ale sam div chyba nie wystarczy do obrazka. Zrobilem tak jak napisales, i po kliknieciu w obrazek nic sie nie dzieje.

2cztery7 · 01-06-2015 23:29

no nie wiem, obadaj, mi to działa:

Kod:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type='text/javascript'>
$(function(){
	$('.showit').click(function(){
		$(this).next('.opis').toggle();
	});
});
</script>

</head>

<body>
<div class="showit">
<img src="http://1.fwcdn.pl/po/53/51/595351/7662231.3.jpg"/>
</div>
<div class="opis">
asdfasdfasdfadsf
</div>
</body>

</html>

Mistrzu dragon · 02-06-2015 04:45

jemu chodzi chyba o coś takiego

Kod:

<html>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<style>

</style>

<script type='text/javascript'>
	$(window).load(function(){
		$(document).ready(function() {
			$('.show').click(function() {
				$(this).closest('tr').find('.slidingDiv').toggle();
			});
		});
	}); 
</script>
<table border="1" width="50%">
	<tr>
		<td><img class="show" src="http://theviralmedialab.org/wp-content/uploads/2014/04/160px-Anonymous_emblem.svg.png"></td>
		<td>x</td>
		<td><div class="slidingDiv">gowienko</div></td>
	</tr>
	<tr>
		<td><img class="show" src="http://theviralmedialab.org/wp-content/uploads/2014/04/160px-Anonymous_emblem.svg.png"></td>
		<td>x</td>
		<td><div class="slidingDiv">gowienko</div></td>
	</tr>
	<tr>
		<td><img class="show" src="http://theviralmedialab.org/wp-content/uploads/2014/04/160px-Anonymous_emblem.svg.png"></td>
		<td>x</td>
		<td><div class="slidingDiv">gowienko</div></td>
	</tr>
</table>
</html>

#ed
nawet dam na fidlu żebyście się nie musieli jebać z kopiowaniem
https://jsfiddle.net/kpgec236/1/

Criss26 OP · 02-06-2015 15:23

@Mistrzu dragon ;
A da rade zrobic, zeby opis pokazywal/ukrywal sie ponizej tych danych a nie obok?
Chodzi mi o cos takiego.

Klikasz w miniaturke i opis pojawia sie ponizej, w drugim wierszu.

I przesuwa reszte tabeli ponizej.

Mistrzu dragon · 02-06-2015 15:45

Nie wiem jak zrobić td na całą szerokość.

Kod:

<html>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<style>
	.hidden{
		display:none;
	}
</style>

<script type='text/javascript'>
	$(window).load(function(){
		$(document).ready(function() {
			$('.show').click(function() {
				$(this).closest('tr').next('tr').toggleClass('hidden');
			});
		});
	}); 
</script>
<table border="1" width="50%">
	<tr>
		<td><img class="show" src="http://theviralmedialab.org/wp-content/uploads/2014/04/160px-Anonymous_emblem.svg.png"></td>
		<td>x</td>
	</tr>
	<tr class="hidden">
		<td>
			gowienko 1
		</td>
	</tr>
	<tr>
		<td><img class="show" src="http://theviralmedialab.org/wp-content/uploads/2014/04/160px-Anonymous_emblem.svg.png"></td>
		<td>x</td>
	</tr>
	<tr class="hidden">
		<td>
			gowienko 2
		</td>
	</tr>
	<tr>
		<td><img class="show" src="http://theviralmedialab.org/wp-content/uploads/2014/04/160px-Anonymous_emblem.svg.png"></td>
		<td>x</td>
	</tr>
	<tr class="hidden">
		<td>
			gowienko 3
		</td>
	</tr>
</table>
</html>

najlepiej zrobić popup tak jak mówiłem na początku (albo po kliknięciu w tytuł robić przekierowanie na obszerniejszą stronę jak np. tutaj http://www.helios.pl/16,Olsztyn/Repertuar/)

Criss26 OP · 02-06-2015 16:06

Wlasnie nie bardzo mam wyjscie. Musze zrobic tak, zeby pokazywalo sie ponizej. A po drugim kliknieciu chowalo.
Mozna na sztywno dac szeroko
<td width="900">.

Bazan · 02-06-2015 16:31

Koniecznie to musi byc tabelka?
Tabele są chujowe, sa do danych tabelarycznych. Tutaj potrzebujesz odpowiedniej kombinacji divów, naglowkow i spanow.

Ale jesli masz juz co masz to robisz takie cos:

Kod PHP:


<tr class="movie-main">
    <td>Obrazek</td>
    <td>Tytul</td>
    <td>Rok</td>
</tr>
<tr class="movie-description">
    <td colspan="3">Tutaj twoj dlzszy opis</td>
</tr>


<style>
.movie-description {display:none;}
</style>

JS:

(function($){

    $('.movie-main').on('click',function(e){
        $(this).next('.movie-description').slideToggle(); // a jak to nie dziala to .toggleSlide() 
    });

})(jQuery)

Mistrzu dragon · 02-06-2015 16:33

or jak chcesz już jechać na około...

Kod:

<html>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<style>
	.hidden{ display:none; }
	.mytable { border-collapse: collapse; width:100%; background-color:white; }
    .mytable-head { border:1px solid black;margin-bottom:0;padding-bottom:0; }
    .mytable-head td { border:1px solid black; }
    .mytable-body { border:1px solid black;border-top:0;margin-top:0;padding-top:0;margin-bottom:0;padding-bottom:0; }
    .mytable-body td { border:1px solid black;border-top:0;}
    .mytable-footer { border:1px solid black;border-top:0;margin-top:0;padding-top:0; }
    .mytable-footer td { border:1px solid black;border-top:0;}
</style>

<script type='text/javascript'>
	$(window).load(function(){
		$(document).ready(function() {
			$('.show').click(function() {
				$(this).closest('table').next('table').toggleClass('hidden');
			});
		});
	}); 
</script>
<table class="mytable mytable-head">
	<tr>
		<td><img class="show" src="http://theviralmedialab.org/wp-content/uploads/2014/04/160px-Anonymous_emblem.svg.png"></td>
		<td>x</td>
	</tr>
</table>
<table class="mytable mytable-body hidden">
	<tr>
		<td>
			gowienko 1
		</td>
	</tr>
</table>
<table class="mytable mytable-body">
	<tr>
		<td><img class="show" src="http://theviralmedialab.org/wp-content/uploads/2014/04/160px-Anonymous_emblem.svg.png"></td>
		<td>x</td>
	</tr>
</table>
<table class="mytable mytable-body hidden">
	<tr>
		<td>
			gowienko 2
		</td>
	</tr>
</table>
<table class="mytable mytable-body">
	<tr>
		<td><img class="show" src="http://theviralmedialab.org/wp-content/uploads/2014/04/160px-Anonymous_emblem.svg.png"></td>
		<td>x</td>
	</tr>
</table>
<table class="mytable mytable-footer hidden">
	<tr>
		<td>
			gowienko 3
		</td>
	</tr>
</table>
</html>

Criss26 OP · 02-06-2015 18:29

@Bazan ; @Mistrzu dragon ;
Mam taki skrypt:

Kod PHP:

<script type='text/javascript'>
	$(window).load(function(){
		$(document).ready(function() {
			$('.show').click(function() {
				$(this).closest('tr').next('tr').toggleClass('hidden');
			});
		});
	}); 
</script>

I w tabeli:

Kod PHP:

echo "<tr class='hidden'><td colspan='7' bgcolor=\"white\">" . $row[6] . "</td></tr>";

I to dziala idealnie. http://serwer1556037.home.pl/index.php?id=2
Tylko jak dodac do tego jakas animacje?

**zakius** · 02-06-2015 18:57

http://www.w3schools.com/css/css3_animations.asp
Dla widocznej klasy ustaw i chyba działa

Mistrzu dragon · 02-06-2015 20:24

Dodaj .fadeToggle() .toggle("slow") czy co tam chcesz (nawet w polaczeniu z css3) i tyle... google nie masz?

Criss26 OP · 02-06-2015 20:42

Czytalem, ze do tr nie da sie podpiac animacji.

**zakius** · 02-06-2015 20:45

chyba ktoś wspominał o tym żebyś to zrobił na divach a nie tabelach czo? xD

Temat: PHP/ Javascript ukrywanie/pokazywanie opisu.

Narzędzia tematu

Oceń ten temat

Informacje o temacie

Użytkownicy przeglądający temat

Podobne tematy

Zmiana opisu mikrofonu / Jak trwoga to do TORGA

Ukrywanie hasła sieci bezprzewodowej.

Zasilacz pomoc opisu.

Skrypt PHP - przesyłanie danych z formularza php do pliku .txt

[Poradnik] Ukrywanie danych, szyfrowanie wiadomości, ukrywanie tekstu w obrazie

Zakładki

Zakładki

Zasady postowania