Floating text + scrollbar

**Ariranha** · 05/07/2012, 16h26

Bonjour à tous,

Une image sera plus parlante pour introduire mon problème

Nom : floating-text.jpg
Affichages : 64
Taille : 305,5 Ko

Je voulais savoir si il était techniquement possible de créer un texte qui se déplace sans passer sous le bandeau gris. C'est à dire que le texte passerai de la cellule 1 à la cellule 2 sans coupure.

Encore merci,
Bonne journée.

**EIN-LESER** · 05/07/2012, 16h45

Si tu mets ton texte dans une div en précisant la taille (hight au moins) et que tu lui donne un scrollable=true je crois que c'est faisable oui.

**EIN-LESER** · 05/07/2012, 16h48

Sorry j'avais pas bien lu.
La moins evident a moins de les redre scrolable et de vérifier ce qui est affiché dans chaque div et de redéfinir dans ta div du bas le text a mettre en fonction de ce qui est affiché dans la premiere mais ça me parait assez capilotracté.
Suis meme pas sur que sa fonctionnerait comme sa en fait

**Ariranha** · 05/07/2012, 17h17

Merci pour tes réponses, je continue à chercher...
Si quelqu'un à une autre idée, je sui preneur.

**Ariranha** · 06/07/2012, 11h23

Bonjour à tous,

Toujours sur le même problème, je fais des tests sur une version avec 2 div qui contiennent le même contenu avec une seule barre de scroll pour le defillement.

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
 
 
<head>
<title>test</title>
 
<script  type="text/javascript">
function scroll_div(){
 
document.getElementById("div2").scrollTop = ((document.getElementById("div1").scrollTop));
}
</script>
 
</head>
    <body>
 
    <div id="div1" style="width: 200px; height: 500px; border: 1px solid black; overflow: auto;" onscroll="scroll_div()">
    <div style=" height: 500px;">Culpa accusamus sartorial polaroid. Fap thundercats irure american apparel blog, fingerstache raw denim freegan retro dolore exercitation gastropub. Direct trade commodo eu, assumenda 8-bit VHS nisi. Polaroid mumblecore fugiat, seitan in veniam nostrud artisan put a bird on it gluten-free chillwave tempor forage 3 wolf moon butcher. Trust fund post-ironic excepteur, food truck vinyl photo booth dolor sustainable whatever incididunt forage synth PBR accusamus. Ex organic echo park, nulla freegan elit nihil umami bespoke proident kale chips. Forage ethnic cliche, messenger bag in cosby sweater non ad et semiotics readymade odd future portland squid.
 
    Mollit truffaut chillwave, aute gentrify exercitation et keffiyeh tempor do. Vero small batch shoreditch, irony cardigan ethical viral voluptate officia Austin ex. Sapiente quinoa bushwick, laboris adipisicing voluptate nostrud fixie VHS veniam. Sriracha ex mlkshk assumenda. Mumblecore chambray wes anderson tofu, cupidatat forage tattooed duis pickled irure vinyl craft beer aute. Stumptown accusamus nulla mustache freegan, anim mcsweeney's sed tattooed nihil butcher authentic odd future. Pitchfork reprehenderit vegan nostrud.</div>
    </div>
 
    <div id="div2" style="width: 200px; height: 300px; border: 1px solid black; overflow: hidden; margin: 75px 0 0 0;">
    <div style="height: 200px;">Culpa accusamus sartorial polaroid. Fap thundercats irure american apparel blog, fingerstache raw denim freegan retro dolore exercitation gastropub. Direct trade commodo eu, assumenda 8-bit VHS nisi. Polaroid mumblecore fugiat, seitan in veniam nostrud artisan put a bird on it gluten-free chillwave tempor forage 3 wolf moon butcher. Trust fund post-ironic excepteur, food truck vinyl photo booth dolor sustainable whatever incididunt forage synth PBR accusamus. Ex organic echo park, nulla freegan elit nihil umami bespoke proident kale chips. Forage ethnic cliche, messenger bag in cosby sweater non ad et semiotics readymade odd future portland squid.
 
    Mollit truffaut chillwave, aute gentrify exercitation et keffiyeh tempor do. Vero small batch shoreditch, irony cardigan ethical viral voluptate officia Austin ex. Sapiente quinoa bushwick, laboris adipisicing voluptate nostrud fixie VHS veniam. Sriracha ex mlkshk assumenda. Mumblecore chambray wes anderson tofu, cupidatat forage tattooed duis pickled irure vinyl craft beer aute. Stumptown accusamus nulla mustache freegan, anim mcsweeney's sed tattooed nihil butcher authentic odd future. Pitchfork reprehenderit vegan nostrud.</div>
    </div>
 
    </body>
</html>

Je voulais savoir si il était possible de caller le contenu de #div2 de telle sorte qu'il paraisse être la suite de #div1.

Encore merci,
Bonne journée.

