[HTML][CSS][JavaScript] Podmiana linków Opcje

[obelix94]

Od kilku lat zajmuje się HTML, CSS, a od kilku miesięcy także PHP. Los sprawił że nie zaciekawiło mnie JS. A tera tego żałuje. Chciałbym na stronie umieścić coś takiego http://demos.mootools.net/Fx.Slide. Chodzi o efekt Vertical (slide out | slide in).

I teraz, chciałbym zmienić skrypt tak, aby było tylko POKAŻ, a gdy się na to kliknie to napis zmieni się na SCHOWAJ. Jednoczxeśnie podmienią się linki tak aby pod kliknięciu pokaż, treść by się pokazała, a po naciśnięciu schowaj treść by się schowała. Byłoby to coś podobnego do status: open (który tez się zmienia).


Proszę o pomoc bo jest mi to pilnie potrzbne!

[johnson]

do podmiany linków możesz użyć tego samego skryptu korzystając z show i hide, czyli:

po kliknięciu przycisku POKAZ:
- slide in twojego kontentu
- hide POKAZ
- show SCHOWAJ

po kliknięciu przycisku SCHOWAJ:
- slide out twojego kontentu
- show POKAZ
- hide SCHOWAJ

teraz to wszystko musisz zakodować w tej śmiesznej funkcji, nie powinno być większego problemu

[obelix94]

A ma ktoś moze takiego gotowca już zakodowanego. Bo ja się wogóle nie orientuje w tworzeniu czegokolwiek w JS. Umiem tylko przerabiać wartości i "czytać". A zresztą. Ma może ktoś takiego gotowca? Prosze, jest mi to bardzo potrzebne. A za nim przyczaje o co chodzi to mój termin minie. Proszę.

[bim2]

Zamiast mootools użyj jQuery (google.pl) I wtedy

[HTML] pobierz, plaintext 
<div id="text">TUTAJ TRESC</div>
<a href="#" ref="pokaz" >POKAZ</a>
<a href="#" ref="schowaj">SCHOWAJ</a>
<script>
$('#schowaj').hide();
$('#text').hide();
 
$('#pokaz').click(function(){
$('#schowaj').show();
$('#pokaz').hide();
$('#text').show();
});
 
$('#schowaj').click(function(){
$('#pokaz').show();
$('#schowaj').hide();
$('#text').hide();
});
</script>
[HTML] pobierz, plaintext 

[obelix94]

tam gdzie function to wpisać href z linku? tak? czy coś innego?

[erix]

~bim2, ref, to w jQuery #selektor? Chyba id...

~obelix94, nie, jQuery dopina zdarzenia.

Zmień tylko ref na id.

I w kodzie jeszcze dodaj w odpowiednich miejscach return false.

[HTML] pobierz, plaintext 
<script>
$('#schowaj').hide();
$('#text').hide();
 
$('#pokaz').click(function(){
$('#schowaj, #text').show();
$('#pokaz').hide();
return false;
});
 
$('#schowaj').click(function(){
$('#pokaz').show();
$('#schowaj, #text').hide();
return false;
});
</script>
[HTML] pobierz, plaintext 

[bim2]

mialobyc $('a[@ref=pokaz]'). Mój błąd.

[obelix94]

a gdzie wstawić adres linku?

a podajcie jescze poprawioną wersję tego skrypciku

taką ostateczną

Moze to wam pomoże mi pomóc 

KOD JAVA (demo.js)

[HTML] pobierz, plaintext 
window.addEvent('domready', function() {
 var status = {
 	'true': 'open',
 	'false': 'close'
 };
 
 //-vertical
 
 var myVerticalSlide = new Fx.Slide('vertical_slide');
 
 $('v_slidein').addEvent('click', function(e){
 	e.stop();
 	myVerticalSlide.slideIn();
 });
 
 $('v_slideout').addEvent('click', function(e){
 	e.stop();
 	myVerticalSlide.slideOut();
 });
 
 $('v_toggle').addEvent('click', function(e){
 	e.stop();
 	myVerticalSlide.toggle();
 });
 
 $('v_hide').addEvent('click', function(e){
 	e.stop();
 	myVerticalSlide.hide();
 	$('vertical_status').set('html', status[myVerticalSlide.open]);
 });
 
 $('v_show').addEvent('click', function(e){
 	e.stop();
 	myVerticalSlide.show();
 	$('vertical_status').set('html', status[myVerticalSlide.open]);
 });
 
 // When Vertical Slide ends its transition, we check for its status
 // note that complete will not affect 'hide' and 'show' methods
 myVerticalSlide.addEvent('complete', function() {
 	$('vertical_status').set('html', status[myVerticalSlide.open]);
 });
 
 
 //--horizontal
 var myHorizontalSlide = new Fx.Slide('horizontal_slide', {mode: 'horizontal'});
 
 $('h_slidein').addEvent('click', function(e){
 	e.stop();
 	myHorizontalSlide.slideIn();
 });
 
 $('h_slideout').addEvent('click', function(e){
 	e.stop();
 	myHorizontalSlide.slideOut();
 });
 
 $('h_toggle').addEvent('click', function(e){
 	e.stop();
 	myHorizontalSlide.toggle();
 });
 
 $('h_hide').addEvent('click', function(e){
 	e.stop();
 	myHorizontalSlide.hide();
 	$('horizontal_status').set('html', status[myHorizontalSlide.open]);
 });
 
 $('h_show').addEvent('click', function(e){
 	e.stop();
 	myHorizontalSlide.show();
 	$('horizontal_status').set('html', status[myHorizontalSlide.open]);
 });
 
 // When Horizontal Slide ends its transition, we check for its status
 // note that complete will not affect 'hide' and 'show' methods
 myHorizontalSlide.addEvent('complete', function() {
 	$('horizontal_status').set('html', status[myHorizontalSlide.open]);
 });
});
[HTML] pobierz, plaintext 

KOD HTML (index.html) - przerobiony trochę

[HTML] pobierz, plaintext 
<a id="v_slideout" href="#">UKRYJ</a>
<a id="v_slidein" href="#">pokaz</a>
<div id="vertical_slide">
Lorem ipsum dolor sit amet
</div>
<script>
$('#v_slideout').hide();
$('#text').hide();
 
$('#v_slidein').click(function(){
$('#v_slideout, #text').show();
$('#v_slidein').hide();
return false;
});
 
$('#v_slideout').click(function(){
$('#v_slidein').show();
$('#v_slideout, #text').hide();
return false;
});
</script>
[HTML] pobierz, plaintext 

No i nie działa. Jak to zrobić? Mógłby mi ktoś to dokładnie wytłumaczyć i pokazać gotowca? Albo chociaż dać gotowca - po kod jakoś zrozumiem. Proszę! - dostosujcie ten kodzik do mnie. Naprawde nie mam czasu. Proszę!





Nikt nie umie mi pomóc? To co to jest za forum?

[Mize]

Nikt nie umie mi pomóc? To co to jest za forum?

Zakładasz kolejny temat, w którym zadajesz pytanie, na które znajdziesz odpowiedź w http://php.net.pl/manual/pl/index.php lub dowolnym kursie.
Nie znasz podstaw języka i chcesz żeby wszyscy Ci dawali gotowce.
Forum jest po to by naprowadzić, doradzić, a nie zrobić za Ciebie.

Pozdrawiam.

[mike]

Zamykam.
To jest forum dyskusyjne gdzie problmy się rozwiązuje pomagając, podowiadając, ucząc się nawzajem. To nie jest giełda ofert i gotowców. Masz potrzebę a nie masz czasu i wiedzy? Zleć to komuś i zapłać za jego pracę a nie bezczelnie żądasz pomocy!

Jeśli chesz przenieść to na Giełdę ofert proszę o kontakt na PW z dowolnym moderatorem i grzecznie go poprosić.