HTML5 – die besten Beiträge

Verwandte Themen
Trismegisto
04.02.2025, 05:40

Frage zu Responsive Nav, Burger Button?

Hi, also ich verstehe hier folgendes nicht :

Warum das Hamburger Symbol bei bei zutreffender Mediaquerry "@media (max-width: 768px)", angezeigt wird, denn schließlich ist doch der ".menu-toggle" auf "display: none;" ???

Eventuell verstehe ich es richtig, dass durch ".classList.toggle('nav-active');" in der "function toggleMenu()" irgendwie der Burger aktiviert wird, durch eine versteckte VanillaJS Funktion, aber wie genau?

Danke

LG

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Meine Website</title>
   <style>
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
           font-family: Arial, sans-serif;
       }
       body {
           display: flex;
           flex-direction: column;
           align-items: center;
       }
       .navbar {
           width: 100%;
           background-color: #333;
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 15px;
       }
       .logo {
           color: white;
           font-size: 24px;
           font-weight: bold;
       }
       .nav-links {
           list-style: none;
           display: flex;
       }
       .nav-links li {
           margin: 0 15px;
       }
       .nav-links a {
           color: white;
           text-decoration: none;
           font-size: 18px;
       }
       .menu-toggle {
           display: none;
           font-size: 24px;
           color: white;
           cursor: pointer;
       }
       @media (max-width: 768px) {
           .nav-links {
               display: none;
               flex-direction: column;
               background-color: #333;
               position: absolute;
               top: 60px;
               right: 0;
               width: 100%;
               text-align: center;
           }
           .nav-links li {
               padding: 10px 0;
           }
           .menu-toggle {
               display: block;
           }
           .nav-active {
               display: flex;
           }
       }
   </style>
</head>
<body>
   <nav class="navbar">
       <div class="logo">Mein Logo</div>
       <span class="menu-toggle" onclick="toggleMenu()">&#9776;</span>
       <ul class="nav-links">
           <li><a href="#">Home</a></li>
           <li><a href="#">Über</a></li>
           <li><a href="#">Leistungen</a></li>
           <li><a href="#">Kontakt</a></li>
       </ul>
   </nav>
   <script>
       function toggleMenu() {
           document.querySelector('.nav-links').classList.toggle('nav-active');
       }
   </script>
</body>
</html>


ps:Ok hat sich geklärt...ich depp habe übersehen das die unteren css eigenschaften ja in der Mediaquerry drinne sind
HTML, Webseite, CSS, JavaScript, HTML5, Programmiersprache, Webdesign, Webentwicklung
1 Antwort
JrDev
08.04.2024, 05:05
Mit Umfrage

Welchen Weg sollte ich als angehender Frontend-Entwickler einschlagen: JavaScript Vanilla oder ein Framework?

Hallo Leute,

ich hoffe, euch geht es gut und ihr habt einen angenehmen Tag.

Ich habe eine Frage an die erfahrenen Frontend-Entwickler unter euch, wie ihr dem Titel unschwer entnehmen könnt :).

Mein Ziel ist es, mich eigenständig so weit zu bilden, dass ich einen Job als Junior/Berufseinsteiger Frontendentwickler bekommen kann.

Bis dato habe ich bereits einen HTML5- und CSS3-Udemy-Kurs durchlaufen und einige Tutorials nachgebaut. Nun fühle ich mich fit genug für den nächsten Schritt.

Hierbei wollte ich wissen, ob ich mit JavaScript Vanilla starten soll und einen Kurs dazu machen soll oder direkt mit einem der bekannten JS-Frameworks wie Angular, React oder Vue.js?

Da ich während meiner Ausbildung bereits mit C# und WinForms gearbeitet habe, sind mir die Programmierungsgrundlagen nicht ganz fremd :D

Ich habe mal gehört, dass man JavaScript Vanilla nur lernen sollte, wenn man keinerlei Programmiererfahrung hat, z.B. über Schleifen, Verzweigungen usw., ansonsten sollte man direkt mit einem Framework starten.

