Kategorie: 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‘); });…
-
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…
-
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…
-
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)…
-
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.)
-
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…
-
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>
-
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 :…
-
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‘);
-
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…