lokalnetz.com

Formular Loop Tabindex

thomas — Tue, 04 Dec 2012 11:55:22 +0000

Catch the Tabindex …
Wer kennt das nicht aus Web-Formularen.
Nach dem letzten Tabindex eines Inputs in einem Formular springt der Fokus irgendwo ins Nirvana der aktuellen Seite.
Das behebt das folgende kleine feine jQuery – Script.

Nach dem letzten Tabindex springt der Fokus wieder zum ersten Tabindex, vorausgesetzt man nutzt auch die Tabtaste.

var tabindex = new Array();
var maxTab = '';
var minTab = '';

$('form').find('[tabindex]').each(function(index){
    var num = $(this).attr('tabindex');
    // PUSH ALL TABINDEXES TO AN ARRAY
    tabindex.push(num);
});

// GRAB TABINDEX MAX VALUE
maxTab = Math.max.apply(Math,tabindex);
// GRAB TABINDEX MIN VALUE
minTab = Math.min.apply(Math,tabindex);

$('input[tabindex=' + minTab + ']').focus();

$('input[tabindex=' + maxTab + ']').keydown(function(event) { 
    var keyCode = event.keyCode || event.which;
    // CHECK IF TABKEY ON MAX TABINDEX IS PRESSED
    if (keyCode == 9) {
        //SET FOCUS TO MIN TABINDEX
        event.preventDefault();
        $('input[tabindex=' + minTab + ']').focus();
  } 
});

Rock das Fiddle.

Javascript Check für gerade Nummern

thomas — Sun, 30 Sep 2012 11:54:06 +0000

… so simpel:

function isEven(value) {
    return (value%2 == 0);
}

aber echt jetzte …

Subway Map – The Next Generation

thomas — Thu, 20 Sep 2012 12:53:37 +0000

Vergesst ÖPNV Streckenpläne als PDF-Datei.
Das Ausdrucken, das Ändern oder Anpassen, Photoshoplizenzen, alles nicht mehr nötig.

Vorschau der Webapplikation

Hier kommt die nächste Generation.
Interaktiv mit modernsten Webtechnologien, lauffähig auf nahezu jedem modernen Endgerät.

Kombatibel zu Google-Maps oder Bing-Maps.
Auslesen der aktuellen Geolocation, Standort.
Übersichtliche wesentliche Informationen
Kein visueller Overkill
Volle Userinteraktion
Zoom in , Zoom out
Suche
Abfahrtszeiten
Ein- und Ausblenden von Strecken
Natürlich auch Ausdruckbar, Teilbereiche oder Voll
Änderungen in wenigen Minuten gegenüber des PDF-Pendants umsetzbar
… und jede Menge zusätzliche Features geplant.

Sei noch zu erwähnen, Developing in Progress !

Google Chrome – Viewportberechnung

thomas — Tue, 11 Sep 2012 16:13:59 +0000

Die aktuell zu Verfügung stehenden Maße des Viewports sollen bei versteckten Scrollbars des <body> berechnet werden um einen <div> - Container auf dessen entsprechende Länge und Breite zu ziehen.

Chrome entpuppt sich hier als kleines Miststück, denn zur Berechnung der Höhe ist unter Umständen die Chrome-Statusbar im weg. Es fehlen schlichtweg einfach die 16 Pixel die die Höhe der Statusbar ausmachen.

Merkwürdig ist auch, dreht man die Berechnung um, erst die Breite dann die Höhe, zeigt sich dieser Effekt bei der vertikalen Seite, dann fehlen dort die 16 Pixel, muss man nicht verstehen.

Nicht schön, nicht schlimm aber ärgerlich und sieht komisch aus.

Zum nachvollziehen:

	// FIX HEIGHT OF THE CONTAINER
    var calcHeight = function() {
		$('#selector').height($(window).height());
    }

	// FIX WIDTH OF THE CONTAINER
    var calcWidth = function() {
        $('#selector').width($(window).width());
    }

	// FIRE UP FUNCTIONS
	$(document).ready(function()
	{
	    $(window).resize(function() {
	        calcHeight();
	        calcWidth();
	    }).load(function() {
	        calcHeight();
	        calcWidth();
	        //calcHeight(); // run again !
	    });
	});

