Jquery

Bindet als allererstes die JQuery Library in den Head Bereich eurer Page ein. Downloadet euch dazu den Code von jquery.com und speichert ihn als .js ab. Um immer den Aktuellsten JQuery Code zu haben, nutzt folgenden Link.

CSS Variable ändern

$("body").get(0).style.setProperty("--space-left, "15px");

CSS Variablen sind eine Coole Sache, man muss sie dem Objekt nur einmal zuweisen und kann den Wert an beliebiger stelle ändern z.B. im Breakpoint
Möchte man den Wert allerdings dynamisch ändern, beispielweise durch klick auf einen Button, so kann man dies mit Jquery bewerkstelligen.

Jquery Cookies

//Cookie setzen:
$.cookie("NAME","WERT",{ path: '/' });

//Cookie auslesen:
$.cookie("NAME");

//Cookie löschen: 
$.removeCookie("NAME");

Cookies in Jquery setzt man wie folgt, wichtig ist dabei das der Cookie Pfad. Dieser sollte immer als “/” angegeben werden - das ist der Pfad der Webseite.

Countdown

Noch <srong><span class="js-countdown" data-date="2022/06/01 20:00:00"></span></srong> bis zum 1.6.2022 um 20:00 Uhr

function countdown(){
	let timer = $('.js-countdown'),
		timeout;

	if(timer.length){
		timer.each(function(){

			let el = $(this),
				endTime =  new Date(el.data('date')).getTime() / 1000,
				now = new Date().getTime() / 1000;

			let timeLeft = endTime - now,
				days = Math.floor(timeLeft / (3600 * 24)),
				hours = Math.floor(timeLeft % (60 *60 * 24) / 3600),
				minutes = Math.floor(timeLeft % (60 * 60) / 60),
				seconds = Math.floor(timeLeft % 60);

			if (hours < 10 && hours > -1) { hours = "0" + hours; }
			if (minutes < 10 && minutes > -1) { minutes = "0" + minutes; }
			if (seconds < 10 && seconds > -1) { seconds = "0" + seconds; }

			let out = days + ' Tage und ' + hours + ':' + minutes + ':' + seconds;

			el.text(out);
		});
	}

	setTimeout(function(){
		countdown();
	}, 1000);
}
countdown();

Der Countdown kann beliebig oft in eurem Code vorkommen. Jeder Countdown kann ein beliebiges Datum enthalten, welches als Data Attribut angehangen wird.

Beispiel:
Noch bis zum 1.6.2022 um 20:00 Uhr

Wait for Webfont

document.fonts.load('1rem "Open Sans"').then(() => {
   //code
})

Mit dieser Code könnt ihr prüfen ob euer Webfont geladen wurde und anschließend euren Code ausführen.

Highlight scroll

var lastSection;
$(window).on("scroll", function(){
	var scrollY = $(window).scrollTop();

	$(".section").each(function(){
		var section = $(this),
			screenBottom = scrollY + $(window).height(),
			zeropoint =  0, //$("header").height(),
			sectionTop = section.offset().top - zeropoint,
			sectionBottom = sectionTop + section.outerHeight(true);

		if(scrollY >= sectionTop && sectionBottom >= scrollY ){
			if(lastSection != section.data('section')){
				$(".nav").removeClass("active");
				$("#" + section.data('section')).addClass("active");

				lastSection = section;
			}
		}
	});
});

Makiert einen Menupunkt beim scrollen.

Beim scrollen läuft der Code durch alle Sektionen und prüft ob die Oberkante/Unterkante der Sektion sich unterhalb des oberen Bildschirmrandes befinden. Da es immer nur eine Sektion sein kann läuft der Code in die nächste Abfrage. Dort wird geprüft ob die Sektion bereits Aktiv ist, das verhindert ein ständigest löschen und neu setzen der Klasse.

Image loaded

var img = new Image();

var imageSrc = "/image.jpg";

img.onload = function() {
    //if image Loaded do this
};

img.src = imageSrc;

Mit dieser Abfrage kann man prüfen ob ein Bild geladen wurde.

After window resize

var resizeTimer;
$(window).on("resize", function(){
    clearTimeout(resizeTimer);

    resizeTimer = setTimeout(function(){
        //Function
    }, 250);
});

Die function innerhalb des Timeouts wird erst ausgeführt, wenn der Window resize 250ms lang nicht mehr ausgelöst wurde. Dies ist nützlich wenn eine funktion erst nach einem resize gestartet werden soll.

ScrollTop - scrolling to DIV

$(document).on('click', '#test', function(){
    $('html, body').animate({
        scrollTop:$('#box_1').position().top
        }, 500);
    });
});

Nach dem Klick auf das DIV mit der ID link_1 soll die Funktion ausgeführt werden. Der Scrollbereich ist der komplette body bzw. die komplette Webseite. Mit .animate starten wir die Animation und mittels .scrollTop wird die Seite auf die neue Position gescrollt. Die neue Position ist der Top Wert des DIV's mit der ID box_1. Zum Schluss kommt noch die Geschwindigkeit, mit der gescrollt werden soll.

Struktur

$(document).on('click', '#test', function(){
    var get_width = $('#test').css("width");

    if(get_width == "300px"){
        $('#test').stop().animate({width: "150px", height: "150px"});
    }
    else{
        $('#test').stop().animate({width: "300px", height: "300px"});
    }
});

Mit dem Dollar ($) Zeichen wird JQuery aufgerufen. Es folgt eine Klammer mit Hochkommas, in der das DIV mit der ID test aufgerufen wird. Klickt man nun auf dieses DIV soll die Funktion ausgeführt werden. In dem Fall sollte eine Warnmeldung auftauchen, mit dem Inhalt Hallo Welt. Übrigens - wie bei CSS unterscheidet man hier auch zwischen ID, mit einer Raute (#) und für CLASS einem Punkt (.).

Jquery einbinden

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script>

<script>
    //Code
</script>

Damit euer Code später auch funktioniert, müsst Ihr die JQuery Library in den Head Bereich eurer Webseite einbinden. Zu beachten ist auch, das eure JQuery Scripts nicht vor der Library stehen dürfen. Baut die Scripts am besten ganz weit unten in eurer Webseite ein.