Beiträge von Draga_90

Draga_90

Danke Sempervivum

Draga_90

Hi Sempervivum

beim ersten Tipp geht überhaupt nicht,

und beim zweiten ist dann die Schnee Animation hinter dem Background.

Aber dann sind die Türchen klickbar.

Ich habe so gemacht:

HTML:

</div>

CSS:

.durchlässig {

pointer-events: none;

}

Hab ich was falsch gemacht?

beim z-index Änderung basti1012 hat es auch leider nicht geklappt.Aber danke für den Tipp

Draga_90

Hey Leute,

ich habe versucht diese Schnee Animation https://codepen.io/NickyCDK/pen/AIonk

einzufügen und es funktioniert aber dann sind meine Türchen nicht mehr klickbar.

Muss man was in Javascript schreiben?

Draga_90

Danke Sempervivum

Draga_90

aber mein >Problem ist das Türchen wieder zu schliessen.

Ich habe den Code von sempervivum bekommen aber irgendwas mache ich falsch

Draga_90

basti1012

ja, gehts ohne. habe grad gesehen.

Draga_90

Sempervivum

Ich habe es in toogle geändert aber es funktioniert nicht.

ich habe console jetz da. vielleicht deswegen?

var tuerchen = document.querySelectorAll(".door");

for (var i = 0; i < tuerchen.length; i++) {

tuerchen[i].addEventListener("click", function () {

now = new Date();

dayNow = now.getDate();

month = now.getMonth() + 1;

dayNow = 19; // nur zum Test

month = 12; // nur zum Test

var dayClicked = parseInt(this.children[0].innerHTML);

if (month == 12 && dayClicked <= dayNow) {

this.classList.toggle("open");

console.log('month', dayClicked);

this.innerHTML = '<img src="./img/gif' + dayClicked + '.gif" />';

} else {

alert('Hinweis, dass es noch zu frueh fuer dieses Tuerchen ist');

// Hinweis, dass es noch zu frueh fuer dieses Tuerchen ist

}

})

}

Draga_90

in das Bild klicken wäre besser. Danke

Draga_90

Hallo Sempervivum danke für deine Hilfe!

jetzt habe ich Problem mit den Bilder. Beim Klicken sind sie hinter doors

Wie kann ich das ändern? In css? und welcher code brauche ich das Bild wieder zu schließen?

Danke, danke,danke

Draga_90

Hallo Sempervivum

ich habe es versucht, aber leider nicht geschafft den Code einzubinden.

Ich kann nicht verstehen, warum <table> und <tr> und <td> einbunden werden müssen?

ich habe das zwar geübt aber bei der Erstellung eines normalen Kalendars.

Dann möchte ich dich fragen, ob ich für jedes Türchen ein Bild im gif erstellen muss?

Draga_90

Zitat von Sempervivum

Draga_90: Du hättest für den Adventskalender besser einen neuen Thread auf gemacht, so geht es hier ein wenig durcheinander.

HTML:

Code

<div class="door"><span class="contentclose">17</span><span class="contentopen">Offen 17</span></div>

CSS:

Code

span.contentclose {
            display: inline;
        }
        span.contentopen {
            display: none;
        }
        .door.open span.contentclose {
            display: none;
        }
        .door.open span.contentopen {
            display: inline;
            font-size: 0.8em;
        }
        .door.open {
            background-color: transparent;
        }

Alles anzeigen

Jetzt musst Du nur noch verhindern, dass ein Türchen zu früh geöffnet wird. Sie dir dazu mal dies an:
Adventskalender

Hallo Sempervivum ich bedanke mich für die Hinweise

Ich habe threads geändert.

als nächste hast du an diesen Code gemeint:

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

</table>

// Schleife ueber alle Bilder

var images = document.querySelectorAll("#Tabelle_01 td img");

for (var i = 0; i < images.length; i++) {

images[i].setAttribute("data-day", i + 1); // Nummer des Tages als data-Attribut hinzu fuegen

images[i].src = "http://lorempixel.com/output/nature-q-c-160-160-5.jpg"; // nur zum Test

}

function switchImage(img, imgSrc) {

now = new Date();

day = now.getDate();

month = now.getMonth() + 1;

day = 3; // nur zum Test

month = 12; // nur zum Test

if (month == 12 && day >= img.getAttribute("data-day")) {

console.log("ok");

if (imgSrc != "none") {

img.src = imgSrc;

}

</script>

Draga_90

Ich habe es erstmal in head eingefügt aber jetzt funktioniert dein Code auch bei mir. Tausend Mal danke

also ich möchte, wenn jemand auf das Türchen klickt, das ihm Text gezeigt wird. Wie kann ich jetzt jedem Tag einen anderen Text einfügen?

Ist das mit alert und pop up?

wenn der Text angezeigt wird, würde ich #weiseflaeche einfügen ein ein Schnee effekt animation (dafür habe ich Code) aber bin echt gespannt, ob es alles klappt...

nochmal Danke und ich wünsche dir einen schönen Abend noch.

Draga_90

@Sempervivum

Danke für deine Hilfe. Der Code funktioniert bei mir nicht.

tutorial sagt eigentlich viel aber nutzt jquery und javascript und davon habe ich keine Ahnung.

Ich bin sehr frisch in diesem Bereich.

Vieleicht habe ich Fehler gemacht, da ich zu viele div class dür tuerchen habe??

Externer Inhalt www.youtube.com

Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.

Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

sad ist tutorial, den ich benutzt habe

Draga_90

Liebe Leute,

ich versuche selber einen Adventskalender zu machen.

Ich habe dank einem Tutorial als jemand, der nicht so viele Ahnung über Programierung hat, ein gutes Stuck fertig gemacht.

leider versuche ich seit einer Woche java script und jquery zu verstehen und mit html einzubinden.

Langsam bin ich ratlos...

Ich wäre sehr bedankbar, wenn mir jemand weiterhelfen könnte.

Bis jetzt was ich gemacht habe sieht so aus:

<!DOCTYPE html>

<html>

<head>

<title>ADVENTSKALENDER 2018</title>

</head>

<body>

<h1> Adventskalender 2018!

</h1

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</footer>

<style>

h1 {color:white; font-size:50px; font-family:Baskerville Old Face;

}

*{

margin:0;

}

#bg{

background-image: url('http://www.wallpaperme.de/file/1045/1920x1080/crop/fr%C3%B6hliche-weihnachten.jpg');

width:100%;

height:100vh;

}

/* Advent Kalender*/

.door {

/*size of box*/

width: 75px;

height: 75px;

/*border style*/

border-style: solid;

border-width: 2px;

border-radius: 5px;

border-color: #000;

margin: 20px;

/*text style*/

text-align:center;

display:inline-block;

vertical-align:middle;

box-shadow: 10px 10px 5px #888;

font-size:300%;

color: #F00;

/*background*/

background-color: #FFF;

opacity: 0.5;

}

.door:hover {

background-color:#256B9F;

color: FFF;

font-family:Embassy-BT;

}

</style>

</html>

aber mir fehlt code für türchen klickbar zu machen und text zu verstecken...

Beiträge von Draga_90

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript