declaration de fonctions JS

Le
loupox
Bonjour à tous.
j'ai un probleme avec un petit script utilisant scriptaculous, et je
ne comprends pas, j'aurais besoin de vos lumieres.

Ma console de debug me dit que la fonction que je lance "is not
defined", et je ne comprends pas pourquoi, je vous paste le code JS,
ainsi que l'appel html des 2 fonctions.
merci pour votre temps.
Thomas


Code JS:
précision, les tags <!{ et }!> sont les délimiteur de smarty, que j'ai
modifier pour ne pas interferer avec JS
dans mon html, les valeurs ont bien remplacé mes tags.
le script est inseré dans ma page HTML, en bas de page (mais ca n'est
qu'un template, elle est donc inséré dans la balise <body>)

<script type="text/javascript" language="javascript">
var validWBox = <!{$largeur_vids}!>;
var validWImg = 74;
var numImg = <!{$nbr_vids}!>;

function moveToNext() {
var validMove = getMoveStatus('next');
if(validMove) {
new Effect.Move('imageBoxInside', { x: (0-validWBox), y: 0,
transition: Effect.Transitions.sinoidal });
}
}
function moveToPrevious() {
var validMove = getMoveStatus('prev');
if(validMove) {
new Effect.Move('imageBoxInside', { x: validWBox, y: 0,
transition: Effect.Transitions.sinoidal });
}
}
function getMoveStatus(currMove) {
var theLeft = document.getElementById('imageBoxInside').style.left;
var imgNumComul = numImg * validWImg;
theLeft = parseInt(theLeft.replace('px',"));
if(currMove == 'next') {
theLeft = theLeft - validWBox;
} else {
theLeft = theLeft + validWBox;
}
if(theLeft == validWBox) {
return false;
} else if(theLeft <= (0-imgNumComul)) {
return false;
} else {
return true;
}
}
</script>

--
et maintenant, le code HTML qui lance les fonctions.

<div id="goleft" onclick="moveToPrevious(); return true;"></div>
<div id="goright" onclick="moveToNext(); return true;"></div>
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
yamo'
Le #18876151
Salut,
a tapoté, le 11.03.2009 13:03:
le script est inseré dans ma page HTML, en bas de page (mais ca n'est
qu'un template, elle est donc inséré dans la balise<body>)



L'idéal ce serait de poster une URL de test car d'après ton erreur, tu
appelle le javascript avant qu'il ne soit déclaré, il y a un truc pour
que le javascript soit quand même déclaré comme s'il était dans le head
mais c'est vraiment de la bidouille il faudrait que je retrouve la syntaxe.


Stéphane
--
SAM
Le #18876531
Le 3/11/09 1:03 PM, a écrit :
Bonjour à tous.
j'ai un probleme avec un petit script utilisant scriptaculous, et je
ne comprends pas, j'aurais besoin de vos lumieres.

Ma console de debug me dit que la fonction que je lance "is not
defined", et je ne comprends pas pourquoi,



sans doute parce que :
- il y a une erreur de JS juste avant
- une erreur dans cette fonction
- elle est appelée avant que d'être lue (parsée)

je vous paste le code JS,
ainsi que l'appel html des 2 fonctions.
merci pour votre temps.
Thomas

---
Code JS:
précision, les tags <!{ et }!> sont les délimiteur de smarty, que j'ai
modifier pour ne pas interferer avec JS



les délimiteurs de smarty, que j'ai modifiés
^^ ^^
scriptaculous ... smarty ... et quoi d'autre encore ?

dans mon html, les valeurs ont bien remplacé mes tags.
le script est inseré dans ma page HTML, en bas de page (mais ca n'est
qu'un template, elle est donc inséré dans la balise <body>)

<script type="text/javascript" language="javascript">



et pourquoi language ?
puisque de toutes façons la version n'est pas donnée ...
à quoi sert-ce ?

var validWBox = <!{$largeur_vids}!>;



ne serait-il pas possible d'avoir le code que reçoit le brouteur ?
Le view-source:

à mon idée (et bien que ne connaissant pas cet élégant)
ce devrait être :
var validWBox = '<!{$largeur_vids}!>';
sauf à ce que ce soit un nombre.


Qu'est censé être : $largeur_vids ?
Est-ce que la largeur de l'image est connue quand on y fait appel ?
Voir ce que donne à cet endroit le code source vu par le navigateur.

var validWImg = 74;
var numImg = <!{$nbr_vids}!>;



itou pareil pour le numéro ?

Pour le reste je suppose que c'est du spectaculaire et que c'est OK

function moveToNext() {
var validMove = getMoveStatus('next');
if(validMove) {
new Effect.Move('imageBoxInside', { x: (0-validWBox), y: 0,
transition: Effect.Transitions.sinoidal });
}
}
function moveToPrevious() {
var validMove = getMoveStatus('prev');
if(validMove) {
new Effect.Move('imageBoxInside', { x: validWBox, y: 0,
transition: Effect.Transitions.sinoidal });
}
}
function getMoveStatus(currMove) {
var theLeft = document.getElementById('imageBoxInside').style.left;



var theLeft = document.getElementById('imageBoxInside').offsetLeft;
ne pourrait-il pas faire ?
(read write et sans unité (pas de 'px') )

var imgNumComul = numImg * validWImg;
theLeft = parseInt(theLeft.replace('px',"));
if(currMove == 'next') {
theLeft = theLeft - validWBox;
} else {
theLeft = theLeft + validWBox;
}
if(theLeft == validWBox) {
return false;
} else if(theLeft <= (0-imgNumComul)) {
return false;
} else {
return true;
}
}
</script>

--
et maintenant, le code HTML qui lance les fonctions.

<div id="goleft" onclick="moveToPrevious(); return true;"></div>
<div id="goright" onclick="moveToNext(); return true;"></div>



loupox
Le #18876721
On 11 mar, 14:11, SAM wrote:
sans doute parce que :
- il y a une erreur de JS juste avant
- une erreur dans cette fonction
- elle est appelée avant que d'être lue (parsée)



en fait, qd je retire tous les appels à la fonction getmovestatus,
et que moveToNext() et moveToPrevious() appellent juste scriptaculous,
tout fonctionne.
mais je souhaiterais controler que nous ne sommes pas au debut de la
liste, ou à la fin, pour que le scroll puisse s'arreter.
d'ou la fonction getMoveStatus.
> <script type="text/javascript" language="javascript">

et pourquoi language ?
puisque de toutes façons la version n'est pas donnée ...
à quoi sert-ce ?



ok je ne savais pas, je vire la mention "language" ..

ne serait-il pas possible d'avoir le code que reçoit le brouteur ?
Le view-source:



Si, je le paste en bas de ce message..


à mon idée (et bien que ne connaissant pas cet élégant)
ce devrait être :
     var validWBox = '<!{$largeur_vids}!>';
sauf à ce que ce soit un nombre.



oui, ce sont des nombres...
mais je peux rajouter des cotes.


Qu'est censé être : $largeur_vids ?
Est-ce que la largeur de l'image est connue quand on y fait appel ?
Voir ce que donne à cet endroit le code source vu par le navigateur.



cf bas du message dans l'html source.
mais c'est bien des nombres, et les valeurs sont bien parsées.


> var validWImg = 74;
> var numImg = <!{$nbr_vids}!>;

itou pareil pour le numéro ?

Pour le reste je suppose que c'est du spectaculaire  et que c'est OK



spectaculaire, je sais pas :) mais ok, je l'espere bien ^^


--
le code HTML vu du brouteur:

<div id="goleft" onclick="javascript:moveToPrevious(); return true;"></
div>
<div id="goright" onclick="javascript:moveToNext(); return true;"></
div>

<div id="imagebox">
<div id="imageBoxInside">
<a href="/koo/230"><img src="/im_file/230/74"
class="selected_video" ></a>
<a href="/koo/198"><img src="/im_file/198/74"
class="not_selected_video" ></a>
[... la liste continue... ]
<a href="/koo/253"><img src="/im_file/253/74"
class="not_selected_video" ></a>
<a href="/koo/250"><img src="/im_file/250/74"
class="not_selected_video" ></a>
<br />
</div>
</div>
<script type="text/javascript" >
var validWBox = '3496';
var validWImg = '74';
var numImg = '46';
function moveToNext() {
var validMove = getMoveStatus('next');
if(validMove) {
new Effect.Move('imageBoxInside', { x: (0-validWBox), y: 0,
transition: Effect.Transitions.sinoidal });
}
}
function moveToPrevious() {
var validMove = getMoveStatus('prev');
if(validMove) {
new Effect.Move('imageBoxInside', { x: validWBox, y: 0,
transition: Effect.Transitions.sinoidal });
}
}
function getMoveStatus(currMove) {
var theLeft = document.getElementById('imageBoxInside').style.left;
var imgNumComul = numImg * validWImg;
theLeft = parseInt(theLeft.replace('px',"));
if(currMove == 'next') {
theLeft = theLeft - validWBox;
} else {
theLeft = theLeft + validWBox;
}
if(theLeft == validWBox) {
return false;
} else if(theLeft <= (0-imgNumComul)) {
return false;
} else {
return true;
}
}
</script>
loupox
Le #18876901
On 11 mar, 14:11, SAM wrote:

var theLeft = document.getElementById('imageBoxInside').offsetLeft;
ne pourrait-il pas faire ?
(read write et sans unité (pas de 'px') )



si, mais pourrais je utiliser la variable validWBox instancié dans le
JS ?
à quoi correspond le ...offsetleft, par rapport au style.left ?

J'ai en effet oublié de mettre un point important.
mes déclarations CSS (inclus également ds l'HTML)

<style type="text/css">
#imagebox { margin: auto; width: 747px; height: 50px; overflow:
hidden; position: absolute; top: 342px; left: 20px; }
#imageBoxInside { width: 3496px; }
#imagebox img { padding: 0px; margin: 0px; vertical-align: middle;}
#imagebox br { clear: both; }
</style>
Pascal PONCET
Le #18877201
a écrit :
On 11 mar, 14:11, SAM wrote:
ne serait-il pas possible d'avoir le code que reçoit le brouteur ?





Bonjour,

Eh oui, c'est tellement plus facile comme ça !

le code HTML vu du brouteur:


...
theLeft = parseInt(theLeft.replace('px',"));



STOP ! Firebug me balance une erreur de String ici.
Il semblerait qu'il y ait un guillemet double au lieu de deux simples.


Comme j'ai commenté la partie Scriptaculous (new Effect...), je ne peux
pas tester en entier. Mais qu'est-ce que ça donne après correction ?

Cordialement,
Pascal
loupox
Le #18877341
On 11 mar, 15:43, Pascal PONCET wrote:
>   theLeft = parseInt(theLeft.replace('px',"));

STOP ! Firebug me balance une erreur de String ici.
Il semblerait qu'il y ait un guillemet double au lieu de deux simples.



Rhoo tu déchires :)
il fallait avoir l'oeil ...
moi mon Firebug me dit plus rien, j'ai pas trop compris pourquoi..
en tout cas, en effet, '' à la place de " et ca va tout de suite bien
mieux ...
bon, ma fonction ne fait pas exactement ce que je veux, mais c'est un
pbl scriptaculous ca :)
merci infiniment...

A bientot
Thomas
SAM
Le #18877331
Le 3/11/09 2:53 PM, a écrit :
On 11 mar, 14:11, SAM wrote:
var theLeft = document.getElementById('imageBoxInside').offsetLeft;
ne pourrait-il pas faire ?
(read write et sans unité (pas de 'px') )



si, mais pourrais je utiliser la variable validWBox instancié dans le
JS ?
à quoi correspond le ...offsetleft, par rapport au style.left ?



Le syle.left sera indéterminé s'il n'est pas déclaré dans l'objet
(<img stye="left ... )
Le offsetLeft est l'espace à gauche de l'objet par rapport à
... je sais plus quoi ... le view-port ? le parent ?
et il n'a pas d'unité

Que donne dans la barre d'adresse :
javascript:alert(document.getElementById('imageBoxInside').style.left);
et/ou :
javascript:alert(document.getElementById('imageBoxInside').offsetLeft);
(copier-coller et presser touche Entrée)

function getMoveStatus(currMove) {
var theLeft = document.getElementById('imageBoxInside').style.left;
theLeft = theLeft? parseInt(theLeft.replace('px',")) : 20;
var imgNumComul = numImg * validWImg;
if(theLeft == validWBox || theLeft <= (0-imgNumComul)) {
return false;
}
theLeft = (currMove == 'next')? theLeft - validWBox :
+validWBox + theLeft;
return true;
}

J'ai en effet oublié de mettre un point important.
mes déclarations CSS (inclus également ds l'HTML)

<style type="text/css">
#imagebox { margin: auto; width: 747px; height: 50px; overflow:
hidden; position: absolute; top: 342px; left: 20px; }
#imageBoxInside { width: 3496px; }
#imagebox img { padding: 0px; margin: 0px; vertical-align: middle;}
#imagebox br { clear: both; }
</style>


Laurent vilday
Le #18877321
:

<div id="goleft" onclick="javascript:moveToPrevious(); return true;"></
div>



Pour ton problème actuel je ne sais pas trop sans avoir une url de démo.
Le javascript étant de par sa nature extrêmement dynamique, le contexte
influence énormément de choses.

Par contre, STP par pitié à moins d'une raison valide (vbscript par
défaut dans le document - IE only -), peux-tu remplacer

onclick="javascript:moveToPrevious(); return true;"

par

onclick="return moveToPrevious()"

avec ta fonction moveToPrevious() retournant false. Pas par true IMO
même si là puisque que c'est un <div> (et pas un <a>) c'est pas génant.

Bon courage sinon.

--
laurent
loupox
Le #18878091
merci.
le pbl venait bien des double ' remplacé par un "...
il y avais d'autre soucis de JS, essentiellement un qui
- plutot que d'ajouter 2 variable, les concaténais...
j'ai finalement trouvé.
ce script sert à avoir un scroll horizontal un peu sympa (smooth pour
les intimes) dans l'idée d'un carroussel, et le tout en Ajax.
si il y a des amateurs, je le mets en ligne.

merci encore pour votre aide, et à bientot
SAM
Le #18878441
Le 3/11/09 5:36 PM, a écrit :
merci.
le pbl venait bien des double ' remplacé par un "...



Je croyais que c'était OK là.

il y avais d'autre soucis de JS, essentiellement un qui
- plutot que d'ajouter 2 variable, les concaténais...
j'ai finalement trouvé.
ce script sert à avoir un scroll horizontal un peu sympa (smooth pour
les intimes) dans l'idée d'un carroussel, et le tout en Ajax.
si il y a des amateurs, je le mets en ligne.



Ben oui.
(surtout la partie Ajax, voir à voir si ça passe bien sur mon ADSL fatigué)

merci encore pour votre aide, et à bientot




Bon, sans Ajax, ni peut-être "smooth",
un script sans doute plus simpe, qui date et que j'aime bien
(pas besoin de spectacoulos) :

--
sm
Publicité
Poster une réponse
Anonyme