Home Blog erstellt am: : 12/03/08 Zuletzt aktualisiert : 03/01/10 18:47 / 126 veröffentlichte Einträge
 
< vorherige | Alle Einträge | nächste >

2.11 die Erkennung  (II. WebDev dashcode) Verfasst: Montag, den 17. März 2008 13:17

Blog von izero :iPhone SDK (Anfänger), 2.11 die Erkennung

also diese WebkitDetect.js ist ganz gut also rein ins Projekt und dann erstellen wir noch eine neue html Seite die wir z.B. "justiphone.html" nennen ... kommt auch ins projekt  ... (PS ich hab die Seite mit nem editor ebend gemacht) dann folgende Zeilen in der index unter

</head>
<body onload="load();">

 

_____________________________________________________________

<script type="text/javascript" src="WebKitDetect.js" charset="utf-8"></script>
<script>
 var isMobile = WebKitDetect.isMobile();
 if (!isMobile) {window.location.href = "justiphone.html";}
</script>

... und schon fertig...

Kommentar hinzufügen |  0 Kommentar(e)
Permalink

3.1 left und top  (III. Bewegung CSS) Verfasst: Dienstag, den 18. März 2008 06:34

Blog von izero :iPhone SDK (Anfänger), 3.1 left und top

fangen wir ganz easy an neues Projekt ... 2 Knöpfe apsolut nebeneinander ziehmlich weit unten positionieren und beide bekommen ein event on click ... dan noch das ovalShap in die mitte auch absolut ... dann noch die 4 Zeilen in die Events eintragen und fertig ... das Dingen läßt sich nun mit den zwei knöpfen hin und her bewegen ....

____________________________

function meinClickHandler(event)
{
 document.getElementById("ovalShape").style.left="50px"; /* x verschieben */
    document.getElementById("ovalShape").style.top="50px"; /* y verschieben */
 
}


function meinClickHandler1(event)
{
    document.getElementById("ovalShape").style.left="150px"; /* x verschieben */
    document.getElementById("ovalShape").style.top="150px"; /* y verschieben */
}

 

Kommentar hinzufügen |  0 Kommentar(e)
Permalink

3.1.2 string ; number ; replace  (III. Bewegung CSS) Verfasst: Dienstag, den 18. März 2008 15:44

jetzt fängt der Spass an ...

var conposx = Number(document.getElementById("ovalShape").style.left.replace(/px/,"") ) ;

 

was mach ich da ..und warum ? und gleich zwei Probleme ....also ich lese da die Position x hoffentlich aus von dem Oval.  Dummerweise als String (Wert + Schrift = String) z.B. "23px" , dann lösche ich mit "replace" das "px" und kann mit "Number" dern String in eine Number (Numer = nur Wert z.B 23 mit der man rechnen kann) convertieren -> "23px" + 5 = "23px5" und wir brauchen "28px" ... hier sollte dan in conposx der Wert x ohne "px" enhalten sein ... so und jetzt soll das ganze geändet wieder als String zrück ... zB

 var newposx = conposx + 23;
 var strposx = newposx +"px" ;

und schreiben mit

 document.getElementById("ovalShape").style.left=strposx;

 

dass Ganze erscheint mir aber irgendwie recht umständlich und mit dem Auslesen des Startwertes von conposx klappt es auch nicht  beim ersten Knopfdruck. Der fängt mit dem  Wert Null an ....{#} ... weiß einer wovon ich hier  rede ?  unwahrscheinlich ...

vieleicht ist das der falsche Ansatz hier sowas anstrengendes ins Spiel zu bringen ... wo doch gerade so große Fortschritte da waren...hmm mal sehen ...

___________

par Stunden später ... ok ... ich hab mal bischen rumgelesen und bemerkt daß die Jungs von Apple vor ein par Stunden (ca. 20 Uhr) mir ne Mail geschickt haben , daß es auf der DEV Seite Neues gibt.... und siehe da genau 38 Seiten über meine Problematik schön in Englisch .... Wenn ich die Jungs von Apple richtig verstehe haben die sich das alles ganz anders gedacht .... CSS... 

 

Kommentar hinzufügen |  0 Kommentar(e)
Permalink

3.2 Animation als Slide  (III. Bewegung CSS) Verfasst: Mittwoch, den 19. März 2008 03:25

Blog von izero :iPhone SDK (Anfänger), 3.2 Animation als Slide

ok und wieder neues Projekt und nun einfach index.html komplett löschen und durch folgende Zeilen ersetzen:

<html>
<head>
<title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0">
<style>
div {
width:100px; height:100px; background-color:blue;
position:absolute;
}
.diagonalslide {
-webkit-animation-name: 'diagonal-slide';
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 2;
}
@-webkit-keyframes 'diagonal-slide' {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
}
</style>
<div onClick="this.className='diagonalslide'">
touch me
</div>
iZero Slide Safari CCS Ani. G. 4 iPhone OS Seite.23 und 24
</body>
</html>

 

Also ich find das Ergebnis erstaunlich

Kommentar hinzufügen |  0 Kommentar(e)
Permalink

3.2.2 webkit-transition-property:  (III. Bewegung CSS) Verfasst: Donnerstag, den 20. März 2008 18:43

-webkit-transition-property: opacity,left,top;
-webkit-transition-duration: 2s,3s,3s;

 

also nach meinem Verständnis baut man z.B. ein shape in die mitte absolute bei left 100px und top 100 px  dann setze ich die zwei Zeilen (oben) in die Definition des Shape in der Datei main.css ... damit gebe ich dem Teil die eigenschaften Sichtbarkeit 2s und position left , top in 3 sekunden zu verändern.

wenn ich nun einen Button mit event einabaue und diesem dann nach left,top 50px springen lasse funktioniert die animation auch , wenn ich jedoch Werte über 100 benutze also nach rechts unten bewege passiert irgendwie nix .... evt. ist das noch Buggy ... löscht man die -webkit Zeilen springt das Shape normal wie erartet . hmmm und nu ... mach ich das was Faslch oder ist der Browser buggy ... naja man kann ja erstmal die Animationen benutzen ... ich mach hier weiter mit der Bewegung wenn ich geschnallt hab wo das Problem liegt ....

_____________________

Zwei wichtige Dokus von Apple - Safari CSS Transform Guid for iPhone OS und das gleiche nochmal für Animation ... relative frische Dokus ... durch es macht den Eindruck als wenn die Dashcode Anwendung das ganze gar nicht so richtig toll findet (evt. wegen Beta!){#}

___________

so hab mal bei Apple ein Bug gemldet ... mal sehen was das gibt 23.3.08

Bug Link Apple : https://bugreport.apple.com/cgi-bin/WebObjects/RadarWeb.woa/wa/signIn

5815013

Kommentar hinzufügen |  0 Kommentar(e)
Permalink