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

Wyświetlanie karty przez prosty slajder js ale tylko te które będą mieściły w żądanym czasie

Object Storage Arubacloud
0 głosów
344 wizyt
pytanie zadane 17 grudnia 2022 w JavaScript przez gatka84 Bywalec (2,150 p.)
edycja 19 grudnia 2022 przez gatka84

Witajcie mam prostego slajdera który wyświetla dane przez php z bazy i teraz kombinuje jak zrobić żeby dane były wyświetlane (a dokładnie konkretna karta z tymi danymi) przez określony czas tzn, np zaznaczam że ma być od 12-12-2022 do 15-12-2022 się wyświetlać i po tym czasie już nie i przed tym czasem też nie i mam problem bo nie bardzo umiem wykombinować jak ukryć karty(div) żeby był pomijany przez slajdera jeśli nie spełni tych kryteriów

<section id="news">
  <div class="blog-slider">
    <div class="do-wybrania">
      <div class="blog-slider__item" data-start="<?= $homeInfoo['info_add']; ?>" data-stop="<?= $homeInfoo['info_end']; ?>">    
       <div class="blog-slider__img ">
          <img src="" alt="">
        </div>
        <div class="blog-slider__content">
          <span class="blog-slider__code"></span>
          <div class="blog-slider__title"></div>
          <div class="blog-slider__text">test</div>
        </div>
      </div>
      <?php
      $homeInfo = "SELECT * FROM info WHERE status='0' LIMIT 6";
      $homeInfo_run = mysqli_query($con, $homeInfo);
      if (mysqli_num_rows($homeInfo_run) > 0) {
        foreach ($homeInfo_run as $homeInfoo) {
      ?>
          <div class="blog-slider__item">
            <div class="blog-slider__img">
              <img src="./files/info/<?= $homeInfoo['image']; ?>" alt="<?= $homeInfoo['title']; ?>">
            </div>
            <div class="blog-slider__content">
              <span class="blog-slider__code"><?= $homeInfoo['data_info']; ?></span>
              <div class="blog-slider__title"><?= $homeInfoo['title']; ?></div>
              <div class="blog-slider__text"><?= $homeInfoo['text']; ?></div>
            </div>
          </div>
      <?php }
      } ?>
    </div>
    <div class="blog-slider__pagination">
      <div class="prev_info"><i class="fa fa-chevron-circle-left" style="font-size: 28px;color:aqua; cursor: pointer;"></i></div>
      <div class="next_info"><i class="fa fa-chevron-circle-right" style="font-size: 28px; color:aqua; cursor: pointer;"></i></div>
    </div>
  </div>
  </div>
</section>

jest obsługiwane przez

const info = document.querySelector(".do-wybrania").children;
const prev_info = document.querySelector(".prev_info");
const next_info = document.querySelector(".next_info");
let indexx = 0;
function autoPlay(){
next_infoSlide();
//   updateDotIndicator();
}
function next_infoSlide(){
  if (indexx == info.length - 1) {
    indexx = 0;
  }
  else{
    indexx++;
  }
  changeSlide();
}
function changeSlide(){
  for(let i=0; i < info.length; i++){
    info[i].classList.remove("active");
  }
  info[indexx].classList.add("active");
}
let timer_info = setInterval(autoPlay, 6000);
function prev_infoSlide(){
    if (indexx == 0) {
    indexx = info.length - 1;
    }
    else{
    indexx--;
    }
    changeSlide();
}
prev_info.addEventListener("click", function(){
    prev_infoSlide();
    //updateDotIndicator();
    resetTimer_info();
    })
    next_info.addEventListener("click", function(){
    next_infoSlide();
    //updateDotIndicator();
    resetTimer_info();
    })    
    function resetTimer_info(){
    clearInterval(timer_info);
    timer_info = setInterval(autoPlay, 5000);
    }

i teraz nie wiem jak do tego dodać

