Avatar billede tyksat Nybegynder
04. april 2007 - 13:58 Der er 11 kommentarer og
1 løsning

Float virker ikke i IE

Hej Jeg har dette script på en side, det virker fint under firefox men ikke på IE6 og IE7.
I firefox folader slide shovet fint op on ned på siden alt efter positionen, men under IE står det bare fast.

Jeg kan se at jeg får en fejl i linie 129 at 'nul' er null eller ikke et objekt.

Koden kommer her:
/* Floating Slide Show Script C.2004 by CodeLifter.com */

// You *must* add onload="runSlideShow()" to the body tag
// of the page.

// In the section marked Edit the HTML, above, remember to
// set the path and size for the first image.

// =======================================
// Set the following variables
// =======================================

// Set slideShowSpeed (milliseconds):
var slideShowSpeed = 3000

// Duration of crossfade (seconds) for IE:
var crossFadeDuration = 300

// Set the positioning variables, below:
// Negative numbers are relative to right (whereX) or bottom (whereY)
// Positive numbers are relative to left (whereX) or (whereY) top
// Experiment with values to get positioning exact, and allow
// for the dimensions of the image in the positioning

var whereX = 10;
var whereY = 500;
//var nn=(navigator.appName.indexOf("Netscape")!=-1);
//whereY  = nn?innerHeight-255:document.body.clientHeight-255;

var winWidth, winHeight, d=document;
if (typeof window.innerWidth!='undefined') {
winWidth = window.innerWidth;
winHeight = window.innerHeight;
} else {
if (d.documentElement &&
  typeof d.documentElement.clientWidth!='undefined' &&
  d.documentElement.clientWidth!=0) {
  winWidth = d.documentElement.clientWidth
  winHeight = d.documentElement.clientHeight
} else {
  if (d.body &&
  typeof d.body.clientWidth!='undefined') {
  winWidth = d.body.clientWidth
  winHeight = d.body.clientHeight
  }
}
}

whereY = winHeight-255;

// Specify the image files:
var Pic = new Array() // don't touch this!
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'fileadmin/templates/osteoporose/pictures/dancer_1.jpg'
Pic[1] = 'fileadmin/templates/osteoporose/pictures/dancer_2.jpg'
Pic[2] = 'fileadmin/templates/osteoporose/pictures/dancer_3.jpg'

// =======================================
// Do not edit *anything* below this line!
// =======================================

var nn=(navigator.appName.indexOf("Netscape")!=-1);


var t;
var j=0;
var p=Pic.length;

var preLoad=new Array();
for (i=0;i<p;i++){
    preLoad[i]=new Image();
    preLoad[i].src = Pic[i];
}
var oneTime = false;

function runSlideResize() {
  oneTime = false;
  runSlideShow();
}

