Archive of articles classified as' "webdev"

Back home

JavaScript: PrettyPhoto Video für iOS anpassen

31/03/2011

Ich habe für einige Seiten PrettyPhoto in Verbindung mit dem Flowplayer genutzt, um Videos einzubinden. Da die Filme als mp4 vorliegen und die Seiten auch für das iPad&Co nutzbar sein sollen, waren hier einige Anpassungen an PrettyPhoto selbst notwendig. Zunächst sollten die Videos auch ohne aktiviertes JavaScript abspielbar sein, hierzu wurde ein PHP-Seite erstellt, die zwischen iOS und anderen Geräten unterscheiden kann und die mp4 Dateien entsprechen einbindet (FlashObject oder HTML5-Video-Tag für iOS). Die Links zu die dieser Seite (player.php?url=/media/meinfilm.mp4) wurde entsprechend eingefügt.Ist nun JavaScript aktiv werden diese Links (rel="prettyphoto") entsprechend umgebaut. Alle nicht-iOS Geräte zeigen in einer PrettyPhoto-Box den Inhalt der Player.php (in einem iFrame) an, hierzu wird zumindest iframe=true an den Link angehängt. iOS Geräte gehen etwas weiter und ersetzen zunächst den Link zur Player.php gegen den direkten Link zur mp4-Datei. Nun kommt eine kleine eigene Anpassung in der PrettyPhoto.js zum Tragen, nämlich else if (itemSrc.match(/\b.mov\b/i)|| ((navigator.userAgent.indexOf('iPad')>-1 || navigator.userAgent.indexOf('iPhone')>-1 || navigator.userAgent.indexOf('iPod')>-1) && (itemSrc.indexOf('.mp4') != -1))) { return 'quicktime'; Auf diesem Weg wird unter iOS das Video direkt in ein Overlay eingebunden (als Quicktime Object).Diese Anpassung war notwendig, da das Video in dem sonst genutztem iFrame nicht 100%ig zentriert wurde...

Fazit: Es scheint eine recht solide Weise zu sein, Videos einzubinden. Vielleicht sollte man eine zentrale Stelle definieren, auf die JavaScript und PHP zugreifen, die die Bedingungen für iOS definiert. Am schönsten wäre es, wenn die PHP, sowie JavaScript-Lösung das Video über einen HTML-5-Video-Tag einbinden würden, neben iOS gibt es schließlich ja auch noch Android und WebOS... to be continued
No Comments

AppleScript: PixelPipe Uploader

11/01/2011

Mir hat diese Sache aus dem AppleScript-Forum keine Ruhe gelassen auch wenn ein Plug-in für Safari da wohl etwas mehr her gemacht hätte. Zur Zeit ist aber leider nix anderes drin außer AppleScript. Es gibt 2 Versionen von dem Skript, eine als Skript-Datei, die man direkt aus Safari oder einem anderen Browser aus starten kann und eines das via Drag&Drop Dateien zu Pixelpipe hoch lädt. Die Script-Datei holt sich den Link zur einem Bild aus der Zwischenablage, lädt dieses herunter und pumpt es dann hoch auf PixelPipe. Das Programm lädt jede Bild-Datei hoch, die zuvor darauf gezogen wurde... Ich für meinen Teil werde Pixelpipe wohl kaum nutzen, aber in dem Quellcode sind so einige nützliche Sachen drin (URL-Escapeing, Curl-Form-Upload, Keychain-Scripting...)

Skript-Datei und Skript-Programm

DOWNLOAD
hubionmac's PixelPipe Uploader v.0.1
59.6 kB (102 hits)
Read the rest of this article »
No Comments

Wenn mal Anführungszeichen und Bindestriche im Code von WP gewandelt werden

20/08/2010
... kann das ganz schön nerven. Es gibt da wohl ein Plug-In das diese curly-quotes wieder gegen normale ersetzt. Wenn man aber auf dieses automatische Feature komplett verzichte möchte, kann man auch einfach in die function.php-Datei des aktiven Themes einfach diese code hier einfügen und schon werden Anführungszeichen und Bindestriche unverändert ausgegeben.
remove_filter('the_content', 'wptexturize');
remove_filter('comment_text', 'wptexturize');
No Comments

Webdev: Webkit Transition Beispiel

31/05/2010
Ich wollte für eine kleine Web-Anwendung die ich gerade schreibe einen Effekt nutzen, den ich auf der Seite von The Wonderfactory gesehen habe. Dort kann man auf der Seite die Schlagzeilen durchblättern, was vermutlich mit der selben Technik umgesetzt wurde, die die auch für die HTML-5 Ausgabe der Sports-Illustrated genutzt haben. Ich bin nicht so ein Freund von aufgeblähten JavaScript-Bibliotheken (zu aufgebläht für meine Seite) und diesen setTimeout-Pfusch den man nutzt, um etwas Bewegung in eine Seite zu bringen. Deshalb und weil die Seite die ich gerade schreibe wohl hauptsächlich von Webkit-Browsern angesteuert werden dürfte, habe ich mir so eine Wisch-Effekt-Box mit dem ein bissle JavaScript und etwas mehr CSS zusammengebaut. Unterm Strich können diese Webkit-Transition-Effekte einiges an JavaScript-Code überflüssig machen und die Seite läuft damit auch problemlos auf dem iPhone =) Und die Animation soll angeblich auch von der Hardware beschleunigt werden. Link zur Demo Seite
No Comments

Nervige Overlays auf Website entfernen

4/05/2010
Früher waren es die Pop-Up-Fenster heute sind es nervig Overlays, die die Sicht auf eine Website versperren. Entweder schaltet man stumpf JavaScript aus oder klickt die Overlays weg, was dann den Aufruf von anderen Overlays oder Popups zur Folge hat. Ein kleine Hilf stellt diese JavaScipt-Code dar, den der alle diese Overlay-Dinger schlichtweg ausblendet. (Quick&Dirty).
Code zum markieren einmal anklicken Code im Skript-Editor öffnen

tell application "Safari"

tell document 1

do JavaScript "for (var i=0;i<document.getElementsByTagName('*').length;i++)

{

if ((document.getElementsByTagName('*')[i].style.position == 'absolute')||(document.getElementsByTagName('*')[i].style.position == 'fixed'))

document.getElementsByTagName('*')[i].style.display = 'none'

}"

end tell

end tell

Macnews hat da eine etwas abgeänderte Form, das Overlay wird dort über eine Stylesheet definiert, deshalb nun computed style und schon funktioniert es wieder =)
Code zum markieren einmal anklicken Code im Skript-Editor öffnen

tell application "Safari"

tell document 1

do JavaScript "for (var i=0;i<document.getElementsByTagName('*').length;i++)

{

if ((document.defaultView.getComputedStyle(document.getElementsByTagName('*')[i],null).position == 'absolute')||(document.defaultView.getComputedStyle(document.getElementsByTagName('*')[i],null).position == 'fixed'))

document.getElementsByTagName('*')[i].style.display = 'none'

}"

end tell

end tell



1 Comment

Youtube Downloadlink für Videos

13/04/2010
Ich hatte da mal ein sehr schönes JavaScript als Bookmark, welches mit einen Download-Link der mp4 in die Seite einbaute, nur leider funktionierte das nicht mehr. Ein ungleich kürzes Skript habe ich hier gefunden und mit daraus dann das hier gebaut:
Code zum markieren einmal anklicken

javascript:swfHTM%20=%20document.getElementById('movie_player').getAttribute('flashvars');%20w%20=%20swfHTM.split('&');%20for%20(i%20=%200;%20i%20<=%20w.length%20-%201;%20i++)%20{%20if%20(w[i].split('=')[0]%20==%20't')%20{%20t%20=%20w[i].split('=')[1];%20}%20if%20(w[i].split('=')[0]%20==%20'video_id')%20{%20videoid%20=%20w[i].split('=')[1];%20}%20}%20bla%20=%20document.createElement('a');%20bla.setAttribute('href','http://youtube.com/get_video?video_id='%20+%20videoid%20+%20'&t='%20+%20t%20+%20'='%20+%20'&fmt=18');%20bla.innerHTML%20=%20'DOWNLOAD';%20document.getElementById('masthead-nav').appendChild(bla);

Einfach kopieren, als Bookmark abspeichern und schon hat man einen DownloadButton für You-Tube-Videos =)
2 Comments

JavaScript:AppleScript Link bauen mit Text aus div-Element

13/03/2010
Ich poste ja den AppleScript-Quellcode hier immer in so einem Div-Elementen, das ab einer gewissen Größe einen Scroll-Balken bekommen.
Zudem wählt ein Klick auf den besagten Container den kompletten Inhalt aus und weil ich copy&paste eh schon so oft mache, gibt es dazu noch einen Link "Code im Script-Editor öffnen".

Code zum markieren einmal anklicken Code im Skript-Editor öffnen

display dialog "Hallo, ich bin ein Dialog voller Sonderzeichen!\"§$%&/()=?

und Umlaute: ÖÄÜöää

