Kategorien
JavaScript

TinyMCE Focus und Blur Events Javascript

Die TinyMCE focus und blur Events kann man folgendermaßen mit Javascript behandeln:

        <script type="text/javascript">
            $( window ).load(function() {
                tinyMCE.dom.Event.add(tinyMCE.getInstanceById("foo_id").getWin(), "focus", function(){
                    console.log("focus");
                });
                tinyMCE.dom.Event.add(tinyMCE.getInstanceById("foo_id").getWin(), "blur", function(){
                    console.log("blur");
                });
            });
        </script>
Kategorien
JavaScript

Bing Maps API Tutorial

Das Einbinden von Bing Maps auf der Webseite gestaltet sich sehr ähnlich wie Google Maps. Die freie jährliche Nutzung liegt bei 10Millionen Requests im Jahr, danach muss gezahlt werden

Als erstes benötigt man einen Key, den man kostenlos mit Hilfe eines Windows-ID Kontos (z.B. per Hotmail Account) anfordern kann und automatisch bekommt hier.

Microsoft bietet 5 verschiedene Bibliotheken mit kombinierbaren Funktionalitäten an, wobei die Map Control Bibliothek die wichtigste für Web Developer mit Javascript ist. U.a. gibt es eine Bibiliothek für Windows Store Apps und auch interessant einen Rest Service für Geocoding Anfragen (auch Reverse Geocoding) sowie Routenberechnung. Einen Überblick über alle Bibliotheken gibt es hier.

Für den Anfang kann man ein Karte schnell mit dem folgenden Code und seinem Key testen:

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=de-DE"></script>
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<script type="text/javascript">
        var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
            {credentials: "key_here",
                center: new Microsoft.Maps.Location(45.5, -122.5),
                mapTypeId: Microsoft.Maps.MapTypeId.road,
                zoom: 7});

</script>

oder sauberer als Javascript Klasse:

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=de-DE"></script>
<script type="text/javascript" src="bing.js"></script>
<div id='bingmapsDiv' style="position:relative; width:400px; height:400px;"></div>
<script type="text/javascript">
var bingMaps = new BingMaps("bingmapsDiv");
</script>

und mit der bing.js Klasse:

function BingMaps(mapId){
    this.mapId = mapId;
    this.key = "my_key";
    this.initMap = function(){
        var map = new Microsoft.Maps.Map(document.getElementById(this.mapId),
            {credentials: this.key,
                center: new Microsoft.Maps.Location(45.5, -122.5),
                mapTypeId: Microsoft.Maps.MapTypeId.road,
                zoom: 7});
    }
    this.initMap();
}

 

 

Kategorien
JavaScript PHP

PHP-Funktionen in JS benutzen mit php.js

Wer vermisst es nicht: High Level Funktionen, die einem die einfachsten arbeiten abnehmen in Javscript. Von PHP ist man immer gewöhnt schlanken, gut lesbaren Code zu schreiben, auch dank der vielen eingebauten Hilfsfunktionen, wie z.B. für die String Verarbeitung:

  • strncmp
  • strpbrk
  • strpos
  • strrchr
  • strrev
  • strripos
  • strrpos
  • strspn
  • strstr
  • strtok
  • strtolower
  • strtoupper
  • strtr

Dies ist zeit langem schon möglich durch eine Javascript Library namens php.js, die fast alle PHP Funktionen nach Javascript portiert hat und für PHP Programmierer sicher eine gute Hilfe ist.

Kategorien
JavaScript jQuery PHP

Cross Domain Ajax Requests

Von Hause aus sind Cross Domain Ajax Requests aus Sicherheitsgründen nicht erlaubt, weil so fremder Schad-Code beim Client nachgeladen und ausgeführt werden kann.

Um trotzdem einen erfolgreichen Ajax Request auf eine andere Domain oder Subdomain oder auch nur von HTTP auf HTTPS zu senden, muss man die Access-Control-Allow-Origin beachten.

Man muss nicht jsonp benutzen, wie viele vorschlagen, sondern kann normales json benutzen (der Ajax Request von www.mydomain1.de gesendet):

<script>
    $.ajax({
        url: "http://www.mydomain2.de/ajax.php",
        type: 'GET',
        crossDomain: true,
        dataType: 'json',
        success: function(data) {
            console.log( data );
            $( ".result" ).html( data );
        },
        error: function( data) {
            console.log("error ajax");
            console.log( data );
        }
    });
</script>
<div class='result'></div>

Auf der eigene mydomain2.de/ajax.php Seite muss nur folgender Code eingebunden werden, um die Access-Control-Allow-Origin zu umgehen:

header('Content-Type: application/json');
header('Access-Control-Allow-Origin: http://www.mydomain1.de');

echo json:encode("it works");
die();
Kategorien
JavaScript kinetic.js

Redo / Undo Class für kinetic.js

Für den Einbau einer Redo und Undo-History Funktion in ein Porgramm zu integrieren, benötigt man nur die folgende Klasse und muss an den passenden Zeitpunkten die makeHistory() funktion aufrufen:

