Bootstrap: overlay-lade-Bildschirm + Umschalten jumbotron

Ok so, ich habe vielleicht 20 verschiedene stackexchange Antworten auf jedes dieser Probleme, und ich kann immer noch nicht lösen, so ist es Zeit, dass ich Fragen und hoffentlich jemand kann mir aus diesem Wald:

Mache ich eine einfache website, und ich wollte gerne ein overlay-Bildschirm enthält ein lade - /Fortschrittsbalken, und nur im Laufe von 3 Sekunden, bevor es verblasst und zeigt die Website. Ich wollte auch hinzufügen, ein logo in der Mitte genau über der bar. Ich sah einige Videos auf Arabisch, aber Sie bekam aus der hand irgendwie, ich wusste nicht, was er sagen wollte, aber ich dachte, ich könnte versuchen, seinen code zu ändern, aber das hat nicht funktioniert entweder.

Auch, ich habe eine jumbotron im code nenne ich "jumbotronTwo", und im Grunde, was Sie tun soll, ist, dass, wenn Sie auf das Menü-Symbol und im dropdown-Menü angezeigt wird, klicken Sie auf eine der Optionen, und dann das Menü scrollen soll zurück und der jumbotron angezeigt werden soll. Bisher habe ich nur in der Lage, die jumbotron selbst und die Farbe, Größe, füllen es mit text-usw., Ich habe versucht, mit javascript und jquery zu machen, erscheinen und verschwinden "onclick", aber keiner schien zu funktionieren, ich fange an zu denken, vielleicht es hat zu tun mit dem, was Bibliotheken, die ich habe?
Ich habe keine Ahnung, was das sein könnte übertrumpfen, so brauche ich jemanden, um einen Blick auf den code.

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="utf-8">
        <title>Twenty Eight Interiors</title>
        <meta name="description" content="Wiredwiki App">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">


    </head>

Ich denke, diese hier sind wichtig, um zu zeigen, in Fall, dass ich vergaß, manche Bibliothek oder so etwas, können Sie es aus. Ich habe einige CSS als gut, aber schneiden Sie es aus, wenn Sie brauchen, es zu sehen ich kann es zeigen. Hier ist die "Fleisch und Kartoffeln":

    <body>
        <!-- jumbotron-->

        <div class="jumbotron" id="jumbotronOne">
            <div class="container text-center">
                <img src="Untitled.png">
            </div>
        </div>

    <!-- Navbar -->
        <nav class="navbar navbar-inverse" id="my-navbar" style="font-family:Webdings;">
            <div class="container">
                <div class="navbar-header" id="oneDiv">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" id="iconButton">
                        <span class="glyphicon glyphicon-menu-hamburger"></span>
                    </button>

                <a href="" class="navbar-brand"><font color="white">MENU</font></a>
                </div><!-- Navbar Header -->
                <div class="collapse navbar-collapse" id="navbar-collapse" align="center">
                    <ul class="nav navbar-nav" id="firstOne">
                        <li><a href="#" id="designProcess" role="button">Design Process</a></li>
                        <li><a href="#" id="profile">Profile</a></li>
                        <li><a href="#" id="contactInfo">Contact Info</a></li>
                    </ul>
                    <ul class="list-inline" id="secondOne">
                        <li><a href="#" class="socialicon"><img src="facebook.png" hspace="30"></a></li>
                        <li><a href="#" class="socialicon"><img src="twitter.png" hspace="30"></a></li>
                        <li><a href="#" class="socialicon"><img src="instagram.png" hspace="30"></a></li>
                    </ul>
                </div>
            </div><!-- End Container img src="twitter.png"-->
        </nav><!-- End navbar -->

      <div class="jumbotron" id="jumbotronTwo">
      <div class="container">
      <h2>Headline goes here in one, two or three lines like this</h1>
      <p>...</p>
      </div>
      </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    </body>
    </html>

Ich hatte sogar Probleme mit der javascript-Arbeit für die glyphicon, ich will es ändern, wenn ich es auf, und immer wieder; ich habe keine Ahnung, was ich falsch mache, versucht, viele der möglichen Lösungen von stackexchange, aber auch dies scheint zu zeigen, dass es etwas anderes ist.

Vielen Dank im Voraus

Ist das ein "fake" Ladebalken oder sind Sie tatsächlich zu laden was?!?
Ein fake, da gibt es nicht viel zu laden. Und ich würde vorstellen, es würde nicht gesehen werden, für lange, der Punkt, der ist es, schön Aussehen. Aber wenn Sie mir zeigen, wie man ein echtes, würde ich annehmen, dass auch.

InformationsquelleAutor user1770094 | 2015-03-01

9

Wenn es nur ein splash-Seite, dann fügen Sie ein div-Element an der Spitze von Ihrem Körper und wickeln Sie Ihre bestehende Seite in ein div mit display:none...
```
<body>
    <div id="loader">
        <h4>Logo and progress bar here...</h4>
    </div>
    <div id="your-page" style="display:none">
        
    </div>
```
Dann fügen Sie ein wenig jquery...
```
jQuery(document).ready(function(){
    $( "#loader" ).delay(800).fadeOut(400, function(){
        $( "#your-page" ).fadeIn(400);
    });  
});
```
Siehe Beispiel arbeiten hier.

Wenn Sie wollen animieren, Ihre Fortschritte bar einfach dann empfehle ich dieses plugin.

Für die glyphicon verwenden Sie die folgende js...
```
$( "#iconButton" ).click(function(){
    $(this).html('<span class="glyphicon glyphicon-menu-cheeseburger"></span>');
});
```
Natürlich ersetzen Sie die cheeseburger mit welchem Symbol Sie verwenden möchten! Siehe fiddle hier für dieses bit (ohne die eigentlichen Symbole, aber Sie sollten Sie bekommen die Idee).

Ein großer Schritt in die richtige Richtung, vielen Dank! Ich werde ein wenig länger warten für weitere Antworten zu pop-up, da es mehr beantwortet werden, aber ich Schätze es so sehr!
Hinzugefügt Lösung glyphicon-Abfrage. Ich verstehen nicht wirklich, was du da beschreibst mit dem jumbotron Teil...
Was für eine Erleichterung 😀 Ist dann die Rückseite(wie wenn ich es machen will Umschalten, so dass ich es auf änderungen und die änderungen wieder zurück, wenn ich auf einmal) gemacht, mit einer if-Anweisung oder wäre es ein bisschen komplizierter?
Ich konnte fix die jumbotron Umschalten, auch Dank Ihnen, Sie haben wirklich verdient, mehr als die ein upvote, die ich geben konnte. Vielen Dank noch einmal! 😀
Mehr als willkommen. Aktualisiert die Geige zu zeigen, einen Weg, um die Knebel (es gibt einige), obwohl es klingt wie Sie es geschafft haben es sich schon 🙂

InformationsquelleAutor DevFox
0

Sehe ich Sie laden sowohl jQuery 1.11.2 und 2.1.3, die fügt eine zusätzliche Belastung. Das ist natürlich nicht gut und ich würde vorschlagen, nur mit 3.1.1

In diesem Fall @DevFox zweiten code müsste aktualisiert werden, denn folgende, da (document).ready wird nicht mehr unterstützt.
```
$(function(){
    $( "#loader" ).delay(800).fadeOut(400, function(){
        $( "#your-page" ).fadeIn(400);
    });  
});
```
InformationsquelleAutor Jorim Tielemans

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.