Webdesign-Blog

Bei der Umsetzung komplexer responsiver Webdesigns sind CSS-Media-Queries oft nicht ausreichend um alle gewünschten Änderungen zu erfassen und entsprechende Anpassungen vorzunehmen. Mit der folgenden Funktion und den dazugehörenden Events lassen sich über erweiterte Regeln das responsive Verhalten einer Website bestimmen.

Events

• $(document).ready(): Das Document Object Model ist verfügbar.
• $(window).load(): Die Website ist komplett geladen.
• $(window).resize(): Die Größe des Browser-Fensters wird verändert.
• $(window).orientationchange(): Das Gerät wird vom Quer- zum Hochformat gedreht oder umgekehrt.
• $('form').submit(): Ein Formular wurde gesendet.

jQuery(document).ready(function($)
{
	var window_width=null;
	var window_width_old=null;

	function update_responsive_settings(mode)
	{
		// Viewport dynamisch anpassen
		viewport = document.querySelector("meta[name=viewport]");
		if(mode=='orientationchange') viewport.setAttribute('content', 'width=device-width');
		if($(window).width()>420) viewport.setAttribute('content', 'width=1100');
		
		// Breite sichern
		window_width_old=window_width;
		window_width=$(window).width();

		// Breite prüfen und falls unverändert abbrechen
		if(window_width_old==window_width) return;

		// Aktionen entsprechend Breite
		if(window_width<=420)
		{
			mobile_nav('create'); // Beispielfunktion
		}
		else
		{
			mobile_nav('remove'); // Beispielfunktion
		}

		// Aktionen entsprechend Bereite und Modus
		if(window_width<=420 && mode=='load')
		{
			$('#my_box').fadeIn();
		}
	}
	update_responsive_settings('ready');
	$(window).load(function() { update_responsive_settings('load'); });
	$(window).resize(function() { update_responsive_settings('resize'); });
	$(window).bind('orientationchange', function() { update_responsive_settings('orientationchange'); });
	$('form').submit(function() { update_responsive_settings('form_submit'); });
});

So lässt sich ein bestehendes HTML-Formular samt aller Input-Felder mit jQuery per AJAX senden:

jQuery(document).ready(function($)
{
	$("#my_form").submit(function(event) {
		// Standard-Aktion abbrechen
		event.preventDefault();	

		// Formular per AJAX senden
		var form=$(this);
		$.ajax({
			type: 'POST',
			url: form.prop('action'),
			data : form.serialize(),
			dataType: 'json',
			encode: true
		}).done(function(data) {
			// Aktionen bei Erfolg
			console.log('done: '+data);
		}).fail(function(data) {
			// Aktionen bei einem Fehler
			console.log('fail: '+data);			
		});
	});
});