Ich mag Ihr Text mehr als viele andere. Er sieht nicht zu formell aus und geht direkt zur Sache.

Aber es bleiben jedoch unangenehme Gefühle, weil Sie den Benutzer dazu zwingen, eine Taste zu drücken, ohne ihm eine Auswahl zu geben. Außerdem ist diese Schaltfläche nur für Sie wichtig. Für den Benutzer ist dies ein unnötiges Hindernis auf dem Weg.

Und meiner Meinung nach verfolgt die Direktive zwei Ziele:

  1. Holen Sie vor der Verwendung von Cookies die Zustimmung des Nutzers ein.
  2. Dem Benutzer genügend Informationen geben, um eine Entscheidung absichtlich zu treffen.

Daher hilft der Link "Mehr Infos" beiden Seiten. Sie verbergen alle rechtlichen Hintergründe dafür, und der Benutzer versteht, dass er die Situation kontrolliert.

Darüber hinaus können Sie dem Benutzer zeigen, wie Sie sich um ihn kümmern. Fügen Sie am Anfang des Textes ein paar Beispiele hinzu, was der Benutzer dank Cookies auf Ihrer Website genau erhält. Zum Beispiel:

Wir verwenden Cookies, damit Sie die Kaufhistorie sehen und nicht zweimal dieselben Felder ausfüllen können. Weitere Informationen zu Cookies.
OK, verstanden
...zur Antwort

Um alle Links zu einer solchen Site auszublenden, können Sie CSS verwenden:

a[href*="chip.com/"] {
	display: none;
}

order mit jQuery:

$("a[href*='chip.com/']").hide();

Hier ist die Beschreibung der Attributselektoren:
https://developer.mozilla.org/de/docs/Web/CSS/Attributselektoren

...zur Antwort

https://wordpress.org/plugins/mail-on-update/

...zur Antwort
  1. Wir prüfen die Richtigkeit der Daten.
  2. Wir prüfen, ob das Datum gekommen ist, um den Zähler zu starten.
  3. Wenn die Zählung bereits begonnen hat, bestimmen wir, welcher Wert des Zählers angezeigt werden soll und wann die nächste Aktualisierung des Zählers erfolgen soll.
  4. Verwenden Sie die setTimeout-Methode, um den nächsten Aktualisierungszähler zuzuweisen.
  5. Verwenden Sie die setInterval-Methode, um den Zähler danach regelmäßig zu aktualisieren.
  6. Verwenden Sie die clearInterval-Methode, um die Intervalle zu stoppen.

Erklärungen zu diesen Methoden finden Sie zum Beispiel hier: JavaScript Timing Events

Hier ist ein Entwurf der Lösung. Sie müssen testen, ob ich alles berücksichtigt habe.
Demo: https://codepen.io/glebkema/pen/jRKWGP?editors=1010

HTML:

<div id="counter">-</div>

JavaScript:

var $counter = document.getElementById('counter'),
	start = Date.parse('10 Apr 2019 12:00:00 GMT-0200'),
	end = Date.parse('23 Apr 2019 16:00:00 GMT-0200'),
	numberOfTicks = 420;

if (start && end && start < end) {
	var interval = (end - start) / numberOfTicks,
		now = new Date().getTime(),
		counter,
		nextTick;
	if (now < start) {
		counter = 0;
		nextTick = start;
	} else {
		counter = Math.floor((now - start) / interval);
		nextTick = end - (numberOfTicks - counter - 1) * interval;
	} 
	$counter.innerHTML = counter;
	setTimeOut(function() {
		if (counter < numberOfTicks) {
			$counter.innerHTML = ++counter;
			var timerId = setInterval(function() {
				if (counter < numberOfTicks) {
					$counter.innerHTML = ++counter;
				} else {
					clearInterval(timerId);
				}
			}, interval);
		}
	}, nextTick - now);
} else {
	console.error('Data is incorrect');
}
...zur Antwort

Gefahren im Weg eines Freelancers:

1) Richtige und zeitnahe Meldung an den Steuerdienst.

Zum Beispiel erklären freiberufliche Dienstleistungen lautstark, dass sie Steuern auf Transaktionen mit Ihnen senden. Der Hinterhalt ist jedoch, dass sie nur ihre eigenen Steuern für ihre Dienstleistungen an Sie und Ihre Kunden zahlen. Ein Freelancer muss selbst dafür sorgen, dass er seine eigenen Steuern bezahlt.

2) Die Konkurrenz ist sehr hoch. Viele Programmierer aus Indien, China und Russland sind bereit, jede Arbeit für 5 Euro pro Stunde anzunehmen. Und das Niveau der Arbeit derer, die 10-20 Euro pro Stunde Arbeit brauchen, ist mit jedem Jahr höher.

Sie müssen verstehen, warum der Kunde mehr bezahlen möchte und für Sie bezahlen möchte.

3) Es gibt auch viele Kunden, mit denen Sie die Arbeit bereuen werden. Sie müssen lernen, zu erkennen, wann eine scheinbar einfache Aufgabe die Überarbeitung der gesamten Site verbirgt und mit welchem ​​der Kunden Sie nicht arbeiten sollten.

Ich habe so gehandelt:

1) Ich habe die Anfragen von Kunden auf freiberuflichen Websites geprüft und einen sehr engen Bereich ausgewählt, der gefragt ist und gleichzeitig ausreichende Qualifikationen erfordert. Und studierte es so gut ich konnte. In meinem Fall waren es Bootstrap und Karussells aller Streifen.

2) Ich habe angefangen, dieses Wissen bei StackOverflow.com zu unterstützen. Dies hat mir die Erfahrung gemacht, mit Kunden zu kommunizieren und dem Problem auf den Grund zu gehen. Außerdem sah ich erfahrenere Programmierer, die dieselben Fragen beantworteten, und ich erhielt sofort Kritik, als ich anfing, Unsinn zu reden. Dies half mir, die schwierigen Momente zu verstehen, die ich selbst nicht bemerkte.

3) Ich fing an, kleine Arbeiten zu den gleichen Themen zu machen. Als ich die Arbeit gut machte, wurde ich gebeten, etwas anderes zu tun, und ich musste neue Bereiche verstehen.

4) Parallel dazu habe ich systematische Kurse zu Javascript, anpassungsfähigem Layout und Arbeitstechnologien studiert. Und allmählich fügte ich meiner Palette neue Wissensfelder hinzu.

5) Mit dem Aufkommen von Stammkunden und der Anhäufung von Erfahrungen konzentriere ich mich zunehmend auf eine enge Art von Aufgaben, bei denen ich sehr gut arbeite und bei denen ich wettbewerbsfähig sein und mehr verdienen kann.

Ich habe aber schon mehrere Jahre gebraucht, und es gibt noch viel Arbeit an mir und viele Wissensgebiete für die Lern- und Trainings Fähigkeiten.

...zur Antwort

Auf diese Anfrage stellt Google mehrere Online-Boards für das gemeinsame Zeichnen zur Verfügung: https://www.google.com/search?q=online+drawing+picture+together

Von diesen schien diese Seite am stilvollsten: https://sketchtogether.com/

...zur Antwort

Der feste Bereich kam aus dem allgemeinen Seitenfluss, und alle anderen Blöcke wurden aus diesem Grund nach oben verschoben. Daher befindet sich der benachbarte Block jetzt unter dem festen Bereich. 

Um dies zu beheben, fügen Sie die obere Polsterung für den Body-Tag hinzu. Die Größe der "Polsterauflage" sollte der Höhe der festen Fläche entsprechen.

Zum Beispiel:

body {
	padding-top: 80px;  // Oder einen anderen Wert
}

Vielleicht sollte diese Auffüllung in Ihrem Layout nicht dem Body-Tag hinzugefügt werden, sondern dem Containerblock, der den Header und den Rest des Inhalts enthält.

...zur Antwort

Zu diesem Zweck verwende ich "Adblock Plus". Es hat eine Erweiterung für Chrome, wodurch die Werbung auf Websites deaktiviert wird.

Zusätzlich hat es die Option "Element blockieren":

Wenn Sie darauf klicken, können Sie einen Block auf der Site auswählen, den Sie nicht sehen möchten, und Adblock Plus blendet ihn bei jedem Öffnen dieser Site aus.

...zur Antwort

Das jQuery Mouse Wheel Plugin fügt Browser-Mausrad-Unterstützung für Ihre Skripts hinzu. So können Sie mit den Mausereignissen umgehen, die Bildlaufrichtung bestimmen und die Reaktion der Animation programmieren.

Dieses Skript scrollt auch mit dem Touchpad und, soweit ich mich erinnere, auch mit dem Touchscreen.

Hier ist ein Beispiel für den horizontalen Bildlaufeffekt. Sie können es als Grundlage für die Programmierung anderer Effekte verwenden.

Sie müssen auch Tastenanschläge auf der Tastatur abfangen und dieselben Animationseffekte hinzufügen wie beim Scrollen mit der Maus und dem Touchpad.

...zur Antwort

Vielleicht ist die "nanogallery2" genau das, wonach Sie suchen.

Sie können Alben per HTML oder Javascript definieren. Dies sind die offiziellen Demos auf dem CodePen.io:

  • HTML Demo
  • Javascript Demo

Mein Demo: https://codepen.io/glebkema/pen/qwxmQa?editors=1010

HTML

<link rel="stylesheet" href="/css/nanogallery2.min.css">

<div id="my_gallery"></div>

<scripthttps://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.jsjsjsjs"></script>
<script src="/js/jquery.nanogallery2.min.js"></script>

Javascript

jQuery(document).ready(function($) {
	$("#my_gallery").nanogallery2({
		itemsBaseURL: '<URL>',  // Vollständige URL Ihres Bildordners
		locationHash: false,
		thumbnailWidth: 'auto',
		thumbnailHeight: 200,
		items: [
			// album 1
			{
				kind: 'album',                            // item kind
				ID: 1,                                    // album ID
				srct:  'glebkema_iphone_9175_w0400.jpg',  // album thumbnail url
				title: 'Winter',                          // album title
			},
			{
				albumID: 1, ID: 11, title: 'Frost',
				src:  'glebkema_iphone_9273_w1000.jpg',   // photo url
				srct: 'glebkema_iphone_9273_w0400.jpg',   // photo thumbnail url
			},
			{
				albumID: 1, ID: 12, title: 'Snow',
				src:  'glebkema_iphone_9175_w1000.jpg',   // photo url
				srct: 'glebkema_iphone_9175_w0400.jpg',   // photo thumbnail url
			},


			// album 2
			{
				kind: 'album',                            // item kind
				ID: 2,                                    // album ID
				srct:  'glebkema_iphone_9623_w0400.jpg',  // album thumbnail url
				title: 'Summer',                          // album title
			},
			{
				albumID: 2, ID: 21, title: 'Sunrise',
				src:  'glebkema_iphone_9623_w1000.jpg',   // photo url
				srct: 'glebkema_iphone_9623_w0400.jpg',   // photo thumbnail url
			},
			{
				albumID: 2, ID: 22, title: 'Sunset',
				src:  'glebkema_iphone_9545_w1000.jpg',   // photo url
				srct: 'glebkema_iphone_9545_w0400.jpg',   // photo thumbnail url
			},
		],
	});
});
...zur Antwort

Sie können den Online-Favicon-Generator verwenden. Laden Sie Ihr Favicon-Image hoch, und dieser Generator erstellt eine Reihe von Symbolen für verschiedene Geräte und HTML-Code für den <head> -Abschnitt Ihrer Webseiten.

...zur Antwort

Sie können einige Inhalte mithilfe von Medienabfragen ("media queries") ausblenden oder anzeigen. Mit der Medienabfrage können Sie Stile festlegen, die nur für Bildschirme mit einer bestimmten Breite funktionieren.

  1. https://www.seobility.net/de/wiki/Media_Queries
  2. https://www.mediaevent.de/css/media-query.html

Sie können beispielsweise eine Stilklasse ".on-mobile-only" erstellen und diese auf die Teile des Inhalts setzen, die nur auf Bildschirmen sichtbar sein sollen, deren Breite weniger als 600 Pixel beträgt.

CSS

@media (min-width: 600px) {
	.on-mobile-only {
		display: none !important;
	}
}

HTML

<p>Dieser Text ist immer sichtbar.</p>

<p class="on-mobile-only">Dieser Text ist nur sichtbar, wenn die Bildschirmbreite weniger als 600 Pixel beträgt.</p>

<img src="image-1.jpg" alt="Dieses Bild ist immer sichtbar">

<img src="image-2.jpg" class="on-mobile-only" alt="Dieses Bild ist nur sichtbar, wenn die Bildschirmbreite weniger als 600 Pixel beträgt">
...zur Antwort

HTML/CSS Probleme mit floats?

Schönen guten Abend!

