plugin tagSphere et spip

**LG-Nimbus** · 22/06/2010, 13h52

Bonjour, c'est encore moi XD

J'ai progressé dans mon projet d'un menu sphérique animé en javascript et basé sur ce script : http://plugins.jquery.com/files/jquery.tagSphere.js.txt

Maintenant j'essaie d'intégrer le script modifié dans SPIP (un CMS)

J'ai donc modifié la page d'accueil ainsi :

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
96
97
98
99
100
101
102
103
104
105
106
<head>
	<script type="text/javascript" src="plugins/tagsphere/js/jquery.js"></script>
<script type="text/javascript" src="plugins/tagsphere/js/jquery-ui.js"></script>
<script language="javascript" src="plugins/tagsphere/js/jquery.tagSphere.js" type="text/javascript"></script>
<script type="text/javascript">
			 var sphere_active = new Boolean();
 
			var isIE = document.all;
			var mouseX = 0;
			var mouseY = 0;
 
			var facteur = 2;
			var tolerance = 0.05;
 
			var forCalcs = {
				halfHeight: null,
				halfWidth: null,
				hwratio: null,
				dtr: null,
				diametr: null,
				speedX: null,
				speedY: null,
				tLength: null,
				whratio: null
			}
				sphere_active = false;
 
		function diametr_transition(ratioto){
			var diff = ratioto - forCalcs.hwratio;
 
			if( !(Math.abs(diff) < tolerance)) 
			{
				forCalcs.hwratio += diff / facteur;
				forCalcs.whratio = forCalcs.hwratio;
			}
			else
			{
 
				clearInterval(tRAnsiTIOn);
				delete tRAnsiTIOn;
				forCalcs.hwratio = ratioto;
				forCalcs.whratio = forCalcs.hwratio;
			}
		}
 
		function placement_div(e){
 
			if (!e) e = window.event;	
			if (e)
				{
					mouseX = isIE ? (e.clientX + document.body.scrollLeft) : e.pageX;
					mouseY = isIE ? (e.clientY + document.body.scrollTop) : e.pageY;
				}
			}
 
 
		function menusphere(){
			delete tRAnsiTIOn;
 
				if (!sphere_active){
					delete $('tagSphere');
 
					document.getElementById("tagsphere").style.left = mouseX-420 +"px";
					document.getElementById("tagsphere").style.top = mouseY-160 +"px";
					sphere_active = true;
					$('#tagsphere').tagSphere({
						height: 280,
						width: 280,
						slower: 0.65,
						radius: 120,
						timer: 50
					});
 
 
					//$('#tagsphere').effect("scale", { percent: 200, direction: 'both' }, 1000); 
//Les fonctions "effect" de scriptaculous semblaient ne pas être reconnue, alors que j'avais appelé le script.
 
					tRAnsiTIOn = setInterval('diametr_transition(1)', 50);
 
				}
				else
				{
 
				sphere_active = false;
 
				//$('#tagsphere').effect("scale", { percent: 0, direction: 'both' }, 1000);
 
				tRAnsiTIOn = setInterval('diametr_transition(0)', 50);
 
				};
 
				return forCalcs.diametr;
				return sphere_active;
			}
 
			function toucheMaintenueEnfoncee(e){
				if (e.keyCode == 13) {
					e = window.menusphere();
				};
			}
			document.onkeypress = toucheMaintenueEnfoncee;
			document.onmousemove = placement_div;
 
			</script>
	<INCLURE{fond=noisettes/headers/entete-meta}{skel=sommaire}{env}>
	</head>

Et chaque fois que j'essaie d'activer la tagsphere en appuyant sur la touche entrée (en attendant de programmer un meilleur système d'appel) je me retrouve avec l'erreur suivante :

$("#tagsphere").tagSphere is not a function
http://localhost/spip/?lang=fr&var_mode=recalcul
Line 79

Si quelqu'un sait comment activer ce genre de javascript dans spip
(J'ai bien entendu déjà cherché sur google, j'ai vu des pages expliquant comment désactiver un système de protection de spip empêchant l'ajout de javascript... j'ai essayé de désactiver ce système, et je pense que ce n'est pas la cause du problème, je n'en suis toutefois pas certain ).

**danielhagnoul** · 28/06/2010, 21h29

Bonsoir.

Je ne connais rien au CMS et à SPIP en particulier, mais voici un exemple d'utilisation dans une page web. La présentation dépend beaucoup du réglage des paramètres CSS.

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* BASE */
		body {
			background-color:#ffffff;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			height:500px;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
 
		/* TEST */
		#gauche {
			float:left;
			width:300px;
			height:400px;
			padding:6px;
			border:1px solid red;
		}
		#centre {
			float:left;
			width:300px;
			height:400px;
			padding:6px;
			border:1px solid blue;
		}
		#tagsphere {
			margin-left:6px;
			border:1px solid grey;
		}
		#tagsphere a {
			text-decoration:none;
			color:blue;
		}
		#droit {
			float:left;
			width:300px;
			height:400px;
			padding:6px;
			border:1px solid red;
		}
		div#affiche {
			clear:both;
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script charset="utf-8" src="../tagsphere-3d-tags/jquery.tagSphere.js"></script>
 	<script>
		$(function(){
			$('#tagsphere').tagSphere({
				height: 280,
				width: 280,
				slower: 0.65,
				radius: 100,
				timer: 50
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<div id="gauche">
			<p>
				Quisque ac lacus. Aliquam erat volutpat. Vestibulum fringilla accumsan est. Mauris ipsum mauris, scelerisque vitae, aliquet aliquam, imperdiet sit amet, risus. Aliquam tincidunt. Vestibulum sit amet leo non dolor porttitor laoreet. Mauris convallis sagittis tortor. Integer eget purus et enim porttitor ullamcorper. Sed molestie nisi quis justo. Cras et enim. Mauris nec purus. Vestibulum vitae magna vel augue vehicula sodales. Fusce id justo. Fusce dolor nisi, tincidunt in, consectetur at, ornare rhoncus, eros.
			</p>
		</div>
		<div id="centre">
			<div id="tagsphere">
				<ul>
					<li><a href="#">Mot clé 1</a></li>
					<li><a href="#">Mot clé 2</a></li>
					<li><a href="#">Mot clé 3</a></li>
					<li><a href="#">Mot clé 4</a></li>
					<li><a href="#">Mot clé 5</a></li>
					<li><a href="#">Mot clé 6</a></li>
					<li><a href="#">Mot clé 7</a></li>
					<li><a href="#">Mot clé 8</a></li>
					<li><a href="#">Mot clé 9</a></li>
					<li><a href="#">Mot clé 10</a></li>
					<li><a href="#">Mot clé 11</a></li>
					<li><a href="#">Mot clé 12</a></li>
					<li><a href="#">Mot clé 13</a></li>
					<li><a href="#">Mot clé 14</a></li>
					<li><a href="#">Mot clé 15</a></li>
					<li><a href="#">Mot clé 16</a></li>
					<li><a href="#">Mot clé 17</a></li>
					<li><a href="#">Mot clé 18</a></li>
					<li><a href="#">Mot clé 19</a></li>
				</ul>
			</div>
		</div>
		<div id="droit">
			<p>
				Quisque ac lacus. Aliquam erat volutpat. Vestibulum fringilla accumsan est. Mauris ipsum mauris, scelerisque vitae, aliquet aliquam, imperdiet sit amet, risus. Aliquam tincidunt. Vestibulum sit amet leo non dolor porttitor laoreet. Mauris convallis sagittis tortor. Integer eget purus et enim porttitor ullamcorper. Sed molestie nisi quis justo. Cras et enim. Mauris nec purus. Vestibulum vitae magna vel augue vehicula sodales. Fusce id justo. Fusce dolor nisi, tincidunt in, consectetur at, ornare rhoncus, eros.
			</p>
		</div>
		<div id="affiche">
			<p>
				Pellentesque quam. Morbi ornare. Sed sodales laoreet felis. Maecenas adipiscing fermentum lorem. Aenean sed odio et nisl cursus dignissim. Pellentesque laoreet lacus a tortor. Vivamus sem risus, venenatis non, pretium a, tincidunt et, sem. Ut tincidunt velit cursus lorem. Aliquam fringilla mauris. Nunc sit amet diam. Fusce ullamcorper. Aliquam tempor, erat volutpat convallis tristique, ligula sapien pellentesque neque, vitae vulputate velit augue sodales ante. Mauris dapibus. Donec laoreet turpis eu dolor. Nam at sem quis justo vehicula venenatis. Phasellus tincidunt vestibulum ipsum.
			</p>
		</div>
	</div>
</body>
</html>

plugin tagSphere et spip

jQuery

Discussions similaires

Partager

Partager