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.

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.