function runSlideShow() {

    whereX  = nn?innerWidth:document.body.clientWidth;

    if (nn)
        whereX  = ((window.innerWidth-document.body.clientWidth) !=0 )?(whereX - 6 ):(whereX);
    whereX  = (whereX > 750)? (whereX/2-355): 27;
    if (!oneTime) {
        floatSS(whereX,whereY,'FloatSlideShow').Fss();
        oneTime = true;     
    }

    if (document.all){
        document.images.SlideShow.style.filter="blendTrans(duration=2)";
        document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
        document.images.SlideShow.filters.blendTrans.Apply();
    }

    if (document.all || document.getElementById)
        {
        document.images.SlideShow.src = preLoad[j].src;
        }
        else
        {
            document.FloatSlideShow.document.images["SlideShow"].src = preLoad[j].src;
        }

    if (document.all)
        {
            document.images.SlideShow.filters.blendTrans.Play();
        }

    j=j+1;
    if (j>(p-1))j=0;
    t=setTimeout('runSlideShow()', slideShowSpeed);
}

   
function floatSS(iX,iY,id){
 
var dD=document,dH=dD.html,dB=dD.body,px=dD.layers?'':'px';   
var L = dD.getElementById ? dD.getElementById(id) : dD.all ? dD.all[id] : dD.layers[id];       

this[id+'O']=L;
if(dD.layers)L.style=L;
L.nX=L.iX=iX;
L.nY=L.iY=iY;
L.P=function(x,y){
        this.style.left=x+px;
        this.style.top=y+px;
};
L.Fss=function(){
    var pX, pY;   
    if (this.iX >=0){
      pX = 0;
    } else {
        if (nn){
            pX = innerWidth;
        } else {
            if (nn&&dH.clientWidth){
                pX =  dH.clientWidth;
            } else {
                pX = dB.clientWidth;
            }
        }
    }
    //pX=(this.iX >=0)? 0 : nn ? innerWidth : nn&&dH.clientWidth ? dH.clientWidth : dB.clientWidth;   
    //pY=nn?pageYOffset:nn&&dH.scrollTop?dH.scrollTop:dB.scrollTop;   
    if (nn){
        pY = pageYOffset
    } else {
        if (nn&&dH.scrollTop){
            pY = dH.scrollTop;
        } else {
            pY = dB.scrollTop;
        }
    }
    if(this.iY<0)pY+=nn?innerHeight:nn&&dH.clientHeight?dH.clientHeight:dB.clientHeight;   
    this.nX+=.1*(pX+this.iX-this.nX);
    this.nY+=.1*(pY+this.iY-this.nY);
    this.P(this.nX,this.nY);
    setTimeout(this.id+'O.Fss()',33);
};
return L;
}
floatSS(whereX,whereY,'FloatSlideShow').Fss();

Nogen som har en ide.
Avatar billede olebole Juniormester
04. april 2007 - 14:01 #1
<ole>

Du bruger ikke float noget sted i den kode. Hvilken DTD påbegynder du dokumentet med?

/mvh
</bole>
Avatar billede tyksat Nybegynder
04. april 2007 - 14:15 #2
Kode bruger jeg

<body onload="runSlideShow ();">

<script src="fileadmin/templates/osteoporose/runfloat.js" type="text/javascript"></script>

<div id="FloatSlideShow" style="position:absolute;z-index:1000000"> <a href="http://www.osteoporose-f.dk" target="_top"> <img border="0" src="fileadmin/templates/osteoporose/pictures/clear.gif" name="SlideShow" width="122" height="214" alt="Osteoporose" /></a> </div>
Avatar billede tyksat Nybegynder
04. april 2007 - 14:33 #3
Har muligvis ikke udtrykt mig korrekt. Koden gør dette at den lave et sliteshow af billder som bliver stående på et fast sted på siden når man ruller op og ned.
Avatar billede crazysnap Seniormester
04. april 2007 - 16:37 #4
Hej tyksat,


Det jeg tror den brokker sig over er floatSS(whereX,whereY,'FloatSlideShow').Fss();
kaldet i bunden a javascriptet, for i den metode kaldes der document.getElementById og document er null på det tidspunkt idet siden ikke er loadet endnu. Jeg forstår egentlig heller ikke hvorfor det kald er der når der i forvejen er:


<body onload="runSlideShow();">


runSlideShow() kalder jo automatisk floatSS metoden første gang den kaldes. Så hvis du sletter den sidste sætning i javascriptet, altså:


floatSS(whereX,whereY,'FloatSlideShow').Fss();


Tror jeg du undgår den null fejl?


Mvh.

- Snap :)
Avatar billede tyksat Nybegynder
04. april 2007 - 16:50 #5
Hej Snap

Det fjerner fejlen, med løste ikke problemet med IE. Jeg kan ikke gennemskue hvorfor det ikke virker i IE. Problemet er lidt at jeg har overtaget koden fra en anden, som har rette meget i den originale kode.
Jeg har derud over prøvet med den originale kode som ikke virker når jeg bygger den den ind i Typo3, eller lokalt på min server, men fint på deres side.

Ud over dette er javascript ikke min stærke side :-)

/Tyksat
Avatar billede crazysnap Seniormester
05. april 2007 - 00:50 #6
Hej tyksat,

Har kigget scriptet igennem nu og der var en del småfejl som jeg har rettet og jeg får nu samme behavior i IE som i FF. Så prøv at kopiere nedenstående script og html ind i en ny fil og se om vi er ved at være der:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <script type="text/JavaScript">
            /* Floating Slide Show Script C.2004 by CodeLifter.com */

            // You *must* add onload="runSlideShow()" to the body tag
            // of the page.

            // In the section marked Edit the HTML, above, remember to
            // set the path and size for the first image.

            // =======================================
            // Set the following variables
            // =======================================

            // Set slideShowSpeed (milliseconds):
            var slideShowSpeed = 3000;

            // Duration of crossfade (seconds) for IE:
            var crossFadeDuration = 300;

            // Set the positioning variables, below:
            // Negative numbers are relative to right (whereX) or bottom (whereY)
            // Positive numbers are relative to left (whereX) or (whereY) top
            // Experiment with values to get positioning exact, and allow
            // for the dimensions of the image in the positioning

            var whereX = 10;
            var whereY = 500;
            //var nn=(navigator.appName.indexOf("Netscape")!=-1);
            //whereY  = nn?innerHeight-255:document.body.clientHeight-255;
            //alert(typeof(window.innerWidth));
            var winWidth;
            var winHeight;
            var d = document;
           
            if(typeof window.innerWidth != 'undefined')
            {
                winWidth = window.innerWidth;
                winHeight = window.innerHeight;
            }
            else
            {
                if (d.documentElement && typeof(d.documentElement.clientWidth) != 'undefined' && d.documentElement.clientWidth != 0)
                {
                    winWidth = d.documentElement.clientWidth;
                    winHeight = d.documentElement.clientHeight;
                }
                else
                {
                    if (d.body && typeof(d.body.clientWidth) != 'undefined')
                    {
                        winWidth = d.body.clientWidth;
                        winHeight = d.body.clientHeight;
                    }
                }
            }

            whereY = winHeight-255;

            // Specify the image files:
            var Pic = new Array() // don't touch this!
            // to add more images, just continue
            // the pattern, adding to the array below

            Pic[0] = 'fileadmin/templates/osteoporose/pictures/dancer_1.jpg'
            Pic[1] = 'fileadmin/templates/osteoporose/pictures/dancer_2.jpg'
            Pic[2] = 'fileadmin/templates/osteoporose/pictures/dancer_3.jpg'

            // =======================================
            // Do not edit *anything* below this line!
            // =======================================

            var nn=(navigator.appName.indexOf("Netscape")!=-1);


            var t;
            var j=0;
            var p=Pic.length;

            var preLoad=new Array();
            for (i=0;i<p;i++)
            {
                preLoad[i] = new Image();
                preLoad[i].src = Pic[i];
            }
           
            var oneTime = false;

            function runSlideResize()
            {
              oneTime = false;
              runSlideShow();
            }

            function runSlideShow()
            {

                whereX  = nn ? innerWidth : document.body.clientWidth;

                if (nn)
                    whereX  = ((window.innerWidth-document.body.clientWidth) !=0 ) ? (whereX - 6 ) : (whereX);
                   
                whereX  = (whereX > 750) ? (whereX/2-355) : 27;
               
                if (!oneTime)
                {
                    floatSS(whereX,whereY,'FloatSlideShow').Fss();
                    oneTime = true;     
                }

                if (document.all)
                {
                    document.images.SlideShow.style.filter="blendTrans(duration=2)";
                    document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
                    document.images.SlideShow.filters.blendTrans.Apply();
                }

                if (document.all || document.getElementById)
                {
                   
                    document.getElementById("SlideShow").src = preLoad[j].src;
                }
                else
                {
                    document.getElementById("SlideShow").src = preLoad[j].src;
                }

                if (document.all)
                {
                    document.getElementById("SlideShow").filters.blendTrans.Play();
                }

                j=j+1;
                if (j>(p-1))
                    j=0;
                   
                t = setTimeout('runSlideShow()', slideShowSpeed);
            }

               
            function floatSS(iX,iY,id)
            {
             
                var dD=document,dH=dD.html,dB=dD.body,px=dD.layers?'':'px';   
                var L = dD.getElementById ? dD.getElementById(id) : dD.all ? dD.all[id] : dD.layers[id];       

                this[id+'O']=L;
                if(dD.layers)
                    L.style=L;

                L.nX = L.iX = iX;
                L.nY = L.iY = iY;
                L.P = function(x,y) {
                                        this.style.left=x+px;
                                        this.style.top=y+px;
                                  };
             
                L.Fss = function()  {
                                        var pX, pY;   
                                        if (this.iX >=0)
                                        {
                                            pX = 0;
                                        }
                                        else
                                        {
                                            if (nn)
                                            {
                                                pX = innerWidth;
                                            }
                                            else
                                            {
                                                if (nn && dH.clientWidth)
                                                {
                                                    pX =  dH.clientWidth;
                                                }
                                                else
                                                {
                                                    pX = dB.clientWidth;
                                                }
                                            }
                                        }
                                        //pX=(this.iX >=0)? 0 : nn ? innerWidth : nn&&dH.clientWidth ? dH.clientWidth : dB.clientWidth;   
                                        //pY=nn?pageYOffset:nn&&dH.scrollTop?dH.scrollTop:dB.scrollTop;   
                                        if (nn)
                                        {
                                            pY = pageYOffset;
                                        }
                                        else
                                        {
                                            if (nn && dH.scrollTop)
                                            {
                                                pY = dH.scrollTop;
                                            }
                                            else
                                            {
                                                pY = document.documentElement.scrollTop;
                                            }
                                        }
                                       
                                        if(this.iY<0)
                                          pY += nn ? innerHeight : nn && dH.clientHeight ? dH.clientHeight : dB.clientHeight;   
                                       
                                        this.nX+=.1*(pX+this.iX-this.nX);
                                        this.nY+=.1*(pY+this.iY-this.nY);
                                        this.P(this.nX,this.nY);
                                        setTimeout(this.id+'O.Fss()',33);
                                    };
           
                return L;
            }
    </script>

</head>
<body onload="runSlideShow();">
    <table>
        <tr>
            <td>
                <div id="FloatSlideShow" style="position: absolute; z-index: 1000000;">
                    <a href="http://www.osteoporose-f.dk">
                        <img src="fileadmin/templates/osteoporose/pictures/clear.gif" id="SlideShow" width="122" height="214" alt="Osteoporose" /></a>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>



Mvh.

- Snap :)
Avatar billede tyksat Nybegynder
05. april 2007 - 09:45 #7
Hej Snap

Du er intet mindre end genial :)

Det virker sku nu :)

Jeg har dog ikke helt styr på hvordan jeg overfør point over til dig, da jeg er ret ny her. Men der kan du sikkert også hjælpe.

/Tyksat
Avatar billede crazysnap Seniormester
05. april 2007 - 11:45 #8
Hej tyksat,


Det er lyder perfekt og glad for jeg kunne hjælpe! :)


Ved denne her besked ligger jeg et svar som du bare skal acceptere (til venstre for denne her tekst). Når du har accepteret svaret får jeg pointene! :)


Og god påske! :)


Mvh.

- Snap
Avatar billede tyksat Nybegynder
05. april 2007 - 11:59 #9
Tak i lige måde.
Avatar billede tyksat Nybegynder
14. april 2007 - 11:43 #10
Hej Crazysnap

Det var måske lidt for hurtigt jeg fik meldt tilbage. Det viser sig efter nærmere test at scriptet ikke længere virker i Firefox. Har du nogen ide til hvad det kan være ?

/Tyksat
Avatar billede crazysnap Seniormester
15. april 2007 - 14:25 #11
Hej Tyksat,


Jeg har prøvet at kopiere mit reviderede script ind i en ny html fil, ændret stien til nogen ekstirende billeder og kørt siden i IE og FF. Jeg får den samme opførsel i begge browsere bortset fra at den ikke crossfader billederne i FF, men bare skifter hårdt og kontant i mellem dem.

Så hvad er det der ikke virker i FF hos dig, men som virker i IE siger du? :)


Mvh.

- Snap
Avatar billede olebole Juniormester
16. april 2007 - 13:24 #12
<ole>

Uanset, om JS-koden virker, er den ikke kompatibel med XHTML  =)

/mvh
</bole>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester