Forum PHP.pl > [JavaScript] Kilkukrotne odpalenie funkcji

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] Kilkukrotne odpalenie funkcji

peja1990

9.02.2012, 16:12:39

Witam, napisałem sobie funkcję slider'a.

[PHP] pobierz, plaintext 
function vSlide(container) {
  ...
}
[PHP] pobierz, plaintext

Jako container zdefiniowałem id div'a.

Na stronie mam 2 slidery, dlatego też chciałbym ją odpalić 2 razy, oczywiście wartość container jest inna.

Mam dwa div'y sliderów:

[HTML] pobierz, plaintext 
<div id="sponsors">
<div id="partners">
[HTML] pobierz, plaintext

Dlatego też odpalam funkcję:

[PHP] pobierz, plaintext 
(function () {
  vSlide("sponsors");
  vSlide("partners");
}());
[PHP] pobierz, plaintext

W wyniku otrzymuję wykonanie funkcji raz w div'ie "sponsors", a raz w div'ie "partners".
Chciałbym by funkcja została wykonana dla obydwu div'ów.

Bardzo proszę Was o pomoc...

CuteOne

9.02.2012, 16:22:20

Chyba nie rozumiem... raz w "sponsors" + raz w "partners" = 2 wykonanie

jaśniej proszę

peja1990

9.02.2012, 16:25:45

Cytat(CuteOne @ 9.02.2012, 16:22:20 )

Chyba nie rozumiem... raz w "sponsors" + raz w "partners" = 2 wykonanie

jaśniej proszę

Mamy 2 div'y:

[HTML] pobierz, plaintext 
<div id="sponsors"></div>
<div id="partners"></div>
[HTML] pobierz, plaintext

Odświeżam stronę i w wyniku otrzymuję:

[HTML] pobierz, plaintext 
<div id="sponsors"><!-- WYKONANA FUNKCJA --></div>
<div id="partners"></div>
[HTML] pobierz, plaintext

Odświeżam stronę jeszcze raz i w wyniku otrzymuję:

[HTML] pobierz, plaintext 
<div id="sponsors"></div>
<div id="partners"><!-- WYKONANA FUNKCJA --></div>
[HTML] pobierz, plaintext

A oczekuję takiego efektu:

[HTML] pobierz, plaintext 
<div id="sponsors"><!-- WYKONANA FUNKCJA --></div>
<div id="partners"><!-- WYKONANA FUNKCJA --></div>
[HTML] pobierz, plaintext

CuteOne

9.02.2012, 16:33:42

Pokaż ciało funkcji vSlide.

ps. jeżeli to autoslider to tak łatwo się nie da

peja1990

9.02.2012, 17:48:47

Cytat(CuteOne @ 9.02.2012, 16:33:42 )

Pokaż ciało funkcji vSlide.

ps. jeżeli to autoslider to tak łatwo się nie da

[PHP] pobierz, plaintext 
function vSlide(container, max, height) {
  $.ajax({
    type: "POST", 
    url : container + ".html", 
    load: function (XMLHttpRequest) {
      $("#" + container + " .slider").html("Trwa pobieranie danych&hellip;");
    },
    success: function(str) {
      var temp        = new Array();
      temp            = str.split("\n");
      var dir         = "images/" + container + "/";
      var loaded      = 0;
      var progress    = (100 / temp.length);
      var objects     = [];
      var preloader   = null;
      var progressBar = null;
 
      function startLoading() {
        preloader = document.createElement('div');
        preloader.id = 'preloader';
        progressBar = document.createElement('div');
        progressBar.id = 'progressBar';
        preloader.appendChild(progressBar);
        $(preloader).appendTo("#" + container + " .slider");
        var bw = $("#" + container + " .slider").width();
        var bh = $("#" + container + " .slider").height();
        var lw = $("#" + container + " .slider #preloader").width();
        var lh = $("#" + container + " .slider #preloader").height();
        $("#" + container + " .slider #preloader").css({
          'margin-top'  : (bh - lh) / 2 + "px",
          'margin-left' : (bw - lw) / 2 + "px"
        });
        for(var x=0; x<temp.length; x++) {
          objects[x]        = new Image();
          objects[x].onload = progressing;
          objects[x].src    = dir + temp[x];
        }
      }
 
      function progressing() {
        loaded++;
        progressBar.style.width = loaded * progress + "%";
        if(loaded >= temp.length) {
          slider();
          $("#" + container + " #preloader").remove();
        }
      }
      window.onload = startLoading;
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#" + container + " .slider").html('Błąd ładowania danych !');
    }
  });
 
  function slider() {
    var id      = 0;
    var start   = 1;
    var stop    = 0;
    var active  = 1;
    $.ajax({
      type: "POST", 
      url : container + ".html", 
      load: function (XMLHttpRequest) {
        $("#" + container + " .slider").html("Trwa pobieranie danych&hellip;");
      },
      success: function(str) {
        var mV    = 15;
        var mH    = 10;
        var temp  = new Array();
        var dir   = "images/" + container + "/";
        var bs    = ($("#" + container + " .slider").width() / max) - (mH * 2);
        temp      = str.split("\n");
        for(var i=0; i<temp.length; i++) {
          id    += 1;
          stop  += 1;
          var block = document.createElement("span");
          block.setAttribute('id', id);
          block.setAttribute('style', 'width:' + bs + 'px; height:' + height + 'px; margin:0 ' + mH + 'px');
          $(block).appendTo("#" + container + " .slider");
          var img = document.createElement("img");
          img.setAttribute('src', dir + temp[i]);
          img.setAttribute('style', 'max-width:' + bs + 'px; max-height:' + height + 'px');
          $(img).appendTo("#" + id);
          $("#" + container + " .slider").css({
            'margin-top'    : mV + "px",
            'margin-bottom' : mV + "px"
          });
          var ah = $("#" + container + " .action").height();
          $("#" + container + " .action").css({
            'margin-top'    : ((height - ah) / 2) + mV + "px",
            'margin-bottom' : ((height - ah) / 2) + mV + "px"
          });
          var bw = $("#" + container + " .slider span#" + id).width();
          var bh = $("#" + container + " .slider span#" + id).height();
          var iw = $("#" + container + " .slider span#" + id).children().width();
          var ih = $("#" + container + " .slider span#" + id).children().height();
          $("#" + container + " .slider span#" + id).children().css({
            'margin-top'  : (bh - ih) / 2 + "px",
            'margin-left' : (bw - iw) / 2 + "px"
          });
          if($("#" + container + " .slider span#" + id).attr("id") <= max) {
            $("#" + container + " .slider span#" + id).fadeIn();
          } else {
            $("#" + container + " .slider span#" + id).hide();
          }
        }
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        $("#" + container + " .slider").html('Błąd ładowania danych !');
      }
    });
 
    function slide() {
      $("#" + container + " .slider span").each(function() {
        if($(this).attr("id") >= active && $(this).attr("id") <= max) {
          $(this).fadeIn();
        } else {
          $(this).hide();
        }
      });
    };
 
    $("#" + container + " .action.prev").click(function() {
      if(document.getElementById(start).style.display == "none") {
        active -= 1;
        max   -= 1;
        slide();
      }
    });
 
    $("#" + container + " .action.next").click(function() {
      if(document.getElementById(stop).style.display == "none") {
        active += 1;
        max   += 1;
        slide();
      }
    });
  }
}
[PHP] pobierz, plaintext

Dodałem dwie zmienne do funkcji tj. max i height, a więc teraz wywołuję funkcję w taki sposób:

[PHP] pobierz, plaintext 
(function () {
  vSlide("sponsors", 4, 75);
  vSlide("partners", 5, 50);
}());
[PHP] pobierz, plaintext

Pomyślałem trochę nad tym i sądzę, że problem może tkwić w zmiennej id, próbowałem jednak ze zmienną globalną:

[PHP] pobierz, plaintext 
id = 0;
[PHP] pobierz, plaintext

jednak nie przyniosło to oczekiwanego rezultatu...

