Javascript-forum
mehrere Frage zu meiner Webseite - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: mehrere Frage zu meiner Webseite (/showthread.php?tid=2028)

Seiten: Seiten: 1 2

mehrere Frage zu meiner Webseite - black79 - 14.01.2023

Hallo,
ich habe hier schon einiges gefragt und teilweise auch umgesetzt. Jetzt habe ich nach einer kleinen Lernpause, endlich mal wieder Zeit.
Da ich schon länger nichts gemacht habe und einiges umgestellt habe ist es möglich, dass ich diese Fragen schon einmal gestellt habe.

Vorab möchte ich mich schon mal dafür entschuldigen!

Jetzt zur meiner Testseite: https://oesoft.de
 
1.)   der Scrollbalken rechts, sollte eigentlich nur neben der Tabelle verlaufen und nicht über die gesamte Webseite. Was muss ich da in CSS anpassen?
2.)   die Schrift in der Tabelle soll linksbündig und mittig zentriert verlaufen, welches Attribut sollte man da in CSS verwenden? die Icons in der Tabelle wollte ich auch durch das Attribut        „Padding“      anpassen um Platz zu Sparren.
3.)   der „Button“ um einen Datensatz (mariaDB) zu löschen ist auch noch ohne Funktion. Das Ermitteln der ID gestaltet sich etwas schwierig.  Ich möchte gerne die ID als Variable zwischen speichern und dann als POST (Ajax) an PHP senden (Löschvorgang SQL).

RE: mehrere Frage zu meiner Webseite - rzscout - 14.01.2023

Hi black79,
für das erste Problem gibt es mehrere Lösungen. Der einfachste Weg ist es, dass du der Tabelle eine feste Höhe gibts und mit der CSS-Eigenschaft 'overflow' arbeitest. Eine Lösung wäre hier dazu beschrieben --> https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/overflow und die Seite https://wiki.selfhtml.org/wiki/CSS/Tutorials/Boxmodell/%C3%BCbergro%C3%9Fer_Inhalt#overflow natürlich.

Für die Textausrichtung innerhalb eines Tabellenelements gibt auch mehrere Möglichkeiten. Eine davon ist die CSS-Eigenschaft 'vertical-align'. Damit lassen sich die Texte senkrecht ausrichten.

Für den Button würde ich keine ID vergeben sondern mit CSS-Klasse arbeiten und mit data-*. Vergebe allen Button die gleiche CSS-Klasse um alle anzusprechen. Dann arbeite mit der Javascript-Methode 'queryselectorAll' um alle Button zu selektieren. Verwende eine forEach-Anweisung wo du allen Button zusammen einen EventListener erstellst. Verwende dann die Informationen aus dem data-* um den Button zuzuordnen. Jetzt kannst du via XMLHttpRequest zu PHP schicken welchen Buttoninfos geschickt werden soll.

Ich glaube ich werde mal ein Beispiel für dich basteln, damit du damit arbeiten kannst. Wenn ich Zeit finde bastel ich dir eine Vorlage.

Viele Grüße

rzscout
Hi black79,
leider sind mir in deinem Code mehrere Problemstellen aufgefallen. Du verwendest den HTML-Tag 'font'. Dieser ist nicht mehr HTML5 Standard. Verwende hier lieber den HTML-Tag 'p' für Absatz. Du verwendest sehr häufig Inline-Styles. Hier solltest du das CSS auslagern. Verwende hier Klassen statt Inline-Styles. Vermeide die Verwendung von jQuery und auch Bootstrap. Sowohl CSS als auch Javascript bieten von Haus aus genug Eigenschaften und Methoden um auf externe Frameworks und Bibliotheken zu verzichten. Größenangaben von Tabellenelementen solltest mithilfe von CSS machen. Da Attribute wie width und height überflüssig sind. Es reicht wenn du den Initialspalten/Tabellen-Head eine feste Größe vorgibst und dies bitte mit CSS. Less und Sass haben ein paar Vorteile aber auch einige Nachteile: Hier würde ich dir empfehlen reines CSS zu verwenden.

Das sind alles nur Empfehlungen um deinen Code zu optimieren. Du musst nicht unbedingt das umsetzen, aber es wäre vom Vorteil für dich. Damit lassen sich Performance, Übersichtlichkeit des Codes und vieles weiteres verbessern.

Viele Grüße
rzscout

RE: mehrere Frage zu meiner Webseite - black79 - 14.01.2023

(14.01.2023, 13:04)rzscout schrieb: Hi black79,
für das erste Problem gibt es mehrere Lösungen. Der einfachste Weg ist es, dass du der Tabelle eine feste Höhe gibts und mit der CSS-Eigenschaft 'overflow' arbeitest. Eine Lösung wäre hier dazu beschrieben --> https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/overflow und die Seite https://wiki.selfhtml.org/wiki/CSS/Tutorials/Boxmodell/%C3%BCbergro%C3%9Fer_Inhalt#overflow natürlich.

Für die Textausrichtung innerhalb eines Tabellenelements gibt auch mehrere Möglichkeiten. Eine davon ist die CSS-Eigenschaft 'vertical-align'. Damit lassen sich die Texte senkrecht ausrichten.

Für den Button würde ich keine ID vergeben sondern mit CSS-Klasse arbeiten und mit data-*. Vergebe allen Button die gleiche CSS-Klasse um alle anzusprechen. Dann arbeite mit der Javascript-Methode 'queryselectorAll' um alle Button zu selektieren. Verwende eine forEach-Anweisung wo du allen Button zusammen einen EventListener erstellst. Verwende dann die Informationen aus dem data-* um den Button zuzuordnen. Jetzt kannst du via XMLHttpRequest zu PHP schicken welchen Buttoninfos geschickt werden soll.

Ich glaube ich werde mal ein Beispiel für dich basteln, damit du damit arbeiten kannst. Wenn ich Zeit finde bastel ich dir eine Vorlage.

Viele Grüße

rzscout
Hi black79,
leider sind mir in deinem Code mehrere Problemstellen aufgefallen. Du verwendest den HTML-Tag 'font'. Dieser ist nicht mehr HTML5 Standard. Verwende hier lieber den HTML-Tag 'p' für Absatz. Du verwendest sehr häufig Inline-Styles. Hier solltest du das CSS auslagern. Verwende hier Klassen statt Inline-Styles. Vermeide die Verwendung von jQuery und auch Bootstrap. Sowohl CSS als auch Javascript bieten von Haus aus genug Eigenschaften und Methoden um auf externe Frameworks und Bibliotheken zu verzichten. Größenangaben von Tabellenelementen solltest mithilfe von CSS machen. Da Attribute wie width und height überflüssig sind. Es reicht wenn du den Initialspalten/Tabellen-Head eine feste Größe vorgibst und dies bitte mit CSS. Less und Sass haben ein paar Vorteile aber auch einige Nachteile: Hier würde ich dir empfehlen reines CSS zu verwenden.

Das sind alles nur Empfehlungen um deinen Code zu optimieren. Du musst nicht unbedingt das umsetzen, aber es wäre vom Vorteil für dich. Damit lassen sich Performance, Übersichtlichkeit des Codes und vieles weiteres verbessern.

Viele Grüße
rzscout

 Ja :-) dass mit den Klassen wollte ich schon längst umgesetzt haben! Sleepy

 ist jQuery nicht eine Bibliothek von JavaScript?
 Ist aber auch egal, werde es rausnehmen! Möchte ja was lernen Smile

RE: mehrere Frage zu meiner Webseite - rzscout - 14.01.2023

Hi black79,
ja jQuery ist eine Javascript-Bibliothek. jQuery war auch mal sehr gut. Als es noch große Probleme gab durch die fehlende Kompatibilität zwischen den Browsern war jQuery eine gute Lösung und hat viele Vorteile mit sich gebracht. Nun haben sich die Browser weiter entwickelt so auch HTML, CSS und Javascript. Sodass vieles aus jQuery überholt ist und durch reines Javascript möglich ist. So wie die Selektion von Elementen mithilfe von CSS durch die Javascript-Methode 'querySelector' und 'querySelectorAll'.

Reines Javascript heutzutage viel mehr Möglichkeiten als es vor ein paar Jahren so war. Seit 2012/2013 sind viele Funktionen und Eigenschaften in der Syntax von JS verbessert worden. Ich sehe da viel Potenzial so gut wie möglich auf Frameworks und Bibliotheken in JS zu verzichten. Das kann auch zu einem positiven Nebeneffekt führen wie bessere Performance und weniger Traffic.

Am Ende ist es immer noch eine Empfehlung von mir die man umsetzen kann oder auch nicht. Du entscheidest letzendlich wie dein Projekt aufgebaut ist.

PS: Die Idee zu deinem Projekt find ich cool , weiter so ;-)

Viele Grüße

rzscout

RE: mehrere Frage zu meiner Webseite - black79 - 14.01.2023

Habe noch eine Verstädnisfrage :

ich habe in der CSS Datei eine Klasse für ein <div> angelegt, mit dem Attribut "margin"

wieso wird rechsbündig der Abstand von 4px nicht eingehalten?

https://oesoft.de

Code:
.container_nav {
     margin: 4px;
}

Code:
<div class="container_nav">
(14.01.2023, 14:44)black79 schrieb: Habe noch eine Verstädnisfrage :

