Beiträge der Kategorie javascript

Gmap3: Google Map Kartenstyling mit Snazzymaps

Gmap3 ist ein jQuery Plugin mit dem sich einfach Google Maps erstellen lassen. Beispiele dafür gibt es auf der Seite genug. Es gibt auch ein Beispiel für eine gestylte Map, aber da wird der Kartenstil umgestellt und ich wollte nur eine Karte mit einem voreinstellten Stil. Für Google Maps gibt es so viele Einstellungen bzgl. Styling, Google stellt bereits einen Wizard zur Verfügung, mit dem man die Kartenstile ausprobieren kann. Noch einfach ist es mit Snazzy Maps. Es ist ein Repository für bereits erstellte Google Map Styles. Selbst wenn nichts genau den eigenen Geschmack trifft, dann kann man einen fertigen Stil nehmen und nur etwas anpassen.

Wie bringt man beides unter einen Hut? Was macht man mit dem Schnipsel, den man bei Snazzy Maps zu jeder Karte findet? Und so einfach ist es, wenn man es weiß:

$("#gmap").gmap3({
	marker: {
		values: locations,
	},
	map: {
		options: {
			// How you would like to style the map. 
			// This is where you would paste any style found on Snazzy Maps.
			styles: [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"saturation":-100},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"visibility":"on"},{"saturation":-100},{"lightness":40}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"saturation":-10},{"lightness":30}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":-60},{"lightness":10}]},{"featureType":"landscape.natural","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":-60},{"lightness":60}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"},{"saturation":-100},{"lightness":60}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"},{"saturation":-100},{"lightness":60}]}],
		},
	},
	maxZoom: 10,
	autofit: {}
});

Links:
Gmap3 – http://gmap3.net/
Snazzy Maps – http://snazzymaps.com/

Geschrieben in javascript | Kommentare deaktiviert für Gmap3: Google Map Kartenstyling mit Snazzymaps

Colorbox Href dynamisch setzen

Ich bin ein großer Fan der jQuery Colorbox und setze sie sehr häufig ein. Die Colorbox ist sehr flexibel, kann sehr gut überall integriert werden und kann fast alle Arten von Inhalten ohne Probleme darstellen.

Normalerweise verwendet die Colorbox die URL aus dem Link, d.h. in diesem Fall würde die URL seite.html geöffnet werden:

<a href="seite.html">Link</a>
<script>
$('a').colorbox();
</script>

Man kann die URL für mehrere Links statisch auf eine andere URL setzen, in diesem Fall würde bei beiden Links die andereseite.html geöffnet werden:

<a href="seite1.html">Link 1</a>
<a href="seite2.html">Link 2</a>
<script>
$('a').colorbox({href: 'andereseite.html'});
</script>

In meinem Fall hatte ich folgendes vor: Für Benutzer ohne JavaScript, bzw. für welche, die den Link in einem neuen Fenster oder Tab öffnen wollen, soll auf die normale Version der Seite verlinkt werden. Und falls JavaScript aktiviert ist und auf den Link geklickt wird, so soll eine Popup-Version der Seite aufgerufen werden. In diesem Fall kann man an href eine Funktion übergeben, die dynamisch die URL setzt. d.h. beim ersten Link wird andereseite1.html geöffnet, beim zweiten andereseite2.html:

<a href="seite1.html" data-cboxhref="andereseite1.html">Link 1</a>
<a href="seite2.html" data-cboxhref="andereseite2.html">Link 1</a>
<script>
$('a').colorbox({href: function() {
return $(this).attr('data-cboxhref');
}});
</script>

Nivo-Slider Externe Controls

Beim Initialisieren des Nivo-Sliders gibt man eine Funktion an, die aufgerufen wird, wenn der Slider vollständig geladen ist:

$("#nivoslider").nivoSlider({
	directionNav: true,
	afterLoad: nivoAfterLoad 
});

Hat man folgende HTML-Struktur in den externen Controls

<div id="nivoControl">
	<ul>
		<li rel="0"><a href="#">Seite 1</a></li>
		<li rel="1"><a href="#">Seite 2</a></li>
		<li rel="2"><a href="#">Seite 3</a></li>
		<li rel="3"><a href="#">Seite 4</a></li>
		<li rel="4"><a href="#">Seite 5</a></li>
	</ul>
</div>

kann man in der Funktion auf das Rel-Attribut zugreifen und das entsprechende Slide direkt aufrufen. Damit der Code funktioniert, muss die Navigation aktiviert werden (man kann sie ja mit CSS ausblenden, wenn es stört) mit dem Parameter directionNav im Aufruf der Funktion (s.o.)

Geschrieben in javascript | Kommentare deaktiviert für Nivo-Slider Externe Controls

Zebratabellen mit JavaScript und CSS3

Was sind Zebratabellen: total schöne Tabellen bei denen diel Zeilen abwechselnde Farben haben. In meinem Fall unterschied sich die letzte Zeile auch ein wenig. Die Klasse contenttable wird Tabellen gegeben, die im RTE in TYPO3 erstellt worden sind.

Theretisch reicht etwas CSS mit folgenden Selektoren:

table.contenttable {
}
table.contenttable th {
}
table.contenttable td {
}
table.contenttable td:first-child {
}
table.contenttable td.first {
}
table.contenttable td:last-child {
}
table.contenttable td.last {
}
table.contenttable th p,
table.contenttable td p {
}
table.contenttable tr:nth-child(even) td {
}
table.contenttable tr.even td {
}
table.contenttable tr:last-child td {
}
table.contenttable tr.last td {
}

Ähnliche Selektoren, wie z.B. td:last-child und td.last kann man leider nicht zusammenfassen, da der IE sie dann nicht interpretiert.

Im IE7 und IE8 klappt es nur mit CSS natürlich nicht, unterstützt werden muss das Ding ja trotzdem, daher hilft etwas JavaScript:

$('table.contenttable').each( function(index, value) {
	var $s=1;  
	$(this).find("tr").each(function(){ 
		$s++; 
		if($s%2==1)  
			$(this).addClass('odd');
		else
			$(this).addClass('even');
		$(this).children('td').first().addClass('first');
		$(this).children('td').last().addClass('last');
	});
	$(this).find("tr").last().addClass('last');
});

Geschrieben in css, javascript | Kommentare deaktiviert für Zebratabellen mit JavaScript und CSS3

Image Load Event in IE

In einer kleinen Animation mit jQuery sollen bestimmte Aktionen ausgeführt werden, wenn Bilder geladen sind. Dazu habe ich ein Image Load Event verwendet:

$image1 = $('<img />').attr('src', circle1Img).attr('width', 250).attr('height', 250).
load( function() {
	$('#animation .circle-1 .image').html('');
	$('#animation .circle-1 .image').append($(this));
});

Das hat auch wunderbar funktioniert, außer im IE8 (vermutlich auch IE7), wobei sich der IE8 im Legacy Mode korrekt verhält. Wie meine Recherche ergab, wird das Load Event vorzeitig gefeuert, weil das Bild aus dem Browser-Cache geladen wird. Das ist aber nur im IE so (wen wundest es eigentlich noch). Ein Lösung fand ich im Blog von David Walsh. Damit es auch im IE funktioniert, muss das src-Attribut erst gesetzt werden, wenn das Load Event definiert ist:

$image1 = $('<img />').attr('src', circle1Img).attr('width', 250).attr('height', 250).
load( function() {
	$('#animation .circle-1 .image').html('');
	$('#animation .circle-1 .image').append($(this));
});
$image1.attr('src', circle1Static);

Das Problem tritt natürlich nicht auf, wenn man die Bilder nicht aus dem Cache lädt:

var circle1Img = 'fileadmin/templates/img/animcircle_01.gif?' + Math.floor(Math.random()*10000);

Geschrieben in javascript | Kommentare deaktiviert für Image Load Event in IE

