Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS][JavaScript] Podmiana linków
Forum PHP.pl > Forum > Przedszkole
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) smile.gif I wtedy
  1. <div id="text">TUTAJ TRESC</div>
  2. <a href="#" ref="pokaz" >POKAZ</a>
  3. <a href="#" ref="schowaj">SCHOWAJ</a>
  4. $('#schowaj').hide();
  5. $('#text').hide();
  6.  
  7. $('#pokaz').click(function(){
  8. $('#schowaj').show();
  9. $('#pokaz').hide();
  10. $('#text').show();
  11. });
  12.  
  13. $('#schowaj').click(function(){
  14. $('#pokaz').show();
  15. $('#schowaj').hide();
  16. $('#text').hide();
  17. });
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. winksmiley.jpg

Zmień tylko ref na id.

I w kodzie jeszcze dodaj w odpowiednich miejscach return false.

  1. $('#schowaj').hide();
  2. $('#text').hide();
  3.  
  4. $('#pokaz').click(function(){
  5. $('#schowaj, #text').show();
  6. $('#pokaz').hide();
  7. return false;
  8. });
  9.  
  10. $('#schowaj').click(function(){
  11. $('#pokaz').show();
  12. $('#schowaj, #text').hide();
  13. return false;
  14. });
bim2
mialobyc $('a[@ref=pokaz]'). haha.gif Mój błąd.
obelix94
a gdzie wstawić adres linku?

a podajcie jescze poprawioną wersję tego skrypciku dry.gif

taką ostateczną sciana.gif

Moze to wam pomoże mi pomóc  czarodziej.gif

KOD JAVA (demo.js)

  1. window.addEvent('domready', function() {
  2.  var status = {
  3.   'true': 'open',
  4.   'false': 'close'
  5.  };
  6.  
  7.  //-vertical
  8.  
  9.  var myVerticalSlide = new Fx.Slide('vertical_slide');
  10.  
  11.  $('v_slidein').addEvent('click', function(e){
  12.   e.stop();
  13.   myVerticalSlide.slideIn();
  14.  });
  15.  
  16.  $('v_slideout').addEvent('click', function(e){
  17.   e.stop();
  18.   myVerticalSlide.slideOut();
  19.  });
  20.  
  21.  $('v_toggle').addEvent('click', function(e){
  22.   e.stop();
  23.   myVerticalSlide.toggle();
  24.  });
  25.  
  26.  $('v_hide').addEvent('click', function(e){
  27.   e.stop();
  28.   myVerticalSlide.hide();
  29.   $('vertical_status').set('html', status[myVerticalSlide.open]);
  30.  });
  31.  
  32.  $('v_show').addEvent('click', function(e){
  33.   e.stop();
  34.   myVerticalSlide.show();
  35.   $('vertical_status').set('html', status[myVerticalSlide.open]);
  36.  });
  37.  
  38.  // When Vertical Slide ends its transition, we check for its status
  39.  // note that complete will not affect 'hide' and 'show' methods
  40.  myVerticalSlide.addEvent('complete', function() {
  41.   $('vertical_status').set('html', status[myVerticalSlide.open]);
  42.  });
  43.  
  44.  
  45.  //--horizontal
  46.  var myHorizontalSlide = new Fx.Slide('horizontal_slide', {mode: 'horizontal'});
  47.  
  48.  $('h_slidein').addEvent('click', function(e){
  49.   e.stop();
  50.   myHorizontalSlide.slideIn();
  51.  });
  52.  
  53.  $('h_slideout').addEvent('click', function(e){
  54.   e.stop();
  55.   myHorizontalSlide.slideOut();
  56.  });
  57.  
  58.  $('h_toggle').addEvent('click', function(e){
  59.   e.stop();
  60.   myHorizontalSlide.toggle();
  61.  });
  62.  
  63.  $('h_hide').addEvent('click', function(e){
  64.   e.stop();
  65.   myHorizontalSlide.hide();
  66.   $('horizontal_status').set('html', status[myHorizontalSlide.open]);
  67.  });
  68.  
  69.  $('h_show').addEvent('click', function(e){
  70.   e.stop();
  71.   myHorizontalSlide.show();
  72.   $('horizontal_status').set('html', status[myHorizontalSlide.open]);
  73.  });
  74.  
  75.  // When Horizontal Slide ends its transition, we check for its status
  76.  // note that complete will not affect 'hide' and 'show' methods
  77.  myHorizontalSlide.addEvent('complete', function() {
  78.   $('horizontal_status').set('html', status[myHorizontalSlide.open]);
  79.  });
  80. });


KOD HTML (index.html) - przerobiony trochę

  1. <a id="v_slideout" href="#">UKRYJ</a>
  2. <a id="v_slidein" href="#">pokaz</a>
  3. <div id="vertical_slide">
  4. Lorem ipsum dolor sit amet
  5. </div>
  6. $('#v_slideout').hide();
  7. $('#text').hide();
  8.  
  9. $('#v_slidein').click(function(){
  10. $('#v_slideout, #text').show();
  11. $('#v_slidein').hide();
  12. return false;
  13. });
  14.  
  15. $('#v_slideout').click(function(){
  16. $('#v_slidein').show();
  17. $('#v_slideout, #text').hide();
  18. return false;
  19. });


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
Cytat(obelix94 @ 16.11.2008, 12:14:43 ) *

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ć.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.