Créer une miniature d'une balise div

**RyzenOC** · 10/11/2014, 08h33

Bonjour, je souhaiterais mettre en js une partie de mon site (une balise div) en miniature, es possible ?

Par exemple je clique sur un bouton et sa m'affiche une miniature de ma page (au lieu d'une image) mais au format réduit, pour tout voir.

Par contre je voudrais que l'aperçue soit en temps réel, par exemple si dans ma div j'ai un formulaire et j'écrit toto, sa doit afficher toto en temps réel.

Je veut faire une copie de ma balise en temps réel et rajouter ceci un truc de style :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
div {
    -ms-transform: scale(0.25); /* IE 9 */
    -webkit-transform: scale(0.25); /* Chrome, Safari, Opera */
    transform: scale(0.25);
}

Pour faire une miniature.

Merci pour votre aide.

**NoSmoking** · 10/11/2014, 09h49

Bonjour,

Par exemple je clique sur un bouton et sa m'affiche une miniature de ma page (au lieu d'une image) mais au format réduit, pour tout voir.

Il te suffit d'affecter la classe "miniature" à ton conteneur en utilisant par exemple le javascript et la méthode classList.toggle.

Par contre je voudrais que l'aperçue soit en temps réel, par exemple si dans ma div j'ai un formulaire et j'écrit toto, sa doit afficher toto en temps réel.

Là je ne comprends pas

**RyzenOC** · 10/11/2014, 10h51

si dans ma div il une balise textarea, si j'écris toto dedans, dans la miniature il doit s'écrire toto en temps réel.

**NoSmoking** · 10/11/2014, 11h28

Je pense que je viens de comprendre ce que tu souhaites

Une TEXTAREA grandeur nature plus une en vignette qui se met à jour en fonction de ce qui est saisi dans la "grandeur nature".

Il va te falloir passer pas du javascript quoiqu'il arrive, mais je n'en vois pas franchement l'utilité d'une telle mise en page.

**RyzenOC** · 10/11/2014, 12h04

C'était un exemple, la div contient d'autre chose.

Il te suffit d'affecter la classe "miniature" à ton conteneur en utilisant par exemple le javascript et la méthode classList.toggle.

Je comprend pas, pourrais tu me faire un exemple ?

**NoSmoking** · 10/11/2014, 14h07

Si ma supposition est correcte, création d'une vignette en plus de l'existant, ce que j'ai dit auparavant ne tiens plus réellement.

Je te mets un exemple, incomplet, de ce que cela pourrait donner

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Création d'une vignette</title>
<style>
#conteneur,
#miniature{
  box-sizing:border-box;
  float: left;
  text-align: center;
  width: 50%;
}
#conteneur > div,
#miniature > div{
  border:1px solid #CCC;
  padding:1em;
}
textarea{
  resize:none;
  height:5em;
  width:20em;
}
#miniature > div{
  -webkit-transform: scale(0.5);
     -moz-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
}
</style>
</head>
<body>
<p><button>Ajout miniature</button></p>
<div id="conteneur">
  <div>
    <h1>Titre conteneur</h1>
    <p><img src="http://www.developpez.net/template/images/logo.png" alt="logo DVP"></p>
    <p><textarea>Bonjour</textarea></p>
  </div>
</div>
<div id="miniature">
</div>
<script>
var oBtn = document.getElementsByTagName('BUTTON')[0];
oBtn.onclick = function(){
  var oSrc  = document.getElementById('conteneur'),
      oDest = document.getElementById('miniature'),
      oClone = oSrc.querySelectorAll('DIV')[0].cloneNode( true);
      oDest.appendChild( oClone);
}
</script>
</body>
</html>

Il restera bien des choses à régler suivant la structure, mais je te le répète il te faudra utiliser le javascript.

**RyzenOC** · 10/11/2014, 17h46

Je veut que cette miniature s'actualise, si j'écrit dans le textarea, je veut voir les modification aparaitre dans ma miniature.

**NoSmoking** · 10/11/2014, 17h55

Cela je crois qu'on l'a bien compris, seulement sans structure réelle de la partie à mettre en vignette difficile de t'aider plus avant, pour le moment tu ne nous a toujours pas fournis une once de code

!

Dans le principe il te faut lier les actions des différentes TEXTAREA pour en copier la value de l'une dans l'autre et inversement.