Weiter-Button in verschachtelten Tabs

In verschachtelten Tabs, die mit jQuery erstellt wurden, sollte eine Navigation mittels Weiter-Button umgesetzt werden. Für einfache Tabs habe ich einige Beispiele gefunden:
jQuery UI Tabs with Next/Previous oder jQuery Tabs Next Button. Allerdings sind in diesem Fall die Tabs verschachtelt. d.h. innerhalb von Tabs befinden sich wiederum Tabs: Tab A enthält Tabs A1, A2 und A3, Tab B enthält B1, B2 und B3 und C hat keine Subtabs. Wenn man also in A3 angekommen ist, sollte der Weiter-Button zu B1 verweisen. Weiterhin sollte die normale Tab-Navigation (also das Anklicken der Tab-Titel) weiterhin funktionieren. Wenn man also den Tab A2 auswählt, sollte der Weiter-Button immer noch auf A3 springen lassen.

<div id="tab">
	<ul>
		<li><a href="#tab-a">A</a></li>
		<li><a href="#tab-b">B</a></li>
		<li><a href="#tab-c">C</a></li>
	</ul>
	<div id="tab-a">
		<ul>
			<li><a href="#tab-a1">A1</a></li>
			<li><a href="#tab-a2">A2</a></li>
			<li><a href="#tab-a3">A3</a></li>
		</ul>
		<div id="a1">
			Inhalt A1
		</div>
		<div id="a2">
			Inhalt A2
		</div>
		<div id="a3">
			Inhalt A3
		</div>
	</div>
	<div id="tab-b">
		<ul>
			<li><a href="#tab-b1">B1</a></li>
			<li><a href="#tab-b2">B2</a></li>
			<li><a href="#tab-b3">B3</a></li>
		</ul>
	</div>
	[... usw]
</div>

Ich habe einen Button implementiert, der sich außerhalb der Tabs befindet. Damit eine Navigation möglich ist, müssen die Tab-Objekte gespeichert werden:

var $firstLevel = $('#tabs').tabs();	
var counter = 0;
$('#tabs .tabbed').each( function(index, elem) {
	var cid = $(elem).parent().attr('id');
	tabObjects[counter] = $(elem).tabs();
	counter++;
});

Wenn der Weiter-Button geklickt wird, wird ermittelt, welcher Tab der ersten Ebene gerade aktiv ist. Falls es Tabs der zweiten Ebene gibt, wird ermittelt, welcher von denen gerade aktiv ist. Dann wird geprüft, ob auf den Tab der zweiten Ebene Geschwister-Elemente folgen. Wenn ja, dann wird der nächste aktiviert. Wenn nicht, dann wird der nächste Tab der ersten Ebene aktiviert.

$('#next-button a').click( function() {
	var selected = $firstLevel.tabs('option', 'selected');
	var tabId = $('#tabs > div').eq(selected).attr('id');
	$subTab = tabObjects[selected];
 
	var length = $firstLevel.tabs('length');
	if($subTab != undefined) {
		var subSelected = $subTab.tabs('option', 'selected');
		var subLength = $subTab.tabs('length');
		if(subSelected + 1 < subLength) {
			/*
			 * switch to next tab
			 */
			$subTab.tabs('select', subSelected + 1);
		} else if(selected + 1 < length) {
			/*
			 * switch no next parent tab
			 */
			$firstLevel.tabs('select', selected + 1);
			if(length == selected + 2) {
				$(this).hide();
			}
			$subTab = tabObjects[selected + 1];
			if($subTab != undefined) {
				$subTab.tabs('select', 0);
			}
		}
	} else {
		$firstLevel.tabs('select', selected + 1);
	}
});

jQuery: Tinyscrollbar innerhalb von Tabs

Wenn man das jQuery Plugin Tiny Scrollbar für Inhalte eines Tabs verwendet, dann wird die Höhe des Elements nicht korrekt berechnet und die Funktionalität nicht gesetzt. Eine Erklärung dafür gibt es auf der jQuery Tabs-Seite: der Tab-Inhalt ist versteckt, daher können die Dimensionen nicht berechnet werden.
Man kann den Tiny Scrollbar aber aktivieren, wenn der Tab (vorausgesetzt es ist nicht der erste und sichtbare) sichtbar wird.

$('#tabs').bind('tabsshow', function(event, ui) {
	if (ui.panel.id == "tab1") {
		$('#content1').tinyscrollbar();
	} else if(ui.panel.id == "tab2") {
		$('#content2').tinyscrollbar();
	}
});

Tags: ,

Geschrieben in javascript | Kommentare deaktiviert für jQuery: Tinyscrollbar innerhalb von Tabs

JavaScript-Meldungen in der Firebug Konsole ausgeben

Das ist eine kleine Funktion, die das Leben und Programmieren viel einfacher macht. Falls man Firebug installiert hat, kann man mit console.log(nachricht) im JavaScript-Code eine Nachricht in der Firebug-Konsole ausgeben.

Geschrieben in javascript | Kommentare deaktiviert für JavaScript-Meldungen in der Firebug Konsole ausgeben

Erweiterung jQuery Carousel

Ich wollte das jQuery-Carousel, das auf dieser Seite mit vielen schönen Beispielen vorgestellt wird, ein wenig anpassen, und zwar sollte es mehr möglichkeiten geben, die Buttons und die Paginierung zu positionieren, als bisher. So sollte es möglich sein, dass die Prev/Next-Buttons um die Paginierung herum gepackt werden können.
jQuery Carousel
Als erstes habe ich für den Parameter btnsPosition weitere Optionen hinzugefügt: after, paginationOutside und paginationInside. Bei after werden die Buttons beide hinter das Carousel gepackt, bei paginationOutside werden die Buttons direkt vor und hinter die Paginierung gepackt und bei paginationInside vor und hinter die Paginierung, allerdings innerhalb des umschließenden Divs.

if(params.btnsPosition == "after") {
	params.prevBtnInsert = "insertAfter";
	params.nextBtnInsert = "insertAfter";
}
if(params.btnsPosition == "paginationOutside") {
	params.prevBtnInsert = "insertBefore";
	params.nextBtnInsert = "insertAfter";
	params.btnsPosition = "pagination";
}
if(params.btnsPosition == "paginationInside") {
	params.prevBtnInsert = "prepend";
	params.nextBtnInsert = "append";
	params.btnsPosition = "pagination";
}
// Prev Button
if ($.isFunction(env.params.prevBtnInsertFn)) {
	env.$elts.prevBtn = env.params.prevBtnInsertFn(env.$elts);
} else { 
	if(env.params.pagination && params.btnsPosition == "pagination") {
		env.$elts.prevBtn = $(params.prevBtn)[params.prevBtnInsert](env.$elts.pagination);
	} else if (params.btnsPosition == "outside"){
		env.$elts.prevBtn = $(params.prevBtn)[params.prevBtnInsert](env.$elts.carousel);
	} else {
		env.$elts.prevBtn = $(params.prevBtn)[params.prevBtnInsert](env.$elts.wrap);
	}
}
 
// Next Button
if ($.isFunction(env.params.nextBtnInsertFn)) {
	env.$elts.nextBtn = env.params.nextBtnInsertFn(env.$elts);
} else {
	if(env.params.pagination && params.btnsPosition == "pagination") {
		env.$elts.nextBtn = $(params.nextBtn)[params.nextBtnInsert](env.$elts.pagination);
	} else if (params.btnsPosition == "outside"){
		env.$elts.nextBtn = $(params.nextBtn)[params.nextBtnInsert](env.$elts.carousel);
	} else {
		env.$elts.nextBtn = $(params.nextBtn)[params.nextBtnInsert](env.$elts.wrap);
	}
}

Die letzten beiden Optionen werden nur dann ausgewertet, wenn die Paginierung an ist.