Le conseil de Zadz : En vous inscrivant, vous aurez beaucoup moins de publicités et un accès à tous les tutoriels!

Custom de Lockscreen diapo - problème de html

Questions diverses à propos de l'iPhone 3G / 2G ou de son firmware. Questions avant achat, après achat, après vente.

Modérateur: Mode&Rateurs

Règles du forum
[!] Si vous considérez votre problème comme réglé, merci de le signaler, un modérateur indiquera par une coche verte Image que votre problème est résolu.

Custom de Lockscreen diapo - problème de html

Messagepar Geiss » Mer 10 Août 2011 16:29

Bonjour,

Pour mon premier post ici (forum que je visite cependant très souvent), un problème de customisation.
J'ai bricolé un LockBackground.html pour avoir un diapo en Lockscreen, cela fonctionne parfaitement, cependant, pour mieux profiter du Lockscreen, j'ai voulu changer de place la date et l'heure. J'ai alors supprimé la date et l'heure existante dans les fichiers en passant en ssh, puis bricolé un nouveau code en m'inspirant de celui d'un thème existant.
Les deux codes fonctionnent...séparément, ce sont deux Lockbackground.
Mes connaissances quasi inexistantes en html ne me permettent pas d'assembler ces deux codes...d'où ma demande d'aide !

Code du diapo :

Code : Tout sélectionner
<?xml version="1.0" encoding="UTF-16"?>
<html><head>
<base href="Private/"/>
<!--meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0"/-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<style>
body {
background-color: black;
margin: 0;
padding: 1px 0 0 0;
height: 480px;
width: 320px;
}

img {
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
position: absolute;
width: 320px;
height: 480px;
}

img.fade-out {
opacity: 0;
}

img.fade-in {
opacity: 1;
}
</style>
</head><body style="color: black">
<img id="one"/>
<img id="two"/>

<script>
var images = ['1.png', '2.png', '3.png', '4.png'];
var index = 0;
var toggle = 0;

var fade_one = one;
var fade_two = two;
var fade_toggle = ['out', 'in'];

fade_one.src = images[index];
index = (index + 1) % images.length;
fade_two.src = images[index];

var fade = function () {
fade_one.className = 'fade-' + fade_toggle[toggle];
toggle = (toggle + 1) % fade_toggle.length;
fade_two.className = 'fade-' + fade_toggle[toggle];

index = (index + 1) % images.length;
setTimeout(function () { if(fade_one.className == 'fade-out') { fade_one.src = images[index]; } else { fade_two.src = images[index]; } }, 2000);
setTimeout(fade, 3000);
};

fade();
</script>
</body></html>


Code de l'heure + date

Code : Tout sélectionner
<?xml version="1.0" encoding="UTF-16"?>

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="refresh" content="900; url=Wallpaper.html"/></head>

<head><title>Upside Right</title></head><style>

}#Layer {
   width: 321px;
   height: 481px;
   position: absolute;
   top: -1px;
   right: 0px;
   down: 0px;
   left: -1px;
}

.stretch {
   width:100%;
   height:100%;
}

body {
   margin: 0;
}

SPAN#clock {
   font-family: Heiti TC;
   font-weight:bold;
   color: #ffffff;
   text-shadow: 0px 0px 8px #fff;
   font-size: 40px;
   text-align: left;
   opacity: 0.9;
   
}

SPAN#ampm {
   font-family: Heiti TC;
   font-weight:bold;
   color: #ffffff;
   text-shadow: 0px 0px 10px #fff;
   font-size: 20px;
   text-align: left;
   text-transform: uppercase;
   opacity: 0.7;
   display:
}

TD#vdate {
   float:top;
   font-family: Heiti TC;
   font-weight: bold;
   text-align: right;
   color:#ffffff;
   text-shadow: 0px 0px 5px #fff;
   font-size: 33px;
   opacity: 0.9;
   text-transform: uppercase;
   -webkit-transform: rotate(-90deg);
}

