Scroller vertical pour du texte dans un div

cs_fabiano13 Messages postés 262 Date d'inscription mardi 26 février 2002 Statut Membre Dernière intervention 27 février 2012 - 23 mai 2008 à 10:38
cs_fabiano13 Messages postés 262 Date d'inscription mardi 26 février 2002 Statut Membre Dernière intervention 27 février 2012 - 23 mai 2008 à 13:02

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 ? (S'abstenir pour toutes les réponses concernant les marquee !)

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]='[Coding]

" target="_new">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>

A voir également:

4 réponses

Réponse 1 / 4

XtremDuke Messages postés 626 Date d'inscription samedi 28 septembre 2002 Statut Membre Dernière intervention 18 mai 2009 4
23 mai 2008 à 12:06

Salut,

Ca me parait un peut compliqué pour un scroller. Voilà un exemple que je viens de pondre vite-fait. A toi de le rendre un peu plus classe (conversion objet + gestion evenement) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Exemple</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="fr" />
<style type="text/css">
body{
  background:#fff;
  font:11px/16px Verdana, "Trebushet MS", Arial, Helvetica;
  color:#333;
}

#scrollZone{
  border: 1px solid #bbb;
  background: #f2f2f2;
  width: 220px;
  height: 300px;
  margin: 24px;
  overflow: hidden;
}

#textToScroll{
  text-align: justify;
  overflow: hidden;
}
</style>
</head>



   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.

   Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

   Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.


<script type="text/javascript">
var scrollingEnabled = true;
var textHeight = new Number();
var zoneHeight = new Number();
var scrollSpeed = 20;
var scrollPause = 2000;

function $(obj){ return document.getElementById(obj); }

function iniScrolling(){
  textHeight = $('textToScroll').offsetHeight;
  zoneHeight = $('scrollZone').offsetHeight;
  if(textHeight>zoneHeight) window.setTimeout('scrollText()', scrollPause);
}

function scrollText(){
  var currentMargin = parseInt($('textToScroll').style.marginTop) || 0;
  if(currentMargin>=-(textHeight-zoneHeight) && scrollingEnabled==true){
   currentMargin--;
   $('textToScroll').style.marginTop = currentMargin+'px';
   window.setTimeout('scrollText()', scrollSpeed);
  }else return;
}

window.onload = iniScrolling;
</script>

</html>

Réponse 2 / 4

cs_fabiano13 Messages postés 262 Date d'inscription mardi 26 février 2002 Statut Membre Dernière intervention 27 février 2012
23 mai 2008 à 12:41

Merci pour ta réponse. Je vais parraître un peu casse cou--lle, mais si tu fais un Copie/Coller du code que j'ai récupéré il devrait y avoir une solution à gérer le problème de longueur de texte. Il faut qu'il pluisse ralentir sa descente lorsqu'il tombe sur une actu plus grande que la taille du div (200/98 px). J'ai pu mettre des marqueurs lorsqu'il tombe sur un texte plus long. Ce que je n'arrive pas à faire c'est ce ralentissement à ce moment là. Peux-tu m'aider ?

Réponse 3 / 4

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
23 mai 2008 à 12:47

Bonjour,
tu en es ou de ton post précédent

http:

//www.javascriptfr.com/infomsg_SCROLLER-VERTICAL-AVEC-PAUSE_1136444.aspx

;O)

Réponse 4 / 4

cs_fabiano13 Messages postés 262 Date d'inscription mardi 26 février 2002 Statut Membre Dernière intervention 27 février 2012
23 mai 2008 à 13:02

Oui, je suis désolé ! Tu vas me prendre pour un dingue, mais il me faut trouver cette solution. D'avance merci.

Discussions similaires

Faire scroller une listview

scroller pour afficher la ligne contenant le string choisi

scroller plusieurs listbox en meme temp

Scroller automatiquement sur un Panel

Scroller un DIV

Votre réponse

Discussions similaires