Javascript-forum

Durchsuche Foren

Foren-Statistiken

» Mitglieder: 44.784
» Neuestes Mitglied: aandsdirect
» Foren-Themen: 92.823
» Foren-Beiträge: 94.659

Komplettstatistiken

Benutzer Online

Momentan sind 405 Benutzer online
» 2 Mitglieder
» 400 Gäste
Bing, Facebook, Google, cartool, tuu8

Aktive Themen

Forsk Atoll v3.4.1 x64
Forum: Html
Letzter Beitrag: tuu8
Vor weniger als 1 Minute
» Antworten: 0
» Ansichten: 2

coDiagnostiX10.7
Forum: Datenbanken
Letzter Beitrag: cartool
Vor 3 Minuten
» Antworten: 0
» Ansichten: 1

FlexScan3D v3.3.22.12
Forum: Html
Letzter Beitrag: tuu8
Vor 4 Minuten
» Antworten: 0
» Ansichten: 2

FabriWIN v11.01
Forum: Html
Letzter Beitrag: tuu8
Vor 8 Minuten
» Antworten: 0
» Ansichten: 1

sai flexisign pro 10.5.2
Forum: Datenbanken
Letzter Beitrag: cartool
Vor 9 Minuten
» Antworten: 0
» Ansichten: 2

FARO SCENE v2023
Forum: Html
Letzter Beitrag: tuu8
Vor 12 Minuten
» Antworten: 0
» Ansichten: 2

FARO BuildIT Construction...
Forum: Html
Letzter Beitrag: tuu8
Vor 16 Minuten
» Antworten: 0
» Ansichten: 1

dsg10.5
Forum: Datenbanken
Letzter Beitrag: cartool
Vor 18 Minuten
» Antworten: 0
» Ansichten: 2

FARO As-Built Modeler 202...
Forum: Html
Letzter Beitrag: tuu8
Vor 20 Minuten
» Antworten: 0
» Ansichten: 1

ExactFlat v1.7.0 For Rhin...
Forum: Html
Letzter Beitrag: tuu8
Vor 24 Minuten
» Antworten: 0
» Ansichten: 1

Grid lernen Spielerisch

Geschrieben von: admin - 18.04.2022, 17:07 - Forum: Hilfreiche Skripte und Online Tools - Keine Antworten

	Das gleiche wie bei Flexboxen gibt es auch mit Grid. http://cssgridgarden.com/#de Damit versteht man ganz einfach, welcher Befehl was macht und man lernt damit ganz gut und schnell.

Flexbox lernen Spielerisch

Geschrieben von: admin - 18.04.2022, 17:06 - Forum: Hilfreiche Skripte und Online Tools - Keine Antworten

	Einfach . Spiele mit dem Frosch und lerne dabei Flexbox. http://flexboxfroggy.com/#de Dann kann man hier noch das gelernte testen und anfangen eine HTML Seite zu Programmieren http://the-echoplex.net/flexyboxes/

Kommentierfunktion

Geschrieben von: admin - 18.04.2022, 16:19 - Forum: Javascript - Antworten (19)

Hi, ich wollte gerade eine Kommentierfunktion schreiben, welche bereits einige Kommentare vorgefertigt hat, hatte auch schon mal eine und dachte diese verstanden zu haben, leider finde ich die Datei nicht mehr. Kannst du mir sagen wo ich hier einen Fehler eingebaut habe?

So jetzt hast du glaub ich erstmal genug offene Fragen von mir Big Grin

Code:
<div id="kommentarspalte">

<div class="kommentare">Hallo</div>

<div class="kommentare">tschüss</div>

<div class="kommentare">servus</div>

<div class="kommentare">ciao</div>

</div>

<textarea id="komschr"></textarea>

<button id="komsend">senden</button>

</div>

<script>

document.getElementsById('komsend').onclick=function(){

  var kommi = document.createElement("div");

    kommi.className="kommentare ";

    kommi.innerHTML=document.getElementById("komschr").value;

  kommentarspalte.appendChild(kommi);

}

</script>

Swipe

Geschrieben von: admin - 18.04.2022, 16:09 - Forum: Javascript - Antworten (13)

Vorab: Ich nutze Bootstrap und jQuery.

Ich versuche ein <div> Feld zu erstellen, gefüllt mit Bilder und Text, welches bei einem swipe komplett verschwindet und dafür an gleicher Stelle ein anderes div Feld mit zumindest Text eingeblendet wird.

Hinzu kommt, dass ich das ganze gerne für mobile und Desktop programmieren würde. In der Desktopversion soll anstelle des swipe ein Button für links und rechts erscheinen.
Regeln würde ich das ganze über Media queries, weswegen zwei getrennte Codes mir schon helfen würden.

Gefunden habe ich dazu verschiedenes, mein aktueller Ansatz ließ zumindest Hintergrundfarben swipen bevor ich ihn abgeändert habe.
Zuvor habe ich noch src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" eingebunden.