Ich habe ein Problem, wie bereits im Fragetitel erwähnt, mit Floats. Mein Vorhaben war es, einen Kasten zu erstellen, in dem links ein Bild mit einer Breite von 50% liegt sowie rechts ein weiterer Kasten mit Textinhalt. Dazu habe ich das Bild mit 50% Breite nach links gefloatet und den Textkasten dementsprechend nach rechts (siehe Quellcode unten). Als ich dem übergeordneten Kasten (main-container) schließlich einen Rahmen gegeben habe, erwartete ich, dass dieser beide Elemente (Bild und Textfeld) vollständig umschließt. Stattdessen kam Folgendes dabei heraus:

Wie kommt es zu diesem Umstand? Solche Probleme treten bei mir häufig nur unter der Verwendung von Floats auf. Ich kann sie nur nicht so recht nachvollziehen. Alles in allem ist es mir wichtig, mit relativen Größenangaben zu arbeiten, damit sich die Inhalte bei Verkleinerung/Vergrößerung des Browserfensters auch gemäß prozentual anpassen.

Wer kann mir da ein wenig weiterhelfen und / oder mir sagen, warum dieses Problem auftritt?

Über mögliche Alternativen würde ich mich auch freuen! Danke im Voraus!

Quellcode mit Internal CSS:

