Beiträge von werdas34

werdas34 · 8. Juni 2019

Hallo,

ich versuche grad eine Lightbox zu implementieren und habe mich da an das Beispiel von w3schools gehalten: https://www.w3schools.com/howto/howto_js_lightbox.asp

Mein Ziel ist es, dass ich ein Thumbnail habe, darauf klicke und dann erscheint die Lightbox, in der ich durch paar Bilder durchgehen kann. Also ein Bild auf der Webseite und mehrere Bilder, die in der Galerie angezeigt werden.

Problem ist, das die Pfeile zum durchgehen, bereits erscheinen wenn die Lightbox noch nicht "geöffnet" ist. DIe Position der Pfeile nicht ganz passt. Der linke Pfeil zu weit rechts. Dazu bekomme ich einen schwarzen Balken angezeigt, auch wenn die LIghtBox noch nicht "geöffnet" ist.

Öffne ich die Lightbox wird der Schwarze Hintergrund ganz links am Rand angezeigt und nicht über die volle Größe der Webseite.

Hier mal Codepen: https://codepen.io/werdas34/pen/oRKovL?editors=1010 (Zuerst auf das VeranstaltungsIMG klicken und dann auf Weitere optionale Wahlmögllichkeiten. Da werden die ersten komischen Effekte angezeigt. Rechts, da wo Raeume draufsteht, öffnet die Lightbox).

Ich hoffe ihr könnt mir helfen.

mfg werdas34

werdas34 · 8. Mai 2019

Hallo,

ich versuche seit geraumer Zeit den Index von der for Schleife zu ermitteln. Und zwar so, dass ich ihn dann In JavaScript nutzen kann. (Nicht im HTML Dokument).

Bsp:

Code

<div id="wrapper">
                <a class="event" v-bind:style="{order: e.order}" v-for="e, index in events" :href = "e.page"><img v-bind:src="image" v-bind:alt="alt" />
                    <p><b>{{ e.title }}</b> <br>
                    {{e.subtitle}}  {{index}}   </p>
                </a>
            </div>

Das meine ich mit nicht im HTML Dokument. Ich möchte diesen Index in JS verwenden können.

Kurze Erklärung meines Falles:

Es geht um das Weiterleiten zur nächsten Seite. Ich klicke auf ein Event und möchte zur Ansicht der Daten gelangen.

Nun gibt es zwei verschiedene Arten von Events:

ohne Code - Ich klicke auf Event und komme zur Ansicht - funktioniert bei mir einwandfrei.

mit Code - Ich klicke auf Event und muss erst einen Code eingeben - ist dieser richtig gehe ich auf die Ansicht-Seite. - funktioniert noch nicht.

Ich weiß nicht, wie man sowas allg löst, aber ich wollte es folgendermaßen lösen.

Ich klicke auf das Event und merke mir den Index. Durch diesen Index kann ich dann auf der Codeseite die Anweisung geben auf welche Seite weiterverlinkt werden soll.

Weiterer Code:

Code

var allEvents = new Vue({
    el:"#wrapper",
    data:{
        events: [
        {
            image: "./assets/Website/VeranstaltungsIMG.png",
            alt:"VeranstaltungsIMG",
            page:"formular.html",
            order:"3",
            title:"3",
            subtitle:"Subtitel"
        },
        {    
            image: "./assets/Website/VeranstaltungsIMG.png",
            alt:"VeranstaltungsIMG",
            page:"code.html",
            url:"ansicht.html",
            order:"2",
            title:"2",
            subtitle:"Ball"
        }],
        methods:{
        getIndex: function(){
        //Der Code der mir nicht gelingen möchte 
        }
        }
});

Alles anzeigen

Ich hoffe ihr könnt mir sagen wie ich an den Index ran komme.

Mfg, werdas34

werdas34 · 3. Mai 2019

Vielen Dank Sempervivum. Das war sehr hilfreich.

Ich hätte noch zwei kleine weitere Fragen:

1) Ich benutze select Boxen und das Problem ist, das sie anfangs nicht beschriftet sind. Das Liegt an Vue, denn wenn man dies entfernt, dann funktioniert es.

Bsp: https://codepen.io/werdas34/pen/joNGyN

2) Wie man an meinen vorherigen Beispiel sehen kann verwende ich ein allEvents Array. Wenn ich auf das zweite Event klicke dann geht er intern zu allEvents[1]. Wie komme ich an den Index 1 ran? Bzw. allgemein wie komme ich bei meinem Fall an den Index?

mfg werdas34

werdas34 · 2. Mai 2019

Hallo,

hier der Code auf codepen: https://codepen.io/werdas34/pen/XQLZPq

Ich möchte auf meiner Startseite mehrere Events anzeigen. Ist das Fenster maximal sollen drei Events nebeneinander mittig auf der Webseite stehen. Die weiteren Events sollen sich unterhalb anordnen. Sprich sind es fünf Events dann sollen drei in der ersten Reihe stehen und die zwei darunter folgen. Das ganze soll auch responsive sein. Wird das Fenster kleiner dann sollen nur noch zwei in der ersten Reihe zwei in der zweiten Reihe und eins in der letzten Reihe stehen.

Nur verstehe ich nicht so ganz weshalb es bei mir nicht funtioniert(bin noch Anfänger).

Die Klasse wrapper ist der Flexbox Cointainer und die Events sind die Items. Laut mehreren Tutorials sollte dies funktionieren. Oder liegt es an Vue?

Ich kann auch die Reihenfolge der Items bestimmen(order: 1;). Wie mache ich das, damit ich mittels der Vue Instanz auf die order Elemente zugreifen kann?

Also in etwa so:

Code