ich habe in der CSS Datei eine Klasse für ein <div> angelegt, mit dem Attribut "margin"

wieso wird rechsbündig der Abstand von 4px nicht eingehalten?

https://oesoft.de

Code:
.container_nav {
     margin: 4px;
}

Code:
<div class="container_nav">

 Hat sich erledigt :-)

RE: mehrere Frage zu meiner Webseite - black79 - 14.01.2023

hallo rzscout,

ich versuche gerade einiges zu ändern, durch Deine Hilfe Shy 

ich habe jetzt die Tabelle etwas angepasst, und noch ein kleines Problem mit den Spalten (th) Überschrift bezüglich der Breite (weight).

https://oesoft.de
(14.01.2023, 16:48)black79 schrieb: hallo rzscout,

ich versuche gerade einiges zu ändern, durch Deine Hilfe Shy 

ich habe jetzt die Tabelle etwas angepasst, und noch ein kleines Problem mit den Spalten (th) Überschrift bezüglich der Breite (weight).

https://oesoft.de

hat sich alles erledigt !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

nicht weight sondern width Blush

RE: mehrere Frage zu meiner Webseite - rzscout - 14.01.2023

Sorry passiert mal, aber du hast Recht. width nicht weight.

RE: mehrere Frage zu meiner Webseite - black79 - 16.01.2023

(14.01.2023, 13:04)rzscout schrieb: Hi black79,
für das erste Problem gibt es mehrere Lösungen. Der einfachste Weg ist es, dass du der Tabelle eine feste Höhe gibts und mit der CSS-Eigenschaft 'overflow' arbeitest. Eine Lösung wäre hier dazu beschrieben --> https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/overflow und die Seite https://wiki.selfhtml.org/wiki/CSS/Tutorials/Boxmodell/%C3%BCbergro%C3%9Fer_Inhalt#overflow natürlich.

Für die Textausrichtung innerhalb eines Tabellenelements gibt auch mehrere Möglichkeiten. Eine davon ist die CSS-Eigenschaft 'vertical-align'. Damit lassen sich die Texte senkrecht ausrichten.

Für den Button würde ich keine ID vergeben sondern mit CSS-Klasse arbeiten und mit data-*. Vergebe allen Button die gleiche CSS-Klasse um alle anzusprechen. Dann arbeite mit der Javascript-Methode 'queryselectorAll' um alle Button zu selektieren. Verwende eine forEach-Anweisung wo du allen Button zusammen einen EventListener erstellst. Verwende dann die Informationen aus dem data-* um den Button zuzuordnen. Jetzt kannst du via XMLHttpRequest zu PHP schicken welchen Buttoninfos geschickt werden soll.

Ich glaube ich werde mal ein Beispiel für dich basteln, damit du damit arbeiten kannst. Wenn ich Zeit finde bastel ich dir eine Vorlage.

Viele Grüße

rzscout
Hi black79,
leider sind mir in deinem Code mehrere Problemstellen aufgefallen. Du verwendest den HTML-Tag 'font'. Dieser ist nicht mehr HTML5 Standard. Verwende hier lieber den HTML-Tag 'p' für Absatz. Du verwendest sehr häufig Inline-Styles. Hier solltest du das CSS auslagern. Verwende hier Klassen statt Inline-Styles. Vermeide die Verwendung von jQuery und auch Bootstrap. Sowohl CSS als auch Javascript bieten von Haus aus genug Eigenschaften und Methoden um auf externe Frameworks und Bibliotheken zu verzichten. Größenangaben von Tabellenelementen solltest mithilfe von CSS machen. Da Attribute wie width und height überflüssig sind. Es reicht wenn du den Initialspalten/Tabellen-Head eine feste Größe vorgibst und dies bitte mit CSS. Less und Sass haben ein paar Vorteile aber auch einige Nachteile: Hier würde ich dir empfehlen reines CSS zu verwenden.

Das sind alles nur Empfehlungen um deinen Code zu optimieren. Du musst nicht unbedingt das umsetzen, aber es wäre vom Vorteil für dich. Damit lassen sich Performance, Übersichtlichkeit des Codes und vieles weiteres verbessern.

Viele Grüße
rzscout


Guten Morgen,
ich weiß das Du mir helfen willst, und wenn es zeitlich passt mir eine Vorlage zum Verstädnis basteln möchtest.
Ich habe vorab zum Verstädnis noch eine Frage zu JavaScript.
Wenn man ein Element mit Javascript erzeugt hat, wie erstelle ich dann eine Klasse zu dem erzeugten Element?

Code:
//Zustaendigkeit
                    field = document.createElement('td');
                    font = document.createElement('p');
                    zustaendigkeit = elem.getElementsByTagName('zustaendigkeit')[0].firstChild.nodeValue;
                    font.innerHTML = zustaendigkeit;
                    field.appendChild(font);
                    field.setAttribute('width', 26);
                    line.appendChild(field);


RE: mehrere Frage zu meiner Webseite - admin - 17.01.2023

(16.01.2023, 09:39)black79 schrieb: Wenn man ein Element mit Javascript erzeugt hat, wie erstelle ich dann eine Klasse zu dem erzeugten Element?






Ich hoffe, dass man das so sehen sollte.
Wie da zu sehen, gibt es 2 Möglichkeiten.
Einmal className und setAttribute

RE: mehrere Frage zu meiner Webseite - rzscout - 18.01.2023

(16.01.2023, 09:39)black79 schrieb:
(14.01.2023, 13:04)rzscout schrieb: Hi black79,
für das erste Problem gibt es mehrere Lösungen. Der einfachste Weg ist es, dass du der Tabelle eine feste Höhe gibts und mit der CSS-Eigenschaft 'overflow' arbeitest. Eine Lösung wäre hier dazu beschrieben --> https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/overflow und die Seite https://wiki.selfhtml.org/wiki/CSS/Tutorials/Boxmodell/%C3%BCbergro%C3%9Fer_Inhalt#overflow natürlich.

Für die Textausrichtung innerhalb eines Tabellenelements gibt auch mehrere Möglichkeiten. Eine davon ist die CSS-Eigenschaft 'vertical-align'. Damit lassen sich die Texte senkrecht ausrichten.

Für den Button würde ich keine ID vergeben sondern mit CSS-Klasse arbeiten und mit data-*. Vergebe allen Button die gleiche CSS-Klasse um alle anzusprechen. Dann arbeite mit der Javascript-Methode 'queryselectorAll' um alle Button zu selektieren. Verwende eine forEach-Anweisung wo du allen Button zusammen einen EventListener erstellst. Verwende dann die Informationen aus dem data-* um den Button zuzuordnen. Jetzt kannst du via XMLHttpRequest zu PHP schicken welchen Buttoninfos geschickt werden soll.

Ich glaube ich werde mal ein Beispiel für dich basteln, damit du damit arbeiten kannst. Wenn ich Zeit finde bastel ich dir eine Vorlage.

Viele Grüße

rzscout
Hi black79,
leider sind mir in deinem Code mehrere Problemstellen aufgefallen. Du verwendest den HTML-Tag 'font'. Dieser ist nicht mehr HTML5 Standard. Verwende hier lieber den HTML-Tag 'p' für Absatz. Du verwendest sehr häufig Inline-Styles. Hier solltest du das CSS auslagern. Verwende hier Klassen statt Inline-Styles. Vermeide die Verwendung von jQuery und auch Bootstrap. Sowohl CSS als auch Javascript bieten von Haus aus genug Eigenschaften und Methoden um auf externe Frameworks und Bibliotheken zu verzichten. Größenangaben von Tabellenelementen solltest mithilfe von CSS machen. Da Attribute wie width und height überflüssig sind. Es reicht wenn du den Initialspalten/Tabellen-Head eine feste Größe vorgibst und dies bitte mit CSS. Less und Sass haben ein paar Vorteile aber auch einige Nachteile: Hier würde ich dir empfehlen reines CSS zu verwenden.

Das sind alles nur Empfehlungen um deinen Code zu optimieren. Du musst nicht unbedingt das umsetzen, aber es wäre vom Vorteil für dich. Damit lassen sich Performance, Übersichtlichkeit des Codes und vieles weiteres verbessern.

Viele Grüße
rzscout


Guten Morgen,
ich weiß das Du mir helfen willst, und wenn es zeitlich passt mir eine Vorlage zum Verstädnis basteln möchtest.
Ich habe vorab zum Verstädnis noch eine Frage zu JavaScript.
Wenn man ein Element mit Javascript erzeugt hat, wie erstelle ich dann eine Klasse zu dem erzeugten Element?

Code:
//Zustaendigkeit
                    field = document.createElement('td');
                    font = document.createElement('p');
                    zustaendigkeit = elem.getElementsByTagName('zustaendigkeit')[0].firstChild.nodeValue;
                    font.innerHTML = zustaendigkeit;
                    field.appendChild(font);
                    field.setAttribute('width', 26);
                    line.appendChild(field);

Klassen fügst du wie bei bestehenden Elementen hinzu über 'classList.add('meinKlassenName')'. Bitte kein setAttribute, dafür verwenden, da Werte überschrieben werden könnten und es sauberer ist die Native Methode mit der 'classList' zu verwenden.