Archivlink: javarea.de Forum > JavaScript > Layer mit Abstand von einer Grafik
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Layer mit Abstand von einer Grafik

Pages: [1] 2 ... nächste » ... Letzte »
geschrieben von Alf21 am 21.02.2006 - 18:11
Hallo, vll kann mir hier einer weiterhelfen.

Mein Layout ist zentriert und deshalb kann ich kein Layer am Rand zuweisen, bei einer anderen Browserauflösung würde sich der Layer verschieben.

Also muss ich den Layer an einer im Layout vorhandenen Grafik den Abstand zuweisen.

Kann mir da einer weiterhelfen?

geschrieben von zippy am 21.02.2006 - 18:47
Ganz ungeprüft auf die schnelle, aber versuch mal:

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: 

<script language="JavaScript" type="text/javascript">
<!---
function breitdyn(){
var breitsein=getInnerWidth();
breitsein=breitsein*0.5;//Bildmittenvertikale ermitteln
breitsein=breitsein [+ oder - des Abstandes des linken Ebenenrandes von der Bildschirmmittenvertikalen)]+"px";
document.getElementById("DeineEbene").style.left=breitsein;
window.setTimeout("breitdyn()",50);//wird 20xpro Sekunde neu eingestellt
}
 

function getInnerWidth() {
if (window.innerWidth) // NS
      return window.innerWidth;
else if (document.body && document.body.clientWidth) // IE 
      return document.body.clientWidth;
else return irgendeinezahl[]; // beide Funktionen unbekannt
}
--->
</script> 

Im Bodytag:
<body onload="javascript:breitdyn()">

Ebene: 
<div id="DeineEbene" style="position:absolute;top:[wasdubrauchst]px;left:[irgendwas];z-index:[wasdubrauchst];">Ebeneninhalt</div>



In Zeile sechs mussta selber ausrechen, wie weit der linke Ebenenrand von der Bildmitte entfernt ist. Soll der linke Ebebenrand zB 80px links neben der Bildmitte verlaufen, dann schreibst: breitsein=(breitsein-80)+"px";

Soll er 20 Pixel rechts neben der Bildmitte verlaufen, dann schreibst: breitsein=(breitsein+20)+"px";

Tät mich interessiern, obs funzt.

geschrieben von Alf21 am 21.02.2006 - 19:17
Entweder versteh ich das nicht, oder es geht wirklich nicht!
Er zeigt mir eine Fehlermeldung! Irgendwas stimmt da noch nicht!

geschrieben von zippy am 21.02.2006 - 19:23
Dann hast irgendwo die Klammern lassen, oder so. Schau, ich habs in ein leeres html gestellt, und es funzt:


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: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ebenentest</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
<!---
function breitdyn(){
var breitsein=getInnerWidth()*0.5;
breitsein=(breitsein-300)+"px";//linker ebenenrand 300px links der mitte
document.getElementById("ebene").style.left=breitsein;
window.setTimeout("breitdyn()",50);
}
function getInnerWidth() {
if (window.innerWidth) // NS
      return window.innerWidth;
else if (document.body && document.body.clientWidth) // IE 
      return document.body.clientWidth;
else return 0; // beide Funktionen unbekannt->Ebene verschwindet
}
--->
</script>
</head>
<body onLoad="javascript:breitdyn()">
<div id="ebene" style="position:absolute;top:100px;z-index:3;width:200px;height:150px;background-color:#FF0000">Ebeneninhalt</div>
</body>
</html>


Das ist jetzt ne ganze Seite, nur mit ner roten Ebene, deren linker Rand stets 300px links der Mitte verläuft. Einfach das "300" gegen das austauschen, wassd brauchst...

geschrieben von zippy am 21.02.2006 - 19:30
...die Ebene nicht links verschwindet, wenn jemand das Fenster sehr verkleinert. In diesem Fall geht die Ebene bis genau 100px an den linken Rand, und bleibt dann "stehen".

Musst nur noch den Wert für den linken Ebenenrand von der Bildmitte (hier: -300) und den Abstand des linken Ebenenrandes von Deinem linken Designrand (hier: 100) eintragen.

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: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ebenentest</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
<!---
function breitdyn(){
var breitsein=getInnerWidth()*0.5;
breitsein=(breitsein-300);//linker ebenenrand 300px links der mitte
if (breitsein<100)breitsein=100;//mindestabstand vom linken rand
document.getElementById("ebene").style.left=breitsein+"px";
window.setTimeout("breitdyn()",50);
}
function getInnerWidth() {
if (window.innerWidth) // NS
      return window.innerWidth;
else if (document.body && document.body.clientWidth) // IE 
      return document.body.clientWidth;
else return 0; // beide Funktionen unbekannt->Ebene verschwindet
}
--->
</script>
</head>
<body onLoad="javascript:breitdyn()">
<div id="ebene" style="position:absolute;top:100px;z-index:3;width:200px;height:150px;background-color:#FF0000">Ebeneninhalt</div>
</body>
</html>


Hmmmm, im Firefox gehts nicht. Sagts ma bitte, wie die client-width beim Foxxie heißt? Bittebitte...


SCHLUCHUHUHUHUUUUCHZ!!!

Bitte sagts ma wer, warum der Foxxie das Script nicht will. Das macht mich ganz fertig.....

geschrieben von Alf21 am 21.02.2006 - 19:58
Dankeeeee...
Habs auch grade mitbekommen, das es der Foxxi nicht versteht. Scheisse.