body {
overflow: hidden;
}

Lösung:

Entweder die Berechnung wird gleich nochmal ausgeführt oder man checkt, wenn man es komplizierter möchte, den aktuellen Browser und fügt einer Variable die fehlenden 16 Pixel hinzu.

	// DETECT IF IS CHROME
	function isChrome(){
  		$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
		var additionalPx = 0;
		if($.browser.chrome){
			console.log('Yes, this is chrome');
			var additionalPx = 16;
			return (true);
		}
	}

Server Realtime CPU Shellmon

thomas — Sun, 17 Jun 2012 20:01:11 +0000

Für ein aktuelles Projekt sollte die CPU Last eines Debian Servers dargestellt werden. Die simple Darstellung via “uptime” war aber zu statisch und genügte den Ansprüchen, auch meinen, nicht. Die cpu.php macht nichts anderes als die aktuelle Last zu auszulesen. Via jQuery und einem Refreshintervall wird dieser Wert aktualisiert und dargestellt. Die Formatierung übernimmt das Stylesheet.
Mit einer Aktualisierung von 5 Sekunden läuft die Sache recht stabil. Bei kleineren Timerwerten kann es zu einem ‘Schluckauf’ kommen und falscher oder, im Extremfall, gar keiner Darstellung.

Sei noch erwähnt das es ausschliesslich auf eigenen (Debian-)Servern läuft. Hoster verbieten in der Regel das Ausführen von irgendwelchen Kommandos, wie hier exec.

 -1)
        {
            $cpuUsage += floatval($cols[2]);
        }
    }
    print($cpuUsage);
?>




	
	Server CPU Load

#cpuload {
	background: #F1F1F1;
	border: 1px solid #DDDDDD;
	position: relative;
	height: 100px;
	width: 500px;
	background: repeating-linear-gradient(to bottom right, red, red 5px, white 5px, white 10px);
}

.barcontainer {
	display: block;
	width: 5px;
	height: 100px;
	float: left;
	position: relative;
	overflow: hidden;
}