Aktuell würde ich mich für React entscheiden, da man später das Wissen auch super in React Native implementieren kann und somit auch Apps entwickeln kann. Da Web und App meine Interessenbereiche in der Entwicklung sind, würde es sich super anbieten, es sei denn, die Mehrheit sagt nein, auf keinen Fall React. Dann bitte mit einer Begründung und was ich alternativ dazu dann lernen sollte :)

Ach ja, natürlich anhand meines Ziels dürft ihr mir auch alle anderen Tipps geben, was ich noch alles lernen könnte oder draufhaben sollte, damit eben keine Absagen mehr eintreffen als Junior :)

Ich bedanke mich bei allen schon einmal herzlich für die Zeit, die Ihr aufwendet, für das Lesen und Antworten :)

Viele Grüße,

JrDev

JavaScript Vanilla 100%
Framework / Bibliothek (Angular, React, Vue.js) 0%
CSS, JavaScript, HTML5, berufseinsteiger, Frontend, Junior
2 Antworten
haveyou
15.01.2025, 12:28

Wie kann der Scroll-Button ausgeblendet werden bzw. eingeblendet?

Warum funktioniert es nicht, der Button bleibt von Anfang bis Ende der Seite eingeblendet.

Ich möchte eine JS -Funktion schreiben, die diesen Button erst einblendet, wenn der Nutzer ein Stück weit herunter gescrollt hat. Ebenso soll der Button versteckt werden, wenn der Nutzer wieder nach oben gescrollt hat.

Mein bisheriger Code:

HTML:  
   <a href="#" id="topButton">Nach oben</a>

CSS: 
#topButton {
    position: fixed;
    bottom: 20px; /* Abstand vom unteren Rand */
    right: 30px; /* Abstand vom rechten Rand */
    background-color: #007BFF; /* Blau */
    color: white; /* Weißer Text */
    padding: 10px 15px; /* Innenabstand */
    border: none; /* Kein Rand */
    border-radius: 5px; /* Abgerundete Ecken */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatten */
    text-decoration: none; /* Keine Unterstreichung */
    font-size: 14px; /* Schriftgröße */
    cursor: pointer; /* Zeiger-Hand-Symbol */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Animation */
  }


  #topButton:hover {
    background-color: #0056b3; /* Dunkleres Blau beim Hover */
    transform: translateY(-2px); /* Leichtes Anheben beim Hover */
  }


  #topButton:active {
    transform: translateY(0); /* Zurücksetzen bei Klick */
  }

JavaScript:
// Element auswählen
let topButton = document.getElementById("topButton");


// Scroll-Event-Listener hinzufügen
window.addEventListener("scroll", function() {
  // Zeigt den Button an, wenn mehr als 50px gescrollt wurde
  if (window.scrollY > 50) {
    topButton.style.display = "block"; // Button wird sichtbar
  } else {
    topButton.style.display = "none"; // Button wird versteckt
  }
});


// Klick-Event für den Button
topButton.addEventListener("click", function(event) {
  event.preventDefault(); // Standard-Aktion verhindern
  window.scrollTo({
    top: 0, // Scrollt nach oben
    behavior: "smooth" // Sanftes Scrollen
  });
});
Homepage, App, Programm, HTML, Webseite, programmieren, CSS, JavaScript, HTML5, Code, PHP, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
1 Antwort
stealthuser
01.11.2024, 06:40
Mit Bildern

Wie kann ich einen Button nach dem Laden einer Webseite aktiviert aussehen lassen?

Ich habe mir für mein Intranet ein kleines Video-Portal programmiert - das eigentlich ganz gut funktioniert.
Oben gibt es eine aufklappbare Ansicht mit Haupt und Unterkategorien und wenn eine Unter-Kategorie angeklickt wird öffnet sich die Seite mit einer Übersicht relevanter Videos.

Die Haupt-Kategorie gebe ich als URL-Parameter mit -> das funktioniert auch und es wird verdeckt die zu letzt verwendete Hauptkategorie angewählt.

