Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript declaration de fonctions JS

declaration de fonctions JS

10 réponses
Avatar
loupox
Bonjour =E0 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=E9cision, les tags <!{ et }!> sont les d=E9limiteur de smarty, que j'ai
modifier pour ne pas interferer avec JS
dans mon html, les valeurs ont bien remplac=E9 mes tags.
le script est inser=E9 dans ma page HTML, en bas de page (mais ca n'est
qu'un template, elle est donc ins=E9r=E9 dans la balise <body>)

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

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

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

<div id=3D"goleft" onclick=3D"moveToPrevious(); return true;"></div>
<div id=3D"goright" onclick=3D"moveToNext(); return true;"></div>
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
yamo'
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
--
<http://pasdenom.info>
Avatar
SAM
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>



Avatar
loupox
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>
Avatar
loupox
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>
Avatar
Pascal PONCET
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
Avatar
loupox
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
Avatar
SAM
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>


Avatar
Laurent vilday
:

<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
Avatar
loupox
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
Avatar
SAM
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) :
<http://ygda.free.fr/hscrollScript.htm>
<http://ygda.free.fr/hscroll3.htm>

--
sm