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.

25/07/2011, 12h22	#2
gwinyam Membre Expert Mathieu ROBIN Développeur Web Inscription : mai 2006 Messages : 1 116 Détails du profil Informations personnelles : Nom : Mathieu ROBIN Âge : 25 Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Opérateur de télécommunications Informations forums : Inscription : mai 2006 Messages : 1 116 Points : 2 142 Points : 2 142	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. __________________ Mon blog techno et son billet hebdomadaire sur l'actualité jQuery. Et mon blog cuisine pour une personne. Le bouton ne masse pas les pieds, mais ça aide la communauté.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email