Beiträge von marja

    Sorry für die späte Antwort.


    PicAmount ist ein Variable in der die Anzahl der downgeladenen Bilder gespeichert werden. Der User kann zwischen 1-4 Bilder herunterladen, die ihm dann visuell auf der Page nebeneinander angezeigt werden.

    Hallo zusammen,


    gerne möchte ich meinen Code in HTML anpassen/kürzen.


    Hierzu möchte ich dynamische Variablen verwenden.


    Original Code


    Nun möchte ich das wie gesagt kürzen per Loop bin mir aber nicht sicher wie ich am besten vorgehe, denn '+i+' funktioniert ja nur bei einem String. Das heißt ich müsste die Variable in ein String umwandeln?


    Mein bisherige Idee

    Code
    1. var btn_i;
    2. for (btn_i = 1; btn_i < PicAmount; btn_i++){
    3. var modal1 = document.getElementById("myModal"+btn_i);
    4. var btn1 = document.getElementById("Pic"+btn_i);
    5. btn1.onclick = function() {modal1.style.display = "block";}
    6. }

    Das heißt, ich müsste modal1, btn1 auch noch irgendwie variable gestalten ... weiß aber nicht genau wie.


    Ich hoffe auf Eure Hilfe, Tipps


    Gruß

    Marja

    Ja, fertiger Code mag cool sein. Aber da lernt man nix - naja vielleicht ein bisschen.

    Dank Eurer Hinweise/Tipps habe ich meine Lösung gefunden um OBJEKTE zu verstehen und auszulesen zu können ;-)


    Damit kann ich glaube ich was anfangen. Cool und Danke für deinen Tip!!

    Wenn ich mir den String ansehe, kommt mir der Verdacht, dass es JSON-kodierte Daten sind. Wo kommt der String denn her? Du ersetzt Anführungszeichen, die in deinem Beispiel nicht zu sehen sind. Kann es sein, dass dein String so aussieht:

    Code
    1. {"Peter": 0.998, "Uwe": 0.872541254, "Beate": 0.72, "Maria Dana": 0.854745}

    Ja korrekt. Wie gesagt, ich bin in den Anfängen von json und co. Ich wollte diesen String in einer Schleife dann nutzerfreundlich also für den Endanwender zur Verfügung stellen. Die Daten hole ich aus einer MongoDB (kannte ich vorher noch nicht, kannte nur Oracle und Co.) Ich hole sie mit JSON.stringify(JSON.parse(.....)) Und nun versuche ich eben per learning by doing diesen leserlich aufzubereiten. Man freut sich immer dann wenn man durch Tipps was neues Geschäft hat ;-)


    Viele Grüße

    Marja

    Hallo zusammen,


    Nachdem mir gestern so schnell und cool geholfen wurde, habe ich da mal wieder ne Frage.


    "Replace" kenne ich noch aus meinen VB.Net Zeiten.
    Nun habe ich versucht, dass auch in html umzusetzen.


    Ich habe Bsp. einen String mit folgendem Inhalt = {Peter: 0.998, Uwe: 0.872541254, Beate: 0.72, Maria Dana: 0.854745, ... }

    Diesen möchte ich gerne aufbereiten/formatieren.


    Also mal ne einfache Funktion gebastelt


    Code
    1. function format_MyName(el) {
    2. var tmp = el
    3. var tmp = tmp.replace('{','') 'Entfernt die erste geschweifte Klammer
    4. var tmp = tmp.replace('}','') 'Entfernt die letzte geschweifte Klammer
    5. var tmp = tmp.replace(/['"]+/g, '') 'alle Gänsefüssen entfernen
    6. var tmp = tmp.replace(',','\n') 'alle Kommas durch einen Zeilenumbruch ersetzen
    7. return tmp
    8. }

    Die geschweiften Klammern und die Gänsefüsschen entfernt er. Leider ersetzt er nicht alle Kommas durch einen Zeilenumbruch.
    Und dann suche ich nach einer Möglichkeit, dass er mir die Zahlenwerte wie folgt abschneidet. Nach dem Punkt sollen noch max. 3 Zahlen stehen ohne auf das runden zu achten.

    Original: {Peter: 0.998, Uwe: 0.872541254, Beate: 0.72, Maria Dana: 0.854745, ... }
    Ergebnis: Peter: 0.998 \n Uwe: 0.872 \n Beate: 0.72 \n Mario Dana: 0854

    Vielen Dank
    Marja

    und wieder mal vielen Dank für Deine Hilfe.


    Es hat mir nach meinem Post keine ruhe gelassen, Laptop war aus und ich habe per Smartphone gegoogelt und genau das gefunden was du mir gesagt hast mit der class. Also Laptop wieder eingeschaltet und TOP. Es funktioniert wunderbar!! Danke schön


    Das mit der Class ist ja super einfach ;-)

    figure {} kann ich das in der css Datei auch mehrfach definieren wie bei label {} ?


    Hintergrund; label {} habe ich in der css Datei mehrfach definiert - Beispiel label span_text1 {} , label span_text2 {} etc. Das spreche ich in der html dann auch so an <span_text1></span_text1> und <span_text2></span_text2> was funktioniert. Bei figure pic1 {} in der css Datei funktioniert das nicht. Dadurch haben alle figure Container die gleichen Einstellungen wobei ich aber gerne die einen Bilder in einen 100x100px Container angezeigt haben möchte und die anderen Bilder im Dialog in dem Container 200x200px angezeigt haben möchte.


    Grüße

    Marja

    Danke schön


    Mit dem figure-Tag habe ich nun etwas experimentiert. Aber wenn das Bild oder sonstiges größer ist als ich den figure-Tag definiert habe, geht es über den den figure-Tag?


    Code
    1. figure {
    2. position: relative;
    3. margin: 0;
    4. padding: 10px;
    5. width: 200px;
    6. height: 200px;
    7. border: 1px solid gainsboro;
    8. background: white;
    9. }

    So etwas wie Scrollbalken gib es nicht im Container figure-Tag oder? Aber da Du mir den Tip gegeben hast - figure-Tag - werde ich mal weiter stöbern, so dass ich bsp. ein Container habe der 200px mal 200px ist und wenn das Bild größer ist, mir dann Scrollbalken angezeigt werden.


    Update: overflow {} scheint das zu sein, was ich gesucht habe ;-)

    Vielen Dank

    Marja

    Hallo zusammen,


    Ich bin neu hier im Forum. Bisher habe ich mit Visual Basic .Net programmiert.

    Vor sehr langer Zeit hatte ich auch mal Webseiten programmiert. Vor kurzem, auf Grund von Augmented Reality bin ich wieder mit Java, CSS und Co. in Berührung gekommen.


    Nun bin ich gerade dabei, eine Website mit 1-4 Bilder, Checkboxen und Dropdown Felder zu erstellen. Die ist auch soweit fertig.

    Nun werden die 1-4 Bilder, je nach Auswahl auf der Website angezeigt. Bei Klick auf das jeweilige Bild öffnet sich ein Dialog (Modal).

    Dieses habe ich unterteilt in zwei Bereich. Links wird das Bild angezeigt, recht Informationen dazu.


    Nun (es ist ja möglich das die Bilder unterschiedliche Größen haben) das das Bild in einem Rahmen (nehme ich div dazu?) propotional angezeigt wird.

    Unter dem Bild befinden sich vier Button.
    1. Button: 90° nach links

    2. Button: 90° nach rechts

    3. Button: Verkleinern

    4. Button: Vergrößern


    Nun habe ich gedacht, dass ich die Gradzahl als Variable definiere und bei jedem Klick, die Zahl sich um 90 erhöht, dadurch das Bild sich dreht. Aber so richtig funktioniert das nicht.

    Google und Co. habe ich als Suche bereits genutzt, aber in Bezug auf Modal und drehen bzw. zoomen habe ich noch nichts gefunden.


    Es wäre schön wenn ihr mir als Newcomer ein paar Tipps in die jeweilige Richtung geben könntet.


    Nachtrag: das mit dem Bilder am Rahmen anpassen habe ich glaube ich gefunden: https://www.html-seminar.de/bilder-bei-responsive-design.htm


    Viele Grüße

    Marja