# Versteckten Bereich mit css sichtbar machen?



## Shorty1968 (19. Oktober 2013)

Hallo ich habe in einem Versteckten bereich ein Element das ich mit css angezeigt bekommen möchte,ich habe es mit diesem css Code versucht.

```
.statusContent {
position:absolute; 
clear: both;
width:150px; 
height:150px;
margin-top:270px; 
z-index:3000;
}
```
Aber leider bleibt es immer noch in dem Versteckten bereich,was ist Falsch , wie bekomme ich es denoch angezeigt?


----------



## sheel (19. Oktober 2013)

Was ist ein versteckter Bereich?
Mit display:none ?
Dann musst du eben dieses Display auch wieder umstellen, für den anzuzeigenden Teil.
Das ganze andere Zeug ist für die Frage Anzeigen Ja/Nein komplett egal
(außer z-index zu einem gewissen Grad, aber egal)


----------



## Shorty1968 (19. Oktober 2013)

Hallo wie kann ich das display:none umstellen,das der bereich weiter versteckt und nur durch Button anklicken sichtbar wird,aber das css was ich als beispiel angegeben habe nicht behindert wird?


----------



## Jan-Frederik Stieler (19. Oktober 2013)

Hi,
zu diesem Thema lies dir doch bitte mal das durch: http://www.mediaevent.de/css/sichtbarkeit.html .
Ansonsten benötigst du für dein Vorhaben etwas Javascript welches die CSS-Eigenschaft von display: none auf display: block oder inline etc. ändert.

Mit nur diesem Stückchen Code können wir dir nur per Glaskugel helfen und da wir keine Hellseher sind ist das Vorhaben entsprechend nutzlos .

Viele Grüße


----------



## Shorty1968 (19. Oktober 2013)

Ich habe meine User Optionen hinter diesen Code versteckt.

```
{lang}Userdetails{/lang} <a onclick="openList('memo_{@$sidebar->getMessageID()}', { save: true })" href="javascript: void(0)"> <img src="http://www.tutorials.de/images/open.png" alt="SHOWDETAILS" title="SHOWDETAILS" height="16px" widivh="16px" /></a><br />
        <div id="memo_{@$sidebar->getMessageID()}" style="display:none;">
```
Darin befindet sich eine option die ich mit css nun ausserhalb der Versteckten Optionen angezeigt bekommen möchte,aber ich bekomme es einfach nicht hin.


----------



## Shorty1968 (23. Oktober 2013)

Ich habe nun alle möglichkeiten bei Google eingegeben,gibt es wirklich keine möglichkeit das display: none; zu überlappen?


----------



## Jan-Frederik Stieler (24. Oktober 2013)

Hi,
also du kannst natürlich:

```
.klasse:hover {
display: block;
}
```
das Div wieder sichtbar machen. Das wird aber nicht funktionieren da der Nutzer das Div ja nicht sieht, somit weiß er auch nicht wo er drüberfahren soll.
Du kannst auch dein Konstrukt ändern.
Hier hats ne ganze Menge Beispiele: http://aktuell.de.selfhtml.org/artikel/css/infobox/

Ansonsten bleibt dir nur noch Javascript übrig.

Grüße


----------



## Shorty1968 (24. Oktober 2013)

Hallo vielen dank,gibt es auch ein Beispiel für die Javascript umsetzung?


----------



## Jan-Frederik Stieler (24. Oktober 2013)

Hi,
mit jquery:

```
$('Link-Selektor').on('click', function(e){
   e.preventDefault(); /*Nur nötig falls du ein Linkziel im href hast*/
   $('selektor').css({display: 'block'});
});
```
Mit traditionellem Javascript

```
function showbox() {
   var show = document.getElementById('your id');
   show.style.display = 'block';
}
```
und für das tradtionelle Javascript dann noch ein onclick="showbox()" in den link einfügen.

Grüße


----------



## Shorty1968 (24. Oktober 2013)

Vielen dank


----------



## Shorty1968 (27. Oktober 2013)

Ich habe meinen Code nun geändert und es funktioniert auch im grossen und ganzen,aber wenn ich ihn so nutze ist es das die Userdetails eingeblendet angezeigt werden,wie bekomme ich es nun hin das sie erst eingeklappt angezeigt werden und erst durch das Anklicken aufgeklappt werden?

```
<a onclick="openList('memo_{@$sidebar->getMessageID()}', { save: true })" href="javascript: hiddeArea('memo_{@$sidebar->getMessageID()}');">
```


----------



## Jan-Frederik Stieler (27. Oktober 2013)

Hi,
hier gibt es einen Ansatz wie man das realisieren kann: http://jsfiddle.net/maniator/Z6cbq/
Ansonsten für jQuery gibt es schon fertige Funktionen wie slideUp and slideDown oder slideToggle.


```
$('Link-Selektor').on('click', function(e){
   e.preventDefault(); /*Nur nötig falls du ein Linkziel im href hast*/
   $('selektor').slideToggle('slow');
});
```

Grüße


----------



## Shorty1968 (27. Oktober 2013)

Vielen dank nun habe ich das display: none; weg,aber leider klappt es mit dem css und überlappen des Versteckten bereichs immer noch nicht.

```
.statusContent {
position:absolute; 
clear: both;
width:150px; 
height:150px;
margin-top:270px; 
z-index:3000;
}
```


----------



## Jan-Frederik Stieler (27. Oktober 2013)

Hi,
was meinst du mit überlappen des Bereiches?

Grüße


----------



## Shorty1968 (27. Oktober 2013)

