[JavaScript] Kilkukrotne odpalenie funkcji Opcje

[peja1990]

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]

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

jaśniej proszę

[peja1990]

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]

Pokaż ciało funkcji vSlide.

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

[peja1990]

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…");
    },
    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]

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);

Ten post edytował zegarek84 9.02.2012, 18:28:50

[peja1990]

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...

Super !
Po zamianie:

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

na

[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 

na

[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.

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

Ten post edytował peja1990 9.02.2012, 18:46:55

[zegarek84]

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