Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Firefox picture scroller

None
1 antwoord
  • Hallo allemaal,

    Ik heb een probleem met een scriptje dat niet werkt met een stricte doctype. Het scriptje werkt goed in IE alleen zodra ik hem in FF open worden de plaatjes over elkaar gezet inplaats van naast elkaar, zodat ik geen scrollend effect te zien krijg. Als ik een andere doctype neem werkt het wel zou iemand mij kunnen helpen zodat ik onderstaande doctype toe kan passen? Het script is xhtml valid!

    Alvast bedankt!

    [code:1:c96ea6ff2e]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    [/code:1:c96ea6ff2e]

    [code:1:c96ea6ff2e]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>

    <script type="text/javascript">
    <!–
    // ********** User Defining Area **********

    data=new Array()
    data[0]=new Array("plaatje.gif","","")
    data[1]=new Array("plaatje.gif","","")
    data[2]=new Array("plaatje.gif","","")
    data[3]=new Array("plaatje.gif","","")
    data[4]=new Array("plaatje.gif","","")
    data[5]=new Array("plaatje.gif","","")
    data[6]=new Array("plaatje.gif","","")

    imgPlaces=5 // number of images visible
    imgWidth=140 // width of the images
    imgHeight=105 // height of the images
    imgSpacer=30 // space between the images
    rdmImg=0 // 0 = no 1 = yes show images at random
    dir=0 // scroll direction 0 = left, 1 = right


    border=1 // container border width
    bordertype="ridge" // container border type
    bordercolor="#afa684" // container border colour
    borderbackground="#000000" // container background colour

    cssPositioning=0 // use CSS to position the display 0 = no 1 = yes
    cssLeft=400 // used if cssPositioning is selected
    cssTop=100 // used if cssPositioning is selected

    newWindow=0 // 0 = Open a new window for links 0 = no 1 = yes

    // ********** End User Defining Area **********

    if(rdmImg==1){ // generate random images list

    tempArray=new Array()
    for(i=0;i<data.length;i++){ // create an array identical to data array
    tempArray[i]=data[i]
    }

    rdmArray=new Array() // random images array
    for(p=0;p<data.length;p++){ // create an array of randomly selected images
    rndnum=Math.floor(Math.random()*(tempArray.length)) // select a random image from tempArray
    rdmArray[p]=tempArray[rndnum] // put selected image in rdmArray
    tempArray.splice(rndnum,1) // remove selected image from tempArray
    }

    }

    step=1
    nextPic=0
    speed=50
    timer=""
    initPos=new Array()
    nowDivPos=new Array()
    moz=document.getElementById&&!document.all
    ns=document.getElementById&&!document.all

    function createThumbShow(){

    if(cssPositioning==0){
    document.write("<div id=\"container\" style=\"position:relative; width:500px;height:600px; border:"+border+"px "+bordertype+" "+bordercolor+";background:"+borderbackground+"\">")
    }
    else{
    document.write("<div id=\"container\" style=\"position:absolute; left:"+cssLeft+"px; top:"+cssTop+"px; width:500px;height:600px; border:"+border+" "+bordertype+" "+bordercolor+";background:"+borderbackground+"\">")
    }

    document.write("<div id=\"display_area\" style=\"position:absolute; left:0; top:0; width=\""+imgWidth+"\" height=\""+imgHeight+"\" clip:rect(0,0,0,0)\" onmouseover=\"stopMe()\" onmouseout=\"animate()\">")

    for(i=0;i<imgPlaces+1;i++){ // create image holders
    document.write("<div id=\"div_"+[i]+"\" style=\"position:absolute;\">")
    document.write("<a id=\"loc_"+[i]+"\" href=\"\" onclick=\"newWin(this.location);return false\">")
    document.write("<img src=\"\" id=\"pic_"+[i]+"\" width=\""+imgWidth+"\" height=\""+imgHeight+"\" alt=\"Multiple Image SlideShow\" border=\"0\">")
    document.write("</a>")
    document.write("</div>")
    }
    document.write("</div>")
    document.write("</div>")
    }

    function initThumbShow(){
    containerBorder=parseInt(document.getElementById("container").style.borderWidth)*2
    containerWidth=(imgPlaces*imgWidth)+((imgPlaces-1)*imgSpacer)
    document.getElementById("container").style.width=containerWidth+(!moz?containerBorder:"")
    document.getElementById("container").style.height=imgHeight+(!moz?containerBorder:"")

    displayArea=document.getElementById("display_area")
    displayArea.style.width=containerWidth
    displayArea.style.clip=(!moz?"rect(0,"+containerWidth+","+imgHeight+",0)":"rect(0,"+containerWidth+","+imgHeight+",0)")

    imgPos= -document.getElementById("pic_0").width-border

    for(i=0;i<imgPlaces+1;i++){

    if(dir==0){imgPos+=(document.getElementById("pic_0").width)+imgSpacer} // if left

    initPos[i]=imgPos
    if(dir==0){document.getElementById("div_"+[i]).style.left=initPos[i]} // if left

    if(dir==1){ // if right
    document.getElementById("div_"+[(imgPlaces-i)]).style.left=initPos[i]

    imgPos+=(document.getElementById("pic_0").width)+imgSpacer
    }

    if(nextPic==data.length){
    nextPic=0
    }

    if(rdmImg==1){
    document.getElementById("pic_"+[i]).src=rdmArray[nextPic][0]
    document.getElementById("pic_"+[i]).alt=rdmArray[nextPic][1]
    document.getElementById("loc_"+[i]).location=rdmArray[nextPic][2]
    }
    else{
    document.getElementById("pic_"+[i]).src=data[nextPic][0]
    document.getElementById("pic_"+[i]).alt=data[nextPic][1]
    document.getElementById("loc_"+[i]).location=data[nextPic][2]
    }
    nextPic++
    }

    animate()
    }

    timer=""
    function animate(){
    clearTimeout(timer)
    for(i=0;i<imgPlaces+1;i++){
    nowDivPos[i]=parseInt(document.getElementById("div_"+i).style.left)

    if(dir==0){nowDivPos[i]-=step}
    if(dir==1){nowDivPos[i]+=step}

    if(dir==0&&nowDivPos[i]<= -(document.getElementById("pic_0").width+imgSpacer) || dir==1&&nowDivPos[i]>containerWidth){

    if(dir==0){document.getElementById("div_"+[i]).style.left=containerWidth+imgSpacer}
    if(dir==1){document.getElementById("div_"+[i]).style.left= -document.getElementById("pic_0").width-(imgSpacer*2)}

    if(nextPic>data.length-1){
    nextPic=0
    }

    if(rdmImg==1){
    document.getElementById("pic_"+[i]).src=rdmArray[nextPic][0]
    document.getElementById("pic_"+[i]).alt=rdmArray[nextPic][1]
    document.getElementById("loc_"+[i]).location=rdmArray[nextPic][2]
    }
    else{
    document.getElementById("pic_"+[i]).src=data[nextPic][0]
    document.getElementById("pic_"+[i]).alt=data[nextPic][1]
    document.getElementById("loc_"+[i]).location=data[nextPic][2]
    }

    nextPic++

    }
    else{
    document.getElementById("div_"+[i]).style.left=nowDivPos[i]
    }

    }
    timer=setTimeout("animate()",speed)

    }

    function stopMe(){
    clearTimeout(timer)
    }

    function newWin(loc){
    if(loc==""){return}
    if(newWindow==0){
    location=loc
    }
    else{
    //window.open(loc)
    window.open(loc,'','left=130,top=270,width=200,height=200') // use for specific size and positioned window
    }
    }

    // add onload="initThumbShow()" to the opening BODY tag

    // –>
    </script>
    </head>
    <body onload="initThumbShow()">
    <script type="text/javascript">
    <!–
    createThumbShow()
    // –>
    </script>
    </body>
    </html>
    [/code:1:c96ea6ff2e]

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.