.bar {
	display: block;
	width: 4px;
	position: absolute;
	bottom: 0;
	border-right: 1px solid white;
	background: #70883E; /* Old browsers */
	background: -moz-linear-gradient(top,  #e2513b 0%, #f4ee42 51%, #70883e 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2513b), color-stop(51%,#f4ee42), color-stop(100%,#70883e)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #e2513b 0%,#f4ee42 51%,#70883e 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #e2513b 0%,#f4ee42 51%,#70883e 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #e2513b 0%,#f4ee42 51%,#70883e 100%); /* IE10+ */
	background: linear-gradient(top,  #e2513b 0%,#f4ee42 51%,#70883e 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2513b', endColorstr='#70883e',GradientType=0 ); /* IE6-9 */
	background-size: 4px 100px;
	background-position: bottom;
}

$(document).ready(function() {
	var refreshId = setInterval(function() {
		$.ajax({
			url: "cpu.php",
			cache: false,
			success: function(text) {

				// Enable this for testing
				// var text = Math.floor(Math.random()*101)

				var trimmed = text.replace(/^\s+|\s+$/g, '') ;
				$("#cpuload").prepend('');

				var count = $("#cpuload .barcontainer").length;
				if (count > 100) {
					$('#cpuload .barcontainer:last-child').remove();
				}
			}
		})
   }, 5000); // REFRESH TIMER, USE CAREFULLY WITH A LOWER TIMER VALUE!
   $.ajaxSetup({ cache: false });
});

Download @ Github.

InSync Win7 Systray Status Icon Mod

thomas — Sun, 29 Jan 2012 18:37:42 +0000

Wochenend-Pixelschubsen für die InSync Systray-Status-Icons.

InSync, Synchronisation eines lokalen Verzeichnisses mit Google-Docs. Allerdings waren die sichtbaren Statusicons im Systray nicht zu erkennen, wenn das entsprechende Win7 Theme auch “dunkelschwarz” eingestellt ist. Abhilfe schafft diese kleine InSync Ressourcen Modifizierung. Damit passt sich InSync den Windows 7 Systray Icons an und wird erkennbar. Instruktionen im Ziparchiv siehe readme.txt.

Download: Insync Systray Icons

Fix Google+ – WP Lifestream Plugin

thomas — Thu, 26 Jan 2012 11:13:05 +0000

Im WordPress Lifestream Plugin funktioniert der G+ Lifestream nicht (mehr). Das lässt sich ändern.

Im File extension.inc.php unter
../wp-content/plugins/lifestream/extensions/googleplus/
die URL in Zeile 25 ändern von

~~http://plusfeed.appspot.com/~~
in
~~http://googleplusrss.nodester.com/~~

Update:
Nachdem auch dieser Dienst eingestellt wurde, heisst es Umzug zum nächsten Dienst.
Auf Dauer ist es natürlich lästig, ständig irgendwas zu ändern, zumal man es nicht immer sofort mitbekommt, ob und wann irgendein Dienst eingestellt worden ist.

Neuer Dienst:

http://rss2lj.net/g+/

Bin gespannt wie lange dieser Dienst seine Arbeit aufrechterhält.
So schauts dann aus:

function get_url()
{
//  Obsolete Service
//  return "http://googleplusrss.nodester.com/". $this->get_option('id');

//  Curent Service
    return "http://rss2lj.net/g+/". $this->get_option('id');
}

Done.

Social Network Profile an eigene Domain binden

thomas — Thu, 10 Nov 2011 16:35:32 +0000

Sieht auch weitaus schicker aus, die Profile aus Social-Netzwerken unter der eigenen Domain aufzurufen. Dazu ist ein Eintrag in der .htaccess nötig um die Domain-Weiterleitung zu aktivieren:
Für Google+…

Redirect 302 /+ https://plus.google.com/u/0/PROFIL-NUMMER-HIER/posts
Redirect 302 /plus https://plus.google.com/u/0/PROFIL-NUMMER-HIER/posts

… oder auch für XING

Redirect 302 /xing https://www.xing.com/profile/PROFILNAME-HIER

via

Diese URL sieht doch schon besser aus:
http://lokalnetz.com/+

XING Statusmessage Bookmarklet

thomas — Sat, 22 Oct 2011 15:01:15 +0000

Zum schnellen absetzen eine Statusnachricht über XING muss ich wohl nicht viele Worte verlieren. Mich hat aber gestört, dass immer der aktuelle Workflow unterbrochen werden muss. Entweder zurück zur XING-Startseite oder es muss ein neues Tab bzw. Fenster geöffnet werden. Mit einem kleinen Bookmarklet, dass auf die mobile Version von XING zurückgreift, kann man eine Statusmeldung direkt absetzen, unabhängig davon auf welcher Seite man sich gerade befindet.

Einfach den folgenden Link in die Bookmarktoolbar ziehen: XING Status

Abhängige Select-Elemente via jQuery

thomas — Wed, 28 Sep 2011 17:55:58 +0000

Für ein aktuelles Projekt wurden abhängige Select-Boxen benötigt.
Das heisst, in der ersten Box sollte ein Vorauswahl selektiert werden, die zweite Box soll die entsprechenden Einträge dazu anzeigen und unnötige entfernen. Da nicht jedesmal ein Datenbankabfrage gestartet werden soll bietet sich hier jQuery mit etwas CSS optimal an.

Nach dem der Inhalt der ersten Box (#s1) sich geändert hat, werden die Inhalte der zweiten Box (#s2) gefiltert, wobei unnötige Einträge mittels entsprechender Klasse über “display: none” versteckt werden.

$('#s1').change(function() {
    var value = $(this).val();
    $('#s2 option').siblings().css('display', 'none');
    $(this).siblings('select').children('option').each(function() {
        if ($(this).hasClass('val_' + value)) {
            $(this).css('display', 'block')  
        }
    });
});

Run this Code on jsFiddle