Problem im IE, beim Rest äufts 1A! :( Schaut´s euch an.. ich bin am Ende! :(

Anjay · 22. Juni 2009

Hey Leute!!

Hab hier eine Seite mit JavaScritps erstellt:
Bitte klicken

Mit dem Firefox z.B. funktioniert die Seite wunderbar! Genauso mit Chrome und Safai! Nur der Internet Explorer möchte die Seite nicht richtig ausführen. Ich habe es mit den Versionen 6. 7. und 8. ausprobiert.
Anzeigen tut er sie zwar, aber die Funktionen bei Klicken auf die Menüpunkte z.B. geht nicht!

HTML Code:

Code:

<!DOCTYPE HTML PUBLIC ""-//W3C//DTD HTML 4.0 Transitional//EN"">
<HTML>
<HEAD>
<TITLE> Der Titel der Seite wird von NetObjects Fusion generiert </TITLE>

<script type="text/javascript" src="./fancybox/jquery-1.2.3.pack.js"></script> 
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.0.0.js"></script>
<script type="text/javascript" src="./fancybox/jquery.pngFix.pack.js"></script>
<link rel="stylesheet" href="./fancybox/fancy.css" type="text/css" media="screen">
<link rel="stylesheet" href="./ie.css" type="text/css" media="screen">
<link rel="stylesheet" href="./thw.css" type="text/css" media="screen">

<script type="text/javascript" src="./thw/horizontinyscrolling.js"></script>

<script type="text/javascript">
   $(document).ready(function() {
   
   $("p#Bild1 a").fancybox();
   
   $("p#Bild2 a").fancybox();
      
   $("p#Bild3 a").fancybox();
   
   $("p#Bild4 a").fancybox();
   
   $("p#Bild5 a").fancybox();
   
   $("p#Bild6 a").fancybox();
   
   $("p#Bild7 a").fancybox(); 
   
   $("p#Bild8 a").fancybox();
   
   $("p#Bild9 a").fancybox(); 
   
   $("p#Bild10 a").fancybox(); 
});
</script>



<!-- NetObjects Fusion Generated HEAD HTML-->
</HEAD>
<BODY Von NetObjects Fusion generierte BODY-Parameter 

>



<!-- BODY Von NetObjects Fusion generierte BODY Parameter -->


</BODY>

Dies hier sind meine Scripts:

Horizontaler Scroll:

Code:

window.onload = function() {
	HtinyScrolling.init(); scrollTips.init();
	}

var HtinyScrolling = {
	speed : -50,      //set here the scroll speed: when this value increase, the speed decrease. 
	maxStep: 150,	 //set here the "uniform motion" step for long distances
	brakeK: 10,		 //set here the coefficient of slowing down
	hash:null,		
	currentBlock:null,
	requestedX:0,
	init: function() {
		var lnks = document.getElementsByTagName('a');   
		for(var i = 0, lnk; lnk = lnks[i]; i++) {   
			if ((lnk.href && lnk.href.indexOf('#') != -1) &&  ( (lnk.pathname == location.pathname) ||
			('/'+lnk.pathname == location.pathname) ) && (lnk.search == location.search)) {  
			addEvent(lnk,'click',HtinyScrolling.initScroll,false);
			lnk.onclick=function(){return false;} // Safari
			}   
		}    
	},
	getTarget: function(target) {
		while(target.tagName.toLowerCase() != 'a')
			target = target.parentNode;
		return target;
	},
	getElementXpos: function(el){
		var x = 0;
		while(el.offsetParent){  
			x += el.offsetLeft;    
			el = el.offsetParent;
		}	return x;
	},		
	getScrollLeft: function(){
		if(document.all) return (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
		else return window.pageXOffset;   
	},	
	getWindowWidth: function(){
		if (window.innerWidth)	return window.innerWidth; 
		if(document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientWidth;
	},
	getDocumentWidth: function(){
		if (document.width) return document.width;
		if(document.body.offsetWidth) return document.body.offsetWidth;
	},
	initScroll: function(e){
		var targ;  
		if (!e) var e = window.event;
		if (e.target) targ = e.target;
		else if (e.srcElement) targ = e.srcElement;  
		targ = HtinyScrolling.getTarget(targ);  //a fix by Skid X
		HtinyScrolling.hash = targ.href.substr(targ.href.indexOf('#')+1,targ.href.length); 
		HtinyScrolling.currentBlock = document.getElementById(HtinyScrolling.hash);   
		if(!HtinyScrolling.currentBlock) return;
		HtinyScrolling.requestedX = HtinyScrolling.getElementXpos(HtinyScrolling.currentBlock); 
		HtinyScrolling.scroll(targ); 
		return false;
	},
	scroll: function(targ){
		var left  = HtinyScrolling.getScrollLeft();
		if(HtinyScrolling.requestedX > left) { 
			var endDistance = Math.round((HtinyScrolling.getDocumentWidth() - (left + HtinyScrolling.getWindowWidth())) / HtinyScrolling.brakeK);
			endDistance = Math.min(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK), endDistance);
			var offset = Math.max(2, Math.min(endDistance, HtinyScrolling.maxStep));
		} else { var offset = - Math.min(Math.abs(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK)), HtinyScrolling.maxStep);
		} window.scrollTo(left + offset, 0);  
		if(Math.abs(left-HtinyScrolling.requestedX) <= 1 || HtinyScrolling.getScrollLeft() == left) {
			window.scrollTo(HtinyScrolling.requestedX, 0);
			if(typeof XULDocument != 'undefined') {
				location.hash = HtinyScrolling.hash;
			}
			
			//optional instructions: you can add an effect to enlight after the scroll the selected section.
			//uncomment this line below if you want to change the opacity:
			//mark.change_opacity(HtinyScrolling.hash);
			
			//you can also call the function "mark.change_colors(HtinyScrolling.hash, fps, (duration in sec), #(color in hex), #(color in hex))" to change background color of selected section   
			HtinyScrolling.hash = null;
		} else 	setTimeout(HtinyScrolling.scroll,HtinyScrolling.speed);			
	}
}

/* the mouse scrolling doesn't work with Opera, that hasn't a event associated to the mouse wheel */
 
var scrollTips = {
	dx : null,
	init : function() {	
		if (window.addEventListener) {
		window.addEventListener("DOMMouseScroll", this.mouseScroll, false);
		} else document.attachEvent("onmousewheel", this.mouseScroll); 
		var left = document.getElementById('left');
		addEvent(left,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(0)',100);return false;});
		addEvent(left,'mouseout', function() { clearInterval(this.dx); return false;});
		var right = document.getElementById('right');
		addEvent(right,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(1)',100);return false;});
		addEvent(right,'mouseout', function() { clearInterval(this.dx); return false;});
	},
	mouseScroll : function(e) {
		if (!e) var e = window.event;
		if (e.wheelDelta <= 0 || e.detail>=0){  
		window.scrollBy(80,0);
		} else  window.scrollBy(-80,0) ; 
	},	
	arrowScroll: function(val) {
		if(val==1) {
			window.scrollBy(70,0);
		} else {
			window.scrollBy(-70,0)
		}
	}
}

var mark = {        //first four functions are based on The Fade Anything Technique by Adam Michela 
	valop : 100,
	req : 0,
	make_hex: function(r,g,b) {
		r = r.toString(16); if (r.length == 1) r = '0' + r;
		g = g.toString(16); if (g.length == 1) g = '0' + g;
		b = b.toString(16); if (b.length == 1) b = '0' + b;
		return "#" + r + g + b;
	},
	change_colors: function(id, fps, duration, from, to) {  
		var frames = Math.round(fps * (duration / 1000));
		var interval = duration / frames;
		var delay = interval;
		var frame = 0;		
		if (from.length < 7) from += from.substr(1,3);
		if (to.length < 7) to += to.substr(1,3);		
		var rf = parseInt(from.substr(1,2),16);
		var gf = parseInt(from.substr(3,2),16);
		var bf = parseInt(from.substr(5,2),16);
		var rt = parseInt(to.substr(1,2),16);
		var gt = parseInt(to.substr(3,2),16);
		var bt = parseInt(to.substr(5,2),16);		
		var r,g,b,h;
		while (frame < frames) {
			r = Math.floor(rf * ((frames-frame)/frames) + rt * (frame/frames));
			g = Math.floor(gf * ((frames-frame)/frames) + gt * (frame/frames));
			b = Math.floor(bf * ((frames-frame)/frames) + bt * (frame/frames));
			h = this.make_hex(r,g,b); 		
			setTimeout("mark.set_img_bgcolor('"+id+"','"+h+"')", delay);
			frame++;
			delay = interval * frame; 
		}
		setTimeout("mark.set_img_bgcolor('"+id+"','"+to+"')", delay);
	},  
	
	set_img_bgcolor: function(id, c) {   
	    if(document.getElementById(id).getElementsByTagName('img')[0]) {
		var o = document.getElementById(id).getElementsByTagName('img')[0];
		o.style.backgroundColor = c;} else return;
	},
	get_img_bgcolor: function(id)  { 
		var o = document.getElementById(id).getElementsByTagName('img')[0];
		while(o) {
			var c;
			if (window.getComputedStyle) c = window.getComputedStyle(o,null).getPropertyValue("background-color");
			if (o.currentStyle) c = o.currentStyle.backgroundColor;
			if ((c != "" && c != "transparent") || o.tagName == "BODY") { break; }
			o = o.parentNode;
		}
		if (c == undefined || c == "" || c == "transparent") c = "#FFFFFF";
		var rgb = c.match(/rgb\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/);
		if (rgb) c = this.make_hex(parseInt(rgb[1]),parseInt(rgb[2]),parseInt(rgb[3]));
		return c;
	},
	change_opacity: function(el) {
		if(!(/^menu/.test(el))) {
			var post = document.getElementById(el);
			if (mark.valop > 10 && mark.req == 0) {
				mark.valop -= 10;
				mark.set_opacity(post,mark.valop);
				if(mark.valop == 10) {mark.req = 1};
			} else 
			if (mark.valop < 100 && mark.req == 1) {
				mark.valop += 10;
				mark.set_opacity(post,mark.valop);
				if(mark.valop == 100) {mark.req = 2};
			} 
			if (mark.req != 2){
			setTimeout("mark.change_opacity('"+el+"')", 50);
			}
			else { mark.set_opacity(post,9999); mark.req = 0; return;}
		}
	},
	set_opacity: function(post,val){
		post.style.opacity='0.' + val ;
		post.style.filter="alpha(opacity=" + val + ")";
	}
}

function addEvent( obj, type, fn ) {
	if (obj.addEventListener)
		obj.addEventListener( type, fn, false );
	else if (obj.attachEvent) {
		obj["e"+type+fn] = fn;
		obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
		obj.attachEvent( "on"+type, obj[type+fn] );
	}
}

function removeEvent( obj, type, fn ) {
	if (obj.removeEventListener)
		obj.removeEventListener( type, fn, false );
	else if (obj.detachEvent) {
		obj.detachEvent( "on"+type, obj[type+fn] );
		obj[type+fn] = null;
		obj["e"+type+fn] = null;
	}
}

Dann noch thw.css:

Code:

body {
	margin:0;
	padding:0;
	width: 8900px;
	height: 50px;
	color:#333;
}

Und der ie.css:

Code:

#arrows {
	position: absolute; 
	top: expression( ( 440 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
	left: expression( ( 650 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	/*I kown, this hack (by Mark Wilton-Jones) for 'position:fixed' in IE6-  cause an annoying flicker effect. If you know another solution please write to marco@centralscrutinizer.it. Thanks!*/
	/*otherwise:
	wait the release of Internet Explorer 7, that support position:fixed, and in the meantime forget all with a "display: none;" */
}

Ne Hilfe wäre echt super Prima!!

Vieleicht sollte ich noch sagen dass ich ein kleiner Noob bin und meine ganze Hoffnung in euch stecke!

Aber bisher hab ich es doch weit geschafft, obwol ich bei Null angefangen hab!

Vielen vielen Dank an euch Experten!

Der Anjay

ToM80 · 22. Juni 2009

Im FF mag es laufen, aber fehlerfrei ist es nicht.
Fehler in der Datei horizonscrolling.js Line 213
obj is null

Code:

if (obj.addEventListener)

Anjay · 22. Juni 2009

Okay....

.. und dass heißt jetzt was?

Danke aber auf jedenfall schonmal!

Lg

ToM80 · 22. Juni 2009

Weiß ich leider nicht, ein Versuch wäre es wert diesen Fehler schonmal auszuräumen. Dein Script habe ich mir aber noch nicht angeschaut.

regsnerven · 26. Apr. 2010

Ändere deine DOCTYPE-Zeile von deiner in die hier:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 STRICT//EN">

Das zwingt den IE in den Quirksmode, soweit ich verstanden habe, und bewirkt, dass das alles super funktioniert ^^

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

Das ist die Notation aus selfHTML. Ich weiß nicht, welche man jetzt benutzen soll, aber beide funktionieren auf jeden Fall.

Junkee[] · 26. Apr. 2010

edit: War müll, was ich geschrieben habe.

Problem im IE, beim Rest äufts 1A! :( Schaut´s euch an.. ich bin am Ende! :(

Anjay

New member

ToM80

Guest

Anjay

New member

ToM80

Guest

regsnerven

New member

Junkee[]

Lounge-Member