Archivlink: javarea.de Forum > JavaScript > Script CONTAIN BACKGROUND für alle Browser
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Script CONTAIN BACKGROUND für alle Browser

Pages: [1]
geschrieben von sobi am 26.05.2005 - 16:29
Mit dem folgenden Patch läuft das Script CONTAIN BACKGROUND hier aus dem Javarea Download mit allen Browsern (getestet). Erkennt es einen Netscape Aufruf, wird die Curtain Sequenz übersprungen. MfG Uli

HTML-Quelltext
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: 
105: 
106: 
107: 
108: 
109: 
110: 
111: 
112: 
113: 
114: 
115: 
116: 
117: 
118: 
119: 
120: 
121: 
122: 
123: 
124: 
125: 
126: 
127: 

<SCRIPT LANGUAGE="JavaScript">
<!--
// CREDITS:
// bye-bye-curtain by Urs Dudli and Peter Gehrig
// Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com. 
// info@24fun.ch
// 5/25/2000


var pause=50
var widthstep=10
var curtaincolor1="ffcc00"
var curtaincolor2="333333"
var curtaincolor3="333333"
var curtaincolor4="ffcc00"
var screenheight
var screenwidth
var heightstep
var maxmove=0
var timer
var url
var curtaincontent1=""
var curtaincontent2=""
var curtaincontent3=""
var curtaincontent4=""

function init() {
    if (document.all) {
		screenwidth=document.body.clientWidth
		screenheight=document.body.clientHeight
		curtaincontent1="<table cellpadding=0 cellspacing=0 width='"+screenwidth+"' height='"+screenheight+"'><tr><td bgcolor='"+curtaincolor1+"'> </td></tr></table>"
		curtaincontent2="<table cellpadding=0 cellspacing=0 width='"+screenwidth+"' height='"+screenheight+"'><tr><td bgcolor='"+curtaincolor2+"'> </td></tr></table>"
		curtaincontent3="<table cellpadding=0 cellspacing=0 width='"+screenwidth+"' height='"+screenheight+"'><tr><td bgcolor='"+curtaincolor3+"'> </td></tr></table>"
		curtaincontent4="<table cellpadding=0 cellspacing=0 width='"+screenwidth+"' height='"+screenheight+"'><tr><td bgcolor='"+curtaincolor4+"'> </td></tr></table>"
		curtain1.innerHTML=curtaincontent1
		curtain2.innerHTML=curtaincontent2
		curtain3.innerHTML=curtaincontent3
		curtain4.innerHTML=curtaincontent4
		heightstep=Math.round(widthstep/screenwidth*screenheight)
    }
	if (document.layers) {
		screenwidth=window.innerWidth
		screenheight=window.innerHeight
		curtaincontent1="<table cellpadding=0 cellspacing=0 width='"+screenwidth+"' height='"+screenheight+"'><tr><td bgcolor='"+curtaincolor1+"'> </td></tr></table>"
		curtaincontent2="<table cellpadding=0 cellspacing=0 width='"+screenwidth+"' height='"+screenheight+"'><tr><td bgcolor='"+curtaincolor2+"'> </td></tr></table>"
		curtaincontent3="<table cellpadding=0 cellspacing=0 width='"+screenwidth+"' height='"+screenheight+"'><tr><td bgcolor='"+curtaincolor3+"'> </td></tr></table>"
		curtaincontent4="<table cellpadding=0 cellspacing=0 width='"+screenwidth+"' height='"+screenheight+"'><tr><td bgcolor='"+curtaincolor4+"'> </td></tr></table>"
		document.curtain1.document.write(curtaincontent1)
		document.curtain1.document.close()
		document.curtain2.document.write(curtaincontent2)
		document.curtain2.document.close()
		document.curtain3.document.write(curtaincontent3)
		document.curtain3.document.close()
		document.curtain4.document.write(curtaincontent4)
		document.curtain4.document.close()
		heightstep=Math.round(widthstep/screenwidth*screenheight)
    }
}

function opencurtain(thisurl) {
	url=thisurl
    if (document.all) {
		document.all.curtain1.style.posTop=-screenheight
		document.all.curtain1.style.posLeft=0
		document.all.curtain2.style.posTop=0
		document.all.curtain2.style.posLeft=screenwidth
		document.all.curtain3.style.posTop=screenheight
		document.all.curtain3.style.posLeft=0
		document.all.curtain4.style.posTop=0
		document.all.curtain4.style.posLeft=-screenwidth
		document.all.curtain1.style.visibility="VISIBLE"
		document.all.curtain2.style.visibility="VISIBLE"
		document.all.curtain3.style.visibility="VISIBLE"
		document.all.curtain4.style.visibility="VISIBLE"
		movecurtains()
    }
	if (document.layers) {
		document.curtain1.top=-screenheight
		document.curtain1.left=0
		document.curtain2.top=0
		document.curtain2.left=screenwidth
		document.curtain3.top=screenheight
		document.curtain3.left=0
		document.curtain4.top=0
		document.curtain4.left=-screenwidth
		document.curtain1.visibility="VISIBLE"
		document.curtain2.visibility="VISIBLE"
		document.curtain3.visibility="VISIBLE"
		document.curtain4.visibility="VISIBLE"
		movecurtains()
    }
}

function movecurtains() {
	if (maxmove<=screenwidth/2) {
    	if (document.all) {
			document.all.curtain1.style.posTop+=heightstep
			document.all.curtain2.style.posLeft-=widthstep
			document.all.curtain3.style.posTop-=heightstep
			document.all.curtain4.style.posLeft+=widthstep
    	}
		if (document.layers) {
			document.curtain1.top+=heightstep
			document.curtain2.left-=widthstep
			document.curtain3.top-=heightstep
			document.curtain4.left+=widthstep
    	}
		maxmove+=widthstep
		var timer=setTimeout("movecurtains()",pause)
	}
	else {
		clearTimeout()
		document.location.href=url
	}
}

function openpage(URL) {
      if(navigator.appName == "Netscape") {
      location.href=(""+URL+"");}

      if(navigator.appName == "Microsoft Internet Explorer") {
      opencurtain(""+URL+""); }
}
// -->
</SCRIPT>

geschrieben von René am 26.05.2005 - 22:34
Hi Uli,

kannst du mal noch etwas HTML-Code dazu posten das man weis wie es funktioniert?

geschrieben von Klaush am 26.05.2005 - 22:38
Das ist das Geheimnis:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 

function openpage(URL) {
      if(navigator.appName == "Netscape") {
      location.href=(""+URL+"");}

      if(navigator.appName == "Microsoft Internet Explorer") {
      opencurtain(""+URL+""); }



Wenn der IE erkannt wird, wird der Background geladen ....., beim NS wird einfach eine weiterleitung gemacht ohne den Effekt zu sehen.

geschrieben von sobi am 27.05.2005 - 02:24
Es ist so wie Klaush schreibt. Man kann die <script>...</script> Sequenz oben einfach gegen die im Javarea Original tauschen. Die ürsprüngliche Funktion 'openpage()' heisst jetzt 'opencurtain()'. In der neuen Funktion 'openpage()' am Ende des Scripts findet die von Klaush beschriebene Browserabfrage statt. Netscape 7 und Firefox melden sich bei der Abrage als "Netscape" Browser. Dann wird direkt zu der aufgerufenen URL gesprungen. Netscape 8, Internet Explorer und Opera melden einen "Microsoft Internet Explorer" Browser an das Script, das dann den Curtain Effekt mit Seitenaufruf macht. Hier der restliche Code des Scripts ::




<html>
<head>



<STYLE>
.curtain {
position:absolute;
visibility:hidden;
}
</STYLE>


<SCRIPT LANGUAGE="JavaScript">
<!--
// CREDITS:
// bye-bye-curtain by Urs Dudli and Peter Gehrig
// Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com.
// info@24fun.ch
// 5/25/2000

... neuen Hauptteil einfügen (kann hier nicht gezeigt werden, weil zu lang)

-->
</SCRIPT>


</head>


<body onload="init()">

<DIV ID="deletethisblock" class="redirstyle" style="position:absolute;left:0px;top:0px;font-family:Verdana;font-size:8pt">

<DIV ID="curtain1" class="curtain"></DIV>
<DIV ID="curtain2" class="curtain"></DIV>
<DIV ID="curtain3" class="curtain"></DIV>
<DIV ID="curtain4" class="curtain"></DIV>

</DIV>

<!-- Übergabe der Parameter für die aufzurufende Seite -->
<!-- geht auch mit <a href="javascript:openpage('seite1.html')">Zu Seite 1 springen</a> anstatt der Radiobuttons -->

<input type="radio" name="check" value="seite1" onClick= "openpage('seite1.html')">&nbsp;&nbsp;Zu Seite 1 springen
<br>
<br>
<input type="radio" name="check" value="seite2" onClick= "openpage('seite2.html')">&nbsp;&nbsp;Zu Seite 2 springen

</body>
</html>



Die ganze Datei gibt's im Attachment zum Download, ist zu lang um sie hier zu zeigen.

MfG
Uli

geschrieben von René am 27.05.2005 - 13:40
Ich habe hier mal einen Anfang gemacht leider will es noch nicht im Firefox oder Mozilla. Wer macht an dieser Stelle weiter ???

In dem rot markierten Bereich liegt meines erachtens der Fehler warum Firefox und Mozilla nicht wollen.


HTML-Quelltext
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: 
105: 
106: 
107: 
108: 
109: 
110: 
111: 
112: 
113: 
114: 
115: 
116: 
117: 
118: 
119: 
120: 
121: 
122: 
123: 
124: 
125: 
126: 
127: 
128: 
129: 
130: 
131: 
132: 
133: 
134: 
135: 
136: 
137: 
138: 
139: 
140: 
141: 
142: 
143: 
144: 
145: 
146: 
147: 
148: 
149: 
150: 
151: 
152: 
153: 
154: 
155: 
156: 
157: 
158: 
159: 

<html>
<head>

<style type="text/css">
<!--
#body
{
	border-width: 0px;
	overflow: auto;
	padding: 0px
	margin: 0px;
}

.curtain
{
	visibility: hidden;
	position: absolute;
	left: 0px;
	top: 0px;
}
//-->
</style>

<script language="JavaScript" type="text/javascript">
<!--
// CREDITS:
// bye-bye-curtain by Urs Dudli and Peter Gehrig
// Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com. 
// info@24fun.ch
// 5/25/2000
// Edit by René Marscheider

var pause           = 50;
var maxmove         = 0;
var widthstep       = 10;
var curtaincolor1   = 'ffcc00';
var curtaincolor2   = '333333';
var curtaincolor3   = '333333';
var curtaincolor4   = 'ffcc00';
var curtaincontent1 = '';
var curtaincontent2 = '';
var curtaincontent3 = '';
var curtaincontent4 = '';
var screenheight;
var screenwidth;
var heightstep;
var url;

function init()
{
	screenwidth  = (window.innerWidth) ? window.innerWidth : document.body.clientWidth;
	screenheight = (window.innerHeight) ? window.innerHeight : document.body.clientHeight;

	curtaincontent1 = '<table border="0" cellpadding="0" cellspacing="0" width="' + screenwidth + '" height="' + screenheight + '">'
	                + '  <tr>'
	                + '    <td bgcolor="' + curtaincolor1 + '">&nbsp;</td>'
	                + '  </tr>'
	                + '</table>';

	curtaincontent2 = '<table border="0" cellpadding="0" cellspacing="0" width="' + screenwidth + '" height="' + screenheight + '">'
	                + '  <tr>'
	                + '    <td bgcolor="' + curtaincolor2 + '">&nbsp;</td>'
	                + '  </tr>'
	                + '</table>';

	curtaincontent3 = '<table border="0" cellpadding="0" cellspacing="0" width="' + screenwidth + '" height="' + screenheight + '">'
	                + '  <tr>'
	                + '    <td bgcolor="' + curtaincolor3 + '">&nbsp;</td>'
	                + '  </tr>'
	                + '</table>';

	curtaincontent4 = '<table border="0" cellpadding="0" cellspacing="0" width="' + screenwidth + '" height="' + screenheight + '">'
	                + '  <tr>'
	                + '    <td bgcolor="' + curtaincolor4 + '">&nbsp;</td>'
	                + '  </tr>'
	                + '</table>';

	with (document)
	{
		getElementById('curtain1').innerHTML = curtaincontent1;
		getElementById('curtain2').innerHTML = curtaincontent2;
		getElementById('curtain3').innerHTML = curtaincontent3;
		getElementById('curtain4').innerHTML = curtaincontent4;
	}

	heightstep = Math.round(widthstep / screenwidth * screenheight);
}

function opencurtain(thisurl)
{
	url = thisurl;

	with (document)
	{
		getElementById('body').style.overflow       = 'hidden';

		getElementById('curtain1').style.visibility = 'visible';
		getElementById('curtain1').style.top        = -screenheight + 'px';

		getElementById('curtain2').style.visibility = 'visible';
		getElementById('curtain2').style.left       = screenwidth + 'px';

		getElementById('curtain3').style.visibility = 'visible';
		getElementById('curtain3').style.top        = screenheight + 'px';

		getElementById('curtain4').style.visibility = 'visible';
		getElementById('curtain4').style.left       = -screenwidth + 'px';
	}

	movecurtains();
}

function movecurtains()
{
	if (maxmove <= (screenwidth / 2))
	{
		with (document)
		{
			getElementById('curtain1').style.posTop  += heightstep;
			getElementById('curtain2').style.posLeft -= widthstep;
			getElementById('curtain3').style.posTop  -= heightstep;
			getElementById('curtain4').style.posLeft += widthstep;
		}

		maxmove += widthstep;

		setTimeout('movecurtains();', pause);
	}
	else
	{
		clearTimeout();
		self.location.href = url;
	}
}

function openpage(URL)
{
      opencurtain(URL);
}
//-->
</script>

</head>
<body id="body" onload="init();">

<div id="curtain1" class="curtain">&nbsp;</div>
<div id="curtain2" class="curtain">&nbsp;</div>
<div id="curtain3" class="curtain">&nbsp;</div>
<div id="curtain4" class="curtain">&nbsp;</div>

<form action="javascript:void(0);" method="post">
  <input name="check" type="radio" value="http://explorer.renmar.de" onclick="openpage(this.value);" /> zur Seite 1 springen<br />
  <input name="check" type="radio" value="http://127.0.0.1/html/seite.htm" onclick="openpage(this.value);" /> zur Seite 2 springen
<form>

</body>
</html>

geschrieben von sobi am 27.05.2005 - 17:57
Also bei mir sind Mozilla und Firefox ein Browser, nicht zwei. Vielleicht hab ich ja auch schon eine neuere Version ??? Netscape 7 macht auch noch die selben Probleme, darauf solltet ihr mit achten. Netscape 8 hat einen IE Kompatibilitäts Modus und schaltet um, so dass das Script läuft. Bloss die V 8 ist m.E. eine ZUMUTUNGGGGGGGGG !!!!!!!!!

MfG und frohes Schaffen
Sobi & Manfred der Beagle
http://www.beagleboard.de
(Schreib doch mal einer was für Manni da rein)(BBBBBBBBBBBBIIIIIIIIIIITTTTTTTTTEEEEEEEEEE)


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.