Hm, fällt mir sonst noch etwas ein... ∂†ΩƒΩ©¨ªºø{|Ω®[€¢€‚∂®çƒ©√∫ª~º∆øπ@•∞œ@"


Um diesen Link geht es nun, den baue ich mir nämlich via JavaScript und da die Routine, die ich dazu geschrieben hatte, etwas buggy war, jetzt aber nach einer kleinen Anpassung anscheinend endlich auch mit allen Sonderzeichen und Umlauten zu funktionieren scheint, hier der Code dazu: function buildAppleScriptLink() { var txt = ''; if (window.getSelection) { txt = window.getSelection(); } else if (document.getSelection) { txt = document.getSelection(); } else if (document.selection) { txt = document.selection.createRange().text; } else return; window.open(("applescript://com.apple.scripteditor?action=new&script=" + (new String(txt)).replace(/\"/g,'%22').replace(/\n/g,'%0D'))).close(); window.getSelection().removeAllRanges(); }
Das Ding wird nach eine anderen Routine aufgerufen (selectThis(this)), die den Inhalt des "Code-Divs" auswählt. Der Text, also nicht der HTML-Quellcode (innerHTML) wird dann zu einem AppleScript-Link umformatiert (Anführungszeichen und Zeilenumbrüche werden ersetzt gegen URL-Konforme Escape-Sequenzen) und dieser Link wird via JavaScript dann auch gleich in einem
neuen Fenster aufgerufen, was dann zumindest auf einem Mac, den AppleScript-Editor öffnet. Meine Tests unter 10.6.2 und Safari (4.0.5) waren bisher allesamt erfolgreich. Sollte jemand noch eine Idee zu einer Verbesserung des Codes haben, bitte in die Comments. Ich denke das sollte aber alles Funktionieren, sofern die Seite vom Encoding auf UTF-8 steht.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
No Comments

Paint mit HTML

22/02/2010
Mal sehen, was sich sonst noch dazu finden wird =) html_paint1
No Comments

Adressen im Adressbuch überprüfen mit Postleitzahlen-Seite

6/12/2009
Das Skript erhebt zwar nicht den Anspruch fehlerfrei zu sein, zeigt aber schön wie man mit Hilfe von Javascript und Safari arbeiten kann... insbesondere page_loaded Routine kann manchmal recht praktisch sein...? Mit dem Skript kann man eine im Adresse-Buch ausgewählte Adresse mit Hilfe der Postleitzahlen-Seite der Post überprüfen. Stimmt der Ortsname, stimmt der Strassenname...
Code zum markieren einmal anklicken

global thewindow

tell application "Address Book"

set ts to selection

if ts ≠ {} then

repeat with t in the ts

if (count of addresses of t) = 0 then

error "Da gib es doch gar keine Anschrift zu prüfen..."

else

repeat with i from 1 to count of addresses of t

set myzip to zip of address i of t

set mystreet to street of address i of t

set mycity to city of address i of t

if ((my search_plz(myzip, "")) = false) then

tell application "Safari" to close tab 1 of window 1

repeat with i from 2 to count of every character of mystreet

set streetslice to (characters 1 through i of mystreet) as text

if ((my search_plz(myzip, streetslice)) = false) then

tell application "Safari" to close tab 1 of window 1

else

exit repeat

end if

end repeat

end if

set ca to name of t & return & formatted address of address 1 of t

set h to my get_search_results()

repeat until my get_weitere_link() = ""

if my get_weitere_link() ≠ "" then

my loadURL(my get_weitere_link())

my page_loaded(20)

set tmp to my get_search_results()

set item 1 of h to item 1 of h & item 1 of tmp

set item 2 of h to item 2 of h & item 2 of tmp

-- h = liste aus liste der Orte + liste der Strassen

end if

end repeat

set allok to true

if item 1 of h does not contain mycity then

set allok to false

display dialog "Der Ort " & mycity & " passt nicht zur PLZ " & myzip

end if

set foundit to false

repeat with i from 1 to count of every item of (item 2 of h)

if mystreet contains (item i of (item 2 of h)) then

set foundit to true

exit repeat

end if

end repeat

if foundit = false then

set allok to false

display dialog "Der Strassenname " & mystreet & " stimmt nicht...."

set the clipboard to (choose from list (item 2 of h) with prompt "Wähle einen korrekten Strassennamen aus, der landet dann in der Zwischenablage... kannst den Rest dann selber machen ;-)") as text

end if

if allok = true then

display dialog "Supi, war alles ok bei" & return & return & ca

else

display dialog "Hm, die Adresse musst du wohl mal korrigieren" & return & return & ca

tell application "Safari" to close tab 1 of window 1

end if

end repeat

end if

end repeat

end if

end tell




on search_plz(theplz, thestreet)

tell application "Safari"

(**do JavaScript "window.location.href = \"http://www.postdirekt.de/plzserver/PlzSearchServlet?id=streetsearch&source=12&plz=" & theplz & "&city=&district=&box=&street=&no=&kgs=&lang=de_DE&checked=5EDDB487F8FE81980113A474DCA88486EADD5B1E&pagenumber=1\""**)

set thewindow to open location "http://www.postdirekt.de/plzserver/PlzSearchServlet?id=streetsearch&source=12&plz=" & theplz & "&city=&district=&box=&street=" & thestreet & "&no=&kgs=&lang=de_DE&checked=5EDDB487F8FE81980113A474DCA88486EADD5B1E&pagenumber=1\""

my page_loaded(20)

if text of document 1 contains "Es wurden zu viele Suchergebnisse gefunden" then

return false

else

return true

end if

end tell

end search_plz


on loadURL(TheURL)

tell application "Safari"

tell document 1

do JavaScript "window.location.href = \"" & TheURL & "\""

end tell

end tell

end loadURL



on get_weitere_link()

tell application "Safari"

tell document 1

set weiter_link to do JavaScript "


if (document.getElementsByClassName('pagebutton').length>1)

{

var w = document.getElementsByClassName('pagebutton')[1].href;

}else{

if (document.getElementsByClassName('pagebutton').length>0)

{

if (document.getElementsByClassName('pagebutton')[0].text.indexOf('Weitere')>-1)

var w = document.getElementsByClassName('pagebutton')[0].href;

else

var w = '';

}else{

var w= '';

}

}

 w;

"

return weiter_link

end tell

end tell

end get_weitere_link

on get_search_results()

tell application "Safari"

tell document 1

set Tabellen_inhalt to do JavaScript "

function Trim(str){

return str.replace(/(^\\s*)|(\\s*$)/g, '');

}

try{

var orte = new Array();

var strassen = new Array();

Array.prototype.contains = function (element) {

for (var i = 0; i < this.length; i++) {

if (this[i] == element) {

return true;

}

}

return false;

}

if (document.getElementById('result_table').rows[0].innerHTML.indexOf('Zustellart')==-1){

if (document.getElementById('result_table').rows.length>2)

{


var strasse_cells_index = 0;

for (var k=0;k<document.getElementById('result_table').rows[0].cells.length;k++)

{

if (document.getElementById('result_table').rows[0].cells[k].innerHTML == 'Straße')

{

strasse_cells_index = k;

break;

}

}

for (var i=1;i<(document.getElementById('result_table').rows.length)-1;i++)

{

if (strasse_cells_index == 0)

{

var plz = Trim(document.getElementById('result_table').rows[i].cells[0].getElementsByTagName('div')[1].innerHTML.replace(/\\&nbsp;/g,''));

var ort = Trim(document.getElementById('result_table').rows[i].cells[1].innerHTML.replace('  ','').replace(/\\&nbsp;/g,'').replace(/\\n/g,''));

var strasse = '';

}else

{

var plz = Trim(document.getElementById('result_table').rows[i].cells[0].getElementsByTagName('div')[1].innerHTML.replace(/\\&nbsp;/g,''));

var ort = Trim(document.getElementById('result_table').rows[i].cells[1].innerHTML.replace('  ','').replace(/\\&nbsp;/g,'').replace(/\\n/g,''));

var strasse = document.getElementById('result_table').rows[i].cells[strasse_cells_index].innerHTML.replace(/\\n/g,'');

strasse = Trim(strasse.slice(0,strasse.indexOf(String.fromCharCode(160))).replace(/\\&nbsp;/g,''))

}

if (orte.contains(ort))

{

}else{

orte.push(ort);

}

if (strassen.contains(strasse))

{

}else{

strassen.push(strasse);

}


}

}

}

var myoutput = [orte,strassen]

myoutput

}catch(e)

{

alert (e)

}

"

end tell

end tell

return Tabellen_inhalt as list

end get_search_results



on page_loaded(timeout_value) -- in seconds

delay 1

repeat with i from 1 to timeout_value

tell application "Safari"

if name of current tab of window 1 is not "Loading" then exit repeat

end tell

delay 1

end repeat

if i is timeout_value then return false

tell application "Safari"

repeat until (do JavaScript "document.readyState" in document 1) is "complete"

delay 0.5

end repeat

end tell

return true

end page_loaded

No Comments

CSS-Selector

2/09/2009
Unter http://www.selectorgadget.com/ gibt es ein kleines Tool das mit Hilfe von JavaScript das einem hilft, den korrekten css-selector für ein Objekt zu finden. Ist wahrscheinlich recht praktisch, wenn man Seiten nachträglich skripten möchte oder existierende mit einem neuen Stylesheet versehen möchte. Quelle
No Comments