Sujet Précédent Sujet Suivant

Scroller Vertical avec pause

cs_fabiano13 Messages postés 262 Date d'inscription mardi 26 février 2002 Statut Membre Dernière intervention 27 février 2012 - 20 mai 2008 à 14:05
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 20 mai 2008 à 17:54
Bonjour, je cherche à créer un scroller vertical pour du texte et qui plus est, fonctionnel pour (IE + Firefox minimum).

Seulement lorsque le texte est trop long, on n'a pas le temps de tout lire.

Vous allez voir, j'ai récupéré quelques petites fonctions qui pourraient nous aider à réaliser ce scroller.

Une des fonction calcule la Hauteur d'un div (hidden) contenant le texte. Les autres sont celles qui créé l'animation.

Ce que je pensais faire c'est quand il est sur un texte trop long c'est bien sûr marquer un petit temps de pause (le temps de lire les premières lignes) puis qu'il continue sa course plus lentement jusqu'à la fin du texte.

M'avez vous compris ?

D'avance merci.
Fabiano13

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
#pscroller1{
width: 200px;
height: 98px;
}
.someclass{ font-family:"Verdana";font-size:10px;}
.cDiv{
width: 200px;
height: 98px;
padding: 5px;
background-color: lightyellow;
border: 1px solid black;
}
</style>


<script type="text/javascript">


function CalculeTaille(tt,sQuoi){
String.prototype.textWidth=function(police,taille){
var container=document.createElement('div');
container.style.visibility='hidden';
if (sQuoi=="Hauteur"){
container.style.width = '200px'
}else{
container.style.height = '98px'
}
container.style.fontFamily=police
container.style.fontSize=taille+'px'
container.id="magicdiv";
container.style.display='inline';
document.body.appendChild(container);
document.getElementById('magicdiv').innerHTML=this;
if (sQuoi=="Hauteur"){
var longueur = document.getElementById('magicdiv').offsetHeight;
}else{
var longueur = document.getElementById('magicdiv').offsetWidth;
}
document.getElementById('magicdiv').parentNode.removeChild(document.getElementById('magicdiv'))
return longueur + ' px'
}
return tt.textWidth('Verdana',10)
}


var pausecontent=new Array()
pausecontent[0]='http://www.codingforums.com">Coding Forums
Web coding and development forums.

'
pausecontent[1]='http://www.javascriptkit.com">JavaScript Kit
Comprehensive JavaScript tutorials and over 400+ free scripts! dsdg sdgg ksj
dmglkj sdglkjsd glkjsd
hsd gkjsdh gskdjgh sdsqf qsfqsh kfjqhs flkjqsh flkjqshf lkqsjhf qslkjfqh slkfjqsh fkljqsyfiuqs hfkqsjhf lqskjfh qslkjfh qskgjh sdkg
jhsdkgjsh
dgkuy sdkgjshd
glkjsd glkjsdg lsudg isudjg;sjdg lskdglsd gsdg fab.

'
pausecontent[2]='[CSS Drive
Categorized CSS gallery and examples.

'


</script>


<script type="text/javascript">


function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('

'+content[0]+'

'+content[1]+'

')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}


pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
//alert(this.content[0] + '\n\n' + CalculeTaille(this.content[0],'Hauteur'))
}




pausescroller.prototype.animateup=function(){
if (parseInt(CalculeTaille(this.content[this.hiddendivpointer],'Hauteur'))>98){


var scrollerinstance=this
//alert(parseInt(this.hiddendiv.style.top) + ' ' + this.visibledivtop+5)
//alert(parseInt(CalculeTaille(this.content[this.hiddendivpointer],'Hauteur'))-98)


if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5 + "px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5 + "px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
//alert(this.content[this.hiddendivpointer] + '\n\n' + CalculeTaille(this.content[this.hiddendivpointer],'Hauteur'))
}


}else{
//alert(this.hiddendiv.style.top + ' ' + this.visibledivtop)
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
//alert(this.content[this.hiddendivpointer] + '\n\n' + CalculeTaille(this.content[this.hiddendivpointer],'Hauteur'))
}


}


}




pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}


pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}


pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1){ //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
}else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}
pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}


</script>
</head>



<script type="text/javascript">


new pausescroller(pausecontent, "pscroller1", "someclass", 3000)


</script>


</html>

8 réponses

Réponse 1 / 8
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
20 mai 2008 à 14:08
Bonjour,
    et tout ça pour afficher un texte ?
    utilise donc la balise marquee...
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
Réponse 2 / 8
cs_fabiano13 Messages postés 262 Date d'inscription mardi 26 février 2002 Statut Membre Dernière intervention 27 février 2012
20 mai 2008 à 14:28
Je redoutai cette réponse !

La balise marquee n'a pas la fonction pause et encore moins celle pour un texte trop long.

C'est juste que pour la leture c'est plus agréable.

Merci de m'aider.
Fabiano13
0
Réponse 3 / 8
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
20 mai 2008 à 14:36
>>La balise marquee n'a pas la fonction pause et encore moins celle pour un texte trop long.
    bien sur que si.... stop() et start()       
                qu'on peut déclencher avec un setTimeOut par exemple...
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
Réponse 4 / 8
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
20 mai 2008 à 14:51
ch'tiot dénut d'exemple :

    <marquee onmouseover="this.stop();"
                onmouseout="this.start();"
                id="mq"
                direction="up"
                style="width:50%;height:20%">
        ligne 1
        ligne 2
        ligne 3
        ligne 4
        ligne 5
        ligne 5
        ligne 7
    </marquee>
    <script>
        window.onload=function()
        {    setTimeout("document.getElementById('mq').stop();",700);
            setTimeout("document.getElementById('mq').start();",2000);
        }
    </script>

    à toi d'affiner....

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
cs_fabiano13 Messages postés 262 Date d'inscription mardi 26 février 2002 Statut Membre Dernière intervention 27 février 2012
20 mai 2008 à 14:58
Ca dépend du temps, pas de la hauteur. Car selon la longueur du texte de la news il te faudra sûrement plus de temps à la lire.

Merci qu'en même pour l'info (marquee), mais j'aimerai bien qu'on bosse sur les fonctions que j'ai soumises. Si bien sûr vous avez envis de m'aider dans ce sens.

Bien à vous tous.
Fabiano13
0
Réponse 6 / 8
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
20 mai 2008 à 15:05
>>

Ca dépend du temps, pas de la hauteur.
    dans mon exemple !
        tu disposes d'autres paramètres de réglage ( vitesse, scroll, délai ... )
                          d'autres approches....
        mais c'est comme tu le sens.
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
Réponse 7 / 8
cs_fabiano13 Messages postés 262 Date d'inscription mardi 26 février 2002 Statut Membre Dernière intervention 27 février 2012
20 mai 2008 à 15:11
Je cherche réellement à developper ça comme ça.

Je continu mes recherches.

Encore merci pour ton aide.
Fabiano13
0
Réponse 8 / 8
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
20 mai 2008 à 17:54
Bonjour à tous,
OUAPS pas top le code, peut être le
copier/coller, pas tout bien saisi...
quelques approches...
1/
faire défiler plus doucement pour laisser le temps de lire
2/ mettre
un mouseover = STOP pour permettre une lecture plus attentive
3/
s'arranger pour que le message tienne en entier ou alors le décomposer

4/ tester si la hauteur du message est plus grande que la fenêtre
d'affichage dans ce cas faire des pauses intermédiaires
voila quelques
pistes...
;O)
0

Discussions similaires

Faire scroller une listview
hobbi1 -
hobbi1 -

2 réponses
scroller pour afficher la ligne contenant le string choisi
PhilLu -
MAURICIO -

6 réponses
scroller plusieurs listbox en meme temp
jerome57440 -
jrivet -

10 réponses
Scroller automatiquement sur un Panel
Shaegal -
ucfoutu -

7 réponses
TextBox, défilement vertical automatique
zark92 -
zark92 -

5 réponses
Rejoignez-nous