Ergebnis 1 bis 5 von 5

Thema: Layer langsam öffnen lassen

  1. #1
    HTML Newbie
    Registriert seit
    27.02.2014
    Beiträge
    7
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard Layer langsam öffnen lassen

    Hallo Leute

    Folgendes:
    Ich habe hier eine schmale Box mit einer "Überschrift" und einem Pfeil an der linken Seite (in Form eines Bildes). Wenn man auf den Pfeil klickt, öffnet sich diese Box nach unten und zusätzlich kommt ein Text zum Vorschein (unter die Überschrift), sie klappt sozusagen auf. Das funktioniert auch ganz wunderbar, nur hätte ich gerne, dass sich diese Box langsam nach unten öffnet. Ich habe zwar einige Funktionen im Web gefunden, bin jedoch irgendwie nicht klargekommen...
    Hier mal der nackte Code (ohne irgendwelche Verschönerungen):

    HTML-Code:
    <html>
        <head>    
            <script type="text/javascript">
                    function showHideLayer(id){
                        e = document.getElementById(id);
                        
                        if(e.style.display=="block"){
                            e.style.display = "none";
                            
                        } else {
                            e.style.display = "block";
                            
                        }
                    }
                            
                </script>
        </head>
        <body>
            <div id="box" style="padding:6px 90px;margin-bottom:8px;background-color:green;">                        
                <span id="header_style">...Ueberschrift...</span>    
                <a href="alternativerLink" onclick="showHideLayer('meinLayer1');return(false)"><span id="mehr_anzeigen1" onClick="javascript:changeText1()" style="position:absolute;left:19px;top:9px;" title="mehr/weniger anzeigen..."><img src="pfeil_unten_klein.png" height="25" onmouseover="this.src='pfeil_unten_groß.png'" onmouseout="this.src='pfeil_unten_klein.png'"/></span></a>
                <div id="meinLayer1" style="display:none;"><br />
                <span id="text" style="font-size:15px;font-weight:bold;">TextTextTextTextTextTextTextTextTextTextTextTextTextText<br /><br /></span>
                </div>
            </div>    
        </body>
    </html>
    Ich wäre sehr dankbar über hilfreiche Antworten

    Liebe Grüße
    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
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Layer langsam öffnen lassen

    Hallo,

    ein paar zusätzliche Informationen wären hilfreich:

    Welcher Doctype?

    Lösung mit CSS oder JavaScript?

    Mit welchen Browsern (speziell welche Versionen des IE) soll sie Lösung funktionieren?

    Gruss

    MrMurphy

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    27.02.2014
    Beiträge
    7
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Layer langsam öffnen lassen

    Hallo MrMurphy,

    erstmal vielen Dank für die schnelle Antwort!

    Der Doctype:
    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    Ob CSS oder JavaScript ist mir im Prinzip egal, hauptsache es funktioniert

    Das ganze sollte auf jeden Fall mit Firefox, Chroome funktionieren, möglicherweiße auch mit IE (ab Version 8/9 oder höher), Opera oder Safari (weiß nicht, inwieweit das geht, oder nötig ist), aber das ist nicht soo wichtig.

    Hoffe, es ist im Rahmen des Machbaren

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    27.02.2014
    Beiträge
    7
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Layer langsam öffnen lassen

    Keiner, der helfen kann???

  5. #5
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Layer langsam öffnen lassen

    Hier mal ein Beispiel mit opacity.
    HTML-Code:
    <html>
        <head>    
            <script type="text/javascript">
                    function showHideLayer(id){
                        e = document.getElementById(id);
                        
                        if(e.style.display=="block"){
                            e.style.display = "none";
                            
                        } else {
                            e.style.display = "block";
                            fadeIn(e);
                            
                        }
                    }
                    
                    function fadeIn(e, time) {
                      e.style.opacity = 0;
                      var op = 0;
                      
                      var animate = function() {
                        if(op < 1) {
                          e.style.opacity = op += 0.1;
                          setTimeout(animate, time || 200); // time in miliseconds for each animation step, defaults to 200
                        }
                      }
                      animate();
                    }
                </script>
        </head>
        <body>
            <div id="box" style="padding:6px 90px;margin-bottom:8px;background-color:green;">                        
                <span id="header_style">...Ueberschrift...</span>    
                <a href="alternativerLink" onclick="showHideLayer('meinLayer1');return(false)"><span id="mehr_anzeigen1" onClick="javascript:changeText1()" style="position:absolute;left:19px;top:9px;" title="mehr/weniger anzeigen..."><img src="pfeil_unten_klein.png" height="25" onmouseover="this.src='pfeil_unten_groß.png'" onmouseout="this.src='pfeil_unten_klein.png'"/></span></a>
                <div id="meinLayer1" style="display:none;"><br />
                <span id="text" style="font-size:15px;font-weight:bold;">TextTextTextTextTextTextTextTextTextTextTextTextTextText<br /><br /></span>
                </div>
            </div>    
        </body>
    </html>
    Würde aber empfehlen für sowas auf Frameworks zurückzugreifen.
    https://api.jquery.com/slideDown/


    Ansonsten kannst du es selbst zum "langsam öffnen" umbauen indem du eine andere CSS-Eigenschaft änderst (Höhe z.B.).

  6. Folgende User finden die Antwort von Grevas gut:


Ähnliche Themen

  1. Antworten: 0
    Letzter Beitrag: 13.02.2013, 14:12
  2. neue Seite langsam einfaden und automatisch ausfade lassen?
    Von cellardoor im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 13
    Letzter Beitrag: 17.03.2010, 16:32
  3. Java Script - Layer runterfahren lassen
    Von Darkxor im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 9
    Letzter Beitrag: 14.04.2009, 04:06
  4. Tooltip langsam einblenden lassen
    Von hinkel11 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 28.02.2009, 20:36
  5. Homepage Seiten langsam einblenden lassen
    Von Keath im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 11.04.2008, 08:48

Stichworte

Berechtigungen

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