const HOURS_24x = 24 * 60 * 60 * 1000;
window.addEventListener('DOMContentLoaded', loadx);
function loadx() {
  const elements = document.querySelectorAll('.blog-slider__item .blog-slider__content span:first-child');
 
  for (const element of elements) {     
    const arrMinTime = element.closest('.blog-slider__item').dataset.start.split('-'),
          arrMaxTime = element.closest('.blog-slider__item').dataset.stop.split('-'),
          minTime = new Date(arrMinTime[2], parseInt(arrMinTime[1], 10) - 1, arrMinTime[0]),
          maxTime = new Date(arrMaxTime[2], parseInt(arrMaxTime[1], 10) - 1, arrMaxTime[0]),
          offTime = new Date(maxTime.getTime() + HOURS_24x),
          curTime = Date.now();
    if (curTime >= minTime.getTime() && curTime <= offTime.getTime())
    element.closest('div.blog-slider__item').classList.remove('hidex');
    else
    element.closest('div.blog-slider__item').classList.add('hidex');
  } 
}

którego zadaniem było by sprawdzanie daty jeśli jest w przedziale to wyświetli div jeśli nie to będzie ukryty i tu zaczęły się schody tzn nie umiem wykombinować jak ukryć żeby był pomijany przy karuzeli a nie pokazywał puste tło i czas odlicza jak by był nie wiem jak zrobić ifa lub warunek który by to sprawdzał i w każdej pętli korygował, albo od złej strony kombinuje,

Będę wdzięczna za podpowiedzi lub przykłady jak to ugryźć

1 odpowiedź

0 głosów
odpowiedź 18 grudnia 2022 przez VBService Ekspert (254,440 p.)
edycja 18 grudnia 2022 przez VBService

ps swiper dubluje karty tzn są dwie w bazie

w bazie masz jedną wersję danych do karty i dublowanie kart to też nie jest wina swiper-a, dublowanie kart pochodzi z php z tego "kawałka" kodu

      $homeInfo_run = mysqli_query($con, $homeInfo);
      if (mysqli_num_rows($homeInfo_run) > 0) {
        foreach ($homeInfo_run as $homeInfoo) { ...

 

zamiast tego kodu

      <?php
      $homeInfo = "SELECT * FROM info WHERE status='0' LIMIT 6";
      $homeInfo_run = mysqli_query($con, $homeInfo);
      if (mysqli_num_rows($homeInfo_run) > 0) {
        foreach ($homeInfo_run as $homeInfoo) {
      ?>
          <div class="blog-slider__item swiper-slide hide_info" id="info_news" data-start="<?= $homeInfoo['info_add']; ?>" data-stop="<?= $homeInfoo['info_end']; ?>">
            <div class="blog-slider__img">
              <img src="./files/info/<?= $homeInfoo['image']; ?>" alt="<?= $homeInfoo['title']; ?>">
            </div>
            <div class="blog-slider__content">
              <span class="blog-slider__code"><?= $homeInfoo['data_info']; ?></span>
              <div class="blog-slider__title"><?= $homeInfoo['title']; ?></div>
              <div class="blog-slider__text"><?= $homeInfoo['text']; ?></div>
            </div>
          </div>
          <?php }
      } ?>

zapisz dla testu tak i zobacz jaki wyniki zostanie zwrócony

      <?php
      $homeInfo = "SELECT * FROM info WHERE status='0' LIMIT 6";
      $homeInfo_run = mysqli_query($con, $homeInfo);
      if (mysqli_num_rows($homeInfo_run) > 0) {
        var_dump($homeInfo_run);
      }
      ?>

najczęściej spotykany sposób na iterowanie danych zwróconych z bazy danych (mysqli_fetch_assoc)

while ($row = mysqli_fetch_assoc($homeInfo_run)) {
    echo $homeInfoo['info_add']; // itd.
}

lub

$homeInfo_rows =  mysqli_fetch_assoc($homeInfo_run);
foreach ($homeInfo_rows as $homeInfoo) {
    echo $homeInfoo['info_add']; // itd.
}

 

komentarz 19 grudnia 2022 przez gatka84 Bywalec (2,150 p.)

Zauważyłam, że to nie wina swipera, potem stwierdziłam, że w sumie do prostej karuzeli nie potrzebuje go i wykorzystałam już wcześniej używany slaider bo jest prostszy i mniej waży i nie miałam już tu problemu z dublowaniem kart ale teraz nie wiem jak do końca zrobić żeby odjąć lub dodać active jeśli wpis/karta ma żądaną date do wyświetlenia a ukryć te których data przeminęła lub czeka jak opisałam wyżej, możesz mi coś podpowiedzieć?

Ps. Faktycznie spora różnica w tym co podaje mi przy zapisie

<?php
$homeInfo = "SELECT * FROM info WHERE status='0' LIMIT 6";
$homeInfo_run = mysqli_query($con, $homeInfo);
if (mysqli_num_rows($homeInfo_run) > 0) {
foreach ($homeInfo_run as $homeInfoo) {
  var_dump($homeInfo_run);
}}
?>

podaje

object(mysqli_result)#5 (5) { ["current_field"]=> int(0) 
["field_count"]=> int(9) ["lengths"]=> array(9) { 
[0]=> int(1) 
[1]=> int(10)
[2]=> int(22) 
[3]=> int(110) 
[4]=> int(14) 
[5]=> int(1) [6]=> int(10) 
[7]=> int(10) 
[8]=> int(19) } 
["num_rows"]=> int(2) ["type"]=> int(0) } object(mysqli_result)#5 (5) { ["current_field"]=> int(0) 
["field_count"]=> int(9) ["lengths"]=> array(9) { 
[0]=> int(1) 
[1]=> int(11) 
[2]=> int(24)
 [3]=> int(77) 
[4]=> int(14)
[5]=> int(1) 
[6]=> int(0) 
[7]=> int(0) 
[8]=> int(19) } 
["num_rows"]=> int(2) ["type"]=> int(0) }


