Javascript disable all readonly Dropdowns and send via Form

Readonly select-Tags are not allowed in HTML until now, but can be used.

An alternative would be to use the disabled=true attribute, but this will not send the select value on form submission.

An easy solution would be to disable the selection with Javascript and leave it readonly:

$( document ).ready(function() {
    $('select[readonly="readonly"]').css('pointer-events','none');
});

The only problem is, that you can still tab throw the form and select elements with your keyboard but the mouse can not select element from the dropdown.

Animationen erstellen mit Javascript

Kleine Animation, wie das verschwinden eines div-Blockes, kann man in Javascript sehr einfach mit der Funktion setTimeout() erstellen.Die Logik ist dabei immer dieselbe:Für jeden Bewegungsframe wird mittels der  setTimeout-Funktion zu einem bestimmten Zeitpunkt die Größe oder Posiition des Objektes verändert, so dass am Ende aneinandergereiht eine Animation herauskommt für das menschliche Auge.Bsp:
Click me
weiterlesen...

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>

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 werdenAls 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();
}
  

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.

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();

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);
    }
}

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.: für nicht-Retina Bilderund 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>