PS: je transfère sur le forum javascript, même si il y aura besoin de CSS

**RyzenOC** · 10/11/2014, 18h20

sa serait pour afficher une miniature d'une iframe, mais je veut pas actualiser l'iframe toute les 2secndes, se serait trop gourmand.

**SylvainPV** · 10/11/2014, 18h23

Si la question est "peut-on prendre une capture d'une partie de l'écran en JavaScript", non ce n'est pas faisable pour des raisons de sécurité. Il y a bien quelques bricolages à base de canvas et de parcours du DOM mais rien de fidèle et de performant. Imagine que ton iframe pointe vers un site bancaire et qu'on se serve de cette capture pour noter les identifiants de connexion.

**RyzenOC** · 10/11/2014, 20h09

Non, se serait plus un clone ne ma div, mais rétrécie.

**NoSmoking** · 11/11/2014, 09h15

A quelle heure le brouillard va t-il se lever?

**RyzenOC** · 11/11/2014, 09h26

Il me semble qu'en Jquery sa existe.

**danielhagnoul** · 12/11/2014, 04h15

Envoyé par NoSmoking

A quelle heure le brouillard va t-il se lever?

Envoyé par sazearte

Il me semble qu'en Jquery sa existe.

Le brouillard s'épaissit !

**RyzenOC** · 12/11/2014, 18h32

merci pour votre aide.

**danielhagnoul** · 12/11/2014, 23h44

Envoyé par NoSmoking

[...] Je te mets un exemple, incomplet, de ce que cela pourrait donner : [...]

Salut

Je viens de tester ton code, il fonctionne bien sauf pour le contenu du textarea qui ne change jamais !

Pourquoi, je ne sais pas.

La seule solution que j'ai trouvée c'est de copier le texte. Ma version, en jQuery bien entendu.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#conteneur, #miniature {
  float: left;
  text-align: center;
  width: 50%;
}
#conteneur > div, #miniature > div {
  border: 1px solid #CCC;
  padding: 1em;
}
textarea {
  resize: none;
  height: 5em;
  width: 20em;
}

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
<p>
    <button id="btnAjout">Ajout miniature</button>
</p>
<div id="conteneur">
    <div>
        <h1>Titre conteneur</h1>
        <p>
            <img src="http://www.developpez.net/template/images/logo.png" alt="logo DVP">
        </p>
        <p>
            <textarea>Bonjour</textarea>
        </p>
    </div>
</div>
<div id="miniature"></div>

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$( function( ){
 
    $( "#btnAjout" ).on( "click", function(){
        var jObjClone = $( "#conteneur" ).clone( true, true );
 
        $( "#miniature" ).html( jObjClone.html() );
 
        $( "textarea", "#miniature" ).val( $( "textarea", "#conteneur" ).val() );
 
        $( "div", "#miniature" ).css( "transform", "scale( 0.50 )" );
    });
 
});

**SylvainPV** · 13/11/2014, 00h36

Pour la petite histoire, j'ai un peu cherché d'où venait ce souci avec la valeur du textarea, et j'ai déterré ça dans le bugtracker de firefox : https://bugzilla.mozilla.org/show_bug.cgi?id=230307

Status: NEW
Reported: 2004-01-07 08:16 PST by Martin Honnen

**danielhagnoul** · 13/11/2014, 05h02

J'ai vu d'abord le problème en Vanilla JS, avec appendChild, c'est pour cette raison que j'ai testé une version jQuery.

En cherchant avec Google, je vois que le problème est ancien et non résolu. Il y a même une rustine jQuery (https://github.com/spencertipping/jquery.fix.clone) qui ne fait rien d'autre que ce que j'ai fait, recopié le texte.

**NoSmoking** · 15/11/2014, 15h02

Envoyé par danielhagnoul

Je viens de tester ton code, il fonctionne bien sauf pour le contenu du textarea qui ne change jamais !

Pourquoi, je ne sais pas.

Simplement que l'exemple fournis est incomplet comme je l'ai précisé, pas envie de tout faire

Concernant le BUG il suffit sur l'événement keyup des TEXTAREA de faire une copie de la value dans la defaultValue, mais dans son cas comme il y a liaison entre les différentes TEXTAREA il suffit de mettre une fonction de recopie de la value sur le keyup et de l'appeler au premier clonage.

Créer une miniature d'une balise div

JavaScript

Discussions similaires

Partager

Partager