11528 sujets

JavaScript, DOM et API Web HTML5

Faire défiler verticalement des div vers le bas

Pages :
(reprise du message précédent)

Purée !!!

Yes ton dernier code marche !!! T trop fort Smiley smile

Par contre, si tu peux me dire ou on paramètre le sens de l'affichage ?..

En fait c'est nickel mais dans l'autre sens lol
Bonsoir Scots,

tu connais le nombre de boites en faisant cela :
var nbBoites  = document.getElementById('global').getElementsByTagName('div').length;
C'est à dire le nombre de div class="monDiv" contenu dans le conteneur div id="global" et comme il n'y a que ces div "monDiv", tu n'as pas d'autres questions à te poser, à la condition que tu as remis le conteneur "global" à zéro avec la fonction suppress().

Les deux fichiers Javascript en haut du code HTML sont :

1) show_props.js est un utilitaires que j'ai fait pour fouiller dans la DOM (document object model). Si tu ne le possèdes pas encore, car il en existe beaucoup d'exemplaire, je te communique le mien : 
/*************************************************************/
/*                                                           */
/*     Affichage des propriétés des objets en Javascript     */
/*                                                           */
/*************************************************************/

function show_props(obj , obj_name)
{
	/*-----------------------------------*/
	/*     Déclaration de la Fenêtre     */
	/*-----------------------------------*/

	var win_opt  = "toolbar=0,location=0,directories=0,status=0,";
		win_opt += "menubar=0,scrollbars=1,resizable=1,copyhistory=0,";
		win_opt += "width=1000,height=800";

	/*--------------------------------------------------*/
	/*     Création et Initialisation de la Fenêtre     */
	/*--------------------------------------------------*/

	NewWindow = window.open("" , obj_name , win_opt);

	NewWindow.document.open("text/html");
	NewWindow.document.clear();

	NewWindow.document.writeln("<html><head>");
	NewWindow.document.writeln("<title>Vidage de " + obj_name + "</title>");

	NewWindow.document.writeln("<script language='Javascript'>");
	NewWindow.document.writeln("function Ouvre(i) { show_props(fields[i][1] , fields[i][0]); }");
	NewWindow.document.writeln("</script>");

	NewWindow.document.writeln("<style type='text/css'>");
	NewWindow.document.writeln("body { background-color : black; ");
	NewWindow.document.writeln("       color            : white; ");
	NewWindow.document.writeln("       font-family      : 'Courier New'; ");
	NewWindow.document.writeln("       font-size        : 12px; ");
	NewWindow.document.writeln("       margin           : 20px; }");

	NewWindow.document.writeln("</style></head><body>");
	NewWindow.document.writeln("<h1>Vidage de " + obj_name + "</h1>"); 
	NewWindow.document.writeln("<hr><table><pre>");

	/*-------------------------------------------------------------------------------*/
	/*     Création et tri par ordre croissant du tableau de stockage des objets     */
	/*-------------------------------------------------------------------------------*/

	var fields = new Array();

	for (var i in obj)
	{
		try					{ var result = obj[i];	}
		catch(exception)	{ var result = null;	}

		fields.push(new Array(i, result));
	}

	fields.sort(function sorter(first, second) {return first[0].toLowerCase().localeCompare(second[0].toLowerCase());});

	/*------------------------------------------------------------------*/
	/*     Affichage en couleur des résultats du contenu des objets     */
	/*------------------------------------------------------------------*/
	
	for (var i=0; i<fields.length; i++)
	{
		var key   = fields[i][0];
		var value = fields[i][1];

		var res1 = " " + obj_name + "." + key + " = ";
		var res2 = " " + value;

		var res3 = "<span onClick='Ouvre(" + i + ");'>" + obj_name + "." + key + " =</span>";
		var res4 = "<span onClick='Ouvre(" + i + ");'>" +         value          + "</span>";

		if (value == null)
		{
			var elm1 = "<tr><td><font color='green'>" + res1 + "</font></td>";
			var elm2 =     "<td><font color='green'>" + res2 + "</font></td></tr>";
		}
		else
		{
			if (typeof(value) == "object")
			{
				var elm1 = "<tr><td><font color='red'>" + res3 + "</font></td>";
				var elm2 =     "<td><font color='red'>" + res4 + "</font></td></tr>";
			}
			else
			{
				if (typeof(value) == "function")
				{
					var elm1 = "<tr><td><font color='blue'>" + res1 + "</font></td>";
					
					if (key == "show_props")	var elm2 = "<td>???</td></tr>";
					else						var elm2 = "<td><font color='blue'>" + res2 + "</font></td></tr>";
				}
				else
				{
					if (typeof(value) == "number")
					{
						var elm1 = "<tr><td><font color='yellow'>" + res1 + "</font></td>";
						var elm2 =     "<td><font color='yellow'>" + res2 + "</font></td></tr>";
					}
					else
					{
						if (typeof(value) == "boolean")
						{
							var elm1 = "<tr><td><font color='orange'>" + res1 + "</font></td>";
							var elm2 = "    <td><font color='orange'>" + res2 + "</font></td></tr>";
						}
						else
						{
							if (typeof(value) == "string")
							{
								var elm1 = "<tr><td>" + res1 + "</td>";

								if (key == "outerHTML")		var elm2 = "<td>???</td></tr>";
								else						var elm2 = "<td>" + res2 + "</td></tr>";
							}
							else
							{
								var elm1 = "<tr><td><font color='pink'>" + res1 + "</font></td>";
								var elm2 = "    <td><font color='pink'>" + res2 + "</font></td></tr>";
							}
						}
					}
				}
			}
		}

		NewWindow.document.writeln(elm1 + elm2);
	}

	/*------------------------------------------------------------*/
	/*     Fin de l'initialisation et fermeture de la fenêtre     */
	/*------------------------------------------------------------*/

	NewWindow.document.writeln("</pre></table><hr></body></html>");
	NewWindow.document.close();

	/*--------------------------------------------------------*/
	/*     Association des méthodes et des objets fenêtre     */
	/*--------------------------------------------------------*/

	NewWindow.openedObject = obj_name;
	NewWindow.show_props   = NewWindow.opener.show_props;
	NewWindow.fields       = fields;

	return true;
}
[/i][/i][/i][/i][/i]
Modifié par Artemus24 (26 Jun 2011 - 20:46)
Pour l'utiliser, tu fais appel à la fonction que tu places, par exemple, dans 
<body onload="show_props(window,"Window");">

Dans le code javascript, je l'ai placé dans
window.onload = function () { show_props(window,"Window"); }


2) l'autre code javascript, tu l'as déjà !

En ce qui concerne l'autre sens, comme tu dis, tu modifies la fonction déplace que voici 
/*==============================*/ 
/*     Insertion des boites     */ 
/*==============================*/ 
 
function deplace(de, par, vers) 
{ 
    var nodeFather = document.getElementById(vers); 
    var nodeChild  = document.getElementById(de).getElementsByTagName('div'); 
 
/*----------------------------------------------------*/ 
/*     Extraction de toutes les div class="autre"     */ 
/*----------------------------------------------------*/ 
 
    for (var j=0; j<nodeChild.length; j++) 
    { 
        if (nodeChild.item(j).className == par) 
        { 
            nodeFather.appendChild(nodeChild.item(j)); 
            nodeFather.lastChild.className = par + ' commun'; 
        } 
    } 
}

Je n'ai pas bien compris le bug dans le HTML. J'ai mis des retour-chariots à la fin de chaque paragraphe </p> et bizarrement, le bug est parti !

@+
Grand merci à toi Artemus. Ta page fonctionne.

Je n'ai qu'un bug quand je veux l'intégrer :

"Impossible d'obtenir la valeur de la propriété getElementByTagName"

L'erreur est située sur cette ligne :


	var nodeChild  = document.getElementById(de).getElementsByTagName('div');


Si tu as une idée ...
Bonjour Scots,

lorsque tu appelles la fonction : deplace(de, par, vers) en tant que paramètres tu dois appliquer :

1) de --> un nom de chaine qui correspond obligatoirement à un ID et de plus cela doit être un conteneur. Exemple : <div id="nullpart">.

2) par --> un nom de chaine qui correspond à un CLASS et de plus doit être un contenu. Exemple <div class="autre"> qui lui se trouve bien dans <div id="nullpart">

3) idem que §1 mais un autre conteneur. Exemple <div id="global">

donc l'appel est : deplace("nullpart", "autre", "global");

Cela correspond à une structure HTML suivante :
<div id=[#red]"global"[/#]></div>
<div id=[#red]"nullpart"[/#]>
		<div class=[#red]"autre"[/#]></div>
		<div class=[#red]"autre"[/#]></div>
		<div class=[#red]"autre"[/#]></div>
</div>



Et en principe cela devrait fonctionner !

@+
Quel idiot, j'avais oublié la moitié des div lol. Pas les idées claires avec tout ça.

Bon, plus d'erreur mais ça ne défile pas Smiley decu
Salut Scots,

si mon code HTML + CSS + JAVASCRIPT fonctionne alors le problème vient de ton intégration.

Je te rappelle aussi que le scrolling ne fonctionne que sur la page body mais pas dans une boite avec les ascenseurs !

Je pense que c'est faisable mais je ne sais pas trop comment faire. Pour cela, il faut que je cherche.

@+
Salut Artemus,

Je sais bien que ton code est bon lol.

Tout est dans une page unique, appelée via xmlhttprequest.

Je vais essayer de regarder ça demain, j'avais une grosse réunion de projet cet après midi.
Pages :
Sujet clos
Aller à