Ergebnis 1 bis 5 von 5

Thema: Div anzeigen/nicht anzeigen

  1. #1
    incendium
    Gast

    Standard Div anzeigen/nicht anzeigen

    Hi,

    ich habe folgenden Code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    </head>
    <body>
    Öffnen
    <div style="position&#58;absolute; top&#58;200px; left&#58;200px; width&#58;300px; height&#58;200px; border&#58;1px solid;">
    <div style="width&#58;300px; height&#58;20px; background-color&#58;gray;">
    <div style="float&#58;left;">Heading</div>
    <div style="float&#58;right">CLOSE</div>
    </div>
    Hier der ganz normale Content. Blablabla
    </div>
    </body>
    </html>
    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    mal schnell zusammengeschustert (bin net so gut in js)
    Code:
    <script type="text/javascript">	
    	function zeige&#40;obj&#41;
           &#123;
    		document.getElementById&#40;obj&#41;.style.display = 'inline';
    	&#125;
    </script>
    als obj übergibst die id von dem div, das versteckt werden soll
    standardwert is display:none (im css)

    aufruf
    Code:
    onclick="zeige&#40;'id-von-div'&#41;;"
    ps: so kannst es ausblenden: document.getElementById('more'+i).style.display = 'none';
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  3. #3
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    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:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <script type="text/javascript">   
       function zeige&#40;obj&#41;&#123;
       var target = document.getElementById&#40;obj&#41;;
       if&#40;target.style.display=="none"&#41;&#123;target.style.display="inline"&#125;
       else&#123;target.style.display="none"&#125; 
       &#125;
      
      
    </script> 
    
    
    </style>
    </head>
    <body>
    <span onclick="zeige&#40;'layerX'&#41;;">Öffnen</span>
    <div id="layerX" style="position&#58;absolute; top&#58;200px; left&#58;200px; width&#58;300px; height&#58;200px; border&#58;1px solid; display&#58;none;">
    <div style="width&#58;300px; height&#58;20px; background-color&#58;gray;">
    <div style="float&#58;left;">Heading</div>
    <div style="float&#58;right" onclick="zeige&#40;'layerX'&#41;;">CLOSE</div>
    </div>
    Hier der ganz normale Content. Blablabla
    </div>
    </body>
    </html>
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  4. #4
    incendium
    Gast

    Standard

    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:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http&#58;//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&#40;&#41; &#123;
           document.onmousemove = drag;
           document.onmouseup = drop;
       &#125;
    
       function moveable&#40;obj&#41; &#123;
           object = obj;
           object_x = mouse_x - object.offsetLeft;
           object_y = mouse_y - object.offsetTop;
       &#125;
    
       function drop&#40;&#41; &#123;
           object = null;
       &#125;
    
       function drag&#40;event&#41; &#123;
           mouse_x = document.all ? window.event.clientX &#58; event.pageX;
           mouse_y = document.all ? window.event.clientY &#58; event.pageY;
    
           if&#40;object != null&#41; &#123;
               object.style.left = &#40;mouse_x - object_x&#41; + "px";
               object.style.top = &#40;mouse_y - object_y&#41; + "px";
           &#125;
       &#125;
          function zeige&#40;obj&#41;&#123;
       var target = document.getElementById&#40;obj&#41;;
       if&#40;target.style.display=="none"&#41;&#123;target.style.display="inline"&#125;
       else&#123;target.style.display="none"&#125;
       &#125;
    
      </script> 
     </head>
    
     <body onload="draganddrop&#40;&#41;">
     Öffnen
       <div onmousedown="moveable&#40;this&#41;" id="area" style="position&#58;absolute; top&#58;200px; left&#58;200px; width&#58;300px; height&#58;200px; border&#58;1px solid; display&#58;none;">
       <div style="width&#58;300px; height&#58;20px; background-color&#58;gray;">
    <div style="float&#58;left;">Heading</div>
    <div style="float&#58;right" >CLOSE</div>
    </div>
    Hier der ganz normale Content. Blablabla
       </div> 
     </body>
    </html>
    mfg

  5. #5
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. Chat - ö.ä.ü nicht anzeigen
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 09.08.2008, 01:52
  2. JPG per Mausklick downloaden nicht anzeigen!
    Von White1 im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 0
    Letzter Beitrag: 02.05.2007, 20:46
  3. myblog- Zusatzseiten nicht anzeigen
    Von apfelmus im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 02.02.2007, 20:23
  4. Videos abspielen und nicht anzeigen
    Von Dödel im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 29.11.2004, 14:01
  5. gleiche Strings nicht anzeigen!
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 12.11.2004, 19:22

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •