Kategorie: JavaScript

JavaScript Probleme,Tipps und Tricks

Kategorien
JavaScript jQuery

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.

Kategorien
JavaScript

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:
[inline]

Click me

[script type=“text/javascript“]//

[/script]
[/inline]

Weiterlesen „Animationen erstellen mit Javascript“
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;
            }