Kategorie: jQuery

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 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 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
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):

Weiterlesen „jQuery asynchroner Ajax Call mit Callback Success Funktion“
Kategorien
jQuery

jQuery animate ruckelt im Chrome

Folgender Code ruckelt im Chrome:

        $('#foo')
            .animate({
            'marginLeft' : '100px'
        }, 900) ;

die Lösung war ziemlich einfach:

        $('#foo').css({WebkitTransform: 'translateX(0px)'})
            .animate({
            'marginLeft' : '100px'
        }, 900) ;

Bei Problemen: jQuery updaten auf die neueste Version (1.8.2.)

Kategorien
jQuery

Javascript Page Cookie setzen

Um mit Javascript einen Cookie zu setzen, der nur auf der aktuellen Seite gültig ist bspw. foo.de/mySite3.php muss man den passenden Pfad setzen, den man mit Javascript folgender maßen auslesen kann. Ich benutze zum Setzen von Cookies die Lib jQuery Cookies. Der Pfad muss im Format „/mySite3.php“ gesetzt werden, dazu wird der vordere Teil der URL bis nach der Domain abgeschnitten.

    function setCurrentPageCookie(expiresHours) {
        var domain = document.domain;
        var path = document.URL;
        console.log(domain);
        console.log(path);
        var relativePath = path.substring(path.indexOf(domain) + domain.length);
        console.log(relativePath);
        $.cookies.set('cookieName', '1', {
            path: relativePath,
            hoursToLive : expiresHours
        });
    }
Kategorien
CSS jQuery WordPress

Entfernen von leeren HTML paragraph Tags

Der Editor von WordPress generiert leere <p> Tags, die nicht sehr hilfreich sind beim Gestalten.

Eine Lösung via CSS (CSS3 – Kampatibilität :empty):

p:empty
{
    display:none;
}

oder mit besserer Browser Kompatibilität und jQuery:

 <script>
    $("p:empty").hide();
</script>
Kategorien
jQuery

jQuery UI Autocomplete mit extraParams für zusätzliche GET Variablen

In jQuery UI gibt es eine sehr gute Autocomplete Funktion, die ich auf der Seite CD Shop Berlin eingebaut habe (Schnellsuche oben links). Dabei werden beim Eintippen Vorschläge unterbreitet.

$(document).ready(function() {
 $("input#suche").autocomplete(
 {
 autoFocus: false,
 delay:300,
 minLength: 3,
 select: function(event, ui) {document.advanced_search.submit();},
 source: function(request, response) {
 $.ajax({
 url: "autocomplete.php",
 dataType: "json",
 data: {
 term : $('#schnellsuche').val(),
 verkauf : $('input[name=verkauf]').is(':checked'), },
 success: function(data) {
 response(data);
 }
 });
 }
 }
 );
});

Dabei ist zu beachten, dass der Parameter extraParams von jQuery UI 1.8 aktuell ignoriert wird und man dies über den eingebauten Ajax Request lösen muss.

Serverseitige stehen dann die Variablen mit $_GET[‚term‘], $_GET[‚verkauf‘]  zur Verfügung.

 

Kategorien
jQuery

jQuery: Ist eine Checkbox checked

Ohne eine ID vergeben zu müssen und mit Hilfe des name-Attributs funktioniert das mit jQuery so:

$checked = $('input[name=myName]').is(':checked');
Kategorien
jQuery

verschieben von absolut positionierten Elementen mit jQuery

Wenn man alle Elemente bspw. aus generiertem HTML verschieben will, bietet sich jQuery an.

Folgendes HTML habe ich aus einem PDF zu HTML Umwandlungsprogramm erhalten:

<div style="position:absolute;top:97;left:333"><nobr><span class="ft1"> </span></nobr></div>
<div style="position:absolute;top:121;left:333"><nobr><span class="ft1"> </span></nobr></div>
<div style="position:absolute;top:145;left:333"><nobr><span class="ft1"> </span></nobr></div>
<div style="position:absolute;top:170;left:293"><nobr><span class="ft2">Text </span></nobr></div>

Um die Inline Styles zu verändern und die Div-Blöcke um 100px zu verschieben nach rechts und nach unten kann folgender Code verwendet werden:

        $(document).ready(function() {
            $('div').each(function() {
                var offset = $(this).offset();
                alert("left: " + offset.left + ", top: " + offset.top );
                $(this).css('left', offset.left + 100);
                $(this).css('top', offset.top + 100);
            });
        });