Discussion :

[zooffy]

Bonjour tout le monde.

Je ne suis pas trés doué en JavaScript et là, je sèche complètement.

J'ai fais (en recopiant un script sur le net) un scroll dans ma page. Je place les codes en bout de topic.

Dans la function scrollContent il appelle un div passé en paramettre (ça j'ai compris) et ensuite, à partir du Div il appelle un autre div avec le GetElementsByTagName. Et là, je comprends pas pourquoi il ne va pas chercher le div directement ?

Ce que j'ai pu constater c'est que si je met un DIV dans mon contenu, le scroll ne fonctionne plus correctement et ne descend plus jusqu'en bas, mais jusqu'en bas du div à l'intérieur. Voilà pour le premier point.

Le deuixème point est lié (à mon avis) : je voudrais mettre un lien dans mon contenu qui fait descendre le scroll jusqu'à un certains point, un peu comme une ancre.
Alors je me suis dis qu'en faisant une nouvelle function qui va prendre le DIV global en paramettre (comme la function scrollContent) et chercher un autre contrôle, en prenant son top, je peux repositionner le Div Global.
Jusque là, ça me parait logique. Sauf que, je ne peux pas utiliser un div, sinon, je scroll plus.
J'ai essayé de placer un span, histoire de capter son TOP, mais sans succès.

Bref, me voilà bien désapointé. Je sens bien que je suis pas loin de la vérité, mais je bloque sur la gestion des accès aux éléments.

Pouvez vous m'aider ?



Script :

Code :

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
 
<script type="text/javascript">
        var STARTINGOPACITY = 40;
        var SCROLLTIMER = 20;
        var SCROLLSPEED = 15;
        // handles manual scrolling of the content //
        function scrollContent(id, dir) {
            var div = document.getElementById(id);
            clearInterval(div.timer);
            var sections = div.getElementsByTagName('div');
            var length = sections.length;
            var limit;
            if (dir == -1) {
                limit = 0;
            } else {
                if (length > 1) {
                    limit = sections[length - 1].offsetTop;
                } else {
                    limit = sections[length - 1].offsetHeight - div.parentNode.offsetHeight + 20;
                }
            }
            //div.style.opacity = STARTINGOPACITY * .01;//
            //div.style.filter = 'alpha(opacity=' + STARTINGOPACITY + ')';//
            div.timer = setInterval(function() { scrollAnimate(div, dir, limit) }, SCROLLTIMER);
        }
 
        function scrollAnimate(div, dir, limit) {
            div.style.top = div.style.top || '0px';
            var top = div.style.top.replace('px', '');
            if (dir == 1) {
                if (limit - Math.abs(top) <= SCROLLSPEED) {
                    cancelScroll(div.id);
                    div.style.top = '-' + limit + 'px';
                } else {
                    div.style.top = top - SCROLLSPEED + 'px';
                }
            } else {
                if (Math.abs(top) - limit <= SCROLLSPEED) {
                    cancelScroll(div.id);
                    div.style.top = limit + 'px';
                } else {
                    div.style.top = parseInt(top) + SCROLLSPEED + 'px';
                }
            }
        }
        // cancel the scrolling on mouseout //
        function cancelScroll(id) {
            var div = document.getElementById(id);
            //div.style.opacity = 1;//
            //div.style.filter = 'alpha(opacity=100)';//
            clearTimeout(div.timer);
        }
    </script>

HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<div class="slider">
                        <div class="slidercontent" id="textslider">
                          <div id="textsection" class="section">
MON CONTENU QUI GLISSE
                          </div>
                        </div>
                        <div style="text-align:left;width:18px;position:relative;top:0px;left:782px;background-image:url('/Image/FondBarre.png');background-repeat:repeat-y;background-position:left top;height:382px;">
                        <img alt="Monter le Texte" src="/Image/Haut.png" onmouseover="scrollContent('textslider',-1)" onmouseout="cancelScroll('textslider')"/></div>
                        <div style="text-align:right;width:18px;position:relative;top:0px;left:782px;">
                        <img alt="Descendre le Texte" src="/Image/Bas.png" onmouseover="scrollContent('textslider',1)" onmouseout="cancelScroll('textslider')"/></div>
                    </div>

[Watilin]

Salut,

le script que tu as trouvé part d'une bonne intention, mais t'impose une lourde contrainte : tu ne dois pas utiliser de <div> dans ton code pour autre chose que du scroll.
Pour donner plus de souplesse à la chose, je propose de donner une classe aux éléments ciblables par le scroll, que nous appelerons scroll-target, et de remplacer

Code JS :

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

getElementsByTagName('div');

par

Code JS :

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

getElementsByClassName('scroll-target');

Ainsi, tu pourras scroller vers tous les éléments portant la classe.

Code HTML :

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

<span class="scroll-target"> … </span>

Reste à régler un « léger problème » d’intercompatibilité : la méthode getElementsByClassName n’existe que chez les meilleurs (!) navigateurs, il faut donc la coder « à la main » quand elle n’est pas disponible…

Code JS :

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
if (!document.getElementsByClassName) {
 
document.getElementsByClassName = function( className ) {
    var collection = []; // tableau à renvoyer
 
    function recursiveSearch( node ) {
        if (node.hasChildNodes) {
            if (node.className.indexOf(className) > -1) {
                // si le node a la bonne classe, on le rajoute
                collection.push(node);
            };
 
            // on regarde les enfants
            var children = node.childNodes;
            for (var i = 0, l = children.length; i < l; i++) {
                var child = children[i];
                if (child.nodeType == 1) {
                    // type 1 : élément ; le texte pur et
                    // les commentaires ne nous intéressent pas
                    recursiveSearch(child);
                };
            };
        };
    };
 
    // on commence avec le <body>
    recursiveSearch(document.body);
    return collection;
};
 
};

[zooffy]

Merci beaucoup pour ton aide.

C'est beaucoup plus fluide comme ça et surtout, j'ai compris comment ça marchait.

Bonne continuation à toi.