11485 sujets

JavaScript, DOM et API Web HTML5

[RESOLU] Afficher / charger / masquer div

Bonjours,
Je cherche a avoirs un script qui affiche et masque un div mai que le contenu du div est sur une autre page.
Voici mon script qui affiche et masque un div:

<html>
<head>
</style>
<script type="text/javascript">
var ie = (document.all) ? true : false;
function getElementByClass(objClass){
var elements = (ie) ? document.all : document.getElementsByTagName('*');
  for (i=0; i<elements.length; i++){
    if (elements[i].className==objClass){
    return elements[i]
    }
  }
}
function toggleClass(objClass){
  if (getElementByClass(objClass).style.display=="none"){
var elements = (ie) ? document.all : document.getElementsByTagName('*');
  for (i=0; i<elements.length; i++){
    if (elements[i].className==objClass){
      elements[i].style.display="block"
    }
  }
  }else{
var elements = (ie) ? document.all : document.getElementsByTagName('*');
  for (i=0; i<elements.length; i++){
    if (elements[i].className==objClass){
      elements[i].style.display="none"
    }
  }
  }
}
</script>
</head>
<body>
<a href="javascript:toggleClass('test1')">button 1</a>

<div class="test1" style="display:none"> 

TEST 1

 </div>
 <a href="javascript:toggleClass('test2')">button 2</a>

<div class="test2" style="display:none"> 

TEST 2

 </div>


</body>
</html>


J'aimerai bien qu'il soi modifier a fartir de ques qu'il y a la:

<script type="text/javascript">
function exemple()
{
obj = document.getElementById("resultat");
// ON EFFACE LE CONTENU DU DUV
obj.innerHTML = "";
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);

// CONTROLE DE L'ETAT DE LA REQUETE
// CHAQUE CHANGEMENT D'ETAT AFFICHE UNE LIGNE DANS NOTRE DIV
xhr_object.onreadystatechange = function()
{
if(xhr_object.readyState == 1)
     obj.innerHTML += "connexion établie<br />";
if(xhr_object.readyState == 2)
     obj.innerHTML+= "requête reçue<br />";
if(xhr_object.readyState == 3)
     obj.innerHTML += "réponse en cours<br />";
if(xhr_object.readyState == 4)
{
     // ON CONTROLE LE STATUS (ERREUR 404, ETC)
if(xhr_object.status == 200)
obj.innerHTML += "Fichier : " + xhr_object.responseText;
else
obj.innerHTML +="Error code " + xhr_object.status;
}
};

// ON APPELLE LA PAGE
xhr_object.open("GET", "/misc/ajax_test.php", true);
xhr_object.send(null);
}
</script>
<a href="javascript:exemple()">Hop, on essaye !</a>
<div id="resultat"></div>


Ce que je veux:
Il y a plusieurs lien et plusieurs div.
Lorsqu'on clique sur un lien, le div correspondent au lien s'affiche et une image de chargement apparais dans le div.
Le contenu du div ce charge.
Chaque contenu a une URL différente.
Le contenu remplace l'image de chargement lorsqu'il est charger.
si on reclique sur le lien, le contenu du div s'efface et le div ce masque.


En gros, je veux le même résulta le premier script mai que le contenu du div test1 et test2 soi sur des page différente..

Merci de m'aider.[/i][/i][/i][/i][/i][/i]
Modifié par jeremy2491 (02 Jul 2008 - 17:12)
resolu.


<html>
<head>
</style>
<script type="text/javascript">
var ie = (document.all) ? true : false;
function getElementByClass(objClass){
var elements = (ie) ? document.all : document.getElementsByTagName('*');
  for (i=0; i<elements.length; i++){
    if (elements[i].className==objClass){
    return elements[i]
    }
  }
}
function toggleClass(objClass, url){
  if (getElementByClass(objClass).style.display=="none"){
var elements = (ie) ? document.all : document.getElementsByTagName('*');
  for (i=0; i<elements.length; i++){
    if (elements[i].className==objClass){
      elements[i].style.display="block"

obj = elements[i];
obj.innerHTML = "";
if(window.XMLHttpRequest) 
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) 
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);

xhr_object.onreadystatechange = function()
{
if(xhr_object.readyState == 1)
     obj.innerHTML = "connexion établie<br />";
if(xhr_object.readyState == 4)
{

if(xhr_object.status == 200)
obj.innerHTML = xhr_object.responseText;
else
obj.innerHTML +="Error code " + xhr_object.status;
}
};

xhr_object.open("GET", url, true);
xhr_object.send(null);
    }
  }
  }else{
var elements = (ie) ? document.all : document.getElementsByTagName('*');
  for (i=0; i<elements.length; i++){
    if (elements[i].className==objClass){
      elements[i].style.display="none"
      elements[i].innerHTML = "";
    }
  }
  }
}
</script>
</head>
<body>
<a href="javascript:toggleClass('test1', 'test.html')">button 1</a>

<div class="test1" style="display:none"> </div>

 <a href="javascript:toggleClass('test2')">button 2</a>

<div class="test2" style="display:none"> </div>


</body>
</html>
[/i][/i][/i][/i][/i][/i][/i][/i]
Sujet clos
Aller à