zegarek84

9.02.2012, 18:06:16

window.onload = startLoading;
powyższe wykona Ci się tylko raz i tylko jedno przypisanie a widzę, iż Twoją intencją było, by dla wszystkich po załadowaniu strony...
poza tym daj to live gdzieś gdyż nie chce mi się aż tak dokładnie analizować wszystko na sucho...

edit.
ps
może tak na szybko pomoże coś w stylu:

[JAVASCRIPT] pobierz, plaintext 
window.onload = (function(newFunc, oldFunc){return function(){newFunc&&newFunc();oldFunc&&oldFunc()};})(startLoading, window.onload);
[JAVASCRIPT] pobierz, plaintext

tylko przy szybkim załadowaniu strony a zbyt późnym ajax'a też to się nie wykona, skoro korzystasz z jQ to zamiast:
window.onload = startLoading;
mogłeś napisać:
$(startLoading);

peja1990

9.02.2012, 18:28:07

Cytat(zegarek84 @ 9.02.2012, 18:06:16 )

Super !
Po zamianie:

[PHP] pobierz, plaintext 
window.onload = startLoading;
[PHP] pobierz, plaintext

[PHP] pobierz, plaintext 
startLoading();
[PHP] pobierz, plaintext

funkcja wykonuje się w obydwu div'ach jednak nadal występuje problem z ID

Zmieniłem

[PHP] pobierz, plaintext 
var id      = 0;
var start   = 1;
var stop    = 0;
var active  = 1;
[PHP] pobierz, plaintext

[PHP] pobierz, plaintext 
id          = 0;
var start   = id + 1;
var stop    = id + 0;
var active  = id + 1;
[PHP] pobierz, plaintext

w wyniku czego otrzymałem dobrze ponumerowane elementy:

[HTML] pobierz, plaintext 
<div id="sponsors">
  <div class="slider">
    <span id="1"></span>
    <span id="2"></span>
    <span id="3"></span>
  </div>
</div>
<div id="partners">
  <div class="slider">
    <span id="4"></span>
    <span id="5"></span>
  </div>
</div>
[HTML] pobierz, plaintext

jednak teraz obrazki wyświetlają się tylko w div'ie "sponsors" gdyż jest problem z pozostałymi zmiennymi.
Moim zdaniem teraz trzeba jakoś przechwycić wartość zmiennej "id" po zakończeniu wykonywania funkcji i przerzucić ją do zmiennej "start", ponieważ odpowiada ona za id elementu od którego ma zacząć się wyświetlanie obrazków.

Cytat(zegarek84 @ 9.02.2012, 18:06:16 )

edit.
ps
może tak na szybko pomoże coś w stylu:

[JAVASCRIPT] pobierz, plaintext 
window.onload = (function(newFunc, oldFunc){return function(){newFunc&&newFunc();oldFunc&&oldFunc()};})(startLoading, window.onload);
[JAVASCRIPT] pobierz, plaintext

tylko przy szybkim załadowaniu strony a zbyt późnym ajax'a też to się nie wykona, skoro korzystasz z jQ to zamiast:
window.onload = startLoading;
mogłeś napisać:
$(startLoading);

to już chyba mamy za sobą bo funkcja się ładnie odpala wielokrotnie

zegarek84

9.02.2012, 18:54:56

prawie...

choć masz zmienną id definiowaną globalnie to od razu strukturalnie/liniowo/synchronicznie nadajesz wartości zmiennym start, stop i active, więc jest tak, jakby id miało inicjującą wartość 0... z kolei dalej id zmieniasz asynchronicznie/zdarzeniowo...

ustawiaj te zmienne względem id... tak na szybko modyfikacje które mogą pomóc (a i tak cały kod mi się nie podoba ;p):
zamień:
id += 1;
stop += 1;
na:
id += 1;
stop = id;

przed pętlą:
for(var i=0; i<temp.length; i++) {

spróbuj dać:
start = active = id + 1;

nic nie gwarantuję ;p - nie uruchamiałem tego kodu

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.