11549 sujets

JavaScript, DOM et API Web HTML5

Redirection javascript

Bonjours, je suis pas très fort en JS alors je demande votre aide.
Voila mon problème(texte de l'article):


a écrit :
Animer la barre de progression

La barre de progression est un élément de formulaire automatiquement créée grâce à ses attributs, notamment value. C’est pourquoi, il n’est pas possible de modifier cet attribut par CSS (en tout cas pour l’instant...).

Pour l’animation créée ici, le JavaScript est donc indispensable. Le code utilisé est le suivant (nécessite jQuery). Une simple fonction qui récupère la valeur de value et l’incrémente de 0.25 toutes les 40ms.


function modifValues(){
   var val = $('#progress progress').attr('value');
   if(val>=100){val=5;}
   var newVal = val*1+0.25;
   var txt = Math.floor(newVal)+'%';      
     
   $('#progress progress').attr('value',newVal).text(txt);
   $('#progress strong').html(txt);
}
setInterval(function(){ modifValues(); },40);

source: http://www.css3create.com/Barre-de-progression-avec-l-element-HTML5-progress


Mon but c'est que quand ça arrive a 100% faire une redirection et je n'y arrive pas.
Mon but c'est d'afficher la barre et que quand elle arrive au bout, le visiteur soit rediriger.
C'est plus jolie que de voir marqué: redirection dans 3secondes....
Modifié par loixi (26 Jan 2013 - 16:55)
1/ Ouvrir son navigateur préféré.
2/ Tapez l'adresse de son moteur de recherche préféré.
3/ Disposer d'un clavier.
4/ Ecrire quelque chose comme : "redirection en javascript" et appuyer sur Entrée.
5/ Lire les en-tête trouvé
6/ Cliquez sur les liens et lire se que l'on trouve.

http://www.annuaire-info.com/redirection-javascript/
http://www.destrucsaweb.com/ressources/phpmyannu/goto_44.php
http://memo-web.fr/categorie-javascript-120.php

Réponse : document.location.href="http://manouvellepage.com";

A mettre dans la fonction que tu appel quand ton loader est terminé.

Sinon, je ne me suis pas encore attaqué au Loader en HTML5 justement mais ça me parait bizarre cette histoire de rafraichir toutes les x secondes. C'est pas un 'vrai' loader ça. Est-ce que tu as cherché d'autres sources ?

Pour finir, que tu ne sois pas très fort en JS ok, mais une recherche Google (ou autre) ne coute pas grand chose. Surtout pour ce genre de chose.
mERCI, oui je suis pas très fort en JS et j'ai cherché avant de demander et rien ne va.
J'ai chercher comment faire une redirection, sauf qu'il faut savoir comment la faire au bon moment.


<script>
function modifValues(){
   var val = $('#progress progress').attr('value');
   if(val>=100){val=5;}
   var newVal = val*1+3.00;
   var txt = Math.floor(newVal)+'%';      
     
   $('#progress progress').attr('value',newVal).text(txt);
   $('#progress strong').html(txt);
   document.location.href="https://www.google.fr/"; // test
}
setInterval(function(){ modifValues(); },100);

</script>


Ce qu'il faut c'est que quand la barre arrive a 100% faire la redirection et je ne comprends pas comment faire.
Modifié par loixi (26 Jan 2013 - 17:31)
MagicCarpet a écrit :
Ca marche toujours pas avec ton dernier code ?
T'as un lien pour ta page ?

je suis en local

On dirait que ça redirige directement avant même que la barre arrive a 100%
Il faut donc une condition et pouvoir déterminer quand la barre est a 100% pour que la condition soit vrai et donc faire la redirection.
Modifié par loixi (26 Jan 2013 - 17:38)
J'ai tester le code a part:

<script>
function modifValues(){
   var val = $('#progress progress').attr('value');
   if(val>=100){val=5;}
   var newVal = val*1+3.00;
   var txt = Math.floor(newVal)+'%';      
     
   $('#progress progress').attr('value',newVal).text(txt);
   $('#progress strong').html(txt);

if(newVal>=100){
document.location.href="redirection.php?nb=<?php echo @$_GET['nb']+1; ?>";}
}
setInterval(function(){ modifValues(); },100);

</script>

A chaque fois que la barre atteint 100%, NB prend +1 et recommence et donc il y a bien redirection a 100%.
Sur ma page principal la redirection a l'aire de fonctionné aussi, mais ne se fait pas tout de suite et donc la barre refait un tour avant la redirection et ça fait moche.
Modifié par loixi (27 Jan 2013 - 09:57)
Donc au final, j'avais bien réussi, mais ce que je comprends pas c'est pourquoi la redirection n'est pas aussi rapide quand php.
En php c'est tellement rapide qu'on presque pas la redirection.

c'est possible de faire en sorte que ça se fasse qu'une fois ? Que la barre s’arrête a 100%, car la c'est comme un GIF qui recommence a l'infinie.
En bref je veux stopper l'exécution du script dès que la barre est a 100% et faire la redirection
Modifié par loixi (27 Jan 2013 - 09:59)
C'est pas la variable val à tester et non pas newVal ?

Est-ce que tu peux montrer ton code PHP ? Il doit te paraitre plus rapide car il ne doit pas attendre.
Ta barre recommence un tour car tu attends que la valeur soit supérieur à 100, alors que je suppose que souhaiterais plutôt que dès que c'est égale à 100
<script>

function modifValues(){

   var val = $('#progress progress').attr('value');
   if(val>=100){val=5;}
   var newVal = val*1+3.00;
   var txt = Math.floor(newVal)+'%';       

   $('#progress progress').attr('value',newVal).text(txt);
   $('#progress strong').html(txt);
	if(newVal==100){
// document.location.href="redirection.php?nb=<?php echo @$_GET['nb']+1; ?>";
document.location.href="index.php";
	}  
}


setInterval(function(){ modifValues(); },80);
</script>


Voila ? Sauf que ça change rien du tout et même que la condition ne marche pas, pas de redirection alors que la oui:

<script>

function modifValues(){

   var val = $('#progress progress').attr('value');
   if(val>=100){val=5;}
   var newVal = val*1+3.00;
   var txt = Math.floor(newVal)+'%';       

   $('#progress progress').attr('value',newVal).text(txt);
   $('#progress strong').html(txt);
	if(newVal>=100){
// document.location.href="redirection.php?nb=<?php echo @$_GET['nb']+1; ?>";
document.location.href="index.php";
	}  
}


setInterval(function(){ modifValues(); },80);
</script>


La redirection s'effectue bien a 100% mais comme elle est long, alors quand php on la voit même pas, en JS la barre de chargement a presque le temps de refaire un tour et c'est pas beau.
Modifié par loixi (27 Jan 2013 - 13:50)
tu peux m'indiquer comment faire, je comprends pas trop comment faire avec le résultats de google. Il faut que je me mette au JS
Pardon, ça sera un clearInterval() à faire dans ton cas, tu le placerais lorsque tu sors de ta boucle infernale Smiley cligne

http://www.w3schools.com/js/js_timing.asp

Ce qui donnerait un truc dans ce genre :

<script>
function modifValues(){

   var val = $('#progress progress').attr('value');
   if(val>=100){val=5;}
   var newVal = val*1+3.00;
   var txt = Math.floor(newVal)+'%';       

   $('#progress progress').attr('value',newVal).text(txt);
   $('#progress strong').html(txt);
	if(newVal>=100){
	clearInterval(var_interval);
	document.location.href="index.php";
	}  
}
var var_interval = setInterval(function(){ modifValues(); },80);
</script>


Que fait ce truc ? Il arrête tout simplement le "setInterval", et donc arrête de lancer la fonction qui continue de faire avancer ton "loader".
Modifié par Super_baloo8 (27 Jan 2013 - 22:51)
Merci, ça marche, je crois que je vais me mettre au JS, c'est bien pratique, par contre j'ai cru comprendre qu'il y a des librairies comme jquery ? et on peut pas les mélanger ?


Sinon pourquoi la barre s'arrête a 102% et pas 100% pile ?
Parce que tu incrémente de 3 en 3, donc 100 (1+0+0 = 1 qui n'est pas visible par 3) n'étant pas divisible par 3, tu as l'entier supérieur, qui est 102 (1+0+2 = 3 donc divisible par 3).

Tu peux commencer par jQuery, et revenir plus tard au JS, et les deux cohabite plutôt bien, si tu fait attention au nommage de tes fonctions/variables.
Modifié par Super_baloo8 (27 Jan 2013 - 23:08)
Ok, je vais faire en sorte que ça s'arrête a 100% alors.

Sinon il y a quelque mois j'avais trouvé un bout de code bien sympa qui fonctionnait grâce a un fichier JS(jQuery ?) et un autre bout de code qui devait marcher grâce a autre chose... et il ne fonctionnait pas si bien ensemble et tu me dit qu'il y a plusieurs type de JS ?
Sujet clos
Aller à