Beiträge der Kategorie javascript

Slick Carousel Play/Pause Indikator

Ich bin seit ein paar Jahren großer Fan von Slick. Die Slideshow ist gut konfigurierbar und kann vielseitig eingesetzt werden.

Für mein aktuelles Projekt brauchte ich eine Möglichkeit die Slideshow zu stoppen und einen Indikator, ob die Slideshow im Autoplay läuft.

Ich habe also einen einfachen Button erstellt, ihn dann mit CSS so gestaltet, dass er von Play zu Pause transformiert und dieses JavaScript eingesetzt:

$('#stage-slideshow-playpause').on('click', function() {
    if($(this).hasClass('play')) {
        $(this).removeClass('play').addClass('pause');
        $('#stage-slideshow').slick('slickPause');
    } else {
        $(this).removeClass('pause').addClass('play');
        $('#stage-slideshow').slick('slickPlay');
    }
});
$('#stage-slideshow .slide').on('mouseenter.slick', function () {
    $('#stage-slideshow-playpause').removeClass('play').addClass('pause');
});
$('#stage-slideshow .slide').on('mouseleave.slick', function () {
    $('#stage-slideshow-playpause').removeClass('pause').addClass('play');
});

Im ersten Block kann man die Slideshow mit dem Button steuern, in den nächsten Abschnitten „reagiert“ der Button auf externe Veränderung der Slideshow. Voraussetzung ist, dass die Option pauseOnHover aktiviert ist. Es gibt noch die Option pauseOnDotsHover, falls diese Option an ist, müsste man den Code entsprechend erweitern.

Geschrieben in javascript | Kommentare deaktiviert für Slick Carousel Play/Pause Indikator

Magnific Popup: springen von fix positioniertem Content

Wenn man Maginific-Popup zum Vergrößern von Bilder einsetzt, dann springen die fix positionierten Elemente beim Öffnen des Popups. Warum? Magnific Popup entfernt das Overflow Attribut des html-Elements und fügt stattdessen ein margin-right hinzu, das der Breite der Scrollbalken entspricht. Das schaltet das Scrolling der Seite aus. Ein Problem stellen die fix positionierten Elemente dar: sie springen leicht beim Öffnen des Popups. Wenn man bei fix positionierten Elementen diese entweder von rechts ausrichtet oder die Breite auf 100% setzt, dann ändert sich beim Öffnen des Popups die gesamte Breite der Seite, da die Scrollbalken entfernt werden. Die fix positionierten Elemente sind vom margin-right im html-Element wenig beeidruckt.

Lösung: Magnific Popup bietet viele Callbacks, die man nutzen kann, um die fixe Positionierung der Elemente zu korrigieren.

var magnificpopupSettings = {
        callbacks: {
            beforeOpen: function () {
                if($('nav.top-bar').css('position') == 'fixed') {
                    $('nav.top-bar').css('margin-right', '17px');
                    $('#top-link').css('margin-right', '17px');
                }
            },
            afterClose: function() {
                if($('nav.top-bar').css('position') == 'fixed') {
                    $('nav.top-bar').css('margin-right', '');
                    $('#top-link').css('margin-right', '');
                }
            }
        }
    };
};

Diskussion zum Thema: Jumping background

Geschrieben in javascript | Kommentare deaktiviert für Magnific Popup: springen von fix positioniertem Content

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