Na ja ich habe doch nun mit deiner Hilfe das aus meinem alten code (display: none raus weil ich dachte das deshalb das css nicht einen bestimmten Teil aus dem Versteckten bereich raus bringt,aber das scheint ja nicht der Grund gewesen zu sein.

Ich weiss das man mit css und überlappen bestimmte sachen überlappen kann,sprich an andere stellen anzeigen lassen kann,aber mit meinem css geht das aus irgendeinem Grund nicht.


----------



## Jan-Frederik Stieler (27. Oktober 2013)

Hi,
also ich muss dir sagen das es sehr schwer ist zu helfen wenn ich nur so Bruchteile der Seite zu sehen bekomme und nicht das Zusammenspiel aller beteiligten Teile.
In deinem CSS ist eigentlich alles definiert was notwendig ist um ein Div zum Beispiel in einem Layer über ein anderes zu legen.

Ich könnte mir vorstellen das vielleicht der z-index kollidiert.

Grüße


----------



## Shorty1968 (27. Oktober 2013)

Der z-index könnte doch nur kollidieren wenn der andere bereich auch einen enthalten würde,aber das ist ja nicht der fall.

Ich würde dir ja eine Live Demo geben,aber solange es nicht Läuft wie es soll habe ich es mit xampp Lokal am Testen.


----------



## Jan-Frederik Stieler (27. Oktober 2013)

Hi,
vielleicht kannst du ja mittels JsBin oder JSFiddle deine Situation nachbauen so das ich mir das dran anschauen kann?


----------



## Shorty1968 (27. Oktober 2013)

Würde es auch an hand von Screens gehen?

Andernfalls baue ich es auch schnell in meinem Laufenden Forum ein?


----------



## Jan-Frederik Stieler (27. Oktober 2013)

Ich kann halt nichts analysieren bzw. ausprobieren wenn ich nur Screenshot zu sehen bekomme.


> Andernfalls baue ich es auch schnell in meinem Laufenden Forum ein?


Ich denke das wäre grad das was am ehesten zu einem funktionierendem Ergebnis führt.

Grüße


----------



## Shorty1968 (27. Oktober 2013)

Das dachte ich mir und habe es schon in mein Forum Instaliert,aber nun tritt der Vorführ efekt ein das das eine Olugin welches aus dem Versteckten bereich soll nicht angezeigt wird und ich weiss noch nicht warum das nun ist.

Aber schau schon mal hier http://computer-base.net/board1-allgemein-base/board22-news/4-gestaltet-das-forum-mit/ bei den "Userdetails" wenn du da drauf klickst öffnet sich der Versteckte bereich und da raus mit css darum geht es.

Eventuell hilft es ja schon ein wenig bis ich den Fehler gefunden habe.


----------



## Jan-Frederik Stieler (27. Oktober 2013)

Hi,
jetzt musst du mir mal genau erklären welches Element über welchem liegen soll?
Für mich sieht es aus als ob das so richtig wäre .


----------



## Shorty1968 (28. Oktober 2013)

Ja im Prinzip ist es so richtig nur beim wBB werden die meisten Plugins über die User Option ausgegeben und die sind ja nun versteckt und darin ist ein Status Plugin welches außerhalb des Verstecks angezeigt werden soll.

Leider wird nun genau das Plugin um das es nun geht nicht angezeigt und ich finde den Fehler nicht,aber zum Testen kann man auch etwas x belibiges nehmen aus dem bereich oder?

**EDIT**
Nun wird es angezeigt,das um was es geht ist als Screen im anhang.


----------



## Jan-Frederik Stieler (28. Oktober 2013)

Hi,
also das Statusplugin wird aktuell ja mit ein- und ausgeblendet.
Und du möchtest es wie haben?

Grüße


----------



## Shorty1968 (28. Oktober 2013)

Ja so ist es und ich möchte es nun nach möglichkeit mit css in der Sidebar ganz Unten angezeigt bekommen ausserhalb des Versteckten bereichs.


----------



## Jan-Frederik Stieler (29. Oktober 2013)

Hi,
und warum fügst du es dann nicht einfach im HTML außerhalb des aufklappbaren Bereiches ein?
Mit CSS kann man keine Kunststücke machen und die DOM außer kraft setzen.

Selbst mit einer absoluten Positionierung bekommst du nicht die Eigenschaften des Elternelementes negiert.

Grüße


----------



## Shorty1968 (29. Oktober 2013)

Hi weil das leider nicht so einfach ist oder mir die Erfahrung zum umsetzen fehlt,wie genau sollte das den gehen?

Im Moment ist die Ausgabe des Plugins in .php Datei.hier mal ein Link zu dem Plugin um sich mal ein Bild zum Aufbau zu machen.


----------



## Shorty1968 (1. November 2013)

Hat eventuell jemand eine Idee was ich in der .php ändern könnte um es an einer anderen stelle anzeigen zu lassen?

```
<?php
require_once (WCF_DIR . 'lib/data/user/option/UserOptionOutput.class.php');
require_once (WCF_DIR . 'lib/data/user/User.class.php');

class UserOptionOutputStatusDisplay implements UserOptionOutput
{

	/**
	 * @see UserOptionOutput::getShortOutput()
	 */
	public function getShortOutput(User $user, $optionData, $value)
	{
		if (empty($value) || $value == '0')
			return '';
			
		WCF :: getTPL()->assign('value', $value);
		WCF :: getTPL()->assign('size', 'S');

		return WCF :: getTPL()->fetch('statusIcon');
		
	}

	/**
	 * @see UserOptionOutput::getMediumOutput()
	 */
	public function getMediumOutput(User $user, $optionData, $value)
	{
		if (empty($value) || $value == '0')
			return '';

		WCF :: getTPL()->assign('value', $value);
		WCF :: getTPL()->assign('size', 'M');

		return WCF :: getTPL()->fetch('statusIcon');
	}

	/**
	 * @see UserOptionOutput::getOutput()
	 */
	public function getOutput(User $user, $optionData, $value)
	{
		if (empty($value) || $value == '0')
			return '';

		WCF :: getTPL()->assign('value', $value);
		WCF :: getTPL()->assign('size', 'L');

		return WCF :: getTPL()->fetch('statusIcon');
	}
}
?>
```
Oder eventuell weiss jemand wie man das in einen Eventlistener umwandeln kann?


----------