Genau sowas hab ich gesucht, wenn das jetzt nur noch im Firefox funzelt, dann geb ich einen aus

geschrieben von Hawk am 22.02.2006 - 00:08
Hallo,

es geht auch im FF hier die änderung:

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

<?
<style>
<!--
#ebene {position:absolute;
             top:100px;

        width:200px;
        height:150px;
        background-color:#FF0000;
//-->
</style>
<script language="JavaScript" >
<!---

function breitdyn(){
  var breite =(window.innerWidth ) ? window.innerWidth : document.body.offsetWidth;
  alert(breite);
 mitte  = breite / 2;
breitsein = mitte - 300;//linker ebenenrand 300px links der mitte

document.getElementById('ebene').style.left = breitsein+"px";


}


//--->
</script>
</head>
<body onload="breitdyn();">
<div id="ebene" >Ebeneninhalt</div>

</body>
?>

geschrieben von zippy am 22.02.2006 - 01:25
Das mit dem offset wars ja nicht, das hab ich schon nachmittags probiert. Dass es NUR an den Kommentarzeichen "//--->" statt "--->", bei Dir in Zeile 27, und im alten Versuch in Zeile 22 liegt, hätt ich NIE geschnallt, außer ich hätt die Pfeilchen ganz rausgenommen...

Danke jedenfalls sehr. Mit "//--->" funzen beide Versionen, ...
Für den Alf noch mal die ganze Seite incl. Deiner schlauen Kürzungen:


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: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ebenentest</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
<!--
#ebene {position:absolute;
        top:100px;
		z-index:3;
        width:200px;
        height:150px;
        background-color:#FF0000;}
-->
</style>

<script language="JavaScript" >
<!---
function breitdyn()
{
var breitsein =(window.innerWidth ) ? window.innerWidth : document.body.offsetWidth;
breitsein = (breitsein*0.5)-300;//abstand des l. randes zur mitte
if (breitsein<100)breitsein=100;//mindestabstand zum rand links
document.getElementById('ebene').style.left = breitsein+"px";
window.setTimeout("breitdyn()",50);
}
//--->
</script>
</head>
<body onLoad="javascript:breitdyn();">
<div id="ebene">Ebeneninhalt</div>
</body>
</html>


Eigentlich UUUUR-peinlich, gerade, nachdem ich heut jemandem was über Kommentarzeichen vorgeschwafelt hab...

geschrieben von Alf21 am 22.02.2006 - 07:43
Naja, es geht fast,
hab ich nur die falschen Einstellungen oder sieht das im Firefox wirklich verschoben aus?

http://www.mediengarten.net/we_neu/index_.php

Irgendwas is ja immer

geschrieben von zippy am 22.02.2006 - 15:08
Ach Gott, natürlich sieht es verschoben aus, weil Du keine Seitenränder bestimmt hast, und jeder Browsertyp andere Grundeinstellungen verwendet, was als x=0 und y=0 gilt. Das kamma mit "margin" und "padding" und so im Body-Tag einstellen, ist aber meist ein Gekripsel.

Schönes Design übrigens. Sowas kann ich nicht. Vielleicht gibst mir ja mal Designnachhilfe.

Warum MUSS denn die kleine Grafik in einer Ebene stehen? Es geht ja viel unkomplizierter, sie einfach an der tablecell zu orientieren. Dan ruckelt sie auch nicht nach.

Hier Dein Quelltext OHNE Tabelle und OHNE Javascript-Bewegungen, aber dafür in IE und FF gleich (bis auf den Seitenrand. Wennst genau schaust, siehst, dass FF und IE oben verschieden viel Rand machen. Daran liegt auch deine Verschiebung)



http://cuba.or.at/c.htm

Achtung: Ich hab alle Bilder-urls auf "absolut" umgeschrieben, also automatisch ein "http://blabla...." davorgesetzt, um das auf einem "Testserver" zu probieren. Das musst halt wieder rausnehmen, wos nicht passt. Der Quelltext übersteigt die mögliche Beitragslänge, drum liegts derweil bei Kunden. Musses also heut noch rausnehmen.


geschrieben von Alf21 am 22.02.2006 - 15:18
Danke, jetzt bin ich schon wieder Stückchen schlauer.
meld dich doch bitte mal im ICQ bei mir unter: [mc] 276-893-985

Das Problem ist ja, das ich Sie ja eigentlich auch an einer anderen Grafik oder am Tabellenrand ausrichten würde, jedoch hab ich mit den Layrn nicht soviel Plan.

Die Grafik muss auf einem Layer sein, weil daunter das Drop-Down-Menue ist!

BESTEN DANNNNNNNNNNNK

geschrieben von Alf21 am 26.02.2006 - 15:18
Aber wie mach ich das, wenn ich 2 Layer haben will, einer nach links und einer nach rechts?
Hab schon alle Variationen ausprobiert, anscheind wohl nicht alle...

geschrieben von Hawk am 26.02.2006 - 16:52
Hallo,

kannst du das nicht über javascript errechnen lassen die positionen und größe

geschrieben von zippy am 26.02.2006 - 17:09
In den Javascriptteil einfach ne zusätzliche Zeile:

HTML-Quelltext
1: 

document.getElementById('ebene2').style.left = (breitsein-300)+"px";

geschrieben von sobi am 26.02.2006 - 17:19
warum positionierst du den layer nicht einfach mit CSS position: relative zu einer tabellenecke. das sollte deutlich einfacher gehen. rest siehe selfhtml.

cu
uli

ps: funzt übrigens mit allen browsern


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