Un script dans une fenêtre modale ?

**Anons** · 23/07/2011, 20h24

Bonjour,

Mes nerfs vont lâcher sur un problème et j'aimerais que vous m'aidiez à en trouver l'origine si possible.

J'essaie de raisonner de façon efficace, j'ai 2 pages : celle à partir de laquelle j'ouvre ma fenêtre modale en cliquant sur un bouton, et celle qui contient mon script pour creer une miniature (à partir d'une image : on la bouge dans un cadre comme sur facebook). La première fonctionne car elle m'ouvre une fenêtre modale avec le cadre contenant la photo sauf qu'il est impossible de la déplacer dans cadre, la deuxième fonctionne quand elle n'est pas appeler dans une fenêtre modale (déplacement de la photo dans le cadre).

D'où est-ce que peut venir le problème ?

PS: Voilà la page que j'essaie d'appeler dans la fenêtre modale, le script marche ne vous embêtez pas avec, c'est peut-être la disposition qui pose problème ?

Code :

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!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=UTF-8">
    <title>FaceBook Style Cropping</title>
<style>
	*{
		margin:0;
		padding:0;
	}
 
	#cont{
		width:200px;
		background-color:red;
		text-align:center;
		padding-top:5px;
	}	
 
		#crop-holder { 
			width:50px;
			margin: 0px auto 0px auto;
			border:1px blue solid;
		}
 
			#crop-iholder {  
				height:50px;
				width:50px;
				overflow:hidden;
				cursor:move;
			}
 
		input {
			font-size:0,5em;
		}
 
</style>
<script type="text/javascript" src="facebook-cropping-mootools_fichiers/mootools-1_002.js"></script>
<script type="text/javascript" src="facebook-cropping-mootools_fichiers/mootools-1.js"></script>
 
</head>
<body>
 
<div id="cont">
 
	<div id="crop-holder">
		<div id="crop-iholder">
			<img style="height: 83px;" id="imgPhoto" src="testmoocrop.jpg">
		</div>
	</div>
 
	<form method="post" action="crop facebox.php">
		<input value="1" id="hdnInpTop" type="hidden" name="cut_from_top">
		<input value="-29" id="hdnInpLeft" type="hidden" name="cut_from_left">
		<input value="Save Thumbnail Version" type="submit">
	</form>
 
</div>
 
<script type="text/javascript">
//<![CDATA[
var cropImage = function(target, container, coordinateContainer, topCoord, leftCoord){
	var img = $(target);
	var imgSizeRatio = img.getSize().x / img.getSize().y;
	var desiredRatio = (83) / (68);
	if (imgSizeRatio > desiredRatio) {
		img.setStyle('height','83px'); // redimensionnement css à corriger
	}else{
		img.setStyle('width','68px');	
	}
	var myDragScroller = new Drag(container, {
		snap:0,
		style: false,
		invert: true,
		modifiers: {x: 'scrollLeft', y: 'scrollTop'},
		onComplete: function(el){
			var cropCutFromTop = img.getCoordinates($(coordinateContainer)).top;
			var cropCutFromLeft = img.getCoordinates($(coordinateContainer)).left;
				$(topCoord).set('value',cropCutFromTop);
				$(leftCoord).set('value',cropCutFromLeft);
 
		}
	});
}
 
 
window.addEvent('load', function(){ // important do not use domReady since we want the image to be loaded
	document.ondragstart = function (){ // fn cropImage modifie la valeur des input hdnInpTop et hdnInpLeft dés que l'image est déplacée
	return false; 
	}; //IE drag hack 
	cropImage('imgPhoto', 'crop-iholder', 'crop-holder', 'hdnInpTop', 'hdnInpLeft');
	});
//]]>
 
</script>
 
</body></html>

**gwinyam** · 25/07/2011, 12h22

Comment ouvres-tu la fenêtre modale ?

JS classique ? Fonction ou plugin mootools ? Autre ? plus de précisions ?

Il y a des chances que l'ouverture ne fasse pas un truc bête : importe le JS et le HTML comme du HTML pur et n'ait juste pas reçu l'instruction d'évaluer le JS.

Un script dans une fenêtre modale ?

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager