Button Klick nächster Text

[Cjls96]

Ich muss onclick verwenden und dann die Funktion beschreiben, soweit bin ich schon. Aber wie wird umgesetzt, dass in dem Feld, in dem bisher ein Text stand, ein neuer Text statt des alten angezeigt wird?

 

[Madman1209]

Hi,

indem du den Text durch neuen Text ersetzt? Was genau ist daran unverständlich?

Die Frage ist eher, woher der Text genau kommt. Ist der hartcodiert irgendwo im JS / HTML Teil, wird der per AJAX nachgeladen? Woher kommen die Texte?

Und soll es plain JS sein oder wird irgendein Framework (jQuery etc) verwendet?

VG,
Mad

 

[Cjls96]

Vielleicht sollte ich noch erwähnen, dass ich das ungefähr vier bzw. fünf mal machen will, also von Text1 bis Text5, jeweils immer mit vor und zurück

 

[Madman1209]

Hi,

beantworte doch bitte erstmal die Fragen

VG,
Mad

 

[Sithys]

Sitzt Du gerade in der Computer-AG oder was ist das für eine Frage?

 

[Cjls96]

jQuery kann verwendet werden (benutze das Framework Bootstrap und deshalb wurde jQuery schon mit eingebunden) und bisher war die Idee ihn einfach in den Html Code zu schreiben. Habe bisher nur den einen Text, wusste nicht wie ich die anderen Textabschnitte direkt hier implementieren kann ohne dass sie gesehen werden. Was wäre denn der Vorteil ihn per AJAX nachzuladen?

 

[Sithys]

Je nachdem wie intensiv Du Dich langfristig mit dem Thema beschäftigen möchtest, würde ich Dir sowas wie Angular / React empfehlen

 

[Madman1209]

Hi,

Vorteil oder Nachteil sei mal dahingestellt, ist einfach ein komplett anderer Ansatz.

Du kannst jetzt entweder den Text (entweder ".html" oder ".text" in jQuery, nachlesen) deines DIVs ändern (gib dem eine ID, dann kannst du direkt drauf zugreifen).

Oder du erstellst mehrere und blendest die mit "show" und "hide" aus und ein.

Gibt viele Wege. Hängt davon ab, was Vorgabe ist und was am Ende da sein soll.

VG,
Mad

 

[Joshinator]

Hört sich für mich eigentlich Recht einfach an.

Du erstellst dir deine Seiten mit HTML und packst die in einen Div der nur eine Seite anzeigt.
Heißt dein Wrapper-Div ist z.B. 100px breit wenn eine Seite 100px breit ist, mit overflow:Hidden kannst du die überstehenden Elemente verstecken.

Mit jQuery gehst du dann her und updatest margin-left vom Wrapper. Auf Seite 1 hast du dann margin-left 0%, auf Seite 2 dann -100%, Seite 3 dann -200%.
Mit CSS Transitions kannst du das dann auch problemlos animieren (das die Seiten nach links/rechts sliden).
Die Logik dafür ist ja nicht wirklich schwer, brauchst nur irgendwo im onclick für die vor/zurück-Buttons den Style zu setzen und den aktuellen Index upzudaten.

 

[Cjls96]

Ich denke ich mache es per AJAX, habe im Hauptteil der Seite noch ein iframe und ein Video, das dynamisch nachgeladen werden soll. Vielen Dank für eure Hilfe

 

[Madman1209]

Hi,

"irgendwie" muss das rein, ganz genau. Und das "wie" ist abhängig davon, was für Werkzeuge drum herum im Einsatz sind, wie ausgelesen werden soll, ob das nur lokal laufen muss oder übers Web und und und.

Lies dich doch erstmal in AJAX ein, bevor du dich dafür entscheidest das einzusetzen. AJAX ist kein Allheilmittel.

VG,
Mad

 

[Cjls96]

Ich habe Daten auf einem Server liegen, die dann je nach Aktion verwendet in meiner Webapplikation werden sollen. So wie ich es verstanden habe, ist doch genau dafür Ajax da, um ohne die Seite nachzuladen die Inhalte zu verändern.

 

[Joshinator]

Genau, Ajax ist dazu da Seiteninhalte dynamisch upzudaten.
Die Frage ist nur wie sinnvoll das am ende in deinem Fall ist.
Wird der Nutzer oft zwischen den Tabs hin und her clicken? Würde heißen wenn jemand "weiter, weiter, zurück, zurück" navigiert machst du 4 Calls, heißt 4 Mal muss ein HTTP Request gemacht werden (je nachdem wie der Browser entscheidet kann auch aus dem Cache geladen werden).
Je nachdem wie groß der Inhalt ist macht das Sinn oder eben nicht.

Wenn du z.B. denkst das ein Nutzer alle dieser "Tabs" anklickt und dort im Endeffekt 4-5 Zeilen geladen werden macht es kaum Sinn. Lohnt es sich initial (also direkt im HTML) etwas mehr zu Laden und dafür dann keine zusätzlichen HTTP-Verbindungen via Ajax zu machen oder nicht?

Google würde dir das auch sagen, aber mit JQuery hast du zugriff auf $.ajax.

$.ajax('URL_ZU_MEINER_TOLLEN_TXT.txt').done(function(inhalt) {
    // hier ersetzt du entsprechend Content im DOM mit dem Zeug was in der variable 'inhalt' steht
});

 

[psYcho-edgE]

Ajax ist dazu da Seiteninhalte dynamisch upzudaten

Sehr ungenau. Du kannst AJAX auch schlicht für one-way-Datentransfer zum Server nutzen. Es sind asynchrone HTTP Requests, nicht mehr, aber auch nicht weniger.

Aber recht hast du auf jeden Fall:
@Cjls96 für "simple" Inhaltsslider reicht es dicke den Content initial auszuliefern und den dann entsprechend zu verstecken/anzuzeigen, das asynchrone Laden bringt dir nur was, wenn der Content auf bestimmte Kriterien (Filter, Schaltflächen o.ä.) reagieren soll und die vollständigen Datensätze (z.B. aufgrund der Menge oder wegen Berechtigungen, Filtern etc.) vorher nicht ausgeliefert werden sollten.

 

[Cjls96]

Danke das habe ich jetzt verstanden. Wenn es nur darum geht etwas zu verstecken oder später einzublenden, ist es am geschicktesten es gleich in den Code HTML und CSS einzubinden.

 

[psYcho-edgE]

Genau, einfach display: none o.ä. und dann bei klick anzeigen. Sonst hast du immer ein zusätzliches Delay durch die Serverkommunikation, gerade wenn das Internet gerade mal nicht so fix ist wird's blöd weil du für ein bisschen Text nochmal extra lange warten musst.

 

[Joshinator]

Mit sowas bekommst du einen netten Slide-Effekt hin. Habs nicht getestet und mag noch hässlich aussehen, aber sollte dir ne Idee geben wie so ein Slider funktioniert.
Im Prinzip wird einfach nur ein Div innerhalb eines anderen Divs nach Links und Rechts geschoben, die anderen Seiten sind dann einfach nicht zu sehen.

<div id="slider">
    <div id="slide-wrapper">
        <div class="slide">
            Seite 1
        </div>
        <div class="slide">
            Seite 2
        </div>
        <div class="slide">
            Seite N
        </div>
    </div>
</div>
<div id="back"></div>
<div id="next"></div>

var currentSlide = 0;
var maxSlides = $('#slide-wrapper>div').length;
$('#slide-wrapper').css({'width': (maxSlides * 100) + '%'});

function next() {
    if (currentSlide == maxSlides - 1) {
        //damit nicht über die letzte Seite weg navigiert werden kann
        return;
    }
    currentSlide++;
    updateSlider();
}

function back() {
    if (currentSlide == 0) {
        //damit nicht über die erste Seite hinaus navigiert werden kann
        return;
    }
    currentSlide--;
    updateSlider();
}

function updateSlider() {
    var margin = currentSlide * -100
    $('#slide-wrapper').css({'margin-left': margin + '%'});
}

$(document).on('click', '#back', function() {
    back();
});

$(document).on('click', '#next', function() {
    next();
});

#slider {
    overflow: hidden;
    height: 300px;
    width: 200px;
    border: 1px solid black;
}

#slider .slide {
    height: 300px;
    width: 200px;
    float: left;
}

#slider .slide:nth-child(odd) {
    background-color: grey;
}


#slide-wrapper {
    margin: 0;
    padding: 0;
    height: 300px;
    width: 300%;
    transition: all ease-out .8s;
}

#back, #next {
    border-radius: 50%;
    background-color: red;
    margin: 10px;
    height: 20px;
    width: 20px;
}

#next {
    background-color: green;
}

 

[Cjls96]

Ich habe meine Seite in drei Reihen unterteilt. Die unterste Reihe soll wie gesagt ja das Textfeld mit dem Vor und Zurück Button beinhalten. Wie machen ich es, dass diese Reihe immer über die komplette Breite des Browserfensters geht?. Gerade ist es nämlich so, dass bei einem kurzen Text die Reihe zusammenschrumpft.

<div class="container-fluid">
    <div class="row">
    </div>
    <div class="row">
    </div>
    <div class="row">
        <div class="col-12" id="textfeld">
            <div class="row">
                <div class="col-1">
                    <!--Hier ist der Zurück-Button-->
                </div>
                <div class="col-10">
                    <!--Hier steht der Text-->
                </div>
                <div class="col-1">
                    <!--Hier ist der Vor-Button-->
                </div>
            </div>
        </div>   
    </div> 
</div>

In den zwei oberen Reihen passt alles vom Inhalt her, aber wie schon gesagt: Wenn ich jetzt ganz unten einen relativ kurzen Text einfüge, verkürzt sich die komplette Reihe.

Ich habe es mit width: 100% beim Textfeld und bei der ganzen Reihe versucht, aber da passiert nichts.

 

[Cjls96]

.row{
    width: 100%;
}

Ich habe es hiermit geschafft, dass die Reihe zumindest fast die komplette Breite abdeckt, aber so eine kleine Spalte bleibt rechts am Rand trotzdem noch frei. Wenn ich es mit margin-right: 0; versuche, passiert aber nichts. Die Reihe darüber geht noch über die komplette Breite, deshalb versteh ich das nicht. Also irgendwie muss ich den Teil, in dem der Text steht immer auf der maximalen Breite halten.

 

[Cjls96]

Fehler gefunden!