11486 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Rajouter une phrase dans un code javascript

Pages :
Bonsoir,
J'aimerais rajouter qq phrases à ce code :
		container.shuffleLetters({
			"text": "bolo"
											
		});

Genre :
"text": "bolo"
"text": "bolobo lbbo"
"text": "bolobo blbolbbobl"
mais impossible d'y arriver Smiley decu
Si qq peut m'aider, voici le code au complet :
        $(function(){

	// container is the DOM element;
	// userText is the textbox

	var container = $("#container")
		userText = $('#userText'); 

	// Shuffle the contents of container
	container.shuffleLetters();

	// Bind events
	userText.click(function () {

	  userText.val("");

	}).bind('keypress',function(e){

		if(e.keyCode == 13){

			// The return key was pressed

			container.shuffleLetters({
				"text": userText.val()
			});

			userText.val("");
		}

	}).hide();

	// Leave a 4 second pause

	setTimeout(function(){

		// Shuffle the container with custom text
		container.shuffleLetters({
			"text": "bolo"
											
		});

		userText.val().fadeIn();

	},4000);

});

Merci et bonne soirée,
E.
Bonjour,

rien ne vous empêche de créer une liste de String qui contiendra toutes vos phrases.
Cependant, la méthode shuffleLetters n'est pas défini, d'où vient-elle ?
Donc tu n'as jamais fais de programmation apparemment

par exemple faire ceci : 
var monTableauString = [
"Ma première phrase",
"Ma seconde phrase",
"Ma troisième phrase"
];


C'est quelque chose que vous avez déjà vu ?
(je me permets de te tutoyer)

Ok, alors je ne connais la librairie que tu utilises. Donc soit :
- tu apprends à faire un peu de javascript et dans ce cas tu vas devoir modifier un peu la librairie que tu utilises (ce qui n'est pas forcément facile) (dès que tu feras une mise jour tu devras recommencer).
- tu peux également surcharger la méthode d'affichage pour faire ce que tu souhaites
- tu apprends javascript et tu te crées ta propre librairie pour faire la chose (ça prendrai 3-4 à jours pour faire une librairie fonctionnelle)
- tu contactes le support de la librairie pour qu'il développe ce que tu te demandes (peu de chance qu'il le fasse).

Personnellement je me tâtes entre la 2e et la 3e solution.
Merci Javascripteur,
Mais qu'entends-tu par "tu peux également surcharger la méthode d'affichage pour faire ce que tu souhaites" ?
Bonjour,

Pour info, le plugin n'est pas censé être appelé avec forcément le paramètre "text".

Il suffit normalement juste d'avoir le texte directement dans un élément :
<div class="effect">Salut effet aléatoire</div>

... avec l'appel :
$('.effect').shuffleLetters()

As-tu essayé ça ?
Bonjour SolidSnake,
Je viens de tenter sans succès Smiley decu
Mais merci à toi !
@JENCAL :
dans la démo, une phrase efface la première. J'en aimerais une troisième qui efface la seconde etc...
Bon après-midi,
D.
Un truc du genre ? 

var tabBolo = ["bolo", "bolobo lbbo", "bolobo blbolbbobl"];
for(var j= 0; j < tabBolo.lengh; j++)
{
setTimeout(function(){
                
		// Shuffle the container with custom text
		container.shuffleLetters({
			"text": tabBolo[j]
											
		});

		userText.val().fadeIn();

	},4000);
}

Modifié par JENCAL (16 Feb 2016 - 16:18)
Slt JENCAL,
Peut-être un truc dans ce genre, mais qui ne fonctionne pas actuellement :
$(function(){
	
	// container is the DOM element;
	// userText is the textbox
	
	var container = $("#container")
		userText = $('#userText'); 
	
	// Shuffle the contents of container
	container.shuffleLetters();

	// Bind events
	userText.click(function () {
		
	  userText.val("");
	  
	}).bind('keypress',function(e){
		
		if(e.keyCode == 13){
			
			// The return key was pressed
			
			container.shuffleLetters({
				"text": userText.val()
			});
			
			userText.val("");
		}

	}).hide();

	// Leave a 4 second pause

var tabBolo = ["bolo", "bolobo lbbo", "bolobo blbolbbobl"];
for(var j= 0; j < tabBolo.lengh; j++)
{
setTimeout(function(){
                
		// Shuffle the container with custom text
		container.shuffleLetters({
			"text": tabBolo[j]
											
		});

		userText.val().fadeIn();

	},4000);
}
	
});

Merci pour ton aide,
D.
Bonjour,

JENCAL, ça ne fonctionne pas comme tu le voudrais ton système, si tu fais des console.log tu pourras voir...

Je propose un truc du genre :
var tabBolo = ["Ça va bien et toi ?", "Ben nickel !", "Pamplemousse...", "Pas mieux !"];
var $container = $("#container"); 

var newShuffleLetter = function(tabBolo, j, $container) {
  console.log(j)
  $container.shuffleLetters({"text": tabBolo[j]})
  j++;
  if (j<tabBolo.length) setTimeout(function(){
    newShuffleLetter(tabBolo, j, $container)
  }, 4000);
}

// Shuffle the contents of container
$container.shuffleLetters();

setTimeout(function(){
  newShuffleLetter(tabBolo, 0, $container)
}, 4000);

Cf. exemple
Modifié par SolidSnake (17 Feb 2016 - 08:41)
Bonjour à tous,
Bravo SolidSnake, ça marche du feu de Dieu !!! Smiley biggrin
Peux-tu grosso-me dire ce que tu as changé (varTabBolo etc...), histoire que tenter de comprendre UN PEU ?
Encore merci et bonne journée !
D.
Modifié par dhillig (17 Feb 2016 - 11:31)
En fait, c'est sur le même principe que ce que voulait faire JENCAL, c'est-à-dire appeler la fonction shuffleLetters() toutes les 4s en modifiant le texte à chaque fois, mais le setTimeout ne le permettait pas directement dans une boucle for (ça, je l'avais détecté) : Cf. EXEMPLE ICI

Mais par contre un truc que je n'avais pas non plus anticipé, c'est que je pensais juste arranger ça en ajoutant un facteur multiplicateur au timer du setTimeout (setTimeout(mafonction, 2000*j)), et en fait ça ne fonctionne pas mieux (et en fait c'est logique, une fonction synchrone dans une fonction asynchrone) : EXEMPLE ICI

Donc j'ai été obligé de passer par une nouvelle fonction (récursive) qui est rappelée autant de fois que nécessaire.
Modifié par SolidSnake (17 Feb 2016 - 14:22)
Bonjour à tous,
Je me permets de relancer la discussion juste pour savoir comment rendre l'animation "infinite".
Merci et bonne journée,
D.
Pages :
Sujet clos
Aller à