<!DOCTYPE html>
<html lang="de-de">
  <head>
    <meta charset="utf-8">
    <title>Hilfe!</title>
  
    <!-- INTERNAL-CSS -->
    <style>
      .main-container {
        width: 75%;
        margin: 0 auto;
        border: 3px solid #000;
      }
  
      img {
        width: 50%;
        height: auto;
        float: left;
      }
  
      .text-container {
        width: 50%;
        float: right;
        font-size: 1.5rem;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <div class="main-container">
      <img src="kueche.jpg" alt="Küche">
      <div class="text-container">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </div>
    </div>
  </body>
</html>
...zur Frage

Was ist los. Standardmäßig berücksichtigt der übergeordnete Block nicht die Höhe der untergeordneten Floating-Elemente. Wenn alle Elemente im Inneren gleitend sind, ist die Höhe des übergeordneten Blocks gleich Null.

Es gibt zwei bewährte Möglichkeiten, diesen Effekt zu vermeiden.

Methode 1. Legen Sie die Eigenschaft "overflow" für den übergeordneten Block fest. Jeder andere Wert als "visible" erstellt einen neuen Formatierungskontext ("Block formatting context") im Block. Der Block berücksichtigt nun die Größe der schwebenden untergeordneten Elemente.

.main-container {
	overflow: auto;
}

oder

.main-container {
	overflow: hidden;
}

Nachteile:

  • Die Eigenschaft "overflow: auto" kann unerwünschte Bildlaufleisten im Block erzeugen. Und die Eigenschaft "overflow: hidden" kann die Schatten der Elemente im Block trimmen.
  • Beim Lesen des Codes ist nicht klar, wofür genau diese Eigenschaft verwendet wird. Wenn Sie es verwenden, fügen Sie einen Kommentar hinzu, zu welchem ​​Zweck es hinzugefügt wird.

Methode 2. Klären Sie den Stream innerhalb des übergeordneten Elements mit der CSS-Eigenschaft "clear". Am bequemsten geht dies mit dem Pseudoelement "after":

.clearfix:after {
	content: " ";
	clear: both;
	display: table;
}

Bootstrap 3 definiert auch das Pseudoelement "before". So löst es gleichzeitig das Problem des Zusammenfallens von Außenabständen meistern:

.clearfix:before {
	content: " ";
	display: table;
}

Nachteile:

  • Sie können die Pseudoelemente des übergeordneten Blocks nicht für andere Aufgaben verwenden.
...zur Antwort

Ich füge immer CSS-Eigenschaften mit Präfixen hinzu. Ich möchte sie jedoch nicht manuell installieren, daher verwende ich den Autoprefixer. Ich verwende Gulp + SCSS + Autoprefixer, um CSS-Eigenschaften automatisch mit Präfixen hinzuzufügen.

Mit der Online-Version können Sie prüfen, welche Präfixe heute relevant sind. Bitte beachten Sie, dass sich am unteren Bildschirmrand ein Filter befindet, der bestimmt, wie viele Browserversionen Autoprefixer berücksichtigen soll.

...zur Antwort

Es funktioniert für mich ohne das "@" -Symbol vor den Parameternamen:

SELECT id FROM user WHERE username = uname AND password = passwd
...zur Antwort

Webseite "Bild aus Google entfernen"
>> Abschnitt "So entfernen Sie ein Bild"
>> Artikel "Gelöschtes Bild aus den Suchergebnissen entfernen"

Screenshot:

...zur Antwort

Sie können CSS verwenden, um die linke obere Ecke des Popup-Fensters in der Mitte des Bildschirms zu platzieren und sie dann um die halbe Fensterhöhe nach oben und die halbe Fensterbreite nach links zu verschieben.

Erklärung der CSS-Eigenschaften:

  • position: fixed
  • transform
  • z-index

Demo: https://codepen.io/glebkema/pen/xeqWLZ?editors=1100

.modal-dialog {
	position: fixed; top: 50%; left: 50%;
	transform: translate( -50%, -50% );
	width: 900px; max-width: 90%;
	z-index: 9000;
}
...zur Antwort

Problem in HTML mit nicht definierten Anker?

Schönen guten Abend euch allerseits!

Ich teste mich aktuell an einer kleinen Website, da ich sehr gerne Projekte mit HTML/CSS/JS in meiner Freizeit mache - Aber egal, nun zur eigentlichen Frage:

Im unterem pinken Testbalken (class="test") erscheint beim Hinüberfahren die Veränderung des Mauszeigers und es wird klar, dass im div ein Anker gesetzt ist - Er führt beim Draufklicken auf die Startseite, wie sie zu sehen ist (basskatze.html). Woran könnte das liegen - Ich habe im div selber keinen Anker definiert.

Hier der Quellcode:

HTML

<!DOCTYPE html>
<html lang="de-de">
<head>
  <meta charset="utf-8">
  <!-- RESPONSIVE -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- MAIN-CSS -->
  <link rel="stylesheet" type="text/css" href="basskatze.css">
  <!-- MEDIA-CSS -->
  <link rel="stylesheet" type="text/css" href="media.css">
  <!-- FONTAWESOME-ICONS -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <!-- GOOGLE-FONTS -->
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <!-- TITLE -->
  <title>Basskatze - Home</title>
</head>
<body>


  <!-- HEADER -->
  <header>


    <h1><a href="basskatze.html">Basskatze Online</a></h1>


  </header>


  <!-- NAVIGATION -->
  <nav>


    <div class="nav-1">


      <h2>Folge uns auf...</h2>


      <a href=""><i class="fab fa-youtube"></i>Youtube</a>
      <a href=""><i class="fab fa-facebook-square"></i>Facebook</a>
      <a href=""><i class="fab fa-instagram"></i>Instagram</a>


    </div>


    <div class="nav-2">


      <h2>Soundtracks</h2>


      <a href=""><i class="fas fa-music"></i>Mixtapes</a>
      <a href=""><i class="fas fa-compact-disc"></i>Alben</a>
      <a href=""><i class="fas fa-list"></i>Playlist</a>


    </div>


    <div class="nav-3">


      <h2>Videos&Kontakt</h2>


      <a href=""><i class="fas fa-video"></i>Videos</a>
      <a href=""><i class="fas fa-comments"></i>Chat</a>
      <a href=""><i class="fas fa-envelope-square"></i>Kontakt</


    </div>


  </nav>


  <!-- MENU-HEADER -->


  <div class="test">






  </div>


</body>
</html>


...zur Frage

In diesem Teil des Codes weist der letzte Link ein fehlerhaftes schließendes Tag auf.

      <h2>Videos&Kontakt</h2>

      <a href=""><i class="fas fa-video"></i>Videos</a>
      <a href=""><i class="fas fa-comments"></i>Chat</a>
      <a href=""><i class="fas fa-envelope-square"></i>Kontakt</

Aus diesem Grund kann sich der Link auf den nachfolgenden Teil der Webseite erstrecken

Es muss so sein:

      <a href=""><i class="fas fa-envelope-square"></i>Kontakt</a>
...zur Antwort

Um Ihnen zu helfen, müssen wir Ihren HTML-Code und Ihr JavaScript sehen. Beispielsweise können Sie den Problemcode auf der Website https://codepen.io/ sammeln und uns einen Link dazu geben.

Und fügen Sie einen Screenshot hinzu, wie die Tabelle aussieht, wenn alles nicht richtig funktioniert.

Je vollständiger die Beschreibung Ihres Problems ist, desto größer ist die Wahrscheinlichkeit, dass jemand Ihnen helfen wird.

...zur Antwort