NOF-Forum  |  Referenzen  |  Kontakt  |  Impressum  |  Sitemap

NetObjects Fusion - Tutorials
NOF Tutorials und Hilfe von Thomas Frei-Herrmann

Diese Box öffnet von oben in einer absoluten und zentrierten Position.

Die Box hat einen Rahmen links, rechts und unten.

Bitte stellt eventuelle Fragen in unserem NOF-Forum, auch ich helfe dort immer gerne.

Logo

Tutorial Formular oder Box einblenden mit jQuery

Gefunden auf: tutorialrepublic.com

Klickt auf den Button “Slide Toggle” für eine Box oben und auf den Button “Slide Footer” oder die Grafiken links für eine jQuery-Navi und den Footer.

 

 

Guckt Euch zum besseren Verständnis auch diese Testseite von mir an, die ihr Euch hier downloaden könnt. Hier meine responsive NOF-Version.

Dieses Tutorial ist nur für fortgeschrittene Benutzer gedacht.

  1. Toggle Slider auf dieser Seite

Zunächst benötigt Ihr den Aufruf zu einer jQuery-Datei, damit die Effekte überhaupt dargestellt werden können. Fügt diese Verlinkung in die HTML von Eurem Layout ein.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

Hier das Skript von dieser Seite, das ihr ebenfalls “Zwischen Head Tags” einfügt, hier von oben in einer Geschwindigkeit von 1000 Millisekunden:

<!-- Slider von oben nach unten -->
<script type="text/javascript">
    $(document).ready(function(){
        $(".slide-toggle").click(function(){
            $(".box").slideToggle(1000);
            });
        });
</script>

Unten ein alternatives Skript, das von links nach rechts öffnet und schließt. Hier auch in einer Geschwindigkeit von 1000 Millisekunden:

<!-- Slider von links nach rechts -->
<script type="text/javascript">
    $(document).ready(function(){
        $(".slide-toggle").click(function(){
            $(".box").animate({
                width: "toggle"
            },1000);
            $(".box").show();
        });
    });
</script>

Nun benötigt Ihr noch ein wenig CSS. Hier die CSS für den Slider dieser Seite, die auch “Zwischen Head Tags” gehört oder in eine CSS-Datei eingearbeitet wird. Der blau markierte Teil zentriert die Box horizontal. Der z-index bestimmt die Vordergrund-Position der Box über anderen Objekten der Seite.

<!-- Style Box -->
<style type="text/css">
    .box{
        float:left;
        overflow: hidden;
        background: #F4F4F4;
        border-style: solid;
        border-width: 0px 1px 1px 1px;
        border-color: #888888;
        border-radius: 0px 0px 5px 5px;
        box-shadow: 5px 5px 5px #888888;
        width: 600px;
        display: none;
        margin: auto;
        left: 0; right: 0;
        position: absolute;

        z-index: 2000;
    }
    .box-inner{
        width: 577px;
        padding: 10px;
    }
</style>

Zur Anzeige der Box fügt Ihr diesen DIV-Container in den HTML-Code Editor eines Textfeldes ein, das ich hier direkt unter meiner Navi aufgezogen habe. Beide <div> erhalten die CSS-Klassen aus dem Style oben. Hier mein Container als Beispiel:

<div class="box">
    <div class="box-inner">
        <center>
        <p>Diese Box öffnet von oben in einer absoluten und zentrierten Position.</p>
        <p>Die Box hat einen Rahmen links, rechts und unten.</p>
        <p>Bitte stellt eventuelle Fragen in unserem <a href="http://www.Seite.de" target="_blank">NOF-Forum</a>, auch ich helfe dort immer gerne.</p>
        <p><img src="../NOF-Hilfe-Tommy.png" alt="Logo" title="Willkommen bei NOF-Tutorials.com"></p>
        </center>
    </div>
</div>

