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
Wersja do druku
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
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:
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});Kod:$('.showDescription').click(function(){
$(this).next('div').toggle('slow');
});
Ale sam div chyba nie wystarczy do obrazka. Zrobilem tak jak napisales, i po kliknieciu w obrazek nic sie nie dzieje.
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>
jemu chodzi chyba o coś takiego
#edKod:<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>
nawet dam na fidlu żebyście się nie musieli jebać z kopiowaniem
https://jsfiddle.net/kpgec236/1/
@Mistrzu dragon ;
A da rade zrobic, zeby opis pokazywal/ukrywal sie ponizej tych danych a nie obok?
Chodzi mi o cos takiego.
https://i.imgur.com/XZRrBqb.jpg
Klikasz w miniaturke i opis pojawia sie ponizej, w drugim wierszu.
https://i.imgur.com/AhThuX0.jpg
I przesuwa reszte tabeli ponizej.
Nie wiem jak zrobić td na całą szerokość.
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/)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>
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">.
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)
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>
@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?
http://www.w3schools.com/css/css3_animations.asp
Dla widocznej klasy ustaw i chyba działa
Dodaj .fadeToggle() .toggle("slow") czy co tam chcesz (nawet w polaczeniu z css3) i tyle... google nie masz?
Czytalem, ze do tr nie da sie podpiac animacji.
chyba ktoś wspominał o tym żebyś to zrobił na divach a nie tabelach czo? xD