dupliquer le contenu d'une div (faire papier peint)Résolu

Question

bonsoir !

je voudrais savoir si il est possible sans faire du copier coller brutale de dupliquer le contenu d'une div horizontalement et verticalement (en faire un motif en gros) un grand nombre de fois.

Par exemple là j'ai une div contenant un tableau de 3x3 (dans chaque case se trouvant une image differente) et je voudrais le dupliquer horizontalement et verticalement (ainsi qu'en diagonale finalement) plein de fois pour en faire un papier peint, et ceux si possible sans faire de copier/coller du contenu de ma div (pour pas me retrouver avec un code de 15km de long)

l'application concrete est de pouvoir se deplacer indéfiniment dans un motif avec la souris, donc en gros a terme ,si je fait simplement du copier coller du code html de ma div je vais me retrouver avec le code d'une page de 20000/20000 px  , c'est pourquoi je suis a la recherche d'une sorte de "feinte" qui m'eviterai d'en arriver la.

quelqu'un aurait il une idée ?

XtremDuke · Accepted Answer

Regarde du côté de la méthode "cloneNode()" qui te permet de copier un noeud (avec son contenu ou non).

cs_crasse · Answer

merci pour ta reponse : ) !

je viens de regarder (enfin de m'y remettre, car j'avai deja fait usage de cette fonction il y a quelque temps) et effectivement elle a l'air idéale pour mon affaire.

Cependant apres quelques essais (concluants dans le principe) je suis de nouveau bloqué au niveau de la condition d'execution du cloneNode.

En effet, cloner un element lors d'un clic sur ce meme element fonctionne tres bien, mais ici ça ne colle pas avec mon truc et je ne sais pas trop comment formuler ma condition :
Imaginons, j'ai un element de 800x800 px dans une fenetre de 800x800, et je drag cet element sur la droite, donc a gauche apparait le background de la page. Dans l'idéal c'est a ce moment la que la fonction CloneNode devrait s'executer afin de dupliquer mon element principale a gauche du 1e (que j'ai deplacé) a la maniere d'un motif.

A votre avis, comment pourrais-je formuler cette condition ?

XtremDuke · Answer

Si tu déplaces un élément en dehors de ton layout, ton document va s'étendre. Surveilles donc ta taille de ton document par rapport a ton élément que tu drag.  Si celui-ci dépasse la taille initiale de ton document, alors tu dupliques ton motif.

cs_crasse · Answer

encore une fois merci pour ton aide ^^ 

Je me suis donc mis a chercher des informations a propos des tailles de documents et de la maniere de les surveiller.
Je suis tombé sur 3 methodes différentes, et je ne sais pas exactement laquel correspond a ce qu'il me faudrait, les voici :

(pour la largeur par exemple) :

document.body.clientWidth

ou
document.documentElement.clientWidth

ou
window.innerWidth

a votre avis laquelle serait la plus adaptée ?

ensuite j'ai commencé a essayer d'ecrire ce bout de code, mais je manque vraiment trop d'experience pour batir un code tout seul -_- (je patoge completement entre la syntax que je ne maitrise pas et surtout la logique du js que je ne connais pas tres bien)

en théorie il faudrai est-ce qu'il faudrait ecrire un truc du genre : 

 - if "largeur  du doc" > "largeur initiale du doc"

- then add (en utilisant la fonction cloneNode/appendchild) clone de l'element X (mon element a cloner) "dans la partie vide" (partie vide que je ne vois pas du tout comment définir)

j'imagine que je suis très loin du code voulu( (ou meme d'une logique correcte), c'est pourquoi je me demandai si vous connaitriez un exemple d'un fonctionnement plus ou moins similaire auquel je pourrais jeter un oeil pour essayer de comprendre ?

XtremDuke · Answer

Pour récuperer les dimensions de ton document :

