Backgroundposition dynamique avec ajax

Résolu

bubbledesavon Messages postés 66 Date d'inscription samedi 21 février 2004 Statut Membre Dernière intervention 6 mars 2015 - Modifié par kazma le 31/01/2014 à 10:14
bubbledesavon Messages postés 66 Date d'inscription samedi 21 février 2004 Statut Membre Dernière intervention 6 mars 2015 - 29 janv. 2014 à 16:45

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
--

A voir également:

Backgroundposition dynamique avec ajax
Ajax synchrone - Conseils pratiques -Javascript
Allocation dynamique tableau 2d c ✓ - Forum C
Template site web dynamique php - Conseils pratiques -PHP
Php variable dynamique ✓ - Forum PHP
Tableau dynamique java ✓ - Forum Java

2 réponses

Réponse 1 / 2

@karamel Messages postés 1838 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 19 août 2023 148
Modifié par kazma le 29/01/2014 à 16:16

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 !

Réponse 2 / 2

bubbledesavon Messages postés 66 Date d'inscription samedi 21 février 2004 Statut Membre Dernière intervention 6 mars 2015
Modifié par kazma le 29/01/2014 à 17:00

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>

Discussions similaires

realisation d'un cv dynamique

Passer un tableau dynamique en paramètre

Ajax et ASP.NET/C# passage de paramètre

comment ajouter ajax control toolkit

Calendrier Dynamique cliquable

Votre réponse

Discussions similaires