Dette har jeg på siden:
<Head>
<script type="text/javascript" src="js/xfade2.js"></script>
<script type="text/javascript">
function loadtwo() {
so_init();
so1_init();
}
</script>
</head>
body: <body onLoad="loadtwo()">
Hvis jeg bytter om på so_init() og so1_init, så onloader den også
omvendt.
Det er den nederest funktion som bliver aktiveret.
Script-kode:
var d=document, imgs = new Array(), zInterval = null, current=0,
pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
imgs =
d.getElementById("imageContainer").getElementsByTagName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 1;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;
setTimeout(so_xfade,1500);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,1500);
} else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
}
function so1_init() {
if(!d.getElementById || !d.createElement)return;
imgs =
d.getElementById("imageContainerlefttop").getElementsByTagName("i
mg");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 1;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;
setTimeout(so1_xfade,1500);
}
function so1_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity1(imgs[current]);
setOpacity1(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so1_xfade,1500);
} else {
setTimeout(so1_xfade,50);
}
function setOpacity1(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
}
Håber virkelig på hjælp.
PTH
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
Regards Jens Peter Karlsen.
Hvordan skal det se ud. er ikke ferm til scripts
pth
Regards Jens Peter Karlsen.
Ja, og s�dan er d�t. Det ligger n�rmest i sagens
natur. Du kan knytte �n funktion til en event. S�
hvis du �nsker at onload eventen skal udl�se 2 eller
eller flere funktioner, er den letteste vej via en
anonym funktion:
window.onload = function(){
function_1();
function_2();
}
--
Med venlig hilsen
J�rgen Farum Jensen
H�ndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
.
Jeg mener nu ikke, det skal v�re n�dvendigt med en anonym funktion.
En ganske almindelig funktion som Palle har gjort det, b�r ogs� kunne
fungere...
Birger
-----
http://bbsorensen.dk
http://varmeretter.dk - hverdagsmad. Sundt, nemt, hurtigt og billigt. Daglig
opdatering.
For mig at se, arbejder du p� de samme variable i b�de so_init og so1_init.
(Er ikke helt klar over hvad det er du vil opn� - men umiddelbart, er
problemet nok, at img-elementerne ligger i det samme array... )
Hvad der sker i den f�rste, bliver overskrevet af den anden - uanset
r�kkef�lgen, vil du kun se resultatet af det andet kald.
I �vrigt, er det umiddelbart ogs� pr�cis det samme der sker, bortset fra at
du starter 2 timeouts...
Pr�v at s�tte noget alert( "her er jeg"); nogle steder - s� kan du se i
hvilken r�kkef�lge og om tingene bliver udf�rt som t�nkt... ( erstat "her er
jeg" med noget brugbart ;>)
Hej Birger.
Det jeg vil opnå er, at aktivere to forskellige slideshows på samme side.
Billederne kommer fra "imageConatiner" og "imageContainerlefttop"
Vil det være ok at kalde array for imgs og imgs1?
Er det et problem at starte to timeouts på samme side, når det er to
forskellige funktioner?
pth
Umiddelbart vil jeg tro at oprettelsen af arrays vil løse dine problemer -
du skal jo bare huske at opdatere referencer, andre steder hvor de anvendes.
Man kan kalde arrays stort set som man har lyst til, så imgs1 vil da være
udemærket ;>)
Der er ikke noget problem i at starte flere timeouts, så længe man holder
sig under det maksimale antal styresystemet kan håndter - hvilket vist nok
er 256. (og der ikke kører alt for meget andet, der også bruger timere....)
setTimeout(..) er en funktion, der returnerer et handle (en slags id) til
den timer man netop har startet.
firstTimer = setTimeout(..)
Normalt vil man skulle afslutte timeren igen med clearTimeout( firstTimer).
Et lille gæt på dit system, siger at når et billede bliver vist, starter du
timeren igen. Dvs. at du hele tiden har to timere kørende, og der er en
risiko for at du får scriptfejl når siden forlades (Timeren slukker ikke
nødvendigvis af sig selv - og derfor vil den forsøge at kalde den funktion
du har bedt om. Når siden forlades, eksisterer den ikke længere. IE ignorer
disse fejl - man kan sommetider se dem i FF)
Derfor bør timeouts (eller Intervaller) altid cleares når siden forlades
(onblur event).
Okay.
Det jeg har gjort nu er:
Lavet to scripts som er ens, dog bortset fra arrays og funktionsnavne.
Sat dette ind i <HEAD>:
<script type="text/javascript" src="js/xfade2.js"></script>
<script type="text/javascript" src="js/lefttop.js"></script>
og kalder de to funktioner sådan: <body onload="so_init(),a1_init();">
Nu virker begge scripts tildels.
xfade2 ser sådan ud:
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement("link");
css.setAttribute("href","css/xfade2.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
d.getElementsByTagName("head")[0].appendChild(css);
imgs = d.getElementById("right").getElementsByTagName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 1;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,3000);
} else {
setTimeout(so_xfade,100);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
}
Det der sker er, at dette script kører lidt ligesom det passer den, uanset
tallet i setTimeout(so_xfade,3000);
Script to kører også lidt på må og få. Dens timeout er denne:
setTimeout(a1_xfade,6000); for så midt i det hele at blive mere og mere
utydelig for hver gang det kører.
script to er dette:
var e=document, imgs1 = new Array(), zInterval = null, current=0, pause=false;
function a1_init() {
if(!e.getElementById || !e.createElement)return;
css = e.createElement("link");
css.setAttribute("href","css/xfade2.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
e.getElementsByTagName("head")[0].appendChild(css);
imgs1 = e.getElementById("lefttop").getElementsByTagName("img");
for(i=1;i<imgs1.length;i++) imgs1[i].xOpacity = 1;
imgs1[0].style.display = "block";
imgs1[0].xOpacity = .99;
setTimeout(a1_xfade,6000);
}
function a1_xfade() {
cOpacity = imgs1[current].xOpacity;
nIndex = imgs1[current+1]?current+1:0;
nOpacity = imgs1[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs1[nIndex].style.display = "block";
imgs1[current].xOpacity = cOpacity;
imgs1[nIndex].xOpacity = nOpacity;
setOpacity1(imgs1[current]);
setOpacity1(imgs1[nIndex]);
if(cOpacity<=0) {
imgs1[current].style.display = "none";
current = nIndex;
setTimeout(a1_xfade,6000);
} else {
setTimeout(a1_xfade,50);
}
function setOpacity1(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
}
Kan du spotte problemet?
Ved godt det er en ordentlig smører :)
mhv.
8X
> Okay.
> Det jeg har gjort nu er:
> Lavet to scripts som er ens, dog bortset fra arrays og funktionsnavne.
> Sat dette ind i <HEAD>:
> <script type="text/javascript" src="js/xfade2.js"></script>
> <script type="text/javascript" src="js/lefttop.js"></script>
> og kalder de to funktioner sådan: <body onload="so_init(),a1_init();">
>
> Nu virker begge scripts tildels.
8X8X8X
referer til din programmering - eller ovenstående post.
> Kan du spotte problemet?
> Ved godt det er en ordentlig smører :)
>
Først, så har du setOpacity() funktionen inde i so_xfade() funktionen.
Og tilsvarende med setOpacity1() og a1_xfade().
Der er rod med tuborgerne. (Med mindre det er tilsigtet - kan ikke lige se
hvad formålet skulle være..)
Dine globale variable
var d=document, imgs = new Array(), zInterval = null, current=0,
pause=false;
var e=document, imgs1 = new Array(), zInterval = null, current=0,
pause=false;
Referencen til dokumentet, kan du godt kalde det samme - den refererer jo
til samme dokument, og det er kun nødvendigt at deklarere den een gang.
var d = document; (Du skal så bruge d i a1_init() i stedet for e)
imgs og imgs1 er OK.
zInterval og pause, er også den samme variabel - men jeg kan ikke se du
bruger dem til noget. Et eller andet sted, må det dog være meningen at de
skal bruges til at styre de to slideshows hver for sig, og de skal så også
hedde noget forskelligt.
current er også den samme. Det betyder, at de to shows viser samme billed
nummer. Hvilket igen betyder at billederne ikke vil blive vist i rækkefølge
i nogen af showene.
Du skal bruge en variabel til hver af disse formål : current og current1
f.eks.
<body onload="so_init(),a1_init();">
skal være
<body onload="so_init(); a1_init();">
Du har
imgs = d.getElementById( "right").getElementsByTagName( "img");
Du skal være opmærksom på, at ..ById() er case sensitive - vær sikker på at
de er ligesom id=".." i HTMLen.
Og så mener jeg at DOM bruger store bogstaver til ..TagName() - altså ...
getElementsByTagName( "IMG"). Men det er muligt, at det går alligevel - er
dog ikke sikker på at alle browsere vil finde dine billeder.
Der er en tilsvarende linie i a1_init()
Endelig indsættes både i so_init() :
css = d.createElement( "link");
css.setAttribute( "href","css/xfade2.css");
css.setAttribute( "rel","stylesheet");
css.setAttribute( "type","text/css");
d.getElementsByTagName( "head")[0].appendChild( css);
og a1_init() :
css = e.createElement("link");
css.setAttribute("href","css/xfade2.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
e.getElementsByTagName("head")[0].appendChild(css);
det samme stylesheet i dokumentet.
Det skulle vel ikke forvirre nogen - på den anden side, er det ganske
formålsløst anden gang... ;>)
Du kan nøjes med
function a1_init() {
if ( !d.getElementById) {
return;
}
imgs1 = d.getElementById( "right").getElementsByTagName( "IMG");
for ( i = 1; i < imgs1.length; i++) {
imgs[i].xOpacity = 1;
}
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;
setTimeout( so1_xfade, 6000);
}
(Som IMH- måske lidt gammeldags -O er dårlig programmering.
function a1_init() {
if ( d.getElementById) {
imgs1 = d.getElementById( "right").getElementsByTagName( "IMG");
for ( i = 1; i < imgs1.length; i++) {
imgs[i].xOpacity = 1;
}
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;
setTimeout( so1_xfade, 6000);
}
}
ville være langt at foretrække.)
Kan i øvrigt ikke lige få øje på nogen god grund til ikke bare at tilføje
css i <head> på helt normal vis i stedet for:
<link href="css/xfade2.css" rel="stylesheet" type="text/css">
Så kan so_init() simplificeres tilsvarende...
Du bør bruge var foran nye variable hver gang, også inde i funktionerne:
var cOpacity = imgs1[ current1].xOpacity;
..
cOpacity -= .05;
men det plejer nu at gå iligefald...
At billederne bliver mere og mere utydelige, kan jeg ikke lige overskue, og
jeg har slet ikke sat mig ind i hvordan den del af det, er tænkt at virke.
(ser for mig ud til at der tildeles attributter til eksisterende elementer -
og den går vist ikke på denne måde i andet end IE, fordi det er en JScript
funktionalitet - og JScript er M$'s udgave af javascript).
Det har vel formentlig noget med opaciteten at gøre, og kunne et eller andet
sted godt skyldes at en værdi bliver hentet et forkert sted.
Men få showene til at køre først - det kan være resten så også retter sig,
hen ad vejen ;>)
> Det jeg vil opnå er, at aktivere to forskellige slideshows på samme side.
> Billederne kommer fra "imageConatiner" og "imageContainerlefttop"
>
> Vil det være ok at kalde array for imgs og imgs1?
> Er det et problem at starte to timeouts på samme side, når det er to
> forskellige funktioner?
Måske kan du bruge nogle af mine erfaringer:
http://webdesign101.dk/slideshow/sequencer.php
måske især eksempel 4 og 5.
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Hej igen Birger.
Det er super du vil hjælpe. Nu kører det hele som det skal.
Jeg har bare et sidste spm.
Når jeg forlader siden får jeg denne script fejl:
d.getElementById[...]er null eller ikke et objekt.
Kan det skyldes der mangler et clearTimeout.? I så fald hvordan laver man det
og hvor skal det placeres?
Scriptfejlen skyldes formentlig timerne, som jeg var inde på tidligere, og
du skal så stoppe dem, når siden forlades.
Du skal oprette to globale variable, f.eks.
var slideTimer = 0, slideTimer1 = 0;
De steder, hvor du aktiverer timere, sætter du variablene
slideTimer = setTimeout( ...);
og der er selvfølgelig een til hvert slideshow.
I <body> tilføjer du
onblur="clearTimeout( slideTimer); clearTimeout( slideTimer1);"
det burde klare problemet.
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
var slideTimer = 0;
function so_init() {
if(!d.getElementById || !d.createElement)return;
imgs = d.getElementById("right").getElementsByTagName("IMG");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 1;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;
setTimeout(so_xfade,4500);
slideTimer = setTimeout(so_init);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,4500);
} else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
}
<body onload="a1_init();so_init();" onblur="clearTimeout( slideTimer);">
Men nu går so_init() helt amok. Det skifter vildt hurtigt. ligeledes kommer
fejlen stadigvæk når jeg forlader siden.
De to linier
setTimeout(so_xfade,4500);
slideTimer = setTimeout(so_init);
skal sættes sammen til een :
slideTimer = setTimeout(so_xfade,4500);
tilsvarende skal du sætte slideTimer = foran alle de steder du aktiverer
timeren for slideshow 1...
og slideTimer1 = foran alle de steder du aktiverer timer for det andet show.
Grunden til det går amok, er at du i linien
slideTimer = setTimeout(so_init);
aktiverer en timer, uden tidsforsinkelse kalder so_init()
Og grunden til at du stadig får fejl, er at timeren for det andet slideshow
også skal stoppes. Den generer også fejlen...
hmmm, scriptet stopper ikke. Fejlen kommer stadigvæk.
Har rettet til nedenstående:
slideTimer = setTimeout(so_xfade,4500);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
slideTimer = setTimeout(so_xfade,4500);
} else {
slideTimer = setTimeout(so_xfade,50);
}
Jeg skal kun stoppe det første script.
8X
>
> Jeg skal kun stoppe det første script.
>
> pth
>
Hvorfor kun stoppe det første?
Den anden timer vil også forårsage en fejl, hvis siden forlades i tidsrummet
mellem den er startet og inden den udløses...
--
De to slideshows er placeret i hver sin side. Det i venstre side skal fortsætte,
mens der kommer alm. tekstindhold i højre del af siden, når man forlader siden.
Fejlen ligger i det første script, for jeg har kaldt variablerne noget
forskelligt igen, nemlig d og e. og det er d som melder fejlen.
Godt så.
Når vi så tænker os om, er det eneste sted getElementByID() kaldes, i
initialiseringsrutinen - og den kaldes kun når siden åbnes...
Altså kan det ikke være timerne, men et eller andet, når du skifter side...
Hvordan adskiller du venstre og højre side?
Henter du hele siden igen?
Det er du jo nødt til.
Så er problemet, at du ikke skal kalde so_init() - altså start showet i
højre side - hvis det ikke er der.
Har du et link, så man kan se hvad der sker?
Hej Ib.
Er lige kommet hjem fra ferie, derfor det noget sene svar.
Du har jo helt ret. Nu virker det som det skal.
Tusind tak for hjælpen.
pth.