Discussion :

[s4mk1ng]

Bonjour j'ai un petit problème avec mon code Javascript, je voudrais que mon animation m'affiche mon texte tout en interprétant les balises html, pour ça j'ai utilisé la méthode Jquery html(). Mais ça ne marche pas, il ne me les affiche plus dans le résultata mais il ne les interprête pas ><

Merci de votre aide
Ceci est mon fichier js de base:

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
$(function(){
 
	// container is the DOM element;
	// userText is the textbox
 
	var container = $("#container");
	$("#container").html('<h1>Hello</h1>');
	$("#container").shuffleLetters();
	setTimeout(function(){
 
		// Shuffle the container with custom text
		container.shuffleLetters({
			"text": "Excellium RH Consulting : chasseur et eleveur de talents commerciaux"
		});
 
		userText.val("type anything and hit return..").fadeIn();
 
	},8000);
 
});

Et là j'ai mon appel de la méthode shuffleletter:

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
/**
 * @name		Shuffle Letters
 * @author		Martin Angelov
 * @version 	1.0
 * @url			http://tutorialzine.com/2011/09/shuffle-letters-effect-jquery/
 * @license		MIT License
 */
 
(function($){
 
	$.fn.shuffleLetters = function(prop){
 
		var options = $.extend({
			"step"		: 8,			// How many times should the letters be changed
			"fps"		: 25,			// Frames Per Second
			"text"		: "", 			// Use this text instead of the contents
			"callback"	: function(){}	// Run once the animation is complete
		},prop)
 
		return this.each(function(){
 
			var el = $(this),
				str = "";
 
 
			// Preventing parallel animations using a flag;
 
			if(el.data('animated')){
				return true;
			}
 
			el.data('animated',true);
 
 
			if(options.text) {
				str = options.text.split('');
			}
			else {
				str = el.text().split('');
			}
 
			// The types array holds the type for each character;
			// Letters holds the positions of non-space characters;
 
			var types = [],
				letters = [];
 
			// Looping through all the chars of the string
 
			for(var i=0;i<str.length;i++){
 
				var ch = str[i];
 
				if(ch == " "){
					types[i] = "space";
					continue;
				}
				else if(/[a-z]/.test(ch)){
					types[i] = "lowerLetter";
				}
				else if(/[A-Z]/.test(ch)){
					types[i] = "upperLetter";
				}
				else {
					types[i] = "symbol";
				}
 
				letters.push(i);
			}
 
			el.html("");			
 
			// Self executing named function expression:
 
			(function shuffle(start){
 
				// This code is run options.fps times per second
				// and updates the contents of the page element
 
				var i,
					len = letters.length, 
					strCopy = str.slice(0);	// Fresh copy of the string
 
				if(start>len){
 
					// The animation is complete. Updating the
					// flag and triggering the callback;
 
					el.data('animated',false);
					options.callback(el);
					return;
				}
 
				// All the work gets done here
				for(i=Math.max(start,0); i < len; i++){
 
					// The start argument and options.step limit
					// the characters we will be working on at once
 
					if( i < start+options.step){
						// Generate a random character at thsi position
						strCopy[letters[i]] = randomChar(types[letters[i]]);
					}
					else {
						strCopy[letters[i]] = "";
					}
				}
 
				el.text(strCopy.join(""));
 
				setTimeout(function(){
 
					shuffle(start+1);
 
				},1000/options.fps);
 
			})(-options.step);
 
 
		});
	};
 
	function randomChar(type){
		var pool = "";
 
		if (type == "lowerLetter"){
			pool = "abcdefghijklmnopqrstuvwxyz0123456789";
		}
		else if (type == "upperLetter"){
			pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
		}
		else if (type == "symbol"){
			pool = ",.?/\\(^)![]{}*&^%$#'\"";
		}
 
		var arr = pool.split('');
		return arr[Math.floor(Math.random()*arr.length)];
	}
 
})(jQuery);

[Bovino]

Je comprends rien...
C'est quoi qui ne s'affiche pas ?

Au fait

Code :

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

1
2
3
var container = $("#container");
$("#container").html('<h1>Hello</h1>');
$("#container").shuffleLetters();

quitte à définir des variables, autant les utiliser... ça t'éviteras de lancer toutes les fonctions de recherche de jQuery à chaque ligne...

[s4mk1ng]

Merci, j'ai bien mon texte avec mon effet mais mon hello n'est pas un H1 ><

EDIT: Finalement j'ai fait comme ça(trouvé sur le chat de Développez) :

Code :

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

container.html('Parce que <b>recruter</b> de bons commerciaux... <span style="float:right">est tout <b>sauf</b> une question de chance</span>	').find('b').shuffleLetters();

Merci