Login

vana · 31.05.2012, 18:10

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

oldster · 31.05.2012, 19:08

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

vana · 01.06.2012, 07:57

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

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken