Texte défilant avant arrêt

Gunner4902 · 08/11/2007, 00h50

Bonjour à tous,

J’ai écumé Google et les sites de JS afin de trouver un script qui puisse répondre à mon attente, mais sans succès…

Je souhaiterai qu’un texte apparaisse à un endroit précis de ma page (comme s’il sortait d’une enveloppe par exemple) et qu’il défile sur quelques centimètres avant de se figer dans sa version définitive. Tout ceci étant déclenché par un OnMouseOver.

L’idée est de faire un texte sortant d’une enveloppe avant de prendre sa place définitive sur la page. Le texte est géré aléatoirement en php.

Voici le code actuel :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="whois">
  <div><!--ce div sert à afficher une enveloppe en background via la feuille de style--></div>
  <?php
      function texte()
      {
        $text=array(                                                       "<span>texte 1</span>",
        "<span>texte 2</span>");
        $num=rand(0, sizeof($text)-1 );
        echo $text[$num];
      }
  texte();
  ?>
</div>

L’idée est donc d’encapsuler le php via le JavaScript (je l’ai fait ailleurs dans la page), tout en prenant en compte le coté : « texte défilant, après apparition à un endroit E et s’arrêtant à un endroit E" »

Merci de votre aide

**SpaceFrog** · 08/11/2007, 10h05

un truc vite fait juste pour te donner une piste :

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
 
<script type='text/javascript'>
var moving
function moveright(obj){
posleft=parseInt(obj.style.left)
if (posleft<200){
 	posleft++;
 	obj.style.left=posleft+'px';}
else{
	clearInterval(moving)
	}
}
 
function action(){
   document.getElementById('div2').style.visibility='visible';
   setTimeout(function(){
   document.getElementById('div1').style.visibility='visible';
	var moving=setInterval("moveright(document.getElementById('div1'))",10);
	},1000);
}
</script>
</head>
 
<body onload="" >
<div id="div0" style="position:absolute; z-index:4;top:100px; left:1px; width:100px;height:100px;background-color:red;border:solid 1px gray;">&nbsp</div>
<div id="div1" style="position:absolute; z-index:3;visibility:hidden;top:100px; left:0px; background-color:transparent;margin-top:50px; font-family:verdana;">message sortant</div>
<div id="div2" style="position:absolute; z-index:2; visibility:hidden;top:100px; left:101px; width:1x;height:1px;border:solid 40px white;border-left:solid 40px red;">&nbsp</div>
 
<input type='button' onclick='action()' value='go' />
</body>
 
</html>

edit:

Code :

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

1
2
3
4
else{
	clearInterval(moving);
	document.getElementById('div2').style.visibility='hidden';
		}

pour refermer l'enveloppe après ...

Gunner4902 · 08/11/2007, 11h26

Merci SpaceFrog

Celà fonctionne très bien sur IE et sur Firefox et est parfaitement ce que je cherchais, mais sur Opera, rien ne se passe…

Opera traite-t-il différemment le JS ? Qu’y a-t-il à faire pour rendre ce code compatible Opera (qui est le navigateur par défaut du réseau).

Merci

**SpaceFrog** · 08/11/2007, 13h01

je ne vois pas ce qui peut gener opera ...
http://www.opera.com/docs/specs/js/ecma/

t's sur que js n'est pas désactivé sur opéra ?

Gunner4902 · 08/11/2007, 13h24

Le Javascript est bien activé, j’ai la case cochée à côté de la barre d’url.

Je viens de lancer la console d’erreur après avoir isolé le code Javascript que tu as fair sur une page vierge :

Code :

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

1
2
3
4
5
6
7
8
9
Event thread: click
Error: 
name: TypeError
message: Statement on line 1: Type mismatch (usually a non-object value used where an object is required)
Backtrace:
  Line 1 of  script 
    action();
  At unknown location
    [statement source code not available]

Ca fait référence à :

Code :

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

1
2
3
4
5
6
function action(){
   setTimeout(function(){
   document.getElementById('div1').style.visibility='visible';
	var moving=setInterval("moveright(document.getElementById('div1'))",10);
	},1000);
}

Qu’est-ce qui ne va pas dans cette syntaxe ?
Merci

**SpaceFrog** · 08/11/2007, 13h34

rien ...
enfin sauf pour opéra ... et là je ne suis pas spécialiste ...

Texte défilant avant arrêt

JavaScript

Vue hybride

Discussions similaires

Partager

Partager