Scroller Vertical avec pause

Signaler
Messages postés
262
Date d'inscription
mardi 26 février 2002
Statut
Membre
Dernière intervention
27 février 2012
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
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

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
Bonjour,
    et tout ça pour afficher un texte ?
    utilise donc la balise marquee...
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
262
Date d'inscription
mardi 26 février 2002
Statut
Membre
Dernière intervention
27 février 2012

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
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
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]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
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]
Messages postés
262
Date d'inscription
mardi 26 février 2002
Statut
Membre
Dernière intervention
27 février 2012

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
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
>>

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]
Messages postés
262
Date d'inscription
mardi 26 février 2002
Statut
Membre
Dernière intervention
27 février 2012

Je cherche réellement à developper ça comme ça.

Je continu mes recherches.

Encore merci pour ton aide.
Fabiano13
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
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)