Syst�me de visualisation en clonant un �l�ment

**NICOLAS7A** · 25/10/2018, 11h14

Bonjour,

je suis face as un probl�me, je souhaite r�cup�r� et cloner un bout de code html et ensuite �tre r�afficher dans une pop up en claire ( j'ai un syst�me de carte que l'on peut partager a l'aide d'un bouton qui lui d�clencher une pop-up et j'aurai voulu que l��l�ment que je souhaite partager cet a dire la carte soit afficher dans la pop up comme un syst�me de visualisation avec une class diff�rente pour pouvoir modifier sa taille

code html ( les 2 cartes sont la face et le dos que je souhaite cloner, as savoir que des carte je peut en avoir beaucoup et que je cible juste la face et le dos a chaque fois )

Code HTML :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
  <div class="list-cards-family" id="13">
 
<button id='openModal' onclick="openModal()" class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon mdc-ripple-upgraded--unbounded mdc-ripple-upgraded" title="Share" data-mdc-ripple-is-unbounded="true"  style=" position:relative; right:0; top:0; z-index:10;    border-radius: 50px;top: 5px;color: #828282; --mdc-ripple-fg-size:28px; --mdc-ripple-fg-scale:1.71429; --mdc-ripple-left:10px; --mdc-ripple-top:10px;">share</button>
 
<div class="cards"  data-tilt data-tilt-glare data-tilt-max-glare="0.8" style="position:relative;">
 
        <div class="card-categorie">Categorie 1  
 
 
        </div>
 
 
 
 
              <div class="card-div-title">
 
<h1 class="Card-title">Design UX</h1>
 
 
    </div>
    <div class="card-body">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
        </p>
 
    </div>
 
    </div>
 
 
 
    <div class="cards" data-tilt data-tilt-glare data-tilt-max-glare="0.8">
 
 
         <div class="card-categorie">Categorie 1
              <div class="card-pagination">1/50</div>
                </div>
 
            <div class="card-div-title">
 
        <h1 class="Card-title">Design UX</h1>
 
 
            </div>
            <div class="card-body">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
                </p>
            </div>
 
            </div>

merci d'avance

Invit� · 25/10/2018, 11h32

Bonjour, et bienvenu sur DVP.

1-

"bescherelle"

2- qu'est-on cens� faire avec ton bout de code ?

Pour r�cup�rer / r�-afficher du code HTML :

innerHTML
textContent

Pour s�lectionner un �l�ment :

document.getElementById()
document.querySelector()
document.querySelectorAll()

**NICOLAS7A** · 25/10/2018, 11h38

2- je suis novice dans le javascript et j'aurai voulu savoir qu'elle est le code javascript pour r�pondre a mon besoin
a savoir que je souhaite que quand l'on clic sur le bouton partager le java r�cup�r� la balise div qui en-dessous pour ensuite la r�-afficher
j'ai passer ma longue journ�e hier sans r�sultat.

merci quand m�me.

Invit� · 25/10/2018, 11h40

Alors montre ce que tu as fait.

**NICOLAS7A** · 25/10/2018, 11h45

Code HTML :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<div class="list-cards">
    <div class="list-cards-family" id="13">
            <button  onclick="openModal()" class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon mdc-ripple-upgraded--unbounded mdc-ripple-upgraded" title="Share" data-mdc-ripple-is-unbounded="true"  style=" position:relative; right:0; top:0; z-index:10;    border-radius: 50px;top: 5px;color: #828282; --mdc-ripple-fg-size:28px; --mdc-ripple-fg-scale:1.71429; --mdc-ripple-left:10px; --mdc-ripple-top:10px;">share</button>
      <div class="cards"  data-tilt data-tilt-glare data-tilt-max-glare="0.8" style="position:relative;">
 
        <div class="card-categorie">Categorie 1  
 
        </div>
 
              <div class="card-div-title">
 
<h1 class="Card-title">Design UX</h1>
 
 
    </div>
    <div class="card-body">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
        </p>
 
    </div>
 
    </div>
 
    <div class="cards" data-tilt data-tilt-glare data-tilt-max-glare="0.8">
 
         <div class="card-categorie">Categorie 1
              <div class="card-pagination">1/50</div>
                </div>
 
            <div class="card-div-title">
 
        <h1 class="Card-title">Design UX</h1>
 
 
            </div>
            <div class="card-body">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
                </p>
            </div>
 
            </div>
 
        </div>

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
function newFunction() {
    var l1 = document.getElementById("#13");
    var l2 = l1.childNodes;
    $(document).ready(function () {
        var cloned = $("l2").clone().appendTo($("#modal"));
    });}

Invit� · 25/10/2018, 12h16

Bonjour,

1- il faut apprendre la syntaxe :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.getElementById("13"); // JavaScript

ou

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.querySelector("#13"); // JavaScript

ou

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

$("#13"); // jQuery

2- tu utilises 2 syntaxes diff�rentes : JavaScript et jQuery.

En as-tu conscience ?
Est-ce volontaire ?

3- Ne jamais h�siter � faire une recherche quand on a un doute ou qu'on ne sait pas.
C'est comme �a qu'on progresse.

Invit� · 25/10/2018, 12h29

Si j'ai bien compris...

En JavaScript pur �a devrait donner :

Code JavaScript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
function newFunction() {
  var l1 = document.getElementById("13");
  var l2 = document.createElement('div');
  l2.setAttribute('id','12');
  l2.innerHTML = l1.innerHTML ;
  document.getElementById("modal").append(l2);
}

En jQuery :

Code JavaScript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
function newFunction() {
  var l1 = $("#13");
  var l2 = $('<div></div>');
  l2.attr('id','12').html( l1.html() );
  l2.appendTo($("#modal"));
}

ou juste (si on n'a pas besoin d'un div suppl�mentaire dont l'id est "12") :

Code JavaScript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
function newFunction() {
  var l1 = $("#13");
  l1.children().clone().appendTo($("#modal"));
}

**NICOLAS7A** · 25/10/2018, 12h37

Comme je l'ai dit je suis d�butant, j'ai d�nicher quelque bout de code avec l�espoir que �a marche.

Quelqu'un peut m'aide SVP
Merci

Syst�me de visualisation en clonant un �l�ment

JavaScript

Discussions similaires

Partager

Partager