Nun noch der Button “Slide Toggle” zur Anzeige der Box. Zieht Euch hierfür wieder ein Textfeld auf und kopiert den Code unten in den HTML-Code Editor des Textfeldes. Hier habe ich eine absolute Position gewählt und den “z-index” etwas höher als jenen der Box gestellt, damit der Button nicht hinter der Box verschwinden kann. Der Aufruf der Box wird also durch die class=”slide-toggle” der JavaScript-Funktion ausgelöst.

<button type="button" style="position: absolute; z-index: 2001;" class="slide-toggle">Slide Toggle</button>

  1. Formular Seite

Hier noch einige Bemerkungen zu meiner Seite mit dem Formular im Slider.

Hier habe ich die gleichen Skripte verwendet, nur dass ich in der Box eine Formular anzeigen lasse, das ich mit dem Formular-Generator erstellt habe, als Datei formular.php gespeichert und in einem Iframe in der Box anzeigen lasse. Man könnte das Formular auch direkt einbauen, so hat es aber den Vorteil, dass die Skripte vom Formular eigenständig im Iframe wirken können, da ich hier z.B. auch noch auf eine Erfolgsseite “danke.html” in der Box weiterleite.

<div class="box">
    <div class="box-inner">
       <iframe name="Fenster" width="100%" height="650px" scrolling="yes" FrameBorder="0" src="./formular.php"></iframe>
    </div>
</div>

Für die Abdunklung der Seite habe ich folgende, zusätzliche CSS mit der id="grayout" erstellt. Hier die gesamte CSS der Seite:

<!-- Style Slider der Formular-Box -->
<style type="text/css">
    .box{
        float:left;
        overflow: hidden;
        display: none;
        background: #E2E2E2;
        border: 2px solid #ffffff;
        border-radius: 5px;
        box-shadow: 10px 10px 10px #000000;
        width: 660px;
        height: 700px;
        overflow: auto;
        margin: auto;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        z-index: 2000;
    }
    .box-inner{
        width: 600px;
        padding: 20px;
        z-index: 2000;
    }
    /* Abdunklung der Seite */
    #grayout {
        position: fixed;
        left: 0px;
        top: 0px;
        height: 100%;
        width: 100%;
        background-color: black;
        opacity: 0.5;
        z-index: 1001;
    }

</style>

Für die id="grayout" benötigt Ihr zum Anzeigen noch einen DIV-Container mit dieser ID. Damit die Verdunklung erst mit dem Klick auf den Button angezeigt wird, habe ich diesem Container noch eine style="display: none;" (nicht anzeigen) Anweisung gegeben. Kopiert diesen Code wieder in den HTML-Code Editor eines Textfeldes.

<div id="grayout" style="display: none;"></div>

Für den Button “Kontakt” auf meiner Formular Seite, habe ich nun noch zusätzlich, mittels eineronclickAnweisung, diese ID mit der jQuery-Option “toggle” (in eine Geschwindigkeit von 800 Millisekunden), gegeben.

<button type="button" class="slide-toggle" onclick="$('#grayout').toggle(800); return false;">Kontakt</button>

  • Bemerkung:

    Der “z-index”, der verschiedenen Objekte, kann bei Euren Seiten ganz anders sein. Das müsst Ihr entsprechend ausprobieren und anpassen, sodass die Box und der Schatten immer über den Objekten liegen.

    Natürlich könnt Ihr anstelle eines Buttons auch ebensogut eine Grafik verwenden. Als Beispiel habe ich hier die Grafik unten links eingesetzt, der ich dann einfach “im Tag” der Objekt-HTML die class="slide-toggle-footer" gegeben habe.
Footer
Navigation

 

Viel Erfolg!

Diese Box öffnet von unten in einer fixierten und zentrierten Position.

Was ein Footer mit zusätzlichen Infos sein könnte

Bitte stellt eventuelle Fragen in unserem NOF-Forum, auch ich helfe dort immer gerne.

Logo

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik