Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] Zmiana div po x czasie...
Forum PHP.pl > Forum > Po stronie przeglądarki
SN@JPER^
16.10.2011, 14:22:22
Witam,

w jaki sposób zrobić zmiane div po x czasie?

Chodzi mi bardziej o to, że jak div o danym id nie istnieje to nie idzie na początek... 

[HTML] pobierz, plaintext 
  1. var myDiv_1 = document.getElementById('mains_1');
  2.   var myDiv_2 = document.getElementById('mains_2');
  3.   var myDiv_3 = document.getElementById('mains_3');
  4.   var myDiv_4 = document.getElementById('mains_4');
  5.   var myDiv_5 = document.getElementById('mains_5');
  6.   var myDiv_6 = document.getElementById('mains_6');
  7.  
  8.   if(myDiv_1.className != 'contentdiv none')
  9.   {
  10.  
  11.  
  12.  
  13.     myDiv_1.className = 'contentdiv none';
  14.     myDiv_2.className = 'contentdiv block';
  15.     myDiv_3.className = 'contentdiv none';
  16.     myDiv_4.className = 'contentdiv none';
  17.     myDiv_5.className = 'contentdiv none';
  18.     myDiv_6.className = 'contentdiv none';
  19.  
  20.   }
  21.   else if(myDiv_2.className != 'contentdiv none')
  22.   {
  23.  
  24.     myDiv_1.className = 'contentdiv none';
  25.     myDiv_2.className = 'contentdiv none';
  26.     myDiv_3.className = 'contentdiv block';
  27.     myDiv_4.className = 'contentdiv none';
  28.     myDiv_5.className = 'contentdiv none';
  29.     myDiv_6.className = 'contentdiv none';
  30.  
  31.   }
  32.   else if(myDiv_3.className != 'contentdiv none')
  33.   {
  34.  
  35.     myDiv_1.className = 'contentdiv none';
  36.     myDiv_2.className = 'contentdiv none';
  37.     myDiv_3.className = 'contentdiv none';
  38.     myDiv_4.className = 'contentdiv block';
  39.     myDiv_5.className = 'contentdiv none';
  40.     myDiv_6.className = 'contentdiv none';
  41.   }
  42.  
  43.   else if(myDiv_4.className != 'contentdiv none')
  44.   {
  45.  
  46.         myDiv_1.className = 'contentdiv none';
  47.         myDiv_2.className = 'contentdiv none';
  48.         myDiv_3.className = 'contentdiv none';
  49.         myDiv_4.className = 'contentdiv none';
  50.         myDiv_5.className = 'contentdiv block';
  51.         myDiv_6.className = 'contentdiv none';
  52.   }
  53.  
  54.   else if(myDiv_5.className != 'contentdiv none')
  55.   {
  56.  
  57.         myDiv_1.className = 'contentdiv none';
  58.         myDiv_2.className = 'contentdiv none';
  59.         myDiv_3.className = 'contentdiv none';
  60.         myDiv_4.className = 'contentdiv none';
  61.         myDiv_5.className = 'contentdiv none';
  62.         myDiv_6.className = 'contentdiv block';
  63.   }
  64.  
  65.   else if(myDiv_6.className != 'contentdiv none')
  66.   {
  67.  
  68.         myDiv_1.className = 'contentdiv block';
  69.         myDiv_2.className = 'contentdiv none';
  70.         myDiv_3.className = 'contentdiv none';
  71.         myDiv_4.className = 'contentdiv none';
  72.         myDiv_5.className = 'contentdiv none';
  73.         myDiv_6.className = 'contentdiv none';
  74.  
  75.   }
  76.  
  77. setInterval("show_and_hide()", czas);
[HTML] pobierz, plaintext


z tym, że jak myDiv_5 albo myDiv_6 nie istnieje to kończy prace... a jak zrobić, że od początku przesuwało?

Próbowałem też pętlą, ale nic mi nie wyszło...

[HTML] pobierz, plaintext 
  1. myDivs = new Array();
  2.     myDiv = new Array();
  3.     var a = 0;
  4.     for(i=0; i<6; i++){
  5.         if(document.getElementById('mains_' + i)){
  6.             myDivs[i] = document.getElementById('mains_' + i);
  7.         }
  8.     }
  9.  
  10.     for(i=0; i<myDivs.length; i++){
  11.         if(typeof(myDivs[i]) != 'undefined' && typeof(myDivs[i]) != 'null'){
  12.             if(myDivs[i].className=='contentdiv block'){
  13.                 myDivs[i].className = 'contentdiv none';
  14.  
  15.                 //alert(i);
  16.             }else{
  17.  
  18.  
  19.                 myDiv[a] = myDivs[i];
  20.                 myDiv[a].className = 'contentdiv block';
  21.  
  22.  
  23.             }
  24.  
  25.         }
  26.     }
[HTML] pobierz, plaintext
markonix
16.10.2011, 15:56:02
Napisz po polsku co chcesz osiągnąć i nie karz ludziom analizować tego dziwacznego kodu.
I na pewno łatwiej będzie tu skorzystać z jQuery (manipulacja DOM).
zegarek84
16.10.2011, 18:45:08
Cytat(markonix @ 16.10.2011, 16:56:02 ) *
I na pewno łatwiej będzie tu skorzystać z jQuery (manipulacja DOM).

nie na pewno... a tym bardziej nie optymalniej... fakt, iż jeśli chcemy pobrać wszystkie div'y określonym prefixem to zamiast implementacji metody setElements można było skorzystać z selektorów CSS w jQuery lub z .querySelectorAll po atrybucie id zaczynającym się od danego prefix'u



może się nigdzie nie pomyliłem - masz gotowca napisanego z palca z przykładem użycia klasy:
[JAVASCRIPT] pobierz, plaintext 
  1. function ShowHide(){
  2.     this._aEl = [];
  3. }
  4.  
  5. ShowHide.prototype = {
  6.     _aEl: null,
  7.     _sHideClass: 'contentdiv none',
  8.     _sShowClass: 'contentdiv block',
  9.     _i:0,
  10.     _interval:null,
  11.     setElements: function(sPrefix,iBegin, iEnd){
  12.         var el, ar = this._aEl;
  13.         for(var i = iBegin; i<=iEnd; ++i){
  14.             el = document.getElementById(sPrefix+i);
  15.             if(!!el)
  16.                 ar[ar.length] = el;
  17.         }
  18.         el = ar = null;
  19.         return this;
  20.     },
  21.     hideAll: function(){
  22.         for(var s=this._sHideClass,i=0,a=this._aEl,iL = a.length; i<iL;++i)
  23.             a[i].setAttribute('class', s);
  24.         return this;
  25.     },
  26.     showFirst: function(){
  27.         if(this._aEl[0])
  28.             this._aEl[0].setAttribute('class', this._sShowClass);
  29.         return this;
  30.     },
  31.     showNext: function(){
  32.         var a = this._aEl;
  33.         if(a.length){
  34.             a[this._i].setAttribute('class', this._sHideClass);
  35.             if(this._i<(a.length-1)){
  36.                 ++this._i;
  37.             }else{
  38.                 this._i=0;
  39.             }
  40.             a[this._i].setAttribute('class', this._sShowClass);
  41.         }
  42.         a= null;
  43.         return this;
  44.     },
  45.     startInterval:function(i){
  46.         if(!i) i = 1000;
  47.         this._interval = setInterval((function(ob){
  48.             return function(){
  49.                 ob.showNext();
  50.             }
  51.         })(this),i);
  52.         return this;
  53.     },
  54.     stopInterval:function(){
  55.         clearInterval(this._interval);
  56.         return this;
  57.     }
  58. };
  59.  
  60. // PRZYKŁADOWE UŻYCIE
  61.  
  62. var oSH = new ShowHide();
  63. oSH
  64.     .setElements('mains_', 0, 6)
  65.     .hideAll()
  66.     .showFirst()
  67.     .startInterval(500);
