Beiträge von Sempervivum

Auf jeden Fall vor dem Javascript. Am besten im Head.

Ich habe beim Testen dein CSS verwendet. Ich habe jQuery benutzt. Hast Du jQuery eingebunden?

So funktioniert's:

<input id="cb1" type="checkbox" value="Opt1"><label for="cb1">Option 1</label><br>        <input id="cb2" type="checkbox" value="Opt1"><label for="cb2">Option 2</label><br>
        <input id="cb3" type="checkbox" value="Opt1"><label for="cb3">Option 3</label><br>
        <script>
            $("input[type='checkbox'] + label").on("dblclick", function () {
                $("input[type='checkbox']").prop("checked", true);
            })         </script>

Dazu müsste man wissen, wie das Umfeld aussieht: Du schreibst: "Doppelklick wählt alle Checkboxen mit gleichem Ziel aus" - wie ist das gemeint? Sind den Checkboxes Links zugeordnet. Am besten postest Du ein kleines Beispiel, wo alles drin ist, was man für die Realisierung braucht.

So etwas habe ich schon mehrfach gemacht, indem ich die Checkbox unsichtbar gemacht habe und das neue Symbol in einem Label als Hintergrund gesetzt habe. Den Hintergrund kann man dann auf Grund des :checked umschalten. Dann musst Du natürlich auch das dblclick-Event auf das Label registrieren.
Edit: Ich sehe gerade, dass du das mit dem Label ja schon gemacht hast. Bleibt das Problem mit den Doppelklick: Wie gesagt, du musst den Listener für das Label registrieren und dann durch Navigieren im DOM auf die richtigen Elemente wirken lassen.

Zitat

Mit dem CSS klappt das so nicht

Hast Du das ausprobiert? Ich schon. In meinem Beispiel-CSS weise ich die Breite dem Label zu und das ist sichtbar.

Zitat

würde es großen Aufwand machen alles umzustellen als Buttons mit gleicher Größe

Das läuft genau auf meinen Vorschlag mit der festen Breite hinaus. Den Text kannst Du mit text-align;center; leicht zentrieren.

Wie hast Du sie denn vorher ausgerichtet?
Ich empfehle, es mit CSS zu machen, indem Du den Labels eine feste Breite gibst:

#myform label {                display: inline-block;
                width: 65px;             }

Genau, das ist sehr zu empfehlen. Das Formular zunächst leer lassen, die Bezeichnungen in einem Array ablegen und das HTML des Formulars in einer Schleife generieren:

<form id="myform" class="check_LEDs" name="LED_form1">        </form>
        <script>
            var leds = ["LED0", "LED1", "LED2"]; // usw.
            html = "";
            for (var i = 0; i < leds.length; i++) {
                html += '<input type="checkbox" name="' + leds[i] + ' " id="' + leds[i] + '" value="0" onclick="GetCheck(\'' + leds[i] + '\', this)">';
                html += '<label for="' + leds[i] + '"><span></span>' + leds[i].replace("LED", "LED&nbsp;&nbsp;&nbsp;") + '</label>';
            }             document.getElementById("myform").innerHTML = html; </script>

Wenn ich z. B. dieses CSS:

width: 150px;    height: 100px;

auf den iFrame des Youtube-Videos anwende, verkleinert es sich problemlos.

lp1, lp2 und lp3 sind keine Input-Elemente sondern Tabellenzellen. Daher kannst Du den Inhalt nicht mit value ermitteln, sondern musst innerHTML verwenden.

Damit die Datei für alle Besucher, die diese Seite aufrufen, verfügbar ist, müsstest Du sie hochladen. Auswerten geht dann nur serverseitig mit PHP oder clientseitig mit Ajax. Du solltest über einen Wechsel deines Anbieters nachdenken. Solche Beschränkungen sind beim Aufbau einer Wetterseite nicht akzeptabel.

Wo liegt denn die Textdatei, auf dem Server? Dann kannst Du sie ganz einfach mit Ajax auslesen.

Gut gelungen, die Grafik!

Wenn man erwartet, dass registrierte Maus-Eventhandler auf einem Touch-Gerät genau so funktionieren, wie bei Mausbedienung, so kann das bis zu einem gewissen Grade funktionieren, es kann aber auch schief gehen und nicht das erwartete Verhalten bringen, so wie in deinem Fall.
Ich empfehle, abhängig vom Typ des Gerätes entweder die Maus- oder die Touch-Handler zu registrieren. Dieses habe ich auf meinem Android-Handy getestet und es funktioniert dort:

<div id="msgbox"></div>        <button style="padding: 50px;" id ="btn1">rauf</button>        <script>            var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));            if (isTouch) {                document.getElementById("btn1").addEventListener("touchstart", function () {                    document.getElementById("msgbox").innerHTML += "tstart";                });                document.getElementById("btn1").addEventListener("touchend", function () {                    document.getElementById("msgbox").innerHTML += "tend";                });            } else {                document.getElementById("btn1").addEventListener("mousedown", function () {                    document.getElementById("msgbox").innerHTML += "mdown";                });                document.getElementById("btn1").addEventListener("mouseup", function () {                    document.getElementById("msgbox").innerHTML += "mup";                });             }

Sieht gut aus, in der Horizontalen passt sich die Darstellung perfekt an die Fensterbreite an.

Nein, ich meinte weiterhin absolut positionieren und nur die Position top und left dynamisch mit Prozentangaben. Wenn es mit absoluten Werten möglich war, müsste es doch möglich sein, auch für die relativen Werte einen Algorthmus zu schreiben.

Zitat

left_relativ = (left_absolut / width_containter) * 100 . '%';

Wenn ich dem .field mit den Developertools eine relative Breite gebe:

Zitat

.field { max-width: 200px; height: auto; position: absolute; max-width: 10%;}

und dem #map_wrapper ebenfalls:

Zitat

#map_wrapper { left: 50%; max-width: 1790px; margin-left: -895px; top: 0px; bottom: 0px; right: 0px; /* position: absolute; */ width: 100%;}

passt sich die Breite der Grafiken an die Bildschirmbreite an. Das ist jedoch nur die halbe Miete, denn jetzt müsstest Du auch die Positionen relativ definieren und die Prozentwerte mit deinem PHP berechnen.
Edit: Ich kann machen, was ich will, das Forum verschluckt konsequent die Zeilenumbrüche!

Verstehe. So wie auf dem oberen Bild sieht es bei mir auf dem Desktop auch aus. Selbst wenn es gelingt, das Ganze responsiv zu mächen, so dass es vollständig auf den Bildschirm einen Handys passt, wird es doch dann so klein, dass man kaum noch etwas erkennen kann?
Sieht so aus, als ob es ein Spiel werden soll?

Was geht denn nicht mehr? Ich weiß ja nicht, wie es aussehen müsste.

Da fehlt jeweils der Doppelpunkt nach dem "top".
Ich habe deinen Code in eine Testseite eingebaut und ich kann machen was ich will, die Größen verändern sich einwandfrei abhängig von der Fensterbreite. Das Problem muss woanders liegen. Woanders eine CSS-Definition mit höherer Priorität, u. U. als Inlinestyle?
Am besten postest Du mal die URL deiner Seite.