**NoSmoking** · 06/07/2012, 11h34

Bonjour,
il te suffit d'ajouter la hauteur de la partie visible.

**Ariranha** · 06/07/2012, 11h40

Merci NoSmoking, ça peut paraitre con mais je sais pas faire

**NoSmoking** · 06/07/2012, 11h49

par exemple

Code :

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

1
2
3
4
5
function scroll_div(){
  var oDiv_1 = document.getElementById("div1"),
      oDiv_2 = document.getElementById("div2");
    oDiv_2.scrollTop = oDiv_1.scrollTop +oDiv_1.clientHeight;
}

... je sens que tu n'es pas au bout de tes peines attendu qu'il te faut gérer quelques petits trucs comme ...
- et que ce passe t-il quand la DIV du haut est en scrollMaxi ?
- la réciproque est-elle vrai? je parle de l'action du scroll

**Ariranha** · 06/07/2012, 11h58

Merci, beaucoup.

Envoyé par NoSmoking

... je sens que tu n'es pas au bout de tes peines attendu qu'il te faut gérer quelques petits trucs comme ...
- et que ce passe t-il quand la DIV du haut est en scrollMaxi ?
- la réciproque est-elle vrai? je parle de l'action du scroll

En effet , je ne suis pas sorti des mes peines...car je dois gérer le fait que quand #div2 arrive en fin de scroll, je dois arrêter le scroll sur #div1, etc....

Encore merci pour ton aide.

**EIN-LESER** · 06/07/2012, 12h16

sinon pourquoi pas faire un faux scroll?
En plaçant ton texte dans une variable et a lma demande de l'user tu enleve la première ligne affiché dans ton cadre 1 et ajoute une ligne de plus en bas de ce même cadre et tu décale pareillement dans le cadre 2.
L'user aura l'impression d'un scroll.
Bien sur il faut rendre le scroll vers le bas inclickable si ton cadre bas affiche déjà la dernière ligne et inversement.

**Ariranha** · 06/07/2012, 12h35

Cela me parait être une bonne alternative, je vais chercher de ce côtés.

Merci.

**EIN-LESER** · 06/07/2012, 12h40

Tu nous tiendra au courant si tu veux bien car sa peut toujours servir

**Ariranha** · 06/07/2012, 12h42

Pas de probleme, dès que j'ai une solution je vous fais un retour, enfin si je trouve une solution un jour

**SpaceFrog** · 06/07/2012, 13h03

un petit exemple pourri vite fait juste pour montrer le principe ...

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
 
<style type="text/css">
#top, #bottom {
	height: 100px;
	width: 600px;
 
	border: solid 1px grey;
 
	}
#top {
	overflow: auto;
	margin-right:20px;
	width:615px;
	}
#bottom {
	overflow: hidden;
	margin-bottom: 100px;
	}
 
 
#middle {
height : 80px;
width:100%;
background-color: grey;
margin: 2px 0;
}
</style>
<script type="text/javascript">
function initscroll(){
document.getElementById('vspacer').style.height=document.getElementById('top').offsetHeight+'px'
document.getElementById('bottom').scrollTop=100
 
document.getElementById('top').onscroll= function(){
 
document.getElementById('bottom').scrollTop=this.scrollTop+100
 
}
}
 
</script>
</head>
 
<body onload="initscroll()">
<div id="top">
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras turpis 
dolor, auctor sit amet tristique et, fermentum eleifend leo. In 
venenatis laoreet eleifend. Aliquam in lectus non eros tincidunt 
molestie nec eget justo. Quisque elit arcu, rutrum tincidunt pulvinar 
vitae, venenatis vitae mauris. Nam auctor interdum justo ut vestibulum. 
Sed vel sem lectus, non feugiat mi. Aliquam erat volutpat. Nunc eu 
elementum ante.
</p>
<p>
Mauris luctus neque non diam rutrum id sollicitudin magna volutpat. Nam 
non arcu tellus. In hac habitasse platea dictumst. Vivamus eget nisi 
sem. Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Donec pharetra tempor mi, ut sagittis felis 
mollis vel. Suspendisse turpis erat, gravida vitae mollis in, 
condimentum vel tellus.
</p>
<p>
Nunc id purus sit amet elit hendrerit tempor. Aliquam dui ligula, tempor
 id mollis in, vestibulum vitae libero. Donec interdum condimentum dui 
vitae tristique. Maecenas dui augue, auctor quis sagittis non, aliquet 
ut elit. Maecenas nec metus ut orci commodo faucibus id sit amet dolor. 
Praesent tincidunt sollicitudin pulvinar. Nullam dapibus varius 
malesuada.
</p>
<p>
Vivamus posuere posuere gravida. Suspendisse eget turpis eu nisi 
sagittis porttitor. Nam at mauris id erat rutrum pellentesque vel a 
neque. Nam eu dui ac odio ultricies molestie. Aliquam nibh purus, 
aliquet eget gravida sed, varius vel lectus. Sed odio augue, mattis id 
aliquet in, adipiscing fermentum lorem. Fusce tellus augue, venenatis id
 lobortis ac, volutpat vitae lectus. Sed vehicula ornare aliquet. Sed 
semper nunc eget tellus facilisis id mollis lectus tincidunt. Nullam 
eget consequat mauris. Sed varius adipiscing elementum. Vestibulum dui 
eros, blandit consectetur rhoncus a, consequat ac lorem. Lorem ipsum 
dolor sit amet, consectetur adipiscing elit. Mauris blandit tempor enim 
blandit lacinia. Pellentesque tincidunt velit eget tellus interdum 
convallis nec sed turpis. Phasellus iaculis convallis sem sed lobortis.
</p>
<p>
Vestibulum dapibus, urna et ornare pellentesque, risus dui rutrum orci, 
sed accumsan tortor libero sit amet nulla. Nullam mattis aliquam 
laoreet. Maecenas nec purus eget sapien auctor luctus. Sed aliquam felis
 eu massa sodales sodales. Sed non ante eros. Morbi luctus molestie 
dolor, id eleifend risus consequat in. Nulla scelerisque suscipit 
scelerisque. Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Ut porta varius lectus eu imperdiet. 
Vestibulum justo urna, faucibus quis pulvinar a, vehicula eget est.
</p></div>
</div>
<div id="middle">
 
</div>
<div id="bottom">
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras turpis 
dolor, auctor sit amet tristique et, fermentum eleifend leo. In 
venenatis laoreet eleifend. Aliquam in lectus non eros tincidunt 
molestie nec eget justo. Quisque elit arcu, rutrum tincidunt pulvinar 
vitae, venenatis vitae mauris. Nam auctor interdum justo ut vestibulum. 
Sed vel sem lectus, non feugiat mi. Aliquam erat volutpat. Nunc eu 
elementum ante.
</p>
<p>
Mauris luctus neque non diam rutrum id sollicitudin magna volutpat. Nam 
non arcu tellus. In hac habitasse platea dictumst. Vivamus eget nisi 
sem. Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Donec pharetra tempor mi, ut sagittis felis 
mollis vel. Suspendisse turpis erat, gravida vitae mollis in, 
condimentum vel tellus.
</p>
<p>
Nunc id purus sit amet elit hendrerit tempor. Aliquam dui ligula, tempor
 id mollis in, vestibulum vitae libero. Donec interdum condimentum dui 
vitae tristique. Maecenas dui augue, auctor quis sagittis non, aliquet 
ut elit. Maecenas nec metus ut orci commodo faucibus id sit amet dolor. 
Praesent tincidunt sollicitudin pulvinar. Nullam dapibus varius 
malesuada.
</p>
<p>
Vivamus posuere posuere gravida. Suspendisse eget turpis eu nisi 
sagittis porttitor. Nam at mauris id erat rutrum pellentesque vel a 
neque. Nam eu dui ac odio ultricies molestie. Aliquam nibh purus, 
aliquet eget gravida sed, varius vel lectus. Sed odio augue, mattis id 
aliquet in, adipiscing fermentum lorem. Fusce tellus augue, venenatis id
 lobortis ac, volutpat vitae lectus. Sed vehicula ornare aliquet. Sed 
semper nunc eget tellus facilisis id mollis lectus tincidunt. Nullam 
eget consequat mauris. Sed varius adipiscing elementum. Vestibulum dui 
eros, blandit consectetur rhoncus a, consequat ac lorem. Lorem ipsum 
dolor sit amet, consectetur adipiscing elit. Mauris blandit tempor enim 
blandit lacinia. Pellentesque tincidunt velit eget tellus interdum 
convallis nec sed turpis. Phasellus iaculis convallis sem sed lobortis.
</p>
<p>
Vestibulum dapibus, urna et ornare pellentesque, risus dui rutrum orci, 
sed accumsan tortor libero sit amet nulla. Nullam mattis aliquam 
laoreet. Maecenas nec purus eget sapien auctor luctus. Sed aliquam felis
 eu massa sodales sodales. Sed non ante eros. Morbi luctus molestie 
dolor, id eleifend risus consequat in. Nulla scelerisque suscipit 
scelerisque. Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Ut porta varius lectus eu imperdiet. 
Vestibulum justo urna, faucibus quis pulvinar a, vehicula eget est.
</p></div>
<div id="vspacer"></div>
</div>
</body>
 
</html>

[edit] petit modif dans le code de sorte à prendre en compte la hauteur de scroll du la div du haut pour l'ajouter dans la div du bas pour la fin de course du scroll...

[edit +] Modification du css pour tenir compte de la difference de la largeur interne des zones avec et sans scrollbar, tu ne devrait pas avoir ce souci avec tes boutons de scroll, les deux zones ayant la même largeur de contenu et donc le même wrap de texte