[JAVASCRIPT] pobierz, plaintext
SN@JPER^
17.10.2011, 08:24:10
Dzięki, działa!

A w jaki sposób przełączać na następny? Próbowałem tak jak poniżej - bo widziałem, że jest tam taka funkcja.

Kod
<li><a href="#" onclick="oSH.showNext();">1</a></li>

zegarek84
17.10.2011, 22:51:37
Cytat(SN@JPER^ @ 17.10.2011, 09:24:10 ) *
Dzięki, działa!

A w jaki sposób przełączać na następny? Próbowałem tak jak poniżej - bo widziałem, że jest tam taka funkcja.

Kod
<li><a href="#" onclick="oSH.showNext();">1</a></li>

delikatniem wstawiony więc nie wiem czy potrzebuję tej wiedzy o co teraz zapytam ale raczej tak... ale zawsze staram się robić samodokumentujący...

idąc dalej obiekt oSH gdzie masz zdefiniowany?? w globalnym skope (zasięgu) czy jako lokalna zmienna (wtedy nie dasz radę tak się do niego dostać chyba, że podepniesz zdarzenie nie przez eval)... a najprościej przeczytaj podpięty temat na forum dotyczącym js i daj kod na żywo ;p

sorki ale z fusów to ja nie za bardzo będę wróżył - na 99% dobrze wydedukowałeś metodę choć nie chce mi się tego przeglądać gdyż przed snem lubię sobie chlapnąć ale pewnie nie masz tego obiektu jako globalny to w ten sposób się do niego nie dobierzesz... jeszcze raz daj to live...
SN@JPER^
18.10.2011, 14:17:45
plik .js

Kod
onload=function() {
// PRZYKŁADOWE UŻYCIE
var oSH = new ShowHide();
oSH
.setElements('mains_', 0, 6)
.hideAll()
.showFirst()
.startInterval(5000);


// PRZYKŁADOWE UŻYCIE
var oSHs = new ShowHides();
oSHs
.setElements('mainss_', 0, 6)
.hideAll()
.showFirst()
.startInterval(5000);
                    
}



a to już divy...

Kod
<div id="slider2" class="sliderwrapper">
                
                <div id="paginate-slider2" class="pagination">
                        <div class="counts">
                            <ul>
                                
                                <li><a id="mainss_1">1</a></li>
                                <li><a id="mainss_2">2</a></li>
                                <li><a id="mainss_3">3</a></li>
                 </ul>
                        </div>
                        
                        <div class="clear"></div>
                </div>
                    
                <div class="contentdiv <?php echo ($i==1 ? 'block' : 'none');?>" id="mains_1">
                <div class="right">
                    <div class="pic" style="background: url(pic/pic_news/<?php echo $pic;?>);"></div>
                    <div class="content">
                        
                        
                        <div class="text">
                            <h2><?php echo $name;?></h2>
                            <h1><a href="news/id_news/<?php echo $id;?>"><?php echo $title;?></a></h1>
                            <?php if(strlen($title>20)){
                                
                              echo substr($text, 0, 260);
                              if(strlen($text)>=260){echo '...';}
                              
                              }else{
                                  echo substr($text, 0, 200);
                              if(strlen($text)>=200){echo '...';}
                              }?>
                        </div>
                        
                    </div>
                    
                </div>
               </div></div>
            
                
              
                
                
              
                
                
            </div>



na numeracji w li chcialem zrobić, że jak sie kliknien a dany numer to przeskoczy na niego...
zegarek84
18.10.2011, 14:31:48
przy deklaracji obiektu przed zmienną oSH usuń deklarację zmiennej lokalnej var - w ten sposób zmienna będzie zdefiniowana globalnie w obiekcie window czyli wszędzie do niej będziesz mógł się odwołać (o ile ją nie przesłonisz inną zmienną lokalną o tej samej nazwie) nawet przez eval... zmienna globalna ląduje jak wspomniałem do window a więc alternatywne wywołanie to window.oSH lub window['oSH']

