noscript information

cottton · 3. September 2012

Zitat von Roland

ich würde dann einfach sagen wer soweit geht ist selber schuld die mühe die dann auch noch darauf hinzuweisen, werden die schon merken was sie davon haben^^

correcta ;D

darf man das verwenden?

unkown-6363 · 3. September 2012

klar.

*** EDIT ***

Für alle die es verwenden wollen, oder Leute die wissen wollen wie mein Code(-schnipsel) funktioniert, habe ich hier nochmal meinen Code (ein wenig anders strukturiert zwecks besserer Übersicht) kommentiert.

CSS

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <style>
    body
    {
        margin: 0;
        padding: 0;
    }
    </style>
    <style type="text/css">
    @-moz-keyframes     box-einfahren
    {
        0%  {top: -40px;}
        100%{top: 0px;  }
    }
    @-webkit-keyframes  box-einfahren
    {
        0%  {top: -40px;}
        100%{top: 0px;  }
    }
    @-o-keyframes       box-einfahren
    {
        0%  {top: -40px;}
        100%{top: 0px;  }
    }
    @-ms-keyframes      box-einfahren
    {
        0%  {top: -40px;}
        100%{top: 0px;  }
    }
    @keyframes          box-einfahren
    {
        0%  {top: -40px;}
        100%{top: 0px;  }
    }
    /*
     * Das ist die Animation, welche <noscript> beim Aufrufen der Seite von oben in die Seite hereinschiebt.
     * Für weitere Informationen/Details, schaue in den Kommentaren bei noscript{}
     */

    noscript
    {      
        display:            block;
        position:           absolute;
        z-index:            999;
        left: 0;right: 0;
        top:                -40px;
        -moz-animation:     box-einfahren 1s alternate;
        -webkit-animation:  box-einfahren 1s alternate;
        -o-animation:       box-einfahren 1s alternate;
        -ms-animation:      box-einfahren 1s alternate;
        animation:          box-einfahren 1s alternate;
        top:                0px;
        /*
         * <noscript> ist anfangs nicht sichtbar.
         *  Dies wird mit Hilfe des top:; Attributes realisiert, indem <noscript> von -40px zu 0px; verschoben wird.
         * 40px, da der "immer sichtbare" #Block_1 40px hoch ist.
         * Das Animationsende wird mit top:0px; eingerastet.
         */

        box-shadow:         1px 0px 2px #333;
        /*
         * Horizontale Schattenlinie unterhalb von <noscript>
         */

        height:             40px;
        overflow:           hidden;
        /*
         * die Sicht auf #Block_2 wird verdeckt, welche später durch ein padding-bottom:; wieder freigegeben wird
         * Für weitere Informationen/Details, schaue in den Kommentaren bei noscript:hover{}
         */

        background-color:   #FFF9D7;
        font-family:        lucida grande,calibri,tahoma,verdana,arial,sans-serif;
        color:              #333;
        text-align:         center;
        /*
         * diverse Einstellungen bezüglich der Schrift
         */

        -moz-transition:            all 1s ease;
        -webkit-transition:         all 1s ease;
        -ms-transition:             all 1s ease;
        -o-transition:              all 1s ease;
        transition:                 all 1s ease;
        /*
         * Die :hover Effekte werden zu einer sanften Animation
         */
    }
    noscript:hover
    {
        padding-bottom:     20px;
        /*
         * #Block_2 wird sichtbar
         * <noscript> wird quasi in die Länge gezogen solange man mit dem Cursor <noscript> überfährt
         */
        cursor:             help;
        background-color:   #FFF9C7;
        /*
         * leichte Kräftigung der Hintergrundfarbe, für einen stärkeren Kontrast
         */
    }
    noscript #Block_1
    {
        display:                block;
        width:                  280px;
        margin:                 0 auto;
        height:                 40px;
        font-size:              20px;
        line-height:            40px;
        font-weight:            800;
        background-image:       url( "cursor.png" );
        background-position:    right;
        background-repeat:      no-repeat;
    }
    noscript #Block_2
    {
        display:                inline-block;
        margin:                 0 auto;
        /*
         * Die Box passt sich der Breite des Inhaltes an und wird dann zentriert.
         */

        height:                 20px;
        font-size:              15px;
        line-height:            20px;
    }
    noscript #Block_2 a:link, noscript #Block_2 a:visited
    {
        text-decoration:        none;
        color:                  #4444ff;
    }
    noscript #Block_2 a:hover, noscript #Block_2 a:focus
    {
        text-decoration:        underline;
    }
    </style>  
</head>                                                      
<body>
    <noscript>
        <div id="Block_1">
            Javascript ist deaktiviert.
        </div>
        <div id="Block_2">
        Bitte aktivieren Sie Javascript, oder <a href="#">installieren Sie einen aktuellen Webrowser</a>.
        </div>
    </noscript>   
</body>
</html>

Alles anzeigen

noscript information

Jetzt mitmachen!

Teilen