var allEvents = new Vue({
    el:".event",
    data:{
        events: [
        {
            image: "./assets/Website/VeranstaltungsIMG.png",
            alt:"VeranstaltungsIMG",
            page:"formular.html",
            title:"Titel",
            subtitle:"Subtitel",
            order:"3"        <---------
        },
        {...}]});

Alles anzeigen

mfg werdas34

werdas34 · 13. April 2019

Mit hochstellen meine ich sowas wie man es aus der Mathematik kennt: x².

Kannst du vielleicht ein Beispiel machen mit padding etc. Hätte es selber probiert aber habe es nicht hinbekommen.

Ich kann den Fehler auf codepen nicht nachstellen, deswegen lade ich hier den Code hoch. Zur Info: Ich nutze als Browser Mozilla Firefox und als IDE Brackets.

HTML

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

    <head>
        <title>RaMOS</title>
        <meta charset="utf-8"> 
        <link href="style.css" rel="stylesheet" type="text/css">
        <script src="optional.js"></script>
    </head>
    <body>
       <div class="header">
            <a href="index.html"><img src="Logo.png"  ></a>
        <h1>RaMOS</h1>      
        </div> 
        
        <div class="wrapper" >
            <p class="description"><b> Beschreibung</b> <br> 
            Bla Bla Promootion usw sssssssssss</p>
        
        
        
        <div class="overlay">
                    <img src="VeranstaltungsIMG.png" alt="VeranstaltungsIMG" height="250px" width="300px">
            
            <div class="formular">
            <form>
            <input type="text" placeholder="Vorname" >
            <input type="text" placeholder="Nachname"><br>
            <input type="text" placeholder="Geburtsdatum(TTMMJJ)"><br>
            <input type="text" minlength="5" maxlength="5" placeholder="PLZ" >
            <input type="text" placeholder="Wohnort">
            <input type="text" placeholder="Straße">
            <input type="text" placeholder="Hausnummer"><br>
            <input type="email" placeholder="Email"><br>
                
            <select name="Test" required  size="1">
              <option value="Datum1">Datum1</option>
              <option value="Datum2">Datum2</option>
              <option value="Datum3">Datum3</option>
              <option value="Datum4">Datum4</option>
            </select>
            <input type="text" placeholder="Anzahl der Tickets"><br>

            
            <p class="optional" onclick="showOptions()">Weitere optionale Wahlmöglichkeiten:
            </p>
            <!--ausgeblendeter Teil-->
            <div  class="notShown" >
            <input type="text" placeholder="Fensterplatz (Ja/Nein)">
            <input type="text" placeholder="Gewünschter Sitznachbar" style="width:250px;"><br>
            
            <select  size="1">
              <option value="Raum1">Raum1</option>
              <option value="Raum2">Raum2</option>
              <option value="Raum3">Raum3</option>
              <option value="Raum4">Raum4</option>
            </select>
                
            <a onclick="showRooms()">
            ⁽ &#8305 ⁾</a>
                <br>
                
                <textarea class="tarea" name="extras" maxlength="10000">Besondere Anforderungen z.B. Handicap</textarea>           
                </div>
                <!--ausgeblendeter Teil--> 
            <div>
            <input type="button" value="Bestellen" > 
            <br>
           <input type="button" class="below" value="Stornieren"> 
                </div>
            
            </form>
                </div>
        </div>
        </div>
    
        </body>
</html>
-----------------------------------
* { 
    margin 0px;
    padding: 0px;
    font-family: sans-serif;
}

.header{
    background-color: blue;

}

.header h1{
    text-align: center;
    font-size: 50px;
    color: white;
}

.header img{
    float:left;  
    margin: 6px;
    height: 50px;
    width: 90px;
}

.header img:hover{
    transform: scale(1.05);
    
}

.header p{
    font-family: sans-serif;
    font-size: 20px;
    align-content: flex-end;
    float:right;
    margin: 17px 20px;
    background-color: grey
}

.header p:hover{
    transform: scale(1.05);
}

.wrapper{
    width: 900px;
    max-width: 90%;
    margin: 0 auto;
    padding: 20px;
} 

.event{
    float: left;
    margin-bottom: 60px;
    padding: 10px;
    width: 250px;
    height: 250px;
    //border: solid;
}

.event img {
    width: 250px;
    height: 250px;
}

.event p{
    font-family: sans-serif;
    font-size: 15px;
    color: black;
}

.event a{
    text-decoration: none;
}

.event:hover{
    transform: scale(1.05);
}

.code{
    width:300px;
    height: 300px;
    margin: 0 auto;
    text-align: center;
    border: solid;
    border-radius: 10px;
}

.code p{
    font-size: 14px;
    text-align: center;
    font-family: sans-serif;
    margin-top: 50px;
}

.code input{
    margin: 20px;
}

.description{
    font-size: 25px;
}

.description b{
    font-size: 30px;
}

.overlay img{
    margin: 5px;
    width: 600;
    float: right;
}

.formular{
    margin: 5px;
    width: 500px;
}

.formular input{
    font-size: 17px;
    width: 200px;
    margin: 5px;
    padding: 2px;
    color: black;
}

.formular ::placeholder{
    color: grey;
}

.formular select{
    font-size: 17x;
    width: 220px;
    margin: 5px;
    padding: 2px;
    color: black;
}

.formular button{
    font-size: 20px;
    width: 200px;
    margin: 5px;
    padding: 2px;
}

.optional{
    color:blue;
    text-decoration: underline;
    margin: 5px;
}

.notShown{
   display: none;
}

.notShown div{
    width: 230px;
}

.notShown a{
    color: blue;
    font-weight: bold;
    text-decoration: none;
}

.tarea{
    width:500px;
    height: 100px;
    margin: 5px;
}

.below{
    position: absolute;
    bottom: 0;
}

.raum{
    align-self: center;
}

.login{
    width:300px;
    height: 300px;
    margin: auto auto;
    padding: 10px;
    text-align: left;
    border: solid;
    border-radius: 10px;
}

.login input{
    margin: 5px; 
}

.login p{
    font-family: sans-serif;
}

.menu{
    position: absolute;
}

.menu nav{ 
    font-family: sans-serif;
    font-size: 20px;
}

.menu a{
    margin-left: 15px;
    text-decoration: none;
    color: blue;
    font-family: sans-serif;
    font-size: 15px;  
}
-------------------------
function showOptions(){
    var opt = document.getElementsByClassName("notShown");
    var vis = opt[0].style.display;
    if(vis == "none"){
        opt[0].style.display = "block";
    }else{
        opt[0].style.display = "none";
    }
}


function showRooms(){
    window.open("Room.html", "Raeume", "width=600, height= 400");
}

Alles anzeigen

Das ist jetzt mehr als die Seite betrifft (bei CSS zumindest), aber vielleicht hat ja irgendwas Seiteneffekte.

werdas34 · 12. April 2019

Einen Link kann ich nicht zur Verfügung stellen, da die Seite nicht online ist. Oder meinst du was anderes?

Wenn man auf den Link Weitere Wahlmöglichkeiten klickt, wird mittels JS display von none auf block umgestellt, damit der ausgeblendete Teil angezeigt werden kann. In diesem Fall tritt der Fehler auf, wenn aber der display auf none ist funktioniert es.

Wie man auf dem Bild sehen kann steht neben dem select "Raum" ein kleines i. Ich hätte es gern mit CSS hochgestellt , aber keinen Weg gefunden wie das funktioniert. Deshalb auch ich nun Unicode Zeichen rausgesucht und implementiert.

Wie kann man mitt CSS den Text hochstellen?

Code

function showOptions(){
    var opt = document.getElementsByClassName("notShown");
    var vis = opt[0].style.display;
    if(vis == "none"){
        opt[0].style.display = "block";
    }else{
        opt[0].style.display = "none";
    }
}
-------------
<p class="optional" onclick="showOptions()">Weitere optionale Wahlmöglichkeiten:
            </p>
            <!--ausgeblendeter Teil-->
            <div  class="notShown" >
            <input type="text" placeholder="Fensterplatz (Ja/Nein)">
            <input type="text" placeholder="Gewünschter Sitznachbar" style="width:250px;"><br>
            
            <select  size="1">
              <option value="Raum1">Raum1</option>
              <option value="Raum2">Raum2</option>
              <option value="Raum3">Raum3</option>
              <option value="Raum4">Raum4</option>
            </select>
                
            <a onclick="showRooms()">
            ⁽ &#8305 ⁾</a>
                <br>
                
                <textarea class="tarea" name="extras" maxlength="10000">Besondere Anforderungen z.B. Handicap</textarea>           
                </div>
                <!--ausgeblendeter Teil--> 
            <div>
            <input type="button" value="Bestellen" > 
            <br>
           <input type="button" class="below" value="Stornieren"> 
                </div>

Alles anzeigen

MfG,

werdas34

werdas34 · 9. April 2019

Hallo,

ich übe bisschen mit HTML, CSS und JS.

Baue gerade eine kleine Webseite.

Mein Problem ist folgendes:

Ich möchte nachdem die Daten eingetragen wurden zwei Buttons untereinander stehen haben.

Dazu soll "Bestellen" unter den Eingabe Feldern stehen und der Button "Stornieren" ganz am Ende der Seite.

Funktioniert an sich auch, sobald ich aber das Fenster sehr klein ziehe, ist "Stornieren" quasi mittendrin (siehe Bild).

Code

<div>
    <input type="button" value="Bestellen" > 
    <br>
    <input type="button" class="below" value="Stornieren">
</div>
------------
.below{
    position: absolute;
    bottom: 0;
}

html-seminar.de/woltlab/attachment/1850/

Wie behebe ich das?

MfG,

werdas34

werdas34 · 24. Februar 2019

Hallo,

ich versuche momentan mir HTML, JS und CSS beizubringen.

Hätte nun eine Webseite erstellt mit Logo und Überschrift und dies soll responsive sein.

Funktioniert an sich auch, nur wenn ich den Browser sehr klein ziehe, dann springt die Überschrift runter und das Logo bleibt an seiner Stelle.

Ich möchte aber, dass das Logo und die Überschrift immer in der gleichen Zeile bleiben, sprich der Text nicht runter springt.

Hoffe es ist klar was ich meine.

Code:

Code

<div class="header">
            <a href="index.html"><img src="Logo.png"  height="50px" width="auto"></a>
        <h1>Test</h1>      
        </div>

-----
.header{
    background-color: blue;
}

.header h1{
    text-align: center;
    font-size: 50px;
    color: white;
}

.header img{
    float:left;  
    margin: 6px;
}

.header img:hover{
    transform: scale(1.05);
}

Alles anzeigen

Beiträge von werdas34

Lightbox und komische Effekte

Vue - v-for und Index

Vue und Flexbox - Probleme

Vue und Flexbox - Probleme

Button am Ende der Seite fixieren

Button am Ende der Seite fixieren

Button am Ende der Seite fixieren

Logo und Überschrfit immer in der gleichen Zeile?