• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Przewijane menu w JavaScript

Object Storage Arubacloud
+1 głos
361 wizyt
pytanie zadane 12 lipca 2021 w JavaScript przez xjafajx Użytkownik (740 p.)

Cześć,

Mam problem z moim menu

 

Posiadam dwa przyciski (strzałki w lewo i prawo) jak widać na załączonym obrazku.

Te strzałki zmieniają mi tekst do góry (aktualnie napis Kontakty)

Jak mogę podpiąć pod te przyciski żeby zmieniały mi zawartość strony.
Np jeżeli kliknę w prawą strzałkę to przejdzie mi z strony Kontakt na stronę główną.
Niestety nie wiem jak podpiąć do tego przełączanie stron

Przesyłam Wam kod w HTML i JS.

Z góry dziękuję za wszelką pomoc.

<header class="t-site-header">
    <div class="full_container" id="mobile_control">
        <div class="bottom">
          <div class="nav">
            <span id="next" onclick="moon('next')" class="action"><i class="material-icons">keyboard_arrow_left</i></span>
            <span id="prev" onclick="moon('prev')" class="action"><i class="material-icons">keyboard_arrow_right</i></span>
          </div>
          <div class="orbit">
            <div class="planet_container">
              <div class="planet pt earth" id="pl0">
                <div class="moon">
                  <span></span>
                </div>
              </div>
              <div class="planet mars" id="pl1">
                <div class="moon">
                  <span></span>
                </div>
              </div>
              <div class="planet jupiter" id="pl2">
                <div class="moon">
                  <span></span>
                </div>
              </div>
              <div class="planet saturn" id="pl3">
                <div class="moon">
                  <span></span>
                </div>
              </div>
              <div class="planet uranus" id="pl4">
                <div class="moon">
                  <span></span>
                </div>
              </div>
              <div class="planet neptune" id="pl5">
                <div class="moon">
                  <span></span>
                </div>
              </div>
              <div class="planet mercury" id="pl6">
                <div class="moon">
                  <span></span>
                </div>
              </div>
              <div class="planet venus" id="pl7">
                <div class="moon">
                  <span></span>
                </div>
              </div>
           
            </div>
            <div class="name_container">
              <p class="pn" id="show_pathname"></p>
            </div>
          </div>
        </div>
    </div>
</header>
var element = document.getElementById('mobile_control');
var hammertime = new Hammer(element);


hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
hammertime.on('swipeleft', function(ev) {
  cmove("prev");
});
hammertime.on('swiperight', function(ev) {
  cmove("next");
});

$(".action").on("click", function(){
  cmove($(this).attr('id'));
});

var angle = 0;
var planet_id = 0;

function cmove(dir){
  var n_planet = 8, next_id;
  var prev, next;
  var top = $("#pl"+ planet_id);
  var orbit = $(".planet_container");
  
  top.removeClass("pt");
  
  if(planet_id == 0){
    prev = $("#pl"+ (n_planet-1));
    next = $("#pl"+ (planet_id+1)%n_planet);
  }else{
    prev = $("#pl"+ (planet_id-1));
    next = $("#pl"+ (planet_id+1)%n_planet);
  }
  
  if(dir == "prev"){
    next_id = (planet_id + 1) % n_planet;
    angle -= 45;
    next.addClass("pt");
    planet_id++;
  }else{
    if(planet_id == 0){
      next_id = 7;
      planet_id = 7;
    }else{
      next_id = planet_id-1;
      --planet_id;
    }
    angle += 45;
    prev.addClass("pt");
  }
  
  $('.pn').each(function(){
    $(this).html(planet[next_id].replace( "<span class='letter'>$&</span>"));
  });

  anime.timeline({})
  .add({
    targets: '.pn .letter',
    translateX: [40,0],
    translateZ: 0,
    opacity: [0,1],
    easing: "easeOutExpo",
    duration: 1200,
    delay: function(el, i) {
      return 500 + 30 * i;
    }
  });
  
  orbit.css("transform", "rotateZ(" + angle + "deg)");
  

}
var planet = ["Falcowanie", "Kontakt", "Referencje","KROHM", "IT", "PLC", "M-VIBN", "Digitalna fabryka"];

