Toon posts:

xhtml & javascript werkt in IE maar niet in FF

Pagina: 1
Acties:

maandag 3 oktober 2005 17:01

Acties:

Verwijderd

Topicstarter
Mensen,

Probleem: Javascroller werkt niet in Firefox wel in Internet Explorer

Mijn doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Code van de scroll buttons:
code:
1
2
3
4
5
6
7

            <div id="divUpControl">
                    <a href="#" onmouseout="turnoff('up1'); CeaseScroll();" onmouseover="lightup('up1');PerformScroll(-7);" onmouseup="lightup('up1')">[img]"images/upboven.gif"[/img]</a>
            </div>      
            <div id="divDownControl">
                    <a href="#" onmouseout="turnoff('up2'); CeaseScroll();" onmouseover="lightup('up2');PerformScroll(7);" onmouseup="lightup('up2')">[img]"images/uponder.gif"[/img]</a>

            </div>


Javascript:
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

if (document.images)
{

up1on= new Image(15,17);
up1on.src="images/downboven.gif";
up1off= new Image(15,17);
up1off.src="images/upboven.gif";
up2on= new Image(15,17);
up2on.src="images/downonder.gif";
up2off= new Image(15,17);
up2off.src="images/uponder.gif";
}

function lightup(imgName)
{
if (document.images)
{
imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;
}
}

function turnoff(imgName)
{
if (document.images)
{
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
}
}

<!-- scroll
function verifyCompatibleBrowser(){ 
    this.ver=navigator.appVersion 
    this.dom=document.getElementById?1:0 
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; 
    this.ie4=(document.all && !this.dom)?1:0; 
    this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
 
    this.ns4=(document.layers && !this.dom)?1:0; 
    this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5) 
    return this 
} 
bw=new verifyCompatibleBrowser() 
 
 
var speed=50 
 
var loop, timer 
 
function ConstructObject(obj,nest){ 
    nest=(!nest) ? '':'document.'+nest+'.' 
    this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; 
    this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0; 
    this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight 
    this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight 
    this.up=MoveAreaUp;this.down=MoveAreaDown; 
    this.MoveArea=MoveArea; this.x; this.y; 
    this.obj = obj + "Object" 
    eval(this.obj + "=this") 
    return this 
} 
function MoveArea(x,y){ 
    this.x=x;this.y=y 
    this.css.left=this.x 
    this.css.top=this.y 
} 
 
function MoveAreaDown(move){ 
    if(this.y>-this.scrollHeight+objContainer.clipHeight){ 
    this.MoveArea(0,this.y-move) 
    if(loop) setTimeout(this.obj+".down("+move+")",speed) 
    } 
} 
function MoveAreaUp(move){ 
    if(this.y<0){ 
    this.MoveArea(0,this.y-move) 
    if(loop) setTimeout(this.obj+".up("+move+")",speed) 
    } 
} 
 
function PerformScroll(speed){ 
    if(initialised){ 
        loop=true; 
        if(speed>0) objScroller.down(speed) 
        else objScroller.up(speed) 
    } 
} 
 
function CeaseScroll(){ 
    loop=false 
    //if(timer) clearTimeout(timer) 
} 
var initialised; 
function InitialiseScrollableArea(){ 
    objContainer=new ConstructObject('divContainer') 
    objScroller=new ConstructObject('divContent','divContainer') 
    objScroller.MoveArea(0,0) 
    objContainer.css.visibility='visible' 
    initialised=true; 
} 
// end absolutely positioned scrollable area object scripts 

//-->


De url: http://www.multimedia-4u.nl/xhtml/wiebenik.html

Bovensstaande js scroller werkt prima in Internet Explorer, maar helaas wil hij niet scrollen in Firefox

Maar wat heb ik geprobeerd:
Door wat knip en plak werkt ben ik tot de conclussie gekomen dat mijn doctype het probleem is.
Als ik mijn doctype namelijk verwijder werkt het namelijk ook in Firefox.

Maar ik weet niet hoe ik dit probleem moet oplossen door de doctype te laten staan.

Heeft iemand misschien sugesties, wat mogelijk de oplossing bied? Ik snap het namelijk niet waarom het wel functioneerd in IE en niet in FF met de zelfde doctype.

maandag 3 oktober 2005 17:57

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

JavaScript:
1
2
3
4
5

function MoveArea(x,y){ 
    this.x=x;this.y=y 
    this.css.left=this.x + 'px';
    this.css.top=this.y + 'px';
}

zal wellicht al helpen; Firefox in standards compliants mode is daar strict op.
Maar voor de rest vind ik het maar ranzige code; vooral die browsercheck en afvragingen zijn echt uit het NS4/IE4 tijdperk en hedentendage echt niet meer nodig/gewenst. Not to mention het gebruik van evil eval() :/

[ Voor 6% gewijzigd door crisp op 03-10-2005 17:58 ]

Intentionally left blank

maandag 3 oktober 2005 20:53

Acties:

Verwijderd

Topicstarter
Bedankt voor de oplossing!
Het werkt. :)

FF kijkt dus naar de pixel extensie zo te zien?

maandag 3 oktober 2005 20:58

Acties:
  • killercow
  • Registratie: Maart 2000
  • Laatst online: 28-04 10:32

killercow

eth0

Kijk ook meteen even na of je niet veel beter van DOM functies als document.getElementById kunt gebruiken, want hoe weet je nu of het scriptje wel in Opera/Konqueror/IE7/Safari werkt?

als je gebruik maakt van pure DOM code heb je daar veel meer kans van.

doelend op:
document[imgName].src

openkat.nl al gezien?

Reageer