appel javascript non intrusif

Version imprimable

17/04/2007, 17h26
jfrsm

appel javascript non intrusif
Allo je cherche comment faire pour faire appel à un javascript, que je définis dans le head de la page avec ceci
Code:

1 2 <script type="text/javascript" src="/blog/ecrire/tools/diaporama/diascript.js"></script>
Au début (premier essai) j'avais inscrit directement le code à l'endroit voulu (comme inscrit plus bas) mais il semble que ce ne soit pas la bonne pratique, même si cela fonctionne.
Code:

1 2 3 4 5 6 <div id = "Diaporama"> <h2>Diaporama</h2> <script type="text/javascript"> et la suite du script... </script>
Donc comment faire appel à mon script à un endroit précis.
17/04/2007, 17h31
goodpz

Le navigateur va interpréter le javascript contenu dans le fichier .js quand celui-ci sera chargé. Il est donc souvent recommandé d'utiliser l'événement window.onload pour finir d'initialiser correctement les scripts une fois que la page entière est chargée.
17/04/2007, 17h36
SpaceFrog

Tout dépend de ce qu'il fait ton script ...

Ok effectivement j'ai lu et je sais pour faire ouvrir une fenêtre...mais dans mon cas il s'agit de placer le résultat du script à un endroit précis, en fait le script est un diaporama en boucle d'image que j'ai récupéré de chez dynamicDrive. Donc si je fais appel à ce script mon appel à l'endroit sera comment? Je ne veux pas que ce soit un lien mais que le diaporama s'affiche à l'endroit déterminé. Est ce que c'est plus clair?

Code:

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
 
/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
 
 
//Specify the slider's width (in pixels)
var sliderwidth="125px"
//Specify the slider's height
var sliderheight="125px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"
 
//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><src="<?php dcInfo('img'); ?>TEST.png" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="dynamicbook2.gif" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="dynamicbook3.gif" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="dynamicbook4.gif" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="dynamicbook5.gif" border=1></a>'
 
//Specify gap between each image (use HTML):
var imagegap=" "
 
//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5
 
 
////NO NEED TO EDIT BELOW THIS LINE////////////
 
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
 
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
 
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
 
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
 
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
 
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
 
 
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>
 
<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>
</div>

17/04/2007, 18h35
goodpz

Cette lib de diaporama ne semble pas adaptée pour ce que tu souhaites.
Il faudrait mettre le code complet dans une fonction que tu appellerais ensuite à l'endroit désiré
17/04/2007, 18h35
SpaceFrog

ben si tu ouvres unefenetre pour y coller le diaporama il s'agit plutot du positionnement le la fenetre non ?
17/04/2007, 18h47
jfrsm

SpaceFrog -- Non justement je n'ouvre pas de fenêtre...

Il s'agit plus comme goodpz le mentionne, mettre le tout dans une fonction et y faire référence à l'endroit voulue. (qui est en fait une section de la sidebar de mon blog)

Autrement goodpz, as tu une idée de la lib de diaporama que je pourrais utiliser afin d'afficher un diaporama de ce genre dans la sidebar de mon blog, en excluant les soft qui le font automatiquement (slide.com)
17/04/2007, 18h53
goodpz

Citation:

Autrement goodpz, as tu une idée de la lib de diaporama que je pourrais utiliser afin d'afficher un diaporama de ce genre dans la sidebar de mon blog, en excluant les soft qui le font automatiquement (slide.com)

Je ne suis pas du tout calé en ce qui concerne les libs de diaporama. Il en existe sûrement des plus récentes (non intrusives etc). Une recherche sur le net s'impose (sur ce forum aussi) à moins que quelqu'un ait un lien tout frais...
17/04/2007, 18h58
SpaceFrog

je ne vois pas le problème ...
la focntion peut être dans le head ou externalisée ...

la reference à l'objet sur la page se faisant par un getElementById ...
17/04/2007, 19h10
jfrsm

Donc tu veux dire que dans le head de la page j'inscrit la référence au script

<script type="text/javascript" src="/blog/ecrire/tools/diaporama/diascript.js"></script>

Ce script à une référence id, qui est appelé par getElementById à l'endroit voulu?

Mais à la lumière de cette méthode comment faire, je débute

Si c'est le principe je vois un peu autrement?
17/04/2007, 19h37
SpaceFrog

je n'ai pas vu le type de diaporama que tu souhaites ...
il y a un exemple en ligne ?
sinon explique et je te ferais un petit exemple demain ..
17/04/2007, 20h09
jfrsm

C'est bien gentil de ta part, ça remonte le moral parceque la je sais plus ou donner de la tête...

Voici un exemple http://www.dynamicdrive.com/dynamici...rightslide.htm

Toujours dans l'optique que je l'intègre dans la sidebar de mon blog et que je puisse avoir idéalement un lien pour voir l'image dans un format plus grand (lien type popup)

http://www.reveenbulle.com/blog/ tout juste en bas du calendrier. J'ai placé actuellement le code d'origine dans son ensemble mais comme il avait été noté, c'est plutôt sale comme façon...

Je viens de voir que celui-ci pourrait probablement plus s'adapter, (idéalement en reprenant le principe du bandeau défilement image) dans le sens que je met la première partie du code (step 1) en un fichier externe...J'y fais référence dans le head de ma page en question et enfin je précise dans l'emplacement voulu, avec la section 2 (step 2) du code. Je sais pas si c'est bon comme raisonnement. Et comment bien structurer le tout...

Merci pour ton aide
18/04/2007, 15h04
jfrsm
Bon j'ai cherché pour trouver une solution mais je n'y comprends pas grand chose sur la question de faire référence à un script à un endroit précis d'un page.

En partant du fait que je voudrais inclure ce script en externe...http://www.dynamicdrive.com/dynamici...rightslide.htm

Je devrai y faire appel sur ma page ou je veux que le script s'exécute, de cette façon ? <script type="text/javascript" src="/blog/ecrire/tools/diaporama/diascript.js"></script> En supposant que le script (lien plus haut) soit bien dans ce dossier...

Toutefois comment faire en sorte que ce diaporama soit présent à un endroit X sur la page.

Actuellement j'y fait référence en plaçant tout le script dans la page de cette façon...ce qui est contraignant.
Code:

1 2 3 4 5 6 7 8 </div> <div id = "Diaporama"> <h2>Diaporama</h2> <script type="text/javascript"> ////////////////////////J'ai placé tout le script ici/////////////////////////// </script> </div>
Donc comment faire, en y plaçant la référence dans le <head> de la page, je puisse le placer précisément à l'endroit...getElementById est la solution? Mais je ne sais comment faire cette référence. :roll:

Ainsi je n'aurai pas à modifier le template de mon site mais uniquement le script pour afficher différent diaporama.
18/04/2007, 15h14
E.Bzz

Citation:

Envoyé par jfrsm

Ce script à une référence id, qui est appelé par getElementById à l'endroit voulu?

Pour éviter les incompréhensions : c'est plutôt l'inverse. Le script fait référence aux objets de la page via getElementById().
Tu n'aurais donc pas besoin de la "placer" à l'endroit voulu dans ta page : il saurait "viser" tout seul le bon endroit.
... sous réserve d'une intégration correcte ;)

Non tu n'y es pas ...

ton scritp tu le mets soit en externe, soit dans le head de la page

Code:

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<title>Nouvelle page 1</title>
<script type='text/javascript'>
var TabImages=new Array();
TabImages[0]=new Image();
TabImages[0].src="image1.jpg";
TabImages[1]=new Image();
TabImages[1].src="image1.jpg";
TabImages[2]=new Image();
TabImages[2].src="image1.jpg";
TabImages[3]=new Image();
TabImages[3].src="image1.jpg";
TabImages[4]=new Image();
TabImages[4].src="image1.jpg";
 
 
 
function diashow(){
for (i=0;i<TabImages.length;i++){
setTimeout(function(){document.getElementById('monimage').src=TabImages[i].src;},1000}
}
diashow()
}
</script>
</head>
 
<body>
<img id="monimage" />
</body>

ou que soit l'image dasn la page c'est elle dont le src sera modifié ...

Citation:

Envoyé par SpaceFrog

<body>
<img id="monimage" />
</body>
[/CODE]

Ou dans mon cas??

</div>
<div id = "Diaporama">
<h2>Diaporama</h2>
<img id="monimage"/>
</div>

Ok je vois pour cet appel, que je place à l'endroit dans la page ou je veux que le diaporama soit.

Mais par rapport au fichier (que je veux externe) comme y intégrer le id monimage? Dans ce script?

Code:

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
 
/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
 
 
//Specify the slider's width (in pixels)
var sliderwidth="125px"
//Specify the slider's height
var sliderheight="125px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"
 
//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><src="<?php dcInfo('img'); ?>TEST.png" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="dynamicbook2.gif" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="dynamicbook3.gif" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="dynamicbook4.gif" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="dynamicbook5.gif" border=1></a>'
 
//Specify gap between each image (use HTML):
var imagegap=" "
 
//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5
 
 
////NO NEED TO EDIT BELOW THIS LINE////////////
 
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
 
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
 
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
 
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
 
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
 
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
 
 
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

Désolé pour mon incompréhension mais je suis vraiment débutant dans ce domaine...:oops:

Voir sur le blog l'effet escompté mais avec le script en externe

http://www.reveenbulle.com/blog/

Code:

1
2
3
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide

c'est là qu'est definin l'endroit (pour IE)
as tu un id test2 ou test3 sur la page ?

18/04/2007, 16h18
E.Bzz

Citation:

Envoyé par SpaceFrog

as tu un id test2 ou test3 sur la page ?

Visiblement : oui pour IE, non pour les autres ...

@ jfrsm : tu devrais enlever le document. dans

Code:

document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')

y a déjà le with(document) ...
18/04/2007, 16h22
jfrsm

Donc je n'aurais qu'à placer ceci pour y faire référence à l'endroit...

</div>
<div id = "Diaporama">
<h2>Diaporama</h2>
<img id="test2"/>
</div>

et faire appel au script externe dans le head...
<script type="text/javascript" src="/blog/ecrire/tools/diaporama/diascript.js"></script>

J'ai testé cette option mais...rien y passe. Je test sous FF2,...

Bordel que je suis mauvais dans cette logique....:(
18/04/2007, 16h25
E.Bzz

Citation:

Envoyé par jfrsm

<img id="test2"/>

Dans ton script actuel, test2 et test3 sont des <div>
Enfin, pour IE, parce que sinon ils existent pas (pas de layer correspondant) ...