Layer einblenden

kills · 20. Juli 2004

Hallo zusammen,

ich möchte per Javascript (beim Knopfdruck eines Links) eine Ebene einfahren lassen.

Einfach ein/ausblenden kann ich auch, aber ich möchte sie "einfahren" lassen.

muss ich das per umständlicher "for-Schleife" mit langsamen inkrementieren der Absoluten position des Layers bewerkstelligen, oder kann ich das auch per z.b. JS-effekt machen, bzw. gibts JS vielleicht schon einen solchen effekt her?

etreu · 20. Juli 2004

Soweit ich weiss, darfst du dich selbst darum kümmern.

In welche Richtung soll denn der Layer einfahren?

Von oben und von links ist leicht. Wenn du von rechts oder von unten einen Layer einfahren lassen möchtest, dann wirds etwas komplizierter.

kills · 20. Juli 2004

von unten in den content nach oben einfahren

etreu · 20. Juli 2004

1. die höhe der ebene auf 0px setzen und überlauf verstecken (am besten auch noch white-space auf no-wrap setzen

2. die ebene absolute ausrichten => bottom:0px

3. die grösse der ebene erweitern

4. wenn die ebene komplett ist, soweit hochfahren, wie du möchtest.

kills · 20. Juli 2004

1. die höhe der ebene auf 0px setzen und überlauf verstecken (am besten auch noch white-space auf no-wrap setzen
2. die ebene absolute ausrichten => bottom:0px
3. die grösse der ebene erweitern
4. wenn die ebene komplett ist, soweit hochfahren, wie du möchtest.

was meinst du mit überlauf verstecken? "overflow" ?

soweit ichs verstanden habe, setzt ich mich ma drann.

etreu · 20. Juli 2004

was meinst du mit überlauf verstecken? "overflow" ?

genau.

kills · 20. Juli 2004

und warum die höhe auf 0px?

Und wie bekomme ich den Layer genauso breit wie meine Tabelle?

Meine Tabelle hat width 100%!

Wenn ich das bei dem Layer auch mache, dann ignoriert dieser aber natürlich auch meine bodyMargins.

Nun habe ich ihm die Margins gleich dem body gesetzt, aber die position ist immer noch nicht die gleiche

edit:

das mit der layer position hab ich hinbekommen!

geht aber nur im Mozilla/FireFox:


.margin {

  left: 7px;

  right: 7px;

}

etreu · 20. Juli 2004

Probier es doch mit padding oder margin.

kills · 20. Juli 2004

Probier es doch mit padding oder margin.

hat kein zweck

etreu · 20. Juli 2004

Was genau passiert denn?

kills · 20. Juli 2004


<table style="width: 100%">

<tr>

<td>

mein content

</td>

</tr>

</table>


<div style="position: absolute; width: 100%; z-index: 10;">

mein Layer

</div>

die Tabelle hat aussenherum einen margin von 7px!

der layer hat aussenherum kein margin!

nun will ich den layer genau über der tabelle positionieren.

also mit margin 7px!

aber wenn ich nun z.b. um den layer noch ein layer mach mit padding7px, dann wird dieser wenn er ein layer mit width=100% enthält genau 7 px breiter als das bild ist.

es entstehen scrollbalken.

etreu · 20. Juli 2004

<html>

  <head>

    <title>titel</title>

  </head>


  <body style="margin:20px; padding:0px;">

    <table style="width: 100%; border: solid 1px green;">

      <tr>

        <td>

          mein content

        </td>

      </tr>

    </table>


    <div style="position: absolute; width: 100%; z-index: 10; margin:20px; border:solid 1px black; top:0px; left: 0px;">

      mein Layer

    </div>

  </body>

</html>

Entspricht das dem, was du erreichen willst? (Getestet mit Opera 7.52)

kills · 20. Juli 2004

im IE sieht dein Vorschlag gut aus, aber im Mozilla/FireFox nicht..

Es geschieht bei dir das gleiche, wie bei meinen Versuchen!

Der Layer geht bis ganz rechts zum Rand(trotz margin!)

kills · 22. Juli 2004

Also ich habs jetzt wie folgt gelöst:

CSS:


div.latest_infos_moz {

	position: absolute;

	z-index: 10; 


	overflow: hidden;


	white-space: nowrap;


	bottom: 10px;

	left: 10px;

	right: 10px;



	border: solid 1px black;

	background-color: green

}


div.latest_infos_common {

	position: absolute;

	z-index: 10; 


	overflow: hidden;


	white-space: nowrap;


	bottom: 10px;

	left: 10px;

	right: 10px;

	width: 100%;



	border: solid 1px black;

	background-color: green

}

HTML:


<div id="latest_infos" style="visibilty: hidden;">

   Layer

</div>


<!-- setLayerClass -->

<script language="JavaScript" type="text/javascript">


  var oLayer = fetch_object('latest_infos');

  var sClass = is_moz ? 'latest_infos_moz' : 'latest_infos_common';


  setClass( oLayer, sClass);


</script>

Also ich hab mir 2 Klassen angelegt, und je nach Browser dann beim laden der seite die CSS Klasse gesetzt

Anmelden

Layer einblenden

Empfohlene Beiträge

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte