Apple iPhone Forum und Community - Widget.html bearbeiten um Uhr & Datum wegzubekommen

Hi Leute ,
Bräuchte Hilfe um mein Thema fertig zu basteln.
Hab ein LS Thema auf Widget.html umbenannt, würde aber gerne
beim Widget nur die Slideshow haben ohne Datum und Uhr.

<html><head>

<link rel="stylesheet" href="Private/lines.css" type="text/css" media="screen" charset="utf-8">

<script src="Private/lines.js" type="text/javascript" charset="utf-8"></script>





<style>

body {

margin: 0;

top: 0;

}

@font-face {

font-family: Default;

src: url(Default.ttf);

}

SPAN#clock

{

font-family: Default;

font-weight: 100;

color: darkgrey;

text-shadow: 0px 0px 2px black;

font-size: 40px;

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(transparent), color-stop(0.5, #666));

}

SPAN#ampm

{

font-family: Default;

font-weight: 100;

color: darkgrey;

text-shadow: 0px 0px 1px black;

font-size: 25px;

text-transform: uppercase;

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(transparent), color-stop(0.5, #666));

}

SPAN#weekday

{

font-family: Default;

font-weight: 100;

color: 7AC5CD;

text-shadow: 0px 0px 1px black;

font-size: 15px;

text-transform: uppercase;

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(transparent), color-stop(0.67, #666));

}

SPAN#date

{

font-family: Default;

font-weight: 100;

color: darkgrey;

text-shadow: 0px 0px 1px black;

font-size: 19px;

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(transparent), color-stop(0.67, #666));

}

SPAN#month

{

font-family: Default;

font-weight: 100;

color: 7AC5CD;

text-shadow: 0px 0px 1px black;

font-size: 15px;

text-transform: uppercase;

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(transparent), color-stop(0.67, #666));

}

img {

position: absolute;

top: 32px;

left: 53.5px;

width: 213px;

height: 320px;

z-index: -15;

}

img.fade-out {

-webkit-transition-property: opacity;

-webkit-transition-duration: 4s;

opacity: 0;

}

img.fade-in {

opacity: 1;

}

</style>



<script type="text/javascript">

function init ( )

{

timeDisplay = document.createTextNode ( "" );

document.getElementById("clock").appendChild ( timeDisplay );

}

function updateClock ( )

{

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;

/*---------------------------------------------------------------------------------------------------------------------------------12 hours to 24 hour Edit------*/

/* Remove the /* from under this line to display the 12 hours clock */ /* NEW!! */

// Choose either "AM" or "PM" as appropriate

var timeOfDay = ( currentHours < 12 ) ? "" : "";

// Convert the hours component to 12-hour format if needed

currentHours = ( currentHours > 12 ) ? currentHours - 0 : currentHours;

// Convert an hours component of "0" to "12"

currentHours = ( currentHours == 0 ) ? 0 : currentHours;

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/

// Compose the string for display

var currentTimeString = currentHours + ":" + currentMinutes;

// Update the time display

document.getElementById("clock").firstChild.nodeValue = currentTimeString;

}

function init2 ( )

{

timeDisplay = document.createTextNode ( "" );

document.getElementById("ampm").appendChild ( timeDisplay );

}

function amPm ( )

{

var currentTime = new Date ( );

var currentHours = currentTime.getHours ( );

/*---------------------------------------------------------------------------------------------------------------------------------AM PM Edit------*/

/* Remove the /* from under this line to display am or pm after the 12 hours clock */ /* NEW!! */

// Choose either "AM" or "PM" as appropriate

var timeOfDay = ( currentHours < 12 ) ? "" : "";

// Convert the hours component to 12-hour format if needed

currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

// Convert an hours component of "0" to "12"

currentHours = ( currentHours == 0 ) ? 12 : currentHours;

// Compose the string for display

var currentTimeString = timeOfDay;

// Update the time display

document.getElementById("ampm").firstChild.nodeValue = currentTimeString;

}

function init3 ( )

{

timeDisplay = document.createTextNode ( "" );

document.getElementById("date").appendChild ( timeDisplay );

}

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("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag")

var this_month_name_array = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","August","September","Oktober","November","Dezember") //predefine month names

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;

document.getElementById("weekday").firstChild.nodeValue = this_weekday_name_array[this_weekday] + " " //concat long date string

document.getElementById("date").firstChild.nodeValue = this_date_name_array[this_date] + " " //concat long date string

document.getElementById("month").firstChild.nodeValue = this_month_name_array[this_month] //concat long date string

}

// -->

</script>

</head>

<body bgcolor="Transparent" onload="onLoad()">

<img id="img1" class="fade-in">

<img id="img2" class="fade-out">

<script>

var interval = 5 * 4; // Seconds between change (must be > duration)

var imageDir = "./Private/Walls/"; // You can add your own images if you want to

var duration = 3; // The transition duration in seconds

// (must match -webkit-transition-duration above)

var images = [ // List of image filenames

"Wall0.jpg",

"Wall1.jpg",

"Wall2.jpg",

"Wall3.jpg",

"Wall4.jpg",

"Wall5.jpg",

"Wall6.jpg",

"Wall7.jpg",

"Wall8.jpg",

"Wall9.jpg",

"Wall10.jpg",

"Wall11.jpg",

"Wall12.jpg",

"Wall13.jpg",

];

//// Dont change anything below ////

var index = 0;

var imageCount = images.length;

var randomize = function(){

return Math.round(5 - 10 * Math.random());

};

var fade = function(){

img1.style.zIndex = 1;

img2.style.zIndex = 2;

img1.className = "fade-in";

img2.className = "fade-out";

index = (index + 1) % imageCount;

if(!index){

images.sort(randomize);

}

var tmp = img1;

img1 = img2;

img2 = tmp;

setTimeout(function(){img1.src = imageDir + images[index];}, duration * 1000);

setTimeout(fade, interval * 1000);

};

images.sort(randomize);

img1.src = imageDir + images[index];

fade();

</script>

<div id="linesContainerH"></div>

<div id="linesContainerV"></div>

<table style="position: absolute; top: 355px; left: 0px; width: 320px; height: 480px; z-index: 20;">

<tr align="center" valign="top" border="0" cellpadding="0">

<td height="12" valign="top" margin-left="20" >

<span id="clock"> <span id="ampm">

<script language="JavaScript">updateClock(); setInterval('updateClock()', 1000 )</script> <script language="JavaScript">amPm(); setInterval('amPm()', 1000 )</script>

</span>

</td>

</tr>

<tr></table>

<table style="position: absolute; top: 385px; left: 0px; width: 320px; height: 480px; z-index: 20;">

<tr align="center" valign="top" border="0" cellpadding="0">

<td height="12" valign="top" margin-left="20" >

<span id="weekday"> <span id="date"> <span id="month">

<script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>

</span>

</td>

</tr>

<tr></table>

<img src="Layer.png" style="position: absolute; top: 0px; left: 0px; width: 320px; height: 480px; z-index: -20;">

<img src="Private/Walls/frame.png" style="position: absolute; top: 5px; left: 31.5px; width: 257px; height: 375px; z-index: 20;">

</body></html>

Geht das überhaupt ohne Probleme bei bei sowas eher noch ein Rookie..
Bei Bedarf poste ich einen Screenshot .
Danke im voraus, vana

Eine einfache, wenn auch nicht schöne Lösung ist, wenn Du nach jedem #SPAN......{ ein display:none; einfügst. Damit blendest Du nur die Anzeige aus. Behälst aber den ganzen html code. Besser wäre ein einfaches slideshow widget. Bei Bedarf melde dich bei mir. Gruß oldster

Danke oldster, wusste zwar nicht wo genau Display:None hinkommt( mit Klammer {} oder ohne,
habe es anders gelöst, einfach betreffende Zeilen die Farben auf transparent gesetzt.
Funktioniert wunderbar;-)

Schönen Tag an alle, vana