[Résolu] Action spécifique au changement d'url avec javascript

Question

xavierk

7 Mar 2013 à 18:47

Bonjour,

J'ai une question concernant la récupération d'url en javascript et l'attribution d'une animation keyframe (en classe) à un type d'url précis par exemple:

index.html#/maSection1 = animation css keyframe1
index.html#/maSection2 = animation css keyframe2
index.html#/maSection3 = animation css keyframe3

Au niveau de mon projet ça se présente ainsi:
L'ensemble du projet et géré en "deeplink" avec utilisation du clavier flèche, du changement d'url dans la barre d'adresse puis avec des liens internes (menu). Tout fonctionne Smiley biggrin

J'ai déjà la partie qui écoute le changement d'url; cependant celui ci écoute uniquement au refresh de la page alors que je souhaiterai que l'écouteur ,écoute constamment les changements d'url afin que ce dernier puisse ensuite commander l'animation css voulue. Pour le moment l'animation se joue uniquement lors du clic sur un des liens de mon menu via cette ligne (qui appelle une des deux fonctions):

<div class="nav">
            <ul>
              <li><a class="maClasse1" onclick="anim1()">LIEN1</a></li>
              <li><a class="maClasse2" onclick="anim2()">LIEN2</a></li>
            </ul>
</div>

Voici ma partie JS

<script type="text/javascript">
//*****ICI la partie qui écoute le changement d'url*****//
var url = document.location.href;

if (url.search("index.html#/maSection1") > 0) {
   alert('successfully executed block containing "keyframeAnimation1"');
} 
else if (url.search("index.html#/maSection2") > 0) {
   alert('successfully executed block containing "keyframeAnimation2"');
}

//***** ICI se trouve l'appel de l'animation keyframes selon le clic du lien*****// 
function keyframeAnimation1(){
document.getElementById('anim1').className ='MonAnimation1';
}

function keyframeAnimation2(){
document.getElementById('anim2').className ='MonAnimation2'; 
}     
</script>

Mon code html contient deux div (pour le moment) qui sont appelés par la fonction javascript ci-dessus.

 <body>
.....
<div id="anim1"></div>
<div id="anim2"></div>
....
 </body>

ma Css contient le déroulement de chacune des animations appelées:

.MonAnimation1
{
animation:MonAnimation1 2s;
-moz-animation:MonAnimation1 2s; /* Firefox */
-webkit-animation:MonAnimation1 2s; /* Safari and Chrome */
animation-direction:alternate;
-moz-animation-direction:alternate;
-webkit-animation-direction:alternate;
animation-timing-function:easeInOut;
-moz-animation-timing-function:easeInOut; /* Firefox */
-webkit-animation-timing-function:easeInOut; /* Safari and Chrome */
animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards; /* Firefox */
-webkit-animation-fill-mode:forwards; /* Safari and Chrome */
animation-delay:0.5s;
-moz-animation-delay:0.5s; /* Firefox */
-webkit-animation-delay:0.5s; /* Safari and Chrome */
}
@keyframes MonAnimation1
{
0% {margin-left:1280px; opacity:0;}
100% {margin-left:140%; opacity:1;}
}
@-moz-keyframes MonAnimation1 
{
0% {margin-left:1280px; opacity:0;}
100% {margin-left:140%; opacity:1;}
}
@-webkit-keyframes MonAnimation1
{
0% {margin-left:1280px; opacity:0;}
100% {margin-left:140%; opacity:1;}
}


#anim1{
	background: url("../images/monImage.png") no-repeat scroll 100% 0;
	width:500px;
	height:499px;
	z-index: 1;
	position: absolute;
	opacity:0;
}

//*********************//
.MonAnimation2
{
animation:MonAnimation2 5s;
-moz-animation:MonAnimation2 5s; /* Firefox */
-webkit-animation:MonAnimation2 5s; /* Safari and Chrome */
animation-direction:alternate;
-moz-animation-direction:alternate;
-webkit-animation-direction:alternate;
animation-timing-function:easeInOut;
-moz-animation-timing-function:easeInOut; /* Firefox */
-webkit-animation-timing-function:easeInOut; /* Safari and Chrome */
animation-fill-mode:both;
-moz-animation-fill-mode:both; /* Firefox */
-webkit-animation-fill-mode:both; /* Safari and Chrome */
animation-delay:0.5s;
-moz-animation-delay:0.5s; /* Firefox */
-webkit-animation-delay:0.5s; /* Safari and Chrome */
}
@keyframes MonAnimation2
{
0% {margin-left:1280px; opacity:0;}
100% {margin-left:40%; opacity:1;}
}
@-moz-keyframes MonAnimation2
{
0% {margin-left:1280px; opacity:0;}
100% {margin-left:40%; opacity:1;}
}
@-webkit-keyframes MonAnimation2
{
0% {margin-left:1280px; opacity:0;}
100% {margin-left:40%; opacity:1;}
}

#anim2{
	background: url("../images/monImage2.png") no-repeat scroll 100% 0;
	width:500px;
	height:499px;
	z-index: 1;
	position: absolute;
	opacity:0;
}

Donc pour résumer la nature de ma demande:
Il s'agirait tout d'abord de rendre l'écouteur JS (var url = document.location.href;) permanent, afin qu'à chaque changement d'url je puisse avec mes conditions (if (url.search("index.html#/home") > 0) {) commander une de mes animations css.
Donc y a-t-il une solution pour que l'écoute des changements d'url se fasse en permanence? j'ai regardé du côté des setInterval et setTimeout mais j'avoue que je sèche un peu à ce niveau.
Car pour le moment ma box d'alerte s'affiche bien mais uniquement au refresh.

Et dans un second temps j'aimerais faire en sorte que si je choisi ou si ça tombe sur l'url:
index.html#/maSection1
je puisse lui attribuer mon animation keyframes voulue.

J'ai déjà l'appelle de l'animation keyframes qui se fait via le code (voir plus haut); mais c'est uniquement au clic sur un lien.

Lorsque je met cette ligne:

document.getElementById('anim1').className ='MonAnimation1';

à l'intérieur de ma condition :

if (url.search("index.html#/maSection1") > 0) {
   alert('successfully executed block containing "keyframeAnimation1"');
document.getElementById('anim1').className ='MonAnimation1';
}

Rien ne se passe et la console Firebug me renvoie ce message:
document.getElementById(...) is null

j'espère avoir été clair dans mes explications Smiley confused

Si quelqu'un peut m'aider
Merci d'avance
Modifié par xavierk (07 Mar 2013 - 18:50)

xavierk

7 Mar 2013 à 20:47

Bon bah après quelque recherches sur le net j'ai finalement trouvé la solution Smiley lol

Un truc tout simple en plus. Pour ceux qui souhaitent attribuer une fonction x par rapport à un changement de l'url; la fonction "locationHashChanged" est votre amie:

        <script type="text/javascript">
 
function locationHashChanged() {
    if (location.hash === "#/maSection1") {
      document.getElementById('anim1').className ='MonAnimation1';
      //alert("maSection1");
    }
    if (location.hash === "#/maSection2") {
      document.getElementById('anim1').className ='MonAnimation2';
      //alert("maSection2");
    }  
}
 
window.onhashchange = locationHashChanged;
   
 function anim2(){
document.getElementById('anim1').className ='maSection1';
 
}
 function anim1(){
document.getElementById('anim1').className ='maSection2';
 
}

 </script>

Et hop résolu! Cette fonction écoutera chaque changement dans le hash et l'on pourra faire passer n'importe quelle fonction dedans que l'on navigue avec le clavier, sa souris (au clic sur un lien) ou encore avec le bouton back du navigateur .

Smiley cligne

SBoudrias

7 Mar 2013 à 22:15

Attention au support navigateur: ie9+ si ma mémoire ne fait pas défaut.

xavierk

8 Mar 2013 à 17:25

Effectivement SBoudrias tu as raison. Je n'ai pas encore testé avec ie9 mais je sais qu'avec ie10 les animations keyframes marchent. Va falloir que je définisse une règle conditionnelle pour les anciennes versions d'internet explorer... Smiley biggol

Merci du rappel

Sujet clos