Div anzeigen/nicht anzeigen

incendium

Hi,

ich habe folgenden Code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
Öffnen
<div style="position:absolute; top:200px; left:200px; width:300px; height:200px; border:1px solid;">
<div style="width:300px; height:20px; background-color:gray;">
<div style="float:left;">Heading</div>
<div style="float:right">CLOSE</div>
</div>
Hier der ganz normale Content. Blablabla
</div>
</body>
</html>

Alles anzeigen

Wie kann ich es realisieren, dass beim Seitenaufruf das Div versteckt ist.(nicht zu sehen!). Wenn ich dann Öffnen drücke soll es erscheinen. Und der Close Knopf soll es wieder verstecken. Kann ich das mit Javascript realisieren? Ich kann die Sprache leider nicht so gut.

mfg

driver

mal schnell zusammengeschustert (bin net so gut in js)

Code

<script type="text/javascript">	
	function zeige(obj)
       {
		document.getElementById(obj).style.display = 'inline';
	}
</script>

als obj übergibst die id von dem div, das versteckt werden soll
standardwert is display:none (im css)

aufruf

Code

onclick="zeige('id-von-div');"

ps: so kannst es ausblenden: document.getElementById('more'+i).style.display = 'none';

synaptic

geht auch mit style.visibility="hidden";

hängt halt davon ab in wiefern du das realisieren willst, und evtl auch ob da ne form von animation sein soll..
also sowas wie nen aufzoomen...
wenn du etwas genauer beschreibst wie es sein soll, kann ich dir des scripten..
zum beispiel so:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">   
   function zeige(obj){
   var target = document.getElementById(obj);
   if(target.style.display=="none"){target.style.display="inline"}
   else{target.style.display="none"} 
   }


</script> 




</style>
</head>
<body>
<span onclick="zeige('layerX');">Öffnen</span>
<div id="layerX" style="position:absolute; top:200px; left:200px; width:300px; height:200px; border:1px solid; display:none;">
<div style="width:300px; height:20px; background-color:gray;">
<div style="float:left;">Heading</div>
<div style="float:right" onclick="zeige('layerX');">CLOSE</div>
</div>
Hier der ganz normale Content. Blablabla
</div>
</body>
</html>

Alles anzeigen

incendium

Hi,

danke für eure Hilfe. Ich habe aber noch eine Frage:

Ich habe den Code von Synaptic übernommen und hab meinen Layer verschiebbar gemacht. Nun kann man den Layer verschieben. Ich möchte aber, dass man nur durch ziehen an den oberen grauen div sich der layer verschiebt. Wenn man in den Content Bereich klickt soll er sich nicht verschieben. Wie realisiere ich das?

CODE:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Drag and Drop</title>
  <script type="text/javascript">
   var object = null;
   var object_x = 0;
   var object_y = 0;
   var mouse_x = 0;
   var mouse_y = 0;


   function draganddrop() {
       document.onmousemove = drag;
       document.onmouseup = drop;
   }


   function moveable(obj) {
       object = obj;
       object_x = mouse_x - object.offsetLeft;
       object_y = mouse_y - object.offsetTop;
   }


   function drop() {
       object = null;
   }


   function drag(event) {
       mouse_x = document.all ? window.event.clientX : event.pageX;
       mouse_y = document.all ? window.event.clientY : event.pageY;


       if(object != null) {
           object.style.left = (mouse_x - object_x) + "px";
           object.style.top = (mouse_y - object_y) + "px";
       }
   }
      function zeige(obj){
   var target = document.getElementById(obj);
   if(target.style.display=="none"){target.style.display="inline"}
   else{target.style.display="none"}
   }


  </script> 
 </head>


 <body onload="draganddrop()">
 [url='#']Öffnen[/url]
   <div onmousedown="moveable(this)" id="area" style="position:absolute; top:200px; left:200px; width:300px; height:200px; border:1px solid; display:none;">
   <div style="width:300px; height:20px; background-color:gray;">
<div style="float:left;">Heading</div>
<div style="float:right" >[url='#']CLOSE[/url]</div>
</div>
Hier der ganz normale Content. Blablabla
   </div> 
 </body>
</html>

Alles anzeigen

mfg

synaptic

also im ie6 macht das ding das genau so, wie du willst.. nur im ff is der gaze kasten draggable.. ie7 konnt ich net testen hab mir den schmarrn nich installiert

Div anzeigen/nicht anzeigen

Tags

Benutzer online in diesem Thema