---

natomiast przy

<?php
$homeInfo = "SELECT * FROM info WHERE status='0' LIMIT 6";
$homeInfo_run = mysqli_query($con, $homeInfo);
if (mysqli_num_rows($homeInfo_run) > 0) {
var_dump($homeInfo_run);
}
?>

wyświetla

 object(mysqli_result)#4 (5) { ["current_field"]=> int(0) ["field_count"]=> int(9) ["lengths"]=> NULL ["num_rows"]=> int(2) ["type"]=> int(0) } 

 

komentarz 20 grudnia 2022 przez gatka84 Bywalec (2,150 p.)
edycja 20 grudnia 2022 przez gatka84

Wykombinowałam tak na próbę

const HOURS_240 = 24 * 60 * 60 * 1000;
  let ppElement;
  
  window.addEventListener('DOMContentLoaded', load);

  function load() {
    ppElement = document.querySelectorAll('.blog-slider__content .blog-slider__code');
    for (pelement of ppElement) {
      const arrTime = pelement.textContent.split('-'),
            setTime = new Date(arrTime[2], parseInt(arrTime[1], 10) - 1, arrTime[0]),
            offTime = new Date(setTime.getTime() + (HOURS_240)*3),
            curTime = Date.now();
 
      if (curTime >= offTime.getTime())
        pelement.closest('#blog').style.display = 'none';
    }
  }

i teraz jak dodać dodatkowy parametr w pętli for

function changeSlide(){
   for(let i=0; i < info.length; i++){
     info[i].classList.remove("active");
   }
   info[indexx].classList.add("active");
 }

która by sprawdzał, że jeśli jest "display: none" to pomija i daje do następnego.

<div class="blog-slider__item" data-start="18-12-2022" data-stop="20-12-2022" id="blog">
            <div class="blog-slider__img">
              <img src="./files/info/1654094479.png" alt="Wspaniała wiadomość">
            </div>
            <div class="blog-slider__content" id="to">
              <span class="blog-slider__code">20-12-2022</span>
              <div class="blog-slider__title">Wspaniała wiadomość</div>
              <div class="blog-slider__text">Nie czuj się staro.</div>
            </div>
          </div>
                <div class="blog-slider__item active" data-start="20-12-2022" data-stop="24-12-2022" id="blog" style="display: none;">       // <--do tego dodał bo niespełna warunku daty
            <div class="blog-slider__img">
              <img src="./files/info/1654103601.png" alt="Katowice">
            </div>
            <div class="blog-slider__content" id="to">
              <span class="blog-slider__code">31-05-2022 </span>
              <div class="blog-slider__title">Katowice</div>
              <div class="blog-slider__text">ZAPRASZAMY</div>
            </div>
          </div>

jakieś pomysły bo mnie się kończą :(

komentarz 20 grudnia 2022 przez VBService Ekspert (254,440 p.)
edycja 20 grudnia 2022 przez VBService

Jeżeli masz 

<div class="blog-slider__item" 
        data-start="18-12-2022" 
        data-stop="20-12-2022" 
        id="blog">

    ...

</div>

 

to użyj tego kodu z przykładu tutaj.

window.addEventListener('DOMContentLoaded', load);
 
function load() {
  const elements = document.querySelectorAll('.blog-slider__item');
 
  for (const element of elements) {     
    const arrMinTime = element.dataset.start.split('-'),
          arrMaxTime = element.dataset.stop.split('-'),
          minTime = new Date(arrMinTime[2], parseInt(arrMinTime[1], 10) - 1, arrMinTime[0]),
          maxTime = new Date(arrMaxTime[2], parseInt(arrMaxTime[1], 10) - 1, arrMaxTime[0]),
          curTime = Date.now();
 
    if (curTime >= minTime.getTime() && curTime <= maxTime.getTime())
      element.classList.remove('active');
    else
      element.classList.add('active');
  } 
}

 

jeżeli chcesz, żeby były pominięte te z zapisem

<div class="blog-slider__item active" 
        data-start="20-12-2022" 
        data-stop="24-12-2022" 
        id="blog" 
        style="display: none;">

    ...

</div>

 

querySelectorAll zapisz np. tak

const elements = document.querySelectorAll('.blog-slider__item:not([style*="display: none"])');

 

i wtedy nie musisz

gdzie by sprawdzał że jeśli jest "display: none" to pomija i daje do następnego.

bo elements zawiera teraz tylko wszystkie div-y o klasie blog-slider__item bez kodu style="display: none;"

komentarz 20 grudnia 2022 przez gatka84 Bywalec (2,150 p.)

Dzięki za podpowiedź

teraz to reasumując w pierwszej kolejności idzie

window.addEventListener('DOMContentLoaded', load);
  
function load() {
  const elements = document.querySelectorAll('.blog-slider__item');
  
  for (const element of elements) {     
    const arrMinTime = element.dataset.start.split('-'),
          arrMaxTime = element.dataset.stop.split('-'),
          minTime = new Date(arrMinTime[2], parseInt(arrMinTime[1], 10) - 1, arrMinTime[0]),
          maxTime = new Date(arrMaxTime[2], parseInt(arrMaxTime[1], 10) - 1, arrMaxTime[0]),
          curTime = Date.now();
  
    if (curTime >= minTime.getTime() && curTime <= maxTime.getTime())
      element.closest('#blog').style.display = 'none';   // <-- zmiana / ukrywa
    else
      element.closest('#blog').style.display = 'block';  // <-- zmiana / pokazuje
  } 
}

i mi dodaje display: none lub block w style do div spełniające kryteria daty do wyświetlenia karty w slajderze

następnie slajder

const info = document.querySelector(".do-wybrania").children;
 const prev_info = document.querySelector(".prev_info");
 const next_info = document.querySelector(".next_info");
 let indexx = 0;
 function autoPlay(){
 next_infoSlide();
 //   updateDotIndicator();
 }
 function next_infoSlide(){
   if (indexx == info.length - 1) {
     indexx = 0;
   }
   else{
     indexx++;
   }
   changeSlide();
 }
 
 function changeSlide(){
   
   for(let i=0; i < info.length; i++){  
     
    info[i].classList.remove("active");
   }
   info[indexx].classList.add("active");
   
 }
 let timer_info = setInterval(autoPlay, 6000);
 function prev_infoSlide(){
     if (indexx == 0) {
     indexx = info.length - 1;
     }
     else{
     indexx--;
     }
     changeSlide();
 }
 prev_info.addEventListener("click", function(){
     prev_infoSlide();
     //updateDotIndicator();
     resetTimer_info();
     })
     next_info.addEventListener("click", function(){
     next_infoSlide();
     //updateDotIndicator();
     resetTimer_info();
     })    
     function resetTimer_info(){
     clearInterval(timer_info);
     timer_info = setInterval(autoPlay, 5000);
     }

i tu nie wiem cały czas jak wymóc na nim pominięcie tych które są z display: none , całego slajdera opakować w funkcję wykorzystującą

const elements = document.querySelectorAll('.blog-slider__item:not([style*="display: none"])');

czy całkowicie inaczej to powinnam zrobić bez display: none, bo przyznam szczerze nawet zaczęłam już kombinować z dodawaniem z-index lub opacity ale ciągle natrafiam na problem pomijania kart które nie powinny być wyświetlane 

komentarz 20 grudnia 2022 przez VBService Ekspert (254,440 p.)

Jakie to ma odniesienie w html-u?

const info = document.querySelector(".do-wybrania");

czy to

<div class="do-wybrania">
   
</div>

który zawiera kolejne

<div class="blog-slider__item active"
        data-start="20-12-2022"
        data-stop="24-12-2022"
        id="blog"
        style="display: none;">
 
    ...
 
</div>

czyli

<div class="do-wybrania">
  <div class="blog-slider__item active"
          data-start="20-12-2022"
          data-stop="24-12-2022"
          id="blog">
 
      ...
 
  </div>
  <div class="blog-slider__item"
          data-start="20-12-2022"
          data-stop="24-12-2022"
          id="blog"
          style="display: none;">
 
      ...
 
  </div>
</div>

dobrze zgaduje?

komentarz 20 grudnia 2022 przez gatka84 Bywalec (2,150 p.)

Tak dokładnie, (wiem nazwa classy nic nie mówiąca i po polsku angel)

komentarz 20 grudnia 2022 przez gatka84 Bywalec (2,150 p.)
i tu cały czas natrafiam na problem jak w slaiderze pominąć class="blog-slider__item"  z  style="display: none;"
komentarz 21 grudnia 2022 przez VBService Ekspert (254,440 p.)

Hymmm,

zamień

const info = document.querySelector(".do-wybrania").children;

na

const info = document.querySelectorAll('.do-wybrania .blog-slider__item:not([style*="display: none"])');

 

komentarz 21 grudnia 2022 przez gatka84 Bywalec (2,150 p.)

niestety nie działa :( tzn dział tak jak przedtem bez pomijania tych z dispaly: none

co daje * w tym zapisie

[style*="display: none"]

 

<div class="do-wybrania">
                      <div class="blog-slider__item" data-start="18-12-2022" data-stop="20-12-2022" id="blog">
            <div class="blog-slider__img">
              <img src="./files/info/1654094479.png" alt="">
            </div>
            <div class="blog-slider__content" id="to">
              <span class="blog-slider__code">20-12-2022</span>
              <div class="blog-slider__title">wiadomość</div>
              <div class="blog-slider__text"></div>
            </div>
          </div>
                <div class="blog-slider__item active" data-start="20-12-2022" data-stop="24-12-2022" id="blog" style="display: none;"> // <-- dopisał active pomimo dispaly:none
            <div class="blog-slider__img">
              <img src="./files/info/1654103601.png" alt="">
            </div>
            <div class="blog-slider__content" id="to">
              <span class="blog-slider__code">31-05-2022 </span>
              <div class="blog-slider__title"></div>
              <div class="blog-slider__text"></div>
            </div>
          </div>
          </div>

 

komentarz 21 grudnia 2022 przez VBService Ekspert (254,440 p.)

co daje * w tym zapisie

CSS [attribute*=value] Selector

komentarz 21 grudnia 2022 przez gatka84 Bywalec (2,150 p.)

ok dziękuje za informację

kombinowałam jeszcze tak że w pierwszej kolejności funkcja sprawdzająca czas dodaje klasę

if (curTime >= offTime.getTime())
        pelement.closest('#blog').classList.add("test");

a następnie

w funkcja slajdera zadziała jeśli znajdzie klasę

const info = document.querySelectorAll(".do-wybrania .test");

ale tak to już w cale nie działa tzn już się nie przełącza na następną kartę z klasą test

Podobne pytania

0 głosów
2 odpowiedzi 108 wizyt
pytanie zadane 11 kwietnia 2017 w JavaScript przez shslr Obywatel (1,310 p.)
0 głosów
1 odpowiedź 499 wizyt
0 głosów
1 odpowiedź 276 wizyt

92,624 zapytań

141,482 odpowiedzi

319,822 komentarzy

62,005 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...