Code:
div.box{

}

div.swipeleft {

  display: none;

}

</style>

</head>

<body>

<div class="box">hallo</div>

<div class="swipeleft">tschüss</div>

<script>

$(function(){

$( "div.box" ).on( "swipeleft", swipeleftHandler );

function swipeleftHandler( event ){

  getElementsByClassName("box").style.display="none";

  getElementsByClassName("swipeleft").style.display="block";

}

});

</script>

Hover-Dropdown-Menü

Geschrieben von: admin - 18.04.2022, 16:01 - Forum: Css - Antworten (7)

Hab heute ein Hover-Dopdown-Menü erstellt, wobei der Dropdown Button erscheint sobald man mit der Maus über ein gewünschtes Feld fährt.
Der Dropdown Button erscheint dann in diesem.
Hier kurz der simple Code:

Code:
.Feld.dropdownbutton{

  display:none;

}

.Feld:hover .dropdownbutton{

  display:block;

  position: absolute;

  right:0;

  top:0;

  margin-right: 5%;

  border: 0px;

  background-color: transparent;

  outline: none;

  cursor: pointer;

width: 8px;

height: 25px;

}

Pennergame Highscoreliste

Geschrieben von: admin - 18.04.2022, 15:54 - Forum: Stellt eure Userscripte vor - Keine Antworten

Für das das Spiel habe ich jetzt das Highscorescript aktualisiert. Da Pennergame ja andauernd auf ihren Server rumspielt, muss man immer wieder die Script auf den neusten Stand bringen.

Dieses Script hat ein anderes Script eingebunden und heißt data tables.

Damit lassen sich alle Suchergebnisse nochmal sortieren und filtern. Pennergame kann maximal 25 Penner auf einmal anzeigen. Mit diesen Script habe ich die Maximal anzuzeigen Penner auf 1250 begrenzt. Damit sich das Script nicht überschlägt, bei soviel Daten ist ein kleiner Timeout drinnen der das bis jetzt ganz gut verhindert.

Man kann sich aber auch weniger anzeigen lassen.
Dann kann man wieder nach Geld suchen und nach Städte und das übliche nach Punkte. Da Pennergame die Stadt und Geldsuche noch nicht anbietet und wohl auch nicht mehr kommen sollte ,habt ihr gegenüber anderen Leuten ein Vorteil. Sucht einfach Leute mit wenig Punkte und viel Geld und los gehts.

Bei Fragen und Probleme bitte hier posten.
Wer sich das Timeout im Script verringern möchte, kann, das gerne tun (Ich erkläre auch wie es geht). Nur kann es sein, dass dann falsche Ergebnisse angezeigt wird. Es kommt immer auf Rechner, Leistung und Datentransfer an.
Unter Highscore gibt es jetzt ein Extra Link

[Bild: score1.png]

So sieht die neue Suchseite aus

[Bild: score2.png]

Und hier ist das Script

hover

Geschrieben von: admin - 18.04.2022, 15:48 - Forum: Html - Antworten (3)

Hey!

Folgendes möchte ich umsetzen:
Ich möchtedas ganze so haben: http://prntscr.com/jwdnrt - Wenn ich mit der Maus über das Bild gehe soll das Bild wechseln, ca. so: http://prntscr.com/jwdo46

Das geht auch soweit sehr gut, ich habe es bis jetzt so umgesetzt:

Code:
   <style>

                          .Instaaagran {

                              width: 50px;

                              height: 50px;

                              background-size: 50px;

                              background: url(media/nice/colored/Instagram.png) no-repeat;

                              transition: 2.0s;

                            }

                         .Instaaagran:hover {

                             background: url(media/nice/Instagram.png)

                                 no-repeat;

                                 background-size: 50px; }

                                           .TWIIII {

                                            width: 50px;

                                            height: 50px;

                                            background-size: 50px;

                                               background: url(media/nice/colored/Twitter.png) no-repeat;

                                               transition: 2.0s;

                                                                          width: 50px;

                              height: 50px;

                              background-size: 50px; }

                                          .TWIIII:hover {

                                              background: url(media/nice/Twitter.png)

                                                  no-repeat;

                                                  background-size: 50px; }

                                                  .YYYTT {

                                                    width: 50px;

                                                    height: 50px;

                                                    background-size: 50px;

                                                      background: url(media/nice/colored/YouTube.png) no-repeat;

                                                      transition: 2.0s; }

                                                 .YYYTT:hover {

                                                     background: url(media/nice/YouTube.png)

                                                         no-repeat;

                                                         background-size: 50px; }

.flex-container {

  display: flex;

  justify-content: center;

  background-color: none;

    height: 10px;

}

.flex-container > div {

  width: 128px;

  margin: 10px;

  text-align: center;

  line-height: 100px;

  font-size: 30px;

   background-size: 50px;

}

</style>

<div class="obergeordneterflex">

    <div class="flex-container">

        <div class="Instaaagran"></div>

  <div class="TWIIII" href="http://twitter.com/playgalaxy_net"></div>

  <div class="YYYTT" href="http://youtube.com"></div>  

    </div>

  </div>

Jedoch habe ich keine Ahnung wie ich das ganze jetzt verlinken soll, dass wenn ich auf das Bild klicke ein Link sich öffnet. Wenn ich den <a> Tag nutze verschiebt sich das Bild. Sad

Viele Grüße
Jakob

Mit der Maus Button hovern und Slider Steuern

Geschrieben von: admin - 18.04.2022, 02:02 - Forum: Javascript - Antworten (6)

	So das wahr die erste Version https://basti1012.bplaced.net/index.php?...er_Steuern Wenn man das jetzt verlinken will dann kann man aus den Button ein <a> Element machen zb so. Link entfernt, weil Seite nicht mehr erreichbar Oder den Link Im Code eintippen tust Link entfernt, weil Seite nicht mehr erreichbar

Button aktiv starten

Geschrieben von: admin - 18.04.2022, 02:00 - Forum: Css - Antworten (2)

So und ein zweiter Thread gleich hinterher Big Grin
Das gehört zwar zur selben Aufgabe, allerdings könnte das auch für andere Interessant sein, deshalb mach ich dafür mal einen neuen Thread.
Wahrscheinlich recht einfach, aber irgendwie scheitert es gerade:

Ich möchte in einer Liste von Buttons, die im CSS bereits beschrieben sind, einen Button bereits beim ersten Aufruf der Seite auf "aktive" stehen haben.
Z.B. möchte ich in einer Liste mit Automarken, Obst, Städten und Tieren, welche ich per Button sortieren kann (siehe anderer Thread)
Einen Button "Alle" haben, der zu Beginn, während noch alle Objekte angezeigt werden, bereits die Farbe hat als wäre er angeklickt.

Ausgangssituation wäre quasi ja nur:

Code:
.button{

backgroundcolor: red

}

.button:active{

backgroundcolor: yellow;

}

Vielen Dank fürs Helfen Smile

Sortierlis

Geschrieben von: admin - 18.04.2022, 01:53 - Forum: Javascript - Antworten (10)

Hi,
ich habe mal wieder ein Problem (und damit mein ich nicht das Ergebnis der deutschen Nationalmannschaft eben Big Grin )
Ich versuche eine Liste zu erstellen, mit z.B. Automarken, Obst, Städten und Tieren.
Alles komplett durcheinander.
Jetzt möchte ich via Buttons nur noch eine Kategorie einblenden. Dabei sollen jedoch nicht nur die anderen ausgeblendet werden, sondern die jeweilig dazugehörigen Elemente nach oben nachrutschen.

Wichtig ist mir hierbei, keine Listenelemente zu benutzen. Theoretisch könnte z.b. bei jedem Element noch ein Bild dabei sein oder so. Also es sollen quasi ganze <div> Blöcke sortiert werden.

Ich habe verschiedenes probiert. Ich dachte an .style.display ="none". Allerdings funktioniert das nicht.
Desweiteren frage ich mich ob man das nur über den Klassennamen regeln kann, da die Klassennamen in meinen Dateien mittlerweile oft schon komplett überladen sind.

MfG

Code:
<div class ="row">

  <button id="ST">Städte</button>

  <button id ="OB">Obst</button>

  <button id="AU">Automarken</button>

  <button id="TI">Tiere</button>

  <div class="col-xs-6 col-md-2"></div>

  <div class="col-xs-6 col-md-2">

<div  class ="Städte">Hamburg</div>

<div class ="Obst">Birnen</div>

<div class ="Städte">Berlin</div>

<div class ="Autos">Mercedes</div>

<div class ="Obst">Äpfel</div>

<div class ="Autos">BMW</div>

<div class ="Tiere">Bär</div>

<div class ="Städte">München</div>

<div class ="Autos">Ford</div>

<div class ="Tiere">Hase</div>

<div  class ="Städte">Dortmund</div>

<div class ="Obst">Kirschen</div>

<div class ="Städte">Erfurt</div>

<div class ="Autos">Audi</div>

<div class ="Obst">Melonen</div>

<div class ="Autos">Ferrari</div>

<div class ="Tiere">Hund</div>

<div class ="Städte">Tokio</div>

<div class ="Autos">Trabant</div>

<div class ="Tiere">Seehund</div>

</div>

</div>

<script>

document.getElementById('AU').onclick=function(){

  document.getElementsByClassName("Tiere").style.display='none';

  document.getElementsByClassName("Städte").style.display='none';

  document.getElementsByClassName("Obst").style.display='none';

     }

document.getElementById('TI').onclick=function(){

}

document.getElementById('ST').onclick=function(){

}

document.getElementById('OB').onclick=function(){

}

</script>

Seiten (9339): « Zurück 1 … 9328 9329 9330 9331 9332 … 9339 Weiter »

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken