Dupliquer le contenu d'une div (faire papier peint) [Résolu]

cs_crasse 51 Messages postés lundi 9 avril 2007Date d'inscription 22 juin 2009 Dernière intervention - 6 mai 2009 à 00:59 - Dernière réponse : cs_crasse 51 Messages postés lundi 9 avril 2007Date d'inscription 22 juin 2009 Dernière intervention
- 10 mai 2009 à 18:40
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 ?
Afficher la suite 

Votre réponse

11 réponses

Meilleure réponse
XtremDuke 631 Messages postés samedi 28 septembre 2002Date d'inscription 18 mai 2009 Dernière intervention - 6 mai 2009 à 10:01
3
Merci
Regarde du côté de la méthode "cloneNode()" qui te permet de copier un noeud (avec son contenu ou non).

Merci XtremDuke 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 87 internautes ce mois-ci

Commenter la réponse de XtremDuke
cs_crasse 51 Messages postés lundi 9 avril 2007Date d'inscription 22 juin 2009 Dernière intervention - 6 mai 2009 à 13:39
0
Merci
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 ?
Commenter la réponse de cs_crasse
XtremDuke 631 Messages postés samedi 28 septembre 2002Date d'inscription 18 mai 2009 Dernière intervention - 6 mai 2009 à 14:17
0
Merci
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.
Commenter la réponse de XtremDuke
cs_crasse 51 Messages postés lundi 9 avril 2007Date d'inscription 22 juin 2009 Dernière intervention - 6 mai 2009 à 14:58
0
Merci
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 ?
Commenter la réponse de cs_crasse
XtremDuke 631 Messages postés samedi 28 septembre 2002Date d'inscription 18 mai 2009 Dernière intervention - 6 mai 2009 à 16:54
0
Merci
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();
}
Commenter la réponse de XtremDuke
XtremDuke 631 Messages postés samedi 28 septembre 2002Date d'inscription 18 mai 2009 Dernière intervention - 6 mai 2009 à 16:55
0
Merci
Désolé les tabulations ne sont pas passées
Commenter la réponse de XtremDuke
cs_crasse 51 Messages postés lundi 9 avril 2007Date d'inscription 22 juin 2009 Dernière intervention - 7 mai 2009 à 14:25
0
Merci
merci pour ta reponse ! je test ça de suite
Commenter la réponse de cs_crasse
cs_crasse 51 Messages postés lundi 9 avril 2007Date d'inscription 22 juin 2009 Dernière intervention - 7 mai 2009 à 16:11
0
Merci
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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Document sans nom</title>

<style type="text/css">

<!--

#Layer1 {

    position:absolute;

    height:100%;

    width:10px;

    z-index:1;

    background-color: #000000;

}

-->

</style>

<script type="text/javascript">

var x = 0;

var y = 0;

if (document.getElementById)

   {

   if(navigator.appName.substring(0,3) == "Net")

      document.captureEvents(Event.MOUSEMOVE);

   document.onmousemove = Pos_Souris;

   window.onload = Bouge_Image;

   }

function Pos_Souris(e)

   {
   x (navigator.appName.substring(0,3) "Net") ? e.pageX : event.x+document.body.scrollLeft;
   y (navigator.appName.substring(0,3) "Net") ? e.pageY : event.y+document.body.scrollTop;

   }

posX = 0;

posY = 0;

anim = true;

function resize()

{document.getElementById('layer1').style.width=(parseInt(document.getElementById('layer1').clientWidth)+x)+'px';}

</script>

</head>

</html>

auriez-vous une idée de ce que j'aurai pas ou mal fait ?
Commenter la réponse de cs_crasse
@karamel 1659 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 22 juin 2018 Dernière intervention - 8 mai 2009 à 22:36
0
Merci
bonjour
tu veut que la longueur de la div suive la sourie ???
Commenter la réponse de @karamel
cs_crasse 51 Messages postés lundi 9 avril 2007Date d'inscription 22 juin 2009 Dernière intervention - 10 mai 2009 à 15:52
0
Merci
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) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>temptitle</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<script type="text/javascript">

<!--

//global variables used to track status

var curHeight=0

var curWidth=0

var curPos=0

var curPosX=0

var newPos=0

var newPosX=0

var mouseStatus='move'

//this function gets the original div height

function setPos(e){

//for handling events in ie vs. w3c

curevent=(typeof event=='undefined'?e:event)

//sets mouse flag as down

mouseStatus='move'

//gets position of click

curPos=curevent.clientY

    curPosX=curevent.clientX

//accepts height of the div

tempHeight=document.getElementById('mydiv').style.height

    tempHeightB=document.getElementById('mydivB').style.height

        tempWidth=document.getElementById('mydivC').style.width

            tempWidthB=document.getElementById('mydivD').style.width

//these lines split the height value from the 'px' units

heightArray=tempHeight.split('p')

    heightArray=tempHeightB.split('p')

        WidthArray=tempWidth.split('p')

            WidthArray=tempWidthB.split('p')

curHeight=parseInt(heightArray[0])

    curWidth=parseInt(widthArray[0])

}

//this changes the height of the div while the mouse button is depressed

function getPos(e){

if(mouseStatus=='move'){

curevent=(typeof event=='undefined'?e:event)

//get new mouse position

newPos=curevent.clientY

//calculate movement in pixels

var pxMove=parseInt(newPos-curPos)

//determine new height

var newHeight=parseInt(curHeight+pxMove-(pxMove/2 ))

    var newHeightB=parseInt(curHeight+pxMove-(pxMove/2))

//conditional to set minimum height to 5

newHeight=(newHeight<5?5:newHeight)

    newHeightB=(newHeightB<5?5:newHeightB)

//set the new height of the div

document.getElementById('mydiv').style.height=newHeight+'px'

    document.getElementById('mydivB').style.height=newHeightB+'px'

}

if(mouseStatus=='move'){

curevent=(typeof event=='undefined'?e:event)

//get new mouse position

newPosX=curevent.clientX

//calculate movement in pixels

var pxMoveX=parseInt(newPosX-curPosX)

//determine new height

var newWidth=parseInt(curWidth+pxMoveX-(pxMoveX/2 ))

    var newWidthB=parseInt(curWidth+pxMoveX-(pxMoveX/2 ))

//conditional to set minimum height to 5

newWidth=(newWidth<5?5:newWidth)

    newWidthB=(newWidthB<5?5:newWidthB)

//set the new height of the div

document.getElementById('mydivC').style.width=newWidth+'px'

    document.getElementById('mydivD').style.width=newWidthB+'px'

}

}

</script>

<script type="text/javascript">

function pageScroll_y_b() {

        window.scrollBy(0,5);

        scrolldelay = setTimeout('pageScroll_y_b()',10);

}

function pageScroll_y_h() {

        window.scrollBy(0,-5);

        scrolldelay = setTimeout('pageScroll_y_h()',10);

}

function pageScroll_x_g() {

        window.scrollBy(-5,0);

        scrolldelay = setTimeout('pageScroll_x_g()',10);

}

function pageScroll_x_d() {

        window.scrollBy(5,0);

        scrolldelay = setTimeout('pageScroll_x_d()',10);

}

function stopScroll() {

        clearTimeout(scrolldelay);

}

//-->

</script>

<style type="text/css">

body {

    margin:0px;

    background-color: #00FFFF;

    overflow:hidden;

   

   

}

#mydiv{

position:absolute;

top:0px;

left:0px;

height: 250px;

width:100%;

border: 1px solid #808080;

overflow: hidden;

background:#000000;

z-index:1;

}

#mydivB{

position:absolute;

bottom:0px;

left:0px;

height: 250px;

width:100%;

border: 1px solid #808080;

overflow: hidden;

background:#000000;

z-index:1;

}

#calque_invisible_bas_y{

position:absolute;

bottom:0px;

left:0px;

height: 250px;

width:100%;

border: 4px solid #000080;

overflow: hidden;

z-index:2;

}

#calque_invisible_haut_y{

position:absolute;

top:0px;

left:0px;

height: 250px;

width:100%;

border: 4px solid #000080;

overflow: hidden;

z-index:2;

}

#mydivC{

position:absolute;

top:0px;

left:0px;

height: 100%;

width:150px;

border: 1px solid #808080;

overflow: hidden;

background:#000000;

z-index:1;

}

#calque_invisible_gauche_x{

position:absolute;

top:0px;

left:0px;

height: 100%;

width:250px;

border: 4px solid #000080;

overflow: hidden;

z-index:2;

}

#calque_invisible_droite_x{

position:absolute;

top:0px;

right:0px;

height: 100%;

width:250px;

border: 4px solid #000080;

overflow: hidden;

z-index:2;

}

#mydivD{

position:absolute;

top:0px;

right:0px;

height: 100%;

width:150px;

border: 1px solid #808080;

overflow: hidden;

background:#000000;

z-index:1;

}

</style>

</head>

<!--onmousemove and onmouseup are on the body tag whereas onmousedown is on the "statusbar" div //-->

      

      ----

        <td>  <table width=\"2000\" height=\"2000\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" bgcolor=\"#00FF00\">

         

   

</html>

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 ?
Commenter la réponse de cs_crasse
cs_crasse 51 Messages postés lundi 9 avril 2007Date d'inscription 22 juin 2009 Dernière intervention - 10 mai 2009 à 18:40
0
Merci
c'est bon, j'ai trouvé : )

il suffisait de remplacer dans les css des div
position:absolute;

par

position: fixed;

overflow: scroll;
Commenter la réponse de cs_crasse

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.