TD#vweek {
   font-family: Heiti TC;
   font-weight:bold;
   color: #ffffff;
   text-shadow: 0px 0px 5px #fff;
   font-size: 23px;
   text-align: left;
   text-transform: uppercase;
   opacity: 0.9;
   -webkit-transform: rotate(-90deg);
}

TD#vmonth {
   font-family: Heiti TC;
   font-weight:bold;
   color: #ffffff;
   text-shadow: 0px 0px 5px #fff;
   font-size: 25px;
   text-align: left;
   text-transform: uppercase;
   opacity: 0.7;
   -webkit-transform: rotate(-90deg);
}

TD#vyear {
   float:top;
   font-family: Heiti TC;
   font-weight: bold;
   text-align: right;
   color:#ffffff;
   font-size: 26px;
   text-shadow: 0px 0px 5px #fff;
   opacity: 0.7;
   -webkit-transform: rotate(-90deg);
   display: absolute;
}

<script type="text/javascript">

function updateClock ( )
{
   var currentHours_name_array = new Array ("12", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12")
   var currentMinutes_name_array = new Array ("00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28","29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "00")
   var currentTime = new Date ( );
   var currentHours = currentTime.getHours ( );
   var currentMinutes = currentTime.getMinutes ( );
   var currentSeconds = currentTime.getSeconds ( );

<!-- Pad the minutes and seconds with leading zeros, if required -->
   //currentHours = ( currentHours < 10 ? "0" : "" ) + currentHours;
   currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
   currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

<!-- Defines either "AM" or "PM" as appropriate -->
   var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

<!-- Convert hours component of "12" to "24" -->
   currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

<!-- Convert hours component from "0" to "12 at Midnight-->
   currentHours = ( currentHours == 0 ) ? 12 : currentHours;

<!-- Compose the string for display-->
   var currentTimeString = currentHours + ":" + currentMinutes;

<!-- Update the time display-->
   document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}

function amPm ( )
{
   var currentTime = new Date ( );
   var currentHours = currentTime.getHours ( );

<!-- Defines either "AM" or "PM" as appropriate -->
   var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

<!-- Convert hours component of "12" to "24" -->
   currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

<!-- Convert hours component from "0" to "12 at Midnight-->
   currentHours = ( currentHours == 0 ) ? 12 : currentHours;

<!-- Compose the string for display-->
   var currentTimeString = timeOfDay;

<!-- Update the string for display of AM/PM-->
   document.getElementById("ampm").firstChild.nodeValue = currentTimeString;
}

function calendarDate ( )
{
   var this_date_name_array = new Array ("00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27" ,"28", "29" ,"30", "31")
   var this_weekday_name_array = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
   var this_month_name_array = new Array("January","February","March","April","May","Jun","July","August","September","October","November","December")
   
   var this_date_timestamp = new Date()

   var this_weekday = this_date_timestamp.getDay()
   var this_date = this_date_timestamp.getDate()
   var this_month = this_date_timestamp.getMonth()
   var this_year = this_date_timestamp.getYear()

   if (this_year < 1000)
      this_year+= 1900;
   if (this_year==101)
      this_year=2001;

   var month = this_date_timestamp.getMonth();

   document.getElementById("date").firstChild.nodeValue = this_date_name_array[this_date]
   document.getElementById("calendar_weekday").firstChild.nodeValue = this_weekday_name_array[this_weekday]
   document.getElementById("calendar_month").firstChild.nodeValue = this_month_name_array[this_month]
   document.getElementById("calendar_year").firstChild.nodeValue = this_year
}
</script>

<body bgcolor="Transparent" onload="onLoad()">
<table style="position: absolute; top: 25px; left: 15px; width: 320x; height: 461px; z-index: 14;">
   <tr align="center" valign="top" border="0" cellpadding="0">
    <td height="0" valign="top" margin-left="0">
    <span id="clock">
   <script language="JavaScript">updateClock(); setInterval('updateClock()', 1000 )</script>
   </span>
    </td>
   </tr>
   </table>

   <table style="position: absolute; top: 70px; left: -10px; width: 150px; height: 461px;">
   <tr align="center" valign="top"  border="0" cellpadding="0">
   <td height="12" valign="top" margin-left="20" >
   <span id="ampm">
   <script language="JavaScript">amPm(); setInterval('amPm()', 1000 )</script>
    </span>
    </td>
   </tr>
   </table>

   <table style="position: absolute; top: 130px; left: 354px; width: 320px; height: 480px;">
   <td id=vdate width="254" height="12" align="center" valign="top" margin-left="20">
   <span id="date">
   <script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>
   </span>
   </td>
   </tr>
   </table>

   <table style="position: absolute; left: 328px; top: -120px; width: 320px; height: 480px;">
   <td id=vweek width="254" height="12" align="center" valign="top" margin-left="20">
   <span id="calendar_weekday">
   <script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>
   </span>
   </td>
   </tr>
   </table>

   <table style="position: absolute; top: -195px; left: 355px; width: 320px; height: 480px;">
   <tr>
   <td id=vmonth width="254" height="12" align="center" valign="top" margin-left="20">
   <span id="calendar_month">
   <script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>
   </span>
   </td>
   </tr>
   </table>

   <table style="position: absolute; top: 175px; left: 355px; width: 320px; height: 480px">
   <tr>
   <td id=vyear width="254" height="12" align="center" valign="top" margin-left="20">
   <span id="calendar_year">
   <script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>
   </span>
   </td>
   </tr>
   </table>

</body>
</html>


Merci aux pros du html pour leur aide :)
iPod shuffle - iPod Touch Firmware 4.3.3 (JB)- Macmini
Geiss
 
Message(s) : 3
Inscrit(e) le : Mer 10 Août 2011 16:18

Re: Custom de Lockscreen diapo - problème de html

Messagepar iKamikaze13 » Mer 10 Août 2011 23:10

J'ai pas vu grand chose; tu n'aurais pas un screen à nous montrer parce que je n'ai pas pu ouvrir tes 2 liens.
Il faut peut être créer un dossier Stylesheets. Ça dépend de ce que tu veux faire; ce n'est pas très compliqué, mais, il faut une base et là; ce n'est pas le cas.
iPhone5 sous FW 7 / iPod Nano 6 1.0 / Touch 4.2.1 / iPad 2 32 Go 6.1.2 / iPhones 4 4S et 5 version 6.1.2.Jailbreakés avec evasi0n / MacBook Pro 17"/ iMac 27" Intel Core i5 / MacBook Air 11" 128 Go; tous sous Mountain 10.8.4
Avatar de l’utilisateur
iKamikaze13
Chef de Rang
 
Message(s) : 1517
Inscrit(e) le : Mar 14 Déc 2010 15:42

Re: Custom de Lockscreen diapo - problème de html

Messagepar Geiss » Jeu 11 Août 2011 06:17

Je n'ai pas compris, mes deux liens ?
Mon but est juste d'assembler les deux codes pour n'avoir qu'un seul lockbackground.html.
iPod shuffle - iPod Touch Firmware 4.3.3 (JB)- Macmini
Geiss
 
Message(s) : 3
Inscrit(e) le : Mer 10 Août 2011 16:18

Re: Custom de Lockscreen diapo - problème de html

Messagepar Geiss » Sam 13 Août 2011 09:02

Problème résolu.
iPod shuffle - iPod Touch Firmware 4.3.3 (JB)- Macmini
Geiss
 
Message(s) : 3
Inscrit(e) le : Mer 10 Août 2011 16:18



6.12 Figurines 728x90

Retour vers Questions diverses - ou Régulations des Angoisses

Qui est en ligne ?

Utilisateur(s) parcourant ce forum : Aucun utilisateur inscrit et 1 invité