let loocation_path = location.pathname.split('/');

var path = loocation_path[loocation_path.length - 1];

switch(path){
  case 'rollfalzen.html':
    while(planet[0] != 'Falcowanie'){
      let head = planet.shift();
      planet.push(head);
    };
    var nazwa = document.getElementById('show_pathname');
    nazwa.innerHTML = "Falcowanie";
    break;
  case 'contact.html':
    while(planet[0] != 'Kontakt'){
      let head = planet.shift();
      planet.push(head);
    };
    var nazwa = document.getElementById('show_pathname');
    nazwa.innerHTML = "Kontakt";
    break;  
  case 'reference.html':
    while(planet[0] != 'Referencje'){
      let head = planet.shift();
      planet.push(head);
    };
    var nazwa = document.getElementById('show_pathname');
    nazwa.innerHTML = "Referencje";     
    break; 
  case 'krohm.html':
    while(planet[0] != 'KROHM'){
      let head = planet.shift();
      planet.push(head);
    };
    var nazwa = document.getElementById('show_pathname');
    nazwa.innerHTML = "KROHM";     
    break; 
  case 'information_technology.html':
    while(planet[0] != 'IT'){
      let head = planet.shift();
      planet.push(head);
    };
    var nazwa = document.getElementById('show_pathname');
    nazwa.innerHTML = "IT";     
    break; 
  case 'plc.html':
    while(planet[0] != 'PLC'){
      let head = planet.shift();
      planet.push(head);
    };
    var nazwa = document.getElementById('show_pathname');
    nazwa.innerHTML = "PLC";     
    break; 
  case 'm_vibn.html':
    while(planet[0] != 'M-VIBN'){
      let head = planet.shift();
      planet.push(head);
    };
    var nazwa = document.getElementById('show_pathname');
    nazwa.innerHTML = "M-VIBN";     
    break; 
  case 'digital_factory.html':
    while(planet[0] != 'Digitalna fabryka'){
      let head = planet.shift();
      planet.push(head);
    };
    var nazwa = document.getElementById('show_pathname');
    nazwa.innerHTML = "Digitalna fabryka";     
    break;  
}

const planets = document.querySelectorAll('.moon');

var moon_id = 0;

function moon(direction){

  var n_planet = 8, moon_next;

  if(direction == "prev"){
    moon_next = (moon_id + 1) % n_planet;
    moon_id++;
  } else {
    if(moon_id == 0){
      moon_next = 7;
      moon_id = 7;
    } else {
      moon_next = moon_id - 1;
      --moon_id;
    }
  };

  planets.forEach( ( planet, i ) => {
    if ( i === moon_next ) {
        planet.style.visibility = 'visible';
        console.log(moon_next);
    } else {
        planet.style.visibility = 'hidden';
    }
  } );
};
planets.forEach( ( planet, i ) => {
  if ( i === 0 ) {
      planet.style.visibility = 'visible';
  } else {
      planet.style.visibility = 'hidden';
  }
} );

 

1
komentarz 13 lipca 2021 przez ScriptyChris Mędrzec (190,190 p.)

Niestety nie wiem jak podpiąć do tego przełączanie stron

Chodzi o zmianę adresu strony w przeglądarce (nawigacja), czy o przełączenie jakiegoś taba na stronie?

komentarz 13 lipca 2021 przez xjafajx Użytkownik (740 p.)
Zmianę adresu w przeglądarce.

1 odpowiedź

+1 głos
odpowiedź 13 lipca 2021 przez ScriptyChris Mędrzec (190,190 p.)
Skoro chcesz zmienić adres strony po kliknięciu w przycisk, to dlaczego nie wstawisz tam zwykłego linka (zamiast przycisku)?
komentarz 13 lipca 2021 przez xjafajx Użytkownik (740 p.)
Ponieważ okrąg na którym znajdują się cyrkle się obraca a jak dodam tam zwykłe linki to będzie mi przeładowywał stronę (odświeżał) a ja nie chcę żeby to robił tylko chcę żeby zmieniał zawartość strony bez odświeżania
komentarz 13 lipca 2021 przez ScriptyChris Mędrzec (190,190 p.)

W jaki sposób w Twojej apce działa przechodzenie pomiędzy stronami? Jeśli chcesz mieć możliwość przechodzenia między podstronami bez ich przeładowania, to aplikacja powinna działać w formie Single Page.

komentarz 13 lipca 2021 przez xjafajx Użytkownik (740 p.)
Każda podstrona u mnie ma osobny plik.

Nie ma możliwości zmiany podstrony bez przeładowania?

Bo chcę żeby osoba która wpiszę np. www.cos.pl/index przeszła od razu na stronę główną a jak wpiszę www.cos.pl/contact to przeniesie na stronę Kontakt.

Przy przyciskach ma mi zmieniać zawartość podstrony wraz z linkiem bez odświeżania
komentarz 13 lipca 2021 przez ScriptyChris Mędrzec (190,190 p.)

Nie ma możliwości zmiany podstrony bez przeładowania?

Jest - ładowanie treści asynchronicznie (np. poprzez Ajax) i aktualizacja DOM-u strony JavaScriptem. Na tym opiera się wspomniane Single Page Application.

komentarz 13 lipca 2021 przez xjafajx Użytkownik (740 p.)
A będzie możliwość funkcjonowania strony tak jak opisałem wyżej.

 

Cytuję

"Bo chcę żeby osoba która wpiszę np. www.cos.pl/index przeszła od razu na stronę główną a jak wpiszę www.cos.pl/contact to przeniesie na stronę Kontakt.

 

Przy przyciskach ma mi zmieniać zawartość podstrony wraz z linkiem bez odświeżania"
komentarz 13 lipca 2021 przez ScriptyChris Mędrzec (190,190 p.)

Tak, serwer dla wszystkich ścieżek (w tym podstron) będzie zwracać plik index.html, a tam - na podstawie zmapowanych ścieżek - routing apki po stronie frontu będzie decydował, którą podstronę wyświetlić bez przeładowania. Tylko że przepisanie całej apki na SPA może nie być pracą na przysłowiowe "5 minut". Więc jeśli potrzeba Ci takiego ficzera tylko dla jednej sekcji strony, to zastanowił bym się czy jest sens to robić, albo ewentualnie próbował połączenia obu form - SPA i MPA.

Dlaczego akurat nawigacja z menu strony ma działać bez przeładowania, a inne miejsca na stronie już nie? Zapytałeś o taką możliwość w konkretnym kontekście, stąd moje pytanie.

2
komentarz 13 lipca 2021 przez xjafajx Użytkownik (740 p.)
Przemyślałem to i doszedłem do wniosku że mój pomysł nie ma sensu.

Najlepiej zrobić to w SPA jako jeden plik.

Dzięki za pomoc.

Mam nadzieję że poradników o tym będzie dużo i dam radę

Podobne pytania

0 głosów
2 odpowiedzi 2,725 wizyt
pytanie zadane 31 sierpnia 2016 w JavaScript przez Q_Nick Mądrala (5,010 p.)
0 głosów
1 odpowiedź 248 wizyt
pytanie zadane 4 listopada 2018 w JavaScript przez Pawel82 Użytkownik (740 p.)
0 głosów
5 odpowiedzi 945 wizyt
pytanie zadane 15 lutego 2016 w JavaScript przez uRTLy Bywalec (2,420 p.)

92,681 zapytań

141,583 odpowiedzi

320,070 komentarzy

62,041 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...