Discussion :

[kate59]

Bonjour,

j'ai intégrer deux zones de textes défilantes dans la même page elle fonctionne mais la 1er zone de texte est en pause tant qu'on passe pas la souris dessus cela est arrivé quand j'ai ajouté la 2 zone de texte dans la même page qui elle defile tout de suite comme il faudrait pour la 1ère zone de texte.

Voici le code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<style>
#blocktoscroll {
              overflow:hidden;
              width: 100%;
              min-height: 58px;
              max-height: 120px;
           }
#blocktoscroll2 {
              overflow:hidden;
              width: 100%;
              min-height: 58px;
              max-height: 120px;
           }
</style>
<script type="text/javascript">
function initScroll(EltId, increment, timer, direction) {
            direction = direction.toLowerCase();
            var BlockScroll = document.getElementById(EltId); //On recupere l'element
               
            if (direction=="bt" || direction=="tb" ) {
               var FirstDiv = BlockScroll.insertBefore(document.createElement("div" ), BlockScroll.firstChild); //On cree un DIV au debut du bloc
               var LastDiv = BlockScroll.appendChild(document.createElement("div" )); //on cree un div à la fin du bloc
                 
               FirstDiv.style.height = BlockScroll.clientHeight+"px"; //On dimensionne le premier div de la hauteur du bloc
               LastDiv.style.height = BlockScroll.clientHeight+"px"; //idem pour le dernier div
            }
              
           eval(EltId+'Timer = setInterval("scrollElement(\'"+ EltId + "\'," + increment + ",\'" + direction +"\')",timer);'); //On lance la fonction qui va initialiser le scroll
          };
             
        function scrollElement(eltId, increment, direction) {
            var BlockScroll = document.getElementById(eltId);
            with (BlockScroll) {
                switch(direction) {
                    case "bt":
                        scrollTop += increment;
                        if (scrollTop+clientHeight>=scrollHeight) { scrollTop=0};
                        break;
                    case "tb":
                        scrollTop -= increment;
                        if (scrollTop<=increment) { scrollTop=scrollHeight};
                        break;
                }
            }
        };
        function repriseScroll(EltId, increment, timer, direction) {
            eval(EltId+'Timer = setInterval("scrollElement(\'"+ EltId + "\'," + increment + ",\'" + direction +"\')",timer);'); //On lance la fonction qui va initialiser le scroll
        };
        function pauseScroll(EltId) {
            clearInterval(eval(EltId+'Timer'));
        };
         
        window.onload=function() {
            initScroll("blocktoscroll", 1, 100, "bt" );
        };
                
        window.onload=ll("blocktoscroll2", 2, 100, "bt" );
        };
        </script>

le html idem que le deuxieme sauf le id qui est blocktoscroll2

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div id="blocktoscroll" onmouseover="pauseScroll('blocktoscroll')" onmouseout="repriseScroll('blocktoscroll', 1, 100,'bt' );" data-move="t2b" style="margin-top: 0px;">
        <ul>
		<?php
                foreach($managerContenuAvis->getList() as $ListAvis)
                {
                ?>
           <li><blockquote><?php echo $ListAvis->getContenuAvis() ?></blockquote></li>
		<?php
                }
        ?> 
      </ul>
    </div>

Quelqu'un aurai une idée ?

Merci.

[danielhagnoul]

Cela fonctionne plus ou moins bien, j'ai testé avec :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#blocktoscroll {
    position: relative;
    top: 24px;
    overflow: hidden;
    width: 80%;
    min-height: 58px;
    max-height: 120px;
    margin-bottom: 12px;
}
 
#blocktoscroll2 {
    position: relative;
    top: 48px;
    overflow: hidden;
    width: 80%;
    min-height: 58px;
    max-height: 120px;
    margin-bottom: 12px;
}

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="blocktoscroll" onmouseover="pauseScroll('blocktoscroll')" onmouseout="repriseScroll('blocktoscroll', 1, 100,'bt' );"
    data-move="t2b" style="margin-top: 0px;">
    <ul>
        <li>
            1
        </li>
        <li>
            <blockquote>Constituendi autem sunt qui sint in amicitia fines et quasi termini diligendi. De quibus tres video sententias ferri, quarum nullam probo, unam, ut eodem modo erga amicum adfecti simus, quo erga nosmet ipsos, alteram, ut nostra in amicos benevolentia illorum erga nos benevolentiae pariter aequaliterque respondeat, tertiam, ut, quanti quisque se ipse facit, tanti fiat ab amicis.</blockquote>
        </li>
    </ul>
</div>
<div id="blocktoscroll2" onmouseover="pauseScroll('blocktoscroll')" onmouseout="repriseScroll('blocktoscroll', 1, 100,'bt' );"
    data-move="t2b" style="margin-top: 0px;">
    <ul>
        <li>
            2
        </li>
        <li>
            <blockquote>Quanta autem vis amicitiae sit, ex hoc intellegi maxime potest, quod ex infinita societate generis humani, quam conciliavit ipsa natura, ita contracta res est et adducta in angustum ut omnis caritas aut inter duos aut inter paucos iungeretur.</blockquote>
        </li>
    </ul>
</div>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
function initScroll(EltId, increment, timer, direction) {
    direction = direction.toLowerCase();
    var BlockScroll = document.getElementById(EltId); //On recupere l'element
 
    if (direction == "bt" || direction == "tb") {
        var FirstDiv = BlockScroll.insertBefore(document.createElement("div"), BlockScroll.firstChild); //On cree un DIV au debut du bloc
        var LastDiv = BlockScroll.appendChild(document.createElement("div")); //on cree un div à la fin du bloc
 
        FirstDiv.style.height = BlockScroll.clientHeight + "px"; //On dimensionne le premier div de la hauteur du bloc
        LastDiv.style.height = BlockScroll.clientHeight + "px"; //idem pour le dernier div
    }
 
    eval(EltId +
        'Timer = setInterval("scrollElement(\'"+ EltId + "\'," + increment + ",\'" + direction +"\')",timer);'
    ); //On lance la fonction qui va initialiser le scroll
};
 
function scrollElement(eltId, increment, direction) {
    var BlockScroll = document.getElementById(eltId);
    with(BlockScroll) {
        switch (direction) {
            case "bt":
                scrollTop += increment;
                if (scrollTop + clientHeight >= scrollHeight) {
                    scrollTop = 0
                };
                break;
            case "tb":
                scrollTop -= increment;
                if (scrollTop <= increment) {
                    scrollTop = scrollHeight
                };
                break;
        }
    }
};
 
function repriseScroll(EltId, increment, timer, direction) {
    eval(EltId +
        'Timer = setInterval("scrollElement(\'"+ EltId + "\'," + increment + ",\'" + direction +"\')",timer);'
    ); //On lance la fonction qui va initialiser le scroll
};
 
function pauseScroll(EltId) {
    clearInterval(eval(EltId + 'Timer'));
};
 
window.onload = function () {
    initScroll("blocktoscroll", 1, 100, "bt");
 
    setTimeout(() => {
        initScroll("blocktoscroll2", 2, 100, "bt");
    }, 3000 ); // 3s
};