Sujet Précédent Sujet Suivant

Problème de péplacement de calque dans une application de carte

cs_akiko Messages postés 17 Date d'inscription mercredi 16 juillet 2003 Statut Membre Dernière intervention 22 août 2009 - 12 déc. 2008 à 11:01
cs_akiko Messages postés 17 Date d'inscription mercredi 16 juillet 2003 Statut Membre Dernière intervention 22 août 2009 - 12 déc. 2008 à 19:38
Avant toute chose bonjour et merci d'avance d'avoir ou de prendre le temps de lire le contenu de mon problème...

je travaille actuellement sur une application de cartographie [ non, je ne veux pas utiliser google-map ] et pour des raisons ergonomique je voudrais pouvoir replacer mon fond de carte en fonction des coordonnées d'une référence de lieu précise. N'étant pas développeur mais plutôt designer, je me confronte aux limites de ma propre compréhension du langage.

Je suis parti à la recherche d'une portion de script me permettant d'animer cette fameuse fonctionnalité ( voir le code ci-dessous) mais le code fait en sorte que le mouvement de la div que je veux faire bougé, démare toujours d'un point zéro en x et y . Je veeux dire que le left et top du css en remis à 0px par défault. Si quelqu'un pouvez m'aiguiller sur un piste ou une solution pour venir à bout de mon problème... Merci d'avance. 

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Ajax Cookbook Example - Transitions for Animation Effects</title><style type="text/css"><![CDATA[

    html, body {
      height: 100%;
      overflow: hidden;
    }

    #canvas {
      height: 100%;
    }

    #animated {
      position: absolute;
      /*left: 0;*/
      /*top: 0;*/
    }

    ]]></style></head><!---->[javascript:void(0);  test 1]
[javascript:void(0);  test 2]

This text is animated

5 réponses

Réponse 1 / 5
cs_akiko Messages postés 17 Date d'inscription mercredi 16 juillet 2003 Statut Membre Dernière intervention 22 août 2009
12 déc. 2008 à 11:07
Le code ne passe pas ?! Y aurait-il une balise spécifique pour le rendre lisible ?

Avant toute chose bonjour et merci d'avance d'avoir ou de prendre le temps de lire le contenu de mon problème...

je travaille actuellement sur une application de cartographie [ non, je ne veux pas utiliser google-map ] et pour des raisons ergonomique je voudrais pouvoir replacer mon fond de carte en fonction des coordonnées d'une référence de lieu précise. N'étant pas développeur mais plutôt designer, je me confronte aux limites de ma propre compréhension du langage.

Je suis parti à la recherche d'une portion de script me permettant d'animer cette fameuse fonctionnalité ( voir le code ci-dessous) mais le code fait en sorte que le mouvement de la div que je veux faire bougé, démare toujours d'un point zéro en x et y . Je veeux dire que le left et top du css en remis à 0px par défault. Si quelqu'un pouvez m'aiguiller sur un piste ou une solution pour venir à bout de mon problème... Merci d'avance.


<style type="text/css"><![CDATA[

html, body {
height: 100%;
overflow: hidden;
}

#canvas {
height: 100%;
}

#animated {
position: absolute;
/*left: 0;*/
/*top: 0;*/
}

]]></style><!---->[javascript:void(0); test 1]
[javascript:void(0); test 2]

This text is animated
0
Réponse 2 / 5
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
12 déc. 2008 à 17:54
0
Réponse 3 / 5
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
12 déc. 2008 à 17:55
Message envolé !


Bonjour,
- Pas bien compris le soucis...
- Ne mets pas réponse acceptée si ce n'est pas le cas...
- Pour
ton code fait un copier/coller vers notepad.exe, par exemple, puis une autre
copier/coller dans la boîte de saisie, cela devrait le faire normalement ou
alors utilise la TextBox classique...

C'est en dessous.
Si vous n'arrivez pas à saisir votre message, CLIQUEZ ICI pour
revenir à une "TextBox classique"




;O)
0
Réponse 4 / 5
cs_akiko Messages postés 17 Date d'inscription mercredi 16 juillet 2003 Statut Membre Dernière intervention 22 août 2009
12 déc. 2008 à 19:37
Je test donc le copié / collé de mon code que tu me le conseil :

<script type="text/javascript">
//<![CDATA[

function Transition(curve, milliseconds, callback) {
this.curve_ = curve;
this.milliseconds_ = milliseconds;
this.callback_ = callback;
this.start_ = new Date().getTime();
var me = this;
this.runCallback_ = function() {
me.run();
};
}

Transition.prototype.run = function() {
if (!this.hasNext()) return;
this.callback_(this.next());
setTimeout(this.runCallback_, 10);
}

Transition.prototype.hasNext = function() {
if (this.done_) return this.oneLeft_;
var now = new Date().getTime();
if ((now - this.start_) > this.milliseconds_) {
this.done_ = true;
this.oneLeft_ = true;
}
return true;
}

Transition.prototype.next = function() {
this.oneLeft_ = false;
var now = new Date().getTime();
var percentage = Math.min(1, (now - this.start_) / this.milliseconds_);
return this.curve_(percentage);
}


function SineCurve(percentage) {
return (1 - Math.cos(percentage * Math.PI)) / 2;
}


function onLoad(newx,newy) {
var element = document.getElementById("animated");
element.style.position = "absolute";
//element.style.left = "0px";
//element.style.top = "0px";
//element.style.left = newPosx;
//element.style.top = newPosy;
element.style.left = element.style.left;
element.style.top = element.style.top;

var transition = new Transition(SineCurve, 3000, function(percentage) {
// var x = (element.parentNode.offsetWidth - element.offsetWidth) /2;
// var y = (element.parentNode.offsetHeight - element.offsetHeight)/2;
var x = element.offsetWidth + newx;
var y = element.offsetHeight + newy;
element.style.left = Math.round(percentage * x) + "px";
element.style.top = Math.round(percentage * y) + "px";
var newPosx = element.style.left;
var newPosy = element.style.top;
});
transition.run();

}

//]]>
</script>
<style type="text/css">

html, body {
height: 100%;
overflow: hidden;
}

#canvas {
height: 100%;
}

#animated {
position: absolute;
/*left: 0;*/
/*top: 0;*/
}

</style>
</head>
<!---->

[javascript:void(0); test 1]


[javascript:void(0); test 2]




This text is animated
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
cs_akiko Messages postés 17 Date d'inscription mercredi 16 juillet 2003 Statut Membre Dernière intervention 22 août 2009
12 déc. 2008 à 19:38
Merci le code de mon problème est en ligne
0
Rejoignez-nous