Dynamic Date Script

[SteveP]

Hi Folks. I'm returning to Web Designer after a few years away and I'm in the middle of designing a fairly straightforward site.

Historically, I've always had a bit of javascript code (that I've copied and pasted from my previous web creations and that I found somewhere on the 'net) that simply shows the day/date - and it changes daily to automagically to show the current day/date.

I came to use it on my new site and decided I needed to align the text to the right. Does anyone know what I need to add to the code to allow me to 'align it right'?

Thanks in advance!

<style>
.mydate {
font: 10px arial;
color: white;
}
</style>
<SCRIPT LANGUAGE="Javascript"><!--

// Get today's current date.
var now = new Date();

// Array list of days.
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thu rsday','Friday','Saturday');

// Array list of months.
var months = new Array('January','February','March','April','May',' June','July','August','September','October','Novem ber','December');

// Calculate the number of the current day in the week.
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();

// Calculate four digit year.
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}

// Join it all together
today = days[now.getDay()] + ", " +
months[now.getMonth()] + " " +
date + ", " +
(fourdigits(now.getYear())) ;

// Print out the data.
document.write('<span class="mydate">' + today + '</span>');
//--></SCRIPT>

[Egg Bramhill]

Works fine for me Steve. You probably forgot to hit Apply after changing the text size

[Egg Bramhill]

The quickest way would be to move the placeholder to the right.

[SteveP]

Thanks Egg! You were right. Off to SpecSavers!

Just one more thing. How do I align the text to the right of the placeholder?

[Big Frank]

it's a lot easier with php
but your page must be called mypage.php and not mypage.html
one simple command in the placeholder

<?php echo date("Y"); ?>

all my sites are php so that i can take advantage of it
my home page is called any_old_page.html which nothing links to and then the real home page people see is called index.php

plus don't forget some people disable javascript or use the noscript plugin

[SteveP]

Thanks Frank. I'd prefer to use javascript.

[SteveP]

Hi Egg. Cheers, Yes, I can do that but as the date gets bigger/longer, it's currently defaulting to left aligned so the longer dates push the text off the right hand side of the page. If it were right aligned it would push the longer text to the left, where I've got plenty of room

[Egg Bramhill]

Try this

[SteveP]

My thanks to Egg for sorting out my alignment issue with the dynamic date script. To keep things exciting ... another issue has arisen!

I have put the script on the main site and adjusted the font, size and alignment - as expected, it works perfectly.

It's a responsive site and because I want to make the font smaller for the date on the mobile variant, I copied the script, created a new placeholder and reduced the font size.

..then my troubles began!

Bizarrely, the MAIN site now takes on the font size of the MOBILE site's font settings even though when I look at the placeholder script on the MAIN page, it shows the *larger* font size. After a bit of poking around, I found that if I delete the dynamic date script on the MOBILE page, the MAIN script then behaves itself - ie it shows the larger font size.

So, I've concluded that it must be a glitch somewhere and if I have the need for the script on BOTH variants, the MAIN website page is always going to adopt the font size of the MOBILE page's script.

I don't yet know enough about what goes on 'under the bonnet' of WD's web pages to see what's happening. I can only conclude that the MOBILE script seems to 'take priority' over the main page's script.

I've pulled enough hair out over this , and would really appreciate some guidance from any WD gurus out there.

Many thanks!

[Egg Bramhill]

I would say it's because you are calling the same class i.e. .mytime in both variants. I changed the class name on the mobile version to .mymobileclass and this appears to have done the trick.

You only need to alter two occasions of the class name in the mobile code.

EDIT: Amended xar file.