history = new History(stage, layer);
histoy.makeHistory();
function History(stage, layer){

    var historyStep = 0;
    var history = Array();
    var layer = layer;
    var stage = stage;

    this.makeHistory = function() {
        console.log("make history. History Items:");
        var json = layer.toJSON();
        history.push(json);
        if (historyStep < history.length) {
            historyStep = history.length - 1;
        }
        this.logStage();
    }
    this.undoHistory = function() {
        if (historyStep > 0) {
            console.log("undo history. History Items:");
            historyStep--;
            layer.destroy();
            layer = Kinetic.Node.create(history[historyStep], 'history-container');

            stage.add(layer);
            this.logStage();

            stage.draw();
        }
    }

    this.redoHistory = function() {

        if (historyStep < history.length - 1) {
            console.log("redo history. History Items:");
            historyStep++;
            layer.destroy();
            layer = Kinetic.Node.create(history[historyStep], 'history-container');
            stage.add(layer);
            this.logStage();
            stage.draw();
        }
    }
    this.logStage = function(){
        console.log("Layer has " + layer.getChildren().length + " children");
        console.log(layer.getChildren());
        console.log("History length: " + history.length + " items");
        console.log("historyStep is " + historyStep);
    }
}
Kategorien
JavaScript

Umrechnung von Bogenmaß (Radians) zu Grad in Javascript

Die folgenden Funktionen rechnen von Bogenmaß (Radians) in Grad um und anders herum:

function degreeToRadians($degree)
{
    return $degree * Math.PI / 180;
}

function radiansToDegrees($radian)
{
        return $radian * 180/ Math.PI;
}

 

Kategorien
JavaScript jQuery jQuery Mobile Phonegap/Cordova

Javascript ersetzen aller css background-images durch Retina-Bilder

Wenn man vor dem Problem steht, dass dynamisch generierte CSS background-images verwendet werden, um Bilder auf einer Webseite darzustellen und diese dann auch für Retina Displays gut aussehen sollen, kann man folgendes Skript verwenden. Es überprüft zusätzlich mittels eines Ajax Requests, ob die Bilder vorhanden sind/existieren.

Voraussetzung ist, dass eine Namenskonvention für nicht-Retina Bilder und Retina verwendet wird wie z.B.:

bild1@1x.jpg für nicht-Retina Bilder

und

bild1@2x.jpg für Retina Bilder

<!--Retina Fix for dynamic background images-->
        <script type="text/javascript">
            function isRetinaDisplay()
            {
                var dpr = 1;
                if(window.devicePixelRatio !== undefined) dpr = window.devicePixelRatio;
                return dpr >= 2;
            }

            var notRetinaString = "@1x";
            var retinaString = "@2x";

            $(document).ready(function() {
                //if we have a retina display
                if(isRetinaDisplay())
                {
                    //select all elements having background images
                    var $elementsWithBackground = $('*').filter(function() {
                        if (this.currentStyle)
                            return this.currentStyle['backgroundImage'] !== 'none';
                        else if (window.getComputedStyle)
                            return document.defaultView.getComputedStyle(this,null)
                                .getPropertyValue('background-image') !== 'none';
                    });
                    //replace their background-image with retina images
                    $elementsWithBackground.each(function( index ) {
                        $backGroundImage = $(this).css('backgroundImage');
                        /*console.log($backGroundImage);*/
                        //when it is no retina image
                        if($backGroundImage.indexOf(notRetinaString) !== -1)
                        {
                            //replace with retina image
                            $newBackgroundRetinaImage = $backGroundImage.replace(notRetinaString,retinaString);
                            $newBackgroundRetinaImageUrl = $newBackgroundRetinaImage.replace('url("','').replace('")','');
                            //check if retina file exists
                            var $myThis = this;
                            $.ajax({
                                url:$newBackgroundRetinaImageUrl,
                                type:'HEAD',
                                cache: true,
                                success:function() {
                                    console.log($newBackgroundRetinaImage);
                                    $($myThis).css('backgroundImage', $newBackgroundRetinaImage);
                                },
                                error:function() {
                                    console.log("no retina image found for: " + $backGroundImage);
                                }
                            });

                        }
                    });
                }
            });
        </script>
Kategorien
JavaScript jQuery Mobile Mobil

Javascript überprüfen auf Retina-Display Funktion

Um zu überprüfen, ob ein Gerät mit Retina-Display (neues iPhone oder Mac Book) gerade auf der Seite surft, kann man die handliche Funktion verwenden:

            function isRetinaDisplay()
            {
                var dpr = 1;
                if(window.devicePixelRatio !== undefined) dpr = window.devicePixelRatio;
                return dpr >= 2;
            }
Kategorien
HTML5 JavaScript

HTML5 Datenbank mit persistence.js Tutorial

Mit persistence.js lässt sich eine lokale Datenbank mit Javascript erstellen ohne einen Datenbank-Server und eine Internet Verbindung.

Unterstütze mobile OS von persistence.js:

Kategorien
jQuery

jQuery asynchroner Ajax Call mit Callback Success Funktion

Bei der Programmierung von asynchronen Funktionen mit Ajax steht man vor dem Problem, dass die Funktion keinen Rückgabewert im herkömmlichen Sinne haben. Die folgende Funktion gibt nicht etwa die Variable response zurück, obwohl der Ajax Request erfolgreich ausgeführt wurde aufgrund der Asynchronität.

function test()
 {
 $.ajax({
 async: true,
 cache:false,
 url: "testUrl.php",
 beforeSend: function (jqXHR, settings) {
 url = settings.url;
 console.log(url);
 },
 success: function (response) {
 console.log("Ajax Call Success");
 },
 error: function (response) {
 handleError(response);
 }
 }
 );
 return response;
 }

Um eine das Ergebnis eines asynchronen Calls (Ajax) weiterverarbeiten zu können, kann man entweder eine Funktion aufrufen (schlecht, weil feste Bindung):