jeśli chcesz pokazywać konkretny element nie koniecznie po kolei to dopisz sobie metodę na wzór showFirst() i showNext()

mozesz w ten deseń [dodaj tam do prototypu]:
Kod
show: function(i){if(this._aEl[i-1]) {//index'y są od 0 a nie od jeden
this._aEl[i-1].setAttribute('class', this._sShowClass);
this._i = i;
}
// return this nie musi być - jak uważasz
return this;}
SN@JPER^
19.10.2011, 16:42:06
Zrobilem tak jak mówiles - dodalem do prototypu, usunałem var. a w li zrobiłem tak:

Kod
<li><a id="mainss_<?php echo $i;?>" onclick="oSH.showAc();"><?php echo $i;?></a></li>



JS

Kod
function ShowHide(){
    this._aEl = [];
}

ShowHide.prototype = {
    _aEl: null,
    _sHideClass: 'contentdiv none',
    _sShowClass: 'contentdiv block',
    _i:0,
    _interval:null,
    setElements: function(sPrefix,iBegin, iEnd){
        var el, ar = this._aEl;
        for(var i = iBegin; i<=iEnd; ++i){
            el = document.getElementById(sPrefix+i);
            if(!!el)
                ar[ar.length] = el;
        }
        el = ar = null;
        return this;
    },
    hideAll: function(){
        for(var s=this._sHideClass,i=0,a=this._aEl,iL = a.length; i<iL;++i)
            a[i].setAttribute('class', s);
        return this;
    },
    showFirst: function(){
        if(this._aEl[0])
            this._aEl[0].setAttribute('class', this._sShowClass);
        return this;
    },
    showNext: function(){
        var a = this._aEl;
        if(a.length){
            a[this._i].setAttribute('class', this._sHideClass);
            if(this._i<(a.length-1)){
                ++this._i;
            }else{
                this._i=0;
            }
            a[this._i].setAttribute('class', this._sShowClass);
        }
        a= null;
        return this;
    },
    
    showAc: function(i){if(this._aEl[i-1]) {//index'y są od 0 a nie od jeden
this._aEl[i-1].setAttribute('class', this._sShowClass);
this._i = i;
}
// return this nie musi być - jak uważasz
return this;},
    
    startInterval:function(i){
        if(!i) i = 1000;
        this._interval = setInterval((function(ob){
            return function(){
                ob.showNext();
            }
        })(this),i);
        return this;
    },
    stopInterval:function(){
        clearInterval(this._interval);
        return this;
    }
};


onload=function() {
// PRZYKŁADOWE UŻYCIE
oSH = new ShowHide();
oSH
.setElements('mains_', 0, 6)
.hideAll()
.showFirst()
.startInterval(5000);


I nie działa, zadnego efektu. Konsola FF tez nic nie pokazuje.
zegarek84
19.10.2011, 18:30:59
co dokładnie nie działa - nie widze tych div'ów nigdzie definiowanych - na pewno nie działa Ci klikanie w link żeby pokazać konkretny div...

czyli który div chcesz pokazać po kliknięciu?? oSH.showAc() - nie podałeś numeru ^^ - powinno być w deseń oSH.showAc(2)

i jeszcze jak pisałem na szybko to też się delikatnie zgapiłem przy this._i = i; - jakbyś czytał tamte komentarze wiedziałbyś, że powinno być this._i = i - 1; ale akurat w Twoim przypadku to nie zmienia różnicy - po prostu przekaż argument funkcji liczbę który div chcesz pokazać - tak jak wywołałeś to "i" wewnątrz funkcji ma wartość undefined

ps
i nie onload tylko window.onload
SN@JPER^
21.10.2011, 15:34:29
Działa... z tym, ze pokazuje na "nowo" dany div, zamiast chować reszte i pokazac ten kliknięty... Jak tak zrobić?


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.