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) ...