function getDocumentDimensions(){
var docWidth = Math.max(document.documentElement["clientWidth"], document.body["scrollWidth"], document.documentElement["scrollWidth"]);
var docHeight = Math.max(document.documentElement["clientHeight"], document.body["scrollHeight"], document.documentElement["scrollHeight"]);
return {width: docWidth, height: docHeight}
}

A l'initialisation de ta page -> var documentDimensions = getDocumentDimensions();

A chaques mouvements de ton element que tu drag :

function onElementMove(){
var _documentDimensions = getDocumentDimensions();
Si
_documentDimensions.width > documentDimensions.width
Alors
NbreDeClonesACreer = Math.ceil((_documentDimensions.width - documentDimensions.width) / Hauteur_Du_Motif);
Creation_Des_Clones_Sur_L_Axe_X;
Fin

//Pareil pour la hauteur :

Si
_documentDimensions.height > documentDimensions.height
Alors
NbreDeClonesACreer = Math.ceil((_documentDimensions.height - documentDimensions.height) / Hauteur_Du_Motif);
Creation_Des_Clones_Sur_L_Axe_Y;
Fin

documentDimensions = getDocumentDimensions();
}

XtremDuke · Answer

Désolé les tabulations ne sont pas passées

cs_crasse · Answer

merci pour ta reponse ! je test ça de suite

cs_crasse · Answer

Bon, apres de nombreux essais, et ceux malgré ton aide detaillé, je n'y arrive definitivement pas, le javascipt a encore trop de secret pour moi... C'est pourquoi j'ai revu mon fonctionnement de base différement, afin qu'il soit plus simple dans son elaboration , cependant je suis de nouveau bloqué -_- (mais je dois etre plus proche de la solution qu'auparavant). Maintenant, tout ce que je cherche a faire, c'est de modifier la largeur d'un element (un layer noir tout simple) en fonction de la position de la souris. j'ai lu que l'on pouvait modifier tres simplement les proprieté CSS d'un element en js (dont la largeur fait partie), ce qui m'a redonné espoir de faire fonctionner un truc ! donc en gros j'ai un calque noir de 100% de hauteur, collé sur le bord gauche de la page, et dont la largeur est a la base fixé a 10px. Je cherche donc a ce que ce layer s'elargissent en fonction de la position en X de la souris. j'ai recuperé 2 script, un qui choppe la position de la souris, l'autre qui permet de modifier en direct le css d'un element en fonction d'autre chose. je les ai groupé, mais apparemment ils ne s'entendent pas très bien... -_- voila le script actuellement : Document sans nom auriez-vous une idée de ce que j'aurai pas ou mal fait ?

@karamel · Answer

bonjour 
tu veut que la longueur de la div suive la sourie ???

cs_crasse · Answer

ouais, mais en faite j'ai réussi a faire marcher un truc en réadaptant une source qui permettait de resizer une div a la souris, par contre j'ai un nouveau probleme du coup. vu que mon image de fond est enorme, j'ai mis un systeme qui permet de scroller horizontalement et verticalement dans la page en passant la souris sur des zones precises. ce systeme fonctionne, par contre j'ai mes div qui sont placé au 4 coins de ma scene qui ne suivent pas le scroll (en gros ils ne restent pas collé aux bords de la fenetre lors du scrolling, mais gardent leur position initiale determinés par le format du navigateur lors de l'ouverture de la page) et je ne sais pas comment y remedier. enfin voila mon code, ce sera vraissemblablement plus clair (les div avec contour bleu sont les div qui permettent de scroller lorsqu'on les survollent, et elles ont le meme probleme que les div noires) : temptitle ---- donc en gros je souhaiterais que les div noire et celle qui servent a scroller reste a 0 px des bords de mon navigateurs quoi qu'il arrive, est-ce possible ?

cs_crasse · Answer

c'est bon, j'ai trouvé : )

il suffisait de remplacer dans les css des div 
position:absolute;

par

position: fixed;

overflow: scroll;

Dupliquer le contenu d'une div (faire papier peint)

11 réponses

Votre réponse

Discussions similaires