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.

Créer une miniature d'une balise div

JavaScript

Vue hybride

Discussions similaires

Partager

Partager