Créer une miniature d'une balise div

Version imprimable

10/11/2014, 08h33
RyzenOC

Créer une miniature d'une balise div
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:

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.
10/11/2014, 09h49
NoSmoking

Bonjour,

Citation:

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.

Citation:

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
10/11/2014, 10h51
RyzenOC

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.
10/11/2014, 11h28
NoSmoking

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.
10/11/2014, 12h04
RyzenOC

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

Citation:

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 ?

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:

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.

10/11/2014, 17h46
RyzenOC

Je veut que cette miniature s'actualise, si j'écrit dans le textarea, je veut voir les modification aparaitre dans ma miniature.
10/11/2014, 17h55
NoSmoking

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
10/11/2014, 18h20
RyzenOC

sa serait pour afficher une miniature d'une iframe, mais je veut pas actualiser l'iframe toute les 2secndes, se serait trop gourmand.
10/11/2014, 18h23
SylvainPV

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.
10/11/2014, 20h09
RyzenOC

Non, se serait plus un clone ne ma div, mais rétrécie.
11/11/2014, 09h15
NoSmoking

:koi: A quelle heure le brouillard va t-il se lever?
:pastaper:
11/11/2014, 09h26
RyzenOC

Il me semble qu'en Jquery sa existe.
12/11/2014, 04h15
danielhagnoul

Citation:

Envoyé par NoSmoking

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

Citation:

Envoyé par sazearte

Il me semble qu'en Jquery sa existe.

Le brouillard s'épaissit ! :mouarf:
12/11/2014, 18h32
RyzenOC

merci pour votre aide.

Citation:

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:

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:

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:

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 )" );
    });
 
});

13/11/2014, 00h36
SylvainPV

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

Citation:

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

8O
13/11/2014, 05h02
danielhagnoul

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.
15/11/2014, 15h02
NoSmoking

Citation:

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 :mrgreen:

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.