Was nicht funktioniert, ist den Button für die aktuelle Hauptkategorie im Reitermenü so hervor zu heben als wenn er angeklickt wurde - bzw. den Button zu aktivieren.

JavaScript:

function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;


  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }


  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

PHP-Script:


$cat = "Musik";
if (isset($_GET['cat']))
{
$cat = ($_GET['cat']);
}

echo '<details><summary> Kategorien: </summary>';
echo '<div class="tab">';

echo '<button type="button" name="Musik" class="tablinks" onclick="openCity(event, \'Musik\')">Musik</button>
<button type="button"  name="Anleitungen" class="tablinks" onclick="openCity(event, \'Anleitungen\')">Anleitungen</button>
<button type="button"  name="Kochen" class="tablinks" onclick="openCity(event, \'Kochen\')">Kochen</button>
<button type="button"  name="Backen" class="tablinks" onclick="openCity(event, \'Backen\')">Backen</button>
<button type="button"  name="Heimwerken" class="tablinks" onclick="openCity(event, \'Heimwerken\')">Heimwerken</button>';
  
echo '</div>';

echo '<!-- Tab content -->
<div id="Musik" class="tabcontent">
<div style="column-count: 5;">
'.$category_Musik.'
</div>
</div>

<div id="Anleitungen" class="tabcontent">
<div style="column-count: 5;">
'.$category_Anleitungen.'
</div>
</div>

<div id="Kochen" class="tabcontent">
<div style="column-count: 5;">
'.$category_Kochen.'
</div>
</div>

<div id="Backen" class="tabcontent">
<div style="column-count: 5;">
'.$category_Backen.'
</div>
</div>

<div id="Heimwerken" class="tabcontent">
<div style="column-count: 5;">
'.$category_Heimwerken.'
</div>
</div>';

echo '</details>';

echo '<SCRIPT type="text/javascript" language="JavaScript">
openCity(event, \''.$cat.'\'); 
</SCRIPT>';

CSS-Definitionen:



/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}


/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

so sieht es aus:

so soll es nach dem Laden der Seite aussehen:

Hat jemand eine Idee wie ich den Button für die aktuelle Kategorie beim Laden der Seite automatisch aktivieren kann?

Bild zum Beitrag
HTML, Webseite, CSS, JavaScript, HTML5, Code, PHP, Webdesign, Webentwicklung
1 Antwort
xXxNightmarexXx
31.07.2024, 20:54
Mit Links

Javascript Variablen ein/ersetzen - Matomo - Domain?

Moinsen,

ich bin dabei, mir ein Script für Multidomain Tracking zu bauen.
Also Cookies auf mehreren Domains setzen usw.
Das meiste funktioniert soweit wie erwartet.
Das Script soll dynamisch über Cloudflare Zaraz geladen werden.

Jetzt fehlt mir bis jetzt soweit nur noch das einsetzen der Session ID, die ich generiere und die Domain, die aktuell aufgerufen wurde.

In dem Code möchte ich gerne die Variable sessionID sowie die Variable Domain einsetzten lassen.
Wie kann ich das bewerkstelligen?

Ich bin leider nicht ganz so erfahren in Javascript.
Ich habe schon einiges getestet aber es will einfach nicht.

Die Sache ist die, dass es mit Vanilla JS laufen müsste. Also ohne extras usw.

Es soll halt nur JS per Cloudflare Zaraz eingebunden werden.

Der/Die beiden Code Bestandteile sind folgende:

Einmal der Matomo Tag Manager      

<!-- Matomo Tag Manager -->
<script>
  var _mtm = window._mtm = window._mtm || [];
  _mtm.push({'uid':+sessionID });
  _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
  (function() {
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src='https://xyz.de/js/container_12345.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Tag Manager -->


Sowie der JS Tracker Code

var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
  _paq.push(["setCookieDomain" +DomainX]);
  _paq.push(["setDomains", ["*xyz.de"]]);
  _paq.push(["enableCrossDomainLinking"]);
  _paq.push(['setUserId', sessionID]);
  _paq.push(['enableHeartBeatTimer', 20]);
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  _paq.push(['trackVisibleContentImpressions', true, 750]);
  (function() {
    var u="https://xyz.de/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', 'X']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<noscript><p><img referrerpolicy="no-referrer-when-downgrade" src="https://xyz.de/matomo.php?idsite=3&amp;rec=1" style="border:0;" alt="" /></p></noscript>
<!-- End Matomo Code -->
Linux, HTML, Webseite, JavaScript, HTML5, Code, PHP, Programmiersprache, Script, Webentwicklung, Variablen, cloudflare
1 Antwort
JakeKlint
18.06.2024, 08:22
Mit Umfrage

Welche Methode zur Umsetzung einer Website?

Hallo ihr Lieben!

Ich habe einen Verein gegründet und wir brauchen eine ordentliche Website. Das Team der ITler besteht aus 3 Personen (inkl. mir). Einer davon kann Frontend (Design, CSS), einer kann Backend (Datenbanken, HTML, JS, Serverkonfiguration). Ich kann alles davon nur so ein bisschen und koordiniere das Projekt. Bisher haben wir eher provisorisch eine WordPress Seite, sind damit aber aus folgenden Gründen nicht zufrieden:

  1. Unübersichtlich mit den vielen Plugins usw. - es ist nicht einheitlich und wirkt zugemüllt und umständlich
  2. Der Code ist schwer zu lesen und nachzuvollziehen
  3. Man kann den Code (soweit ich weiß) nicht vollständig anpassen und ist daher in Hinblick auf Design und Funktionalität eingeschränkt (in unserem Theme „Astra“ kann man Designfarben einstellen, sieht aber nicht, wo sie verwendet werden)

Jetzt suchen wir nach einer Alternative. Man könnte versuchen, die Website ohne CMS o. Ä. auf die Beine zu stellen, man könnte ein anderes, anpassbareres CMS verwenden oder bloß ein CMF, wobei ich nicht sicher bin, ob das viel besser ist.

Wir können im Moment nicht genau einschätzen, ob es realistisch ist, die Webseite ohne CMS o. Ä. sicher, ordentlich und schön aufzubauen. Allerdings wissen wir auch nicht, ob es ein CMS gibt, das so viel Anpassbarkeit bietet, dass man (mit genug Programmierkenntnissen) theoretisch ALLES umsetzen kann. Funktionen, die wir brauchen, wären:

  • Beiträge (Blog, News)
  • Normale Inhaltsseiten
  • Eingebundene Mediendateien
  • Kleine eingebettete Online-Spiele
  • Kontakt/Anmeldeformulare
  • Suchfunktion
  • Design exakt, wie der Designer es sich vorstellt
  • evtl. ungewöhnliche Seitennavigation (Nicht nur mit Standard Menüs, wie bei WordPress von Anfang an drin)

Denkt ihr, WordPress oder Drupal ist durch Themes, Plugins/Modulen etc. doch anpassbar genug und wir müssten uns nur mal genauer hineindenken oder sollte man in unserem Fall lieber ganz auf Content-Management Optionen verzichten?

Vielen Dank schon mal für eure Antworten!

Benutzt Wordpress und verwendet vorhandene Themes und Plugins 56%
Baut die Seite von 0 auf selbst 44%
Benutzt Wordpress und programmiert Themes und Plugins selbst 0%
Benutzt Drupal und programmiert selbst 0%
Benutzt Drupal und verwendet vorhandenes 0%
Nutzt ein anderes CMS oder CMF 0%
Homepage, HTML, Webseite, CSS, WordPress, JavaScript, HTML5, CMS, Content-Management, Drupal, PHP, Typo3, Webdesign, Webentwicklung, Webhosting, Webserver, Website Design
6 Antworten

Meistgelesene Beiträge zum Thema HTML5

Mehr meistgelesene Fragen zu HTML5