Backgroundposition dynamique avec ajax [Résolu]

Signaler
Messages postés
66
Date d'inscription
samedi 21 février 2004
Statut
Membre
Dernière intervention
6 mars 2015
-
Messages postés
66
Date d'inscription
samedi 21 février 2004
Statut
Membre
Dernière intervention
6 mars 2015
-
Bonjour,

voici mon petit souci :
ma page:
-script ajax qui fonctionne tres bien et qui me renvoie des variables.
-div jauge qui est une jauge verticale en css

je n'arrive pas a mettre la valeur du backgroundposition du style css avec une variable

ma div:
<style>
#jauge {
 height:209px;
 background:  url('bidon.png') no-repeat 0 0;
 background-color:transparent;
 text-align: center;
 background-position: 0 0%;
 
 
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

</style>


j'aimerais que le "0%" correspond avec la valeur de ma variable "capa".

j'ai essayé des tas de trucs mais rien n'y fait.

script ajax:
<script language="Javascript"type="text/JavaScript">

var capa;

// Requette AJAX
function makeRequest(url,id_ecrire){
var http_request = false;
//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}

if (!http_request) {
alert('Abandon :( Impossible de créer une instance XMLHTTP');
return false;
}
http_request.onreadystatechange = function() { traitementReponse(http_request,id_ecrire); } //affectation fonction appelée qd on recevra la reponse
// lancement de la requete
http_request.open('POST', url, true);
//changer le type MIME de la requête pour envoyer des données avec la méthode POST , !!!! cette ligne doit etre absolument apres http_request.open('POST'....
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
data="292";
http_request.send(data);
//alert("data"+data);

}

function traitementReponse(http_request,id_ecrire) {
var affich="";
if (http_request.readyState == 4) {
if (http_request.status == 200) {
// cas avec reponse de PHP en mode texte:
//chargement des elements reçus dans la liste
var affich_list=http_request.responseText;
// alert("Reponse de php: "+affich_list);
obj = document.getElementById(id_ecrire);
obj.innerHTML = affich_list;
var reg=new RegExp("[z]+", "g");
//document.write("Chaîne d'origine : " + affich_list + "<BR>");
var tableau=affich_list.split(reg);
for (var i=0; i<tableau.length; i++) {
//document.write("tableau[" + i + "] = " + tableau[i] + "<BR>");

capa=tableau[18]
}

}
else {
alert('Un problème est survenu ou le dispositif est en mode HIVERNAGE.');
}

//setTimeout("makeRequest(url,id_niveau,id_ecrire)",4000);
//alert("ok");
}
}
setInterval("makeRequest('rep_PhpAjax.php','id_list2')",2000);
//alert("ok");

</script>

je dois louper quelque chose sur le rafraichissement de la div...
je sais pas trop...

c'est pour cela ,que je serais heureux de vous lire.

merci d'avance pour votre aide
--

2 réponses

Messages postés
1787
Date d'inscription
vendredi 9 mai 2008
Statut
Non membre
Dernière intervention
9 juin 2021
131
bonjour

si la variable comporte bien une valeur numerique il faut faire comme ceci

document.getElementById('element_a_modifie').style.backgroundPosition=-(capa+'px 0px'; 

dans cette exemple on modifie la position en x
cours Forest cours !
Messages postés
66
Date d'inscription
samedi 21 février 2004
Statut
Membre
Dernière intervention
6 mars 2015

merci kazma,

ca fonctionne parfaitement,
je colle le script (ca peut servir a quelqu'un)

<script >
window.onload = function(){
setInterval(function(){
document.getElementById('jauge').style.backgroundPosition=('0 '+capa+'%');
alert(capa);
},2000);
}

</script>

--