Problem: Podmiana linków

[ZjedzKota]

Witam wszystkich serdecznie po mojej dość długiej nie obecności. Zwracam się do was z prośbą o pomoc w rozwiązaniu pewnego problemu, z którym nie daję sobie rady. Mam następujące fragmenty kodu

 

Wykonawca 1
</pre>
<ul class="wykonawcy">
Utwór 1
Utwór 2
Utwór 3
Utwór 4
Utwór 5
Utwór 6
Utwór 7

oraz

 

Wykonawca 1: Nazwa utworu

Chcę, żeby po kliknięciu w link na liście, pojawiał się teledysk. Mógłbym do każdego utworu robić osobną listę z teledyskiem, ale tych jest kilkaset, więc mija się to z celem. Drugim moim pomysłem, było zapisywanie informacji o utworach do tablic, i wyświetlanie tych informacji po kliknięciu na odpowiednie linki, ale nie udało mi się tego dokonać, bo php ciągle sypał błędami. Czy są jakieś inne metody, by wyświetlać te dane, poza tablicami, i oczywiście poza idiotycznym pomysłem z robieniem plików do każdego z osobna? Za każdą pomoc będę bardzo wdzięczny.

Pozdrawiam serdecznie

[Gość Gosc]

musisz polaczyc javascript i php,

php generuje ci tablice dla javascript

pod linki podlaczasz jakas funkcje np:

Utwor 1

 

 

a w funkcji wyswietl odwolujesz sie do tablicy z przekazanym indeksem, pobierasz link do filmu i wpisujesz zawartosc DIV'a przy pomocy DHTML (javascript, np DOM Model)

 

inna mozliwoscia jest skorzystanie z ajaxa, wtedy musisz miec po stronie serwera plik php, ktory na podstawie przekazanego indeksu bedzie podawac link do filmu, ale problem podmiany dynamicznje fragmentu strony jest taki sam, wiec znow dhtml/javascript, moglbys prosciej uzywajac tagu

[ZjedzKota]

@tjviking: dzięki :) Tej całej zabawy z Javascript się boje, bo niezbyt umiem ten język, więc skorzystam z tego w ostateczności.

Mam jeszcze taki pomysł z generowaniem plików przez php. W bazie danych mam te linki, więc może dałoby się to zrobić tak, że po kliknięciu w link php tworzyłby nowy plik a w odpowiednie miejsce wklejał odpowiedni link z bazy danych? Z php jestem początkujący, ale jeśli to dobry pomysł to dam sobie z tym radę, jeśli jednak to zły pomysł, to prosiłbym o jakąś podpowiedź co do tego JS, jak powinna wyglądać ta funkcja, co mam poszukać w google, albo jaki kurs przeczytać żeby zrobić to samemu. Wiem że proszę o zbyt wiele, ale mam jeszcze półtora tygodnia żeby to wszystko działo i zero konkretnych pomysłów :/

[Knysha]

Wykonawca 1

• Utwór 1

• Utwór 2
• Utwór 3
• Utwór 4
• Utwór 5
• Utwór 6
• Utwór 7

Wykonawca 1: Nazwa utworu

- indywidualne ID

- indywidualne ID oparte na

+ slowo np. "Player"

 

Prostą funkcją jQuery możesz zmieniać CSS'owy display - none : block + dodawać bądź usuwać klasy z aktywnej "zakładki" w

- addClass, removeClass

 

Voila ;)

 

Sorki, że tak lakonicznie, ale jestem bardzo zarobiony w pracy i nie mam jak teraz szerzej tego opisać :)

 

Tutaj masz na szybko kawałek kodu, który pisałem do najnowszej realizacji:

 

jQuery("#podajCene, #jestemZainteresowany").click(function(){

var klikany = jQuery(this).attr("id");

var content = klikany + "Content";

jQuery('#'+ content).animate({opacity: 'toggle', height: 'toggle'}, 300);

Zamiast $ jest jQuery - musiałem korzystać z noConflict(); w związku z koniecznością wykorzystywanego prototype'a do innych skryptów.

 

Pozdrawiam :)

[ZjedzKota]

@knysha: Pomysł z jQuery jest genialny :) Zrobiłem to jednak trochę inaczej niż mi pokazałeś:

 

$(function(){
		$('#pll01').click(function(){
			$('#pl01').show();
			$('#pl00').hide();
			$('#pl02').hide();
			$('#pl03').hide();
			$('#pl04').hide();
			$('#pl05').hide();
			$('#pl06').hide();
		});
	});

 

#pll01 - to link, po którego kliknięciu ma pojawić się #pl01. Jednak ta funkcja jest mocno upośledzona, bo w przykładzie powyższym muszę przepisać to 6 razy, a mam w bazie wykonawców, do których jest po 40 i więcej linków. Sprzydałaby się jakaś funkcja, i czuje że odpowiedź podałeś mi tutaj:

 

jQuery("#podajCene, #jestemZainteresowany").click(function(){

var klikany = jQuery(this).attr("id");

var content = klikany + "Content";

jQuery('#'+ content).animate({opacity: 'toggle', height: 'toggle'}, 300);

 

ale niestety nie mam zielonego pojęcia jak mam to wykorzystać u siebie :(

[Knysha]

jQuery("#podajCene, #jestemZainteresowany").click(function(){

var klikany = jQuery(this).attr("id");

var content = klikany + "Content";

jQuery('#'+ content).animate({opacity: 'toggle', height: 'toggle'}, 300);

 

Zmienna klikany odpowiada za pobranie atrybutu ID klikanego elementu. Zmienna content to div, który zawiera treść dla danego przełącznika - jak możesz zauważyć, łączę w nim zawartość zmiennej klikany (w tym przypadku: podajCene bądź jestemZainteresowany) oraz tekst "Content", przez co mogę jednym kliknięciem kontrolować div o nazwie np. podajCeneContent

 

Odpowiednim selectorem wybieraj element, który będzie korzystał z funkcji click(), a później podmieniaj ( show() bądź hide() ) treści w divach, bądź ukrywaj całe div'y.

 

Polecam zapoznać się z selectorem :not() - http://api.jquery.com/not-selector/

 

Po przeczytaniu opisu będzie chyba wszystko wiadome ;)

[ZjedzKota]

Dalej tego nie rozumiem choć siedziałem nad tym długo :/ Linki, które mają pokazywać/ukrywać elementy listy z odsyłaczami do youtube mają ID o nazwie pl01, pl02, pl03 i tak dalej, z kolei elementy listy z odsyłaczami do youtube mają ID ply01, ply02, ply03 i tak dalej. Wywnioskowałem tyle, że ID odsyłaczy mam ustawić na pl, a numery ma dodać jQuery, chyba że się mylę.

Jeśli nie uda mi się tego rozkminić, to zrobię to tak jak napisałem w poscie 5, bo czasu mam coraz mniej, później, jak już będę miał czas przysiądę nad nauką javascript i jQuery, bo z tego co widzę, to teraz są to standardy w sieci, zresztą nie bez powodu.

 

@knysha: Wielkie dzięki za poświęcenie mi swojego czasu, gdyby nie Ty, straciłbym wszelką motywację do dalszej pracy. Dziękuję :)

[Knysha]

Dalej tego nie rozumiem choć siedziałem nad tym długo :/ Linki, które mają pokazywać/ukrywać elementy listy z odsyłaczami do youtube mają ID o nazwie pl01, pl02, pl03 i tak dalej, z kolei elementy listy z odsyłaczami do youtube mają ID ply01, ply02, ply03 i tak dalej. Wywnioskowałem tyle, że ID odsyłaczy mam ustawić na pl, a numery ma dodać jQuery, chyba że się mylę.

 

Dobrze zrozumiałeś :)

 

Cały trick polega na tym, abym tak napisać nazwy, żeby nie trzeba było dużo zmieniać poprzez skrypt.

 

W moim przykładzie elementy listy oraz div'y mają identyczny początek nazwy -- np. podajCene, a div z filmem ma dodane na końcu ID słowo Content - o wiele łatwiej jest napisać skrypt, który doda do całego ciągu znaków kolejne na jego końcu, niźli brać oryginalny ciąg znaków (u Ciebie: pl01, pl02 itp.), rozbijać go na dwie części np. na pl oraz 01, a dopiero później wstawiać literę y pomiędzy te dwa ciągi.

 

Proponuję wprowadzenie następującej nomenklatury:

- elementy listy

-- ID = button1, button2 itp.

- div'y z filmami -- opdowiednio ID = button1movie, button2movie itp.

 

Podczas projektowania interfejsu i późniejszego pisania skryptów staram się w maksymalny sposób ułatwić sobie, jak i kolejnym programistom (wyznaję prostą, ale skuteczną zasadę: programuj tak, jakby programista który po tobie będzie poprawiał, jest seryjnym zabójcą i zna twój adres zamieszkania ;) ) proces tworzenia.

 

Pozdrawiam! :)

[ZjedzKota]

Żeby nie zaśmiecać forum moimi problemami, napiszę jeszcze o drugim moim problemie z linkami - tym razem chodzi o główne menu. W głównym menu mam 6 linków w linii poziomej, a za tymi linkami musi zmieścić się wyszukiwarka. Na razie mam to zrobione tak:

Tutaj każdy element listy menu jest wyświetlany w osobnym bloku, tak że żaden na siebie nie zachodzi - niestety przez takie rozwiązanie moja wyszukiwarka już się nie mieści. Chciałbym żeby to wyglądało tak:

 

 

Wiem, że na tych obrazkach słabo widać w czym tkwi problem, chodzi mi o to, żeby bloki z elementami listy nachodziły na siebie. Jest jakaś możliwość żeby to zrobić w css? czy znowu muszę sięgać po całkowicie nie zrozumiałego, ale wszechstronnego JS?

Z góry dziękuję za odpowiedź, pozdrawiam :)

[torm]

żeby bloki na siebie nachodziły... możesz dać im w CSS position:absolute;

[Knysha]

Zależy w czym trzymasz te linki. W UL wystarczy nałożyć display: inline bądź floaty' na LI, a później tylko marginami załatwić sprawę :)

[ZjedzKota]

Sorry za te pytanie, spanikowałem. Jestem ostatnio tak zestresowany tą stroną, że szukam skomplikowanych rozwiązań to prostych zadań. Dzięki za odpowiedzi :)