Beiträge von Knollkopp

Knollkopp · 24. Januar 2019

Moin,

ich habe ein select menü, in welchem ich per javascript die ausgewählte Option ändern möchte, also folgendermaßen:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Beispiel HTML-Grundgerüst für jQuery Mobile</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" 
          rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link rel="stylesheet" href="style.css">

    <script>
      function load(){
        document.getElementById("select1").value = "option2";
      }

    </script>
  </head>
  <body onload="load()">
    
    <select  name="select" id="select1">
    <option value="option1">Option1</option>
    <option value="option2">Option2</option>
    <option value="option3">Option3</option>
    </select>
    
  </body>
</html>

Alles anzeigen

Es wird zwar der value-Wert übernommen, angezeigt wird aber trotzdem "Option1".

Kann mir jemand helfen?

Knollkopp · 16. Januar 2019

Hallo Zusammen,

ich bastle probehalber an einer Web App. Diese soll einerseits offline verfügbar sein, andererseits soll die Möglichkeit, sie inkl. Icon auf dem Startbildschirm abzulegen und dann im Fullscreen zu starten.

Einzeln klappt das auch beides:

Offline-Verfügbarkeit über

HTML

<html lang="de" manifest="offline.appcache">

und die dazugehörige offline.appcache:

Code

CACHE MANIFEST
index.html
icon.png
jquerymobile.css
jquery.js
jquerymobile.js

Startbildschirm Icon und Fullscreen mittels

Code

<link rel="manifest" href="fullscreen.appcache">

und die fullscreen.appcache:

Code

{
  "background_color":"#ffffff",
  "description":"Diesunddas",
  "display":"fullscreen",
  "gcm_sender_id":"1",
  "gcm_user_visible_only":true,
  "name":"Rechner 0.5",
  "icons":[
       {
        "src":"icon.png",
        "sizes":"200x200","type":"image/png"
       }],
  "orientation":"portrait",
  "short_name":"R 0.5",
  "start_url":"/",
  "theme_color":"#ffffff"
}

Alles anzeigen

Wie gesagt, beides funktioniert nur einzeln.

Sobald ich beide Dateien in der index.html verlinke wird die fullscreen.appcache nicht mehr genutzt. Beide .appcache in einer Datei führt auch zu keinem funktionierenden Ergebnis.

Wo ist mein Denkfehler?

Knollkopp · 1. Juni 2018

Hi,

ich hätte gern eine "sticky" Menüleiste und darunter den Inhalt auf zwei Spalten aufgeteilt. Nun weigert sich das Menü aber, "sticky" zu bleiben, wenn darunter die <div>s floaten... Hier mal der Code dazu:

Code

<body>
    
    <style>

      * {
        box-sizing: border-box;
      }
      
      body {
        background-color: white;
        font-family: "Open Sans", sans-serif;
        font-size: 18px;
        margin: 0;
        color: #444;
        width: 100vw;
      }

      .header {
        padding: 5px 5px 5px 15px;
        margin-top: 10px;

        width: 100vw;
        height: 10%;
        background-color: grey;
      }

      .menu {
        padding: 5px;
        margin-bottom: 5px;
        width: 100vw;
        background-color: aquamarine;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
      }



      .col-50{
        float: left;
        width: 50%;
        padding: 0 10px 0 10px;
      }

      .col-100{
        width: 100%;
        padding: 10%;
      }
    </style>
    
    <div class="header">
      Kopfzeile
    </div>
    
    <div class="menu">
    Hier ist das Menü 
    </div>
    
    
    <div class="col-50">
      Inhalts Text diesdas tral lalalala  In
      halts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  <br>
      Inhalts Text diesdas tral lalalala  
      Inhalts Text diesdas tral lalalala  
      Inhalts Text diesdas tral lalalala  <br> <br>
      Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  
      <br><br><br>
      Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  
      Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  
      Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  
    </div>
    <div class="col-50">
      Inhalts Text diesdas tral lalalala  In
      halts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  <br>
      Inhalts Text diesdas tral lalalala  
      Inhalts Text diesdas tral lalalala  
      Inhalts Text diesdas tral lalalala  <br> <br>
      Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  
      <br><br><br>
      Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  
      Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  
      Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  Inhalts Text diesdas tral lalalala  
    </div>

  </body>

Alles anzeigen

Ohne das

Code

        float: left;

bei der col-50 funktioniert es, nur teilt sich der Inhalt dann logischerweise nicht mehr auf. Wie kriege ich das beides unter einen Hut?

Knollkopp · 1. Juni 2018

Da hast du wahrscheinlich recht. Im Moment ist es bloß eine kleine Bastelei zum Lernen, die mir aus den eingegebenen Daten neue berechnet, die ich dann offline weiterverwerten kann und danach nicht wieder brauche. Quasi ein sehr simpler Rechner.

Auf Dauer wäre ein Speichern wohl sinnvoll, dann müsste ich das Ganze etwas umbauen bzw. eh auf PHP umschwenken.

Da es aber wie gesagt mehr ein Lernprojekt ist, sieht der Code momentan eh so aus, dass es für ihn in absehbarer Zeit eh keine andere Chance gibt, als neu und schöner geschrieben zu werden.

Knollkopp · 1. Juni 2018

Funktioniert, danke!

Um das Ganze auch auf dem Smartphone lesbar zu machen?

Knollkopp · 1. Juni 2018

Moin,

ich habe eine Tabelle aus <div>s erzeugt und würde gern unter den Reihen eine Border anzeigen lassen.

Klappt nur irgendwie nicht... Hier mal der Code:

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
      .container {
        float: left;
        padding: 20px; 
        border: 2px solid;
      }

      .table {
        display: table;
        border: 2px solid;
      }

      .row {
        display: table-row;
        border: 2px solid;
      }

      .cell {
        display: table-cell;
        padding: 5px;
      }
    </style>
  </head>

  <body>
    
  <div class="container">
    <div class="table">
        <div class="row">
          <div class="cell">Text1 </div>
          <div class="cell">Text1 </div>
        </div>
        <div class="row">
          <div class="cell">Text1 </div>
          <div class="cell">Text1 </div>
        </div>
        <div class="row">
          <div class="cell">Text1 </div>
          <div class="cell">Text1 </div>
        </div>
      </div>
    </div>

      
  </body>
</html>

Alles anzeigen

Knollkopp · 1. Juni 2018

Weil Berechnung und Ausgabe komplett über Javascript laufen und auf der gleichen Seite wieder ausgegeben werden.

Knollkopp · 30. Mai 2018

Danke für eure Antworten!

Tatsächlich sind sowohl die Tabelle als auch <form> aus Gewohnheit entstanden, ich werde mich jetzt noch mal an eine Variante mit DIV wagen.

Knollkopp · 30. Mai 2018

Danke!

Insgesamt wäre es natürlich toll, wenn mit jedem Klick Zeilen dazu kämen.

Knollkopp · 30. Mai 2018

Problem gelöst: Einerseits muss ich bei Notepad++ den vollständigen Pfad der js Datei angeben, damit der Code ausgeführt wird.

Das eigentliche Problem lässt sich damit beheben, dass der Button nicht Teil der Tabelle sein darf.

Setze ich den einzeln darunter funktioniert das Ganze. Kann mir das jemand erklären?

Knollkopp · 30. Mai 2018

Merkwürdig. Ich bin grade am Javascript lernen, nutze dafür entweder Notepad++ und schaue mir das Ergebnis dann entsprechend im Browser an oder Thimble.

Offline Browser funktioniert scheinbar gar keine extern eingebundene js Datei, oder gibt es dafür einen Trick?

Über Thimble wird die Funktion zwar, wie beschrieben, ausgeführt, die Zeile ist aber genau so schnell wieder weg. Deine Version basti1012 funktioniert dort allerdings, genau wie von dir gepostet.

Hier ist mal der komplette Code:

HTML

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>

<form>

    <table>

      <tr>
        <td>Vorname <input type="text" id="vn1"></td>
        <td>Nachname: <input type="text" id="nn1"></td>
      </tr>

      <tr style="visibility: collapse" id="opt">
        <td>Vorname: <input type="text" id="vn2"></td>
        <td>Gewicht: <input type="text" id="nn2"></td>
      </tr>

      <tr>
        <td colspan="2"><button onclick="add()">Weitere Reihe hinzufügen</button></td>
      </tr>

    </table>

</form>


</body>

</html>

Alles anzeigen

Knollkopp · 29. Mai 2018

Hallo Zusammen,

ich möchte von der Zeile

Code

<tr style="visibility: collapse" id="opt">

per js die visibility ändern.

Versucht habe ich es mit

Code

function add() {
document.getElementById("opt").style.visibility = "visible";
}

die per Button aufgerufen wird.

Das lässt die Zeile aber nur kurz aufblitzen und direkt wieder verschwinden.

Was mache ich falsch?

Beiträge von Knollkopp

select menü mit jquery mobile

Webapp Cache Probleme

Sticky Menü Probleme

visibility mit Javascript ändern

Border von <div> Tabelle anzeigen

Border von <div> Tabelle anzeigen

visibility mit Javascript ändern

visibility mit Javascript ändern

visibility mit Javascript ändern

visibility mit Javascript ändern

visibility mit Javascript ändern

visibility mit Javascript ändern