pokazywanie opisu.

Wersja do druku

01-06-2015, 18:15
Criss26

PHP/ Javascript ukrywanie/pokazywanie opisu.

Czesc.
Mam repertuar filmow: http://serwer1556037.home.pl/index.php?id=2
Filmy wypisywane sa za pomoca petli while, po uprzednim zapytaniu do bazy.
I teraz jest problem. Musze zrobic cos takiego, ze dla kazdego filmu, po kliknieciu w miniaturke ma sie pokazywac/ukrywac opis filmu w danym wierszu.
Zeby rozroznic kazdy wiersz zrobilem:
$i=1;
while ()
{
wypisuje tabele.
podczas wypisywania tabeli z opisem:
echo "<td id='$i'>" . $row[6] . "</td>";
$i+=1;
}

Tylko jak to teraz podpiac pod jakis javascript, zeby pokazywal/ukrywal sie opis z danego wiersza.
01-06-2015, 18:19
zakius

Możesz albo starym sposobem dodać onclick i przekazywać id elementu do pokazania (display none/block zmieniasz) albo dołączać event po wczytaniu skryptu, reszta to samo.
Jak dane chcesz dociągać to jeszcze ajax, jak masz to nie ma problemu
01-06-2015, 18:33
Mistrzu dragon

Co ty za opis wciśniesz w taką rameczkę?
Ja w ogóle tego nie widzę.

Może jakiś onHover + popup albo wyświetla się kawałek opisu i możesz sobie rozwinąć/zwinąć?
01-06-2015, 18:38
Criss26

Pozniej zwieksze sobie miejsce na opis, narazie chodzi mi o to, zeby dzialalo :P
01-06-2015, 18:43
Mistrzu dragon

a to sorry :P
nie wiem jak w js ale w jquery wystarczy dodać klasę i zrobić toggle button czy co tam chcesz, easy peasy
01-06-2015, 18:49
Criss26

No probuje w jquery, ale jak mam wypisywanie danych w petli while to jak kazdemu kolejnemu wypisanemu opisowi nadac inne id? Zeby przypisac pozniej button do kazdego opisu oddzielnie?
01-06-2015, 19:17
zakius

na pewno da się to zrobić jakoś w kontekście klikniętego elementu, jakiś jego child łapiesz i działa bez przekazywania id

Kod:

document.onclick = function(evt) { var evt=window.event || evt; // window.event for IE if (!evt.target) evt.target=evt.srcElement; // extend target property for IE alert(evt.target); // target is clicked }

i masz w co kliknąłeś, z tego już wywleczesz jakoś odpowiedni podelement
01-06-2015, 19:18
Mistrzu dragon

Gdzieś z odmętów mojej strony, button działa, kwestia dostosowania jak.

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> <script type='text/javascript'> $(window).load(function(){ $(document).ready(function() { $('.show').click(function() { $(this).next('div').toggle("slow"); }); $('.hide').click(function() { $(this).parent().slideUp(); }); }); }); </script> <table border="1" width="50%"> <tr> <td>x</td> <td>x</td> <td><button class="show">Pokaz/ukryj</button><div class="slidingDiv">gowienko</div></td> </tr> <tr> <td>y</td> <td>y</td> <td><button class="show">Pokaz/ukryj</button><div class="slidingDiv">gowienko1</div></td> </tr> <tr> <td>z</td> <td>z</td> <td><button class="show">Pokaz/ukryj</button><div class="slidingDiv">gowienko2</div></td> </tr> </table> </html>
01-06-2015, 19:44
Criss26

@Mistrzu dragon ;
Troche pogrzebalem i dziala elegancko.
@zakius ;
Dla Ciebie tez rep+, dzieki wielkie Panowie!!
01-06-2015, 19:49
Mistrzu dragon

spoko tylko dopisz sobie w css

Kod:

.slidingDiv { display:none; }

bo wszystkie buttony masz otwarte , no i .hide w jquery nic nie robi tu chyba (kopiowałem na szybko)
01-06-2015, 19:58
Criss26

Cytuj:

Mistrzu dragon napisał

spoko tylko dopisz sobie w css

Kod:

.slidingDiv { display:none; }

bo wszystkie buttony masz otwarte , no i .hide w jquery nic nie robi tu chyba (kopiowałem na szybko)

Tego wlasnie szukalem jeszcze, dzieki znowu xD Zaraz potestuje, musze to jeszcze podpiac pod miniaturki zamiast buttonow, ale z tym powinienem sobie poradzic.
01-06-2015, 21:54
Criss26

@Mistrzu dragon ;
Chyba jednak nie dam rady.
Jesli dodam button obok diva, gdzie ma sie zmieniac opis, to wszystko jest okej. Jednak musze dodac ten button (albo cos innego) na miniaturce.Zeby po kliknieciu na nia opis sie chowal/pokazywal. Wiesz moze, jak trzeba zmodyfikowac ten skrypt, zeby tak zadzialalo?
01-06-2015, 22:08
2cztery7

wrzuć kod (js) to postaram się pomóc
01-06-2015, 22:10
Criss26

@2cztery7 ;
http://wklej.org/hash/810ac005d92/

Nie wiem czy sie polapiesz.
Skrypt zaczyna sie od 9 linii.
W linijce 70 jest miniaturka, do ktorej musze podpiac button/cokolwiek innego.
W linijce 76 jest div, zawierajacy opis.
01-06-2015, 22:16
2cztery7

a jak wrzucisz obrazek w diva z klasą show?
01-06-2015, 22:20
Criss26

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
01-06-2015, 22:40
2cztery7

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});
01-06-2015, 22:51
Criss26

Ale sam div chyba nie wystarczy do obrazka. Zrobilem tak jak napisales, i po kliknieciu w obrazek nic sie nie dzieje.
01-06-2015, 23:29
2cztery7

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>
02-06-2015, 04:45
Mistrzu dragon

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/
02-06-2015, 15:23
Criss26

@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.
02-06-2015, 15:45
Mistrzu dragon

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/)
02-06-2015, 16:06
Criss26

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">.
02-06-2015, 16:31
Bazan

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)
02-06-2015, 16:33
Mistrzu dragon

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>
02-06-2015, 18:29
Criss26

@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?
02-06-2015, 18:57
zakius

http://www.w3schools.com/css/css3_animations.asp
Dla widocznej klasy ustaw i chyba działa
02-06-2015, 20:24
Mistrzu dragon

Dodaj .fadeToggle() .toggle("slow") czy co tam chcesz (nawet w polaczeniu z css3) i tyle... google nie masz?
02-06-2015, 20:42
Criss26

Czytalem, ze do tr nie da sie podpiac animacji.
02-06-2015, 20:45
zakius

chyba ktoś wspominał o tym żebyś to zrobił na divach a nie tabelach czo? xD
02-06-2015, 20:50
Criss26

Ale przerabiac teraz to wszystko?
02-06-2015, 21:17
Bazan

I tak masz z automatu :D
Tak, powinienes to przepisac na divy. Co wiecej, mozez to nawet zawrzec w <article> to juz w ogole bedzie bajka :D

fadeToggle() z automatu robi ci display:none na koncu, wiec nie musisz w js usuwac/dodawac klasy hidden juz :)

Co do formatowania php/ html.

Pisanie echo "<td>... jest slabe

Lepiej jest:

Kod PHP:

<?php $articles = get_articles(); ?> <?php if (!empty($articles)) : ?> <div class="articles-container"> <?php foreach ($articles as $index => $article) : ?> <article> <div class="article-thumb"><img src="<?php echo $article['img']; ?>" alt=""></div> <h3 class="article-title"><?php echo $article['title']; ?></h3> <span class="article-year"><?php echo $article['year']; ?></span> </article> <?php endforeach; ?> </div> <?php endif; ?>

Oczywiscie to jest najprostszy sposob, dzisiaj prymitywny, bo warto uzyc systemow szablonow jak twig, blade, smarty itp. Ale to juz dalsza jazda. Na poczatku jazdy z php takie cos nie kluje tak strasznie w oczy jak pisanie wszystkiego przez echo. Tam jeszcze przed wyswietleniem danych warto zadbac o czyszczenie znakow za pomoca htmlspecialchars(), zeby przypadkowo nie rozsypal sie html przez nieprawidlowe znaki.

Zachowujesz dzieki temu kolorowanie skladni html, i php wklejasz tylko tam gdzie sa zmienne statyczne.
09-06-2015, 16:31
Criss26

@Bazan ; @Mistrzu dragon ; @zakius ; @2cztery7 ;
Panowie, ostatnia juz sprawa.
Zrobilem ta tabele na divach.
http://wklej.org/hash/39e80cd23bb/
Tutaj css do tabelki:
http://pastebin.com/WgbwfRDD

I mam problem z tym, zeby podpiac ten obrazek do diva z opisem.
Rozchodzi sie zapewne o ta linijke:

Kod PHP:

$('.show').click(function() { $(this).closest('tr').next('tr').fadeToggle().toggleClass('hidden');

Pomozecie ja zmodyfikowac pod tego diva?
09-06-2015, 17:58
Mistrzu dragon

Kod:

$('.show').click(function() { $(this).closest('.tytuly').next(".hidden, .open").toggleClass('hidden open'); });

css

Kod:

.hidden { overflow:hidden; display: none; width: 800px; height: 500px; border: 1px rgb(0, 0, 0) solid; background-color: red; } .open { }

Z serii można ale po co : jeżeli dane są w 1 linii to z palcem w dupie robi się takie coś na tabelach a nie na divach, wystarczy spojrzeć na imdb czy filmweb.
09-06-2015, 17:59
Wielkie Zło

Cytuj:

Mistrzu dragon napisał

Kod:

$('.show').click(function() { $(this).closest('.tytuly').next(".hidden, .open").toggleClass('hidden open'); });

css

Kod:

.hidden { overflow:hidden; display: none; width: 800px; height: 500px; border: 1px rgb(0, 0, 0) solid; background-color: red; } .open { }

Z serii można ale po co : jeżeli dane są w 1 linii to z palcem w dupie robi się takie coś na tabelach a nie na divach, wystarczy spojrzeć na imdb czy filmweb.

W jakim celu overflow, width, height, border, background-color jak display none?
09-06-2015, 18:01
Criss26

@Mistrzu dragon ;

Dziala, dzieki... po raz kolejny.
09-06-2015, 18:27
Mistrzu dragon

Cytuj:

Wielkie Zło napisał

W jakim celu overflow, width, height, border, background-color jak display none?

to jego css, ja zrobiłem tylko jquery