Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript diplayed font size

How in this script can i changed the displayed font and colour?

JavaScript:
/*About 70 holidays from all over the world are displayed by Calendar (if you know other ones, let me know, I will add them). It even calculates Easter Sunday date! To see how it works change the date on your computer to January, 1,
for example and re-load the page.*/
(function(){
    var linebreak = true, // should line break be added after date and holidays (if any) (true/false)
    calendar = new Date(), day = calendar.getDay(), month = calendar.getMonth(), date = calendar.getDate(), year = calendar.getFullYear(),
    f = Math.floor, cent = f(year / 100), g = year % 19, k = f((cent - 17) / 25), i = (cent - f(cent / 4) - f((cent - k) / 3) + 19 * g + 15) % 30,
    i = i - f(i / 28) * (1 - f(i / 28) * f(29 / (i+1)) * f((21-g) / 11)), j = (year + f(year / 4) + i + 2 - cent + f(cent / 4)) % 7, l = i - j,
    emonth = 3 + f((l + 40) / 44), edate = l + 28 - 31 * f((emonth / 4)), gfwmcal = new Date(), adcal = new Date(), cd = 25, gfmonth, dhtml = [],
    dayname = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], gfdate, wmmonth, wmdate, admonth, addate,
    monthname = ["January","February","March","April","May","June","July","August","September","October","November","December"],
    html = ["<b>", dayname[day], ", ", monthname[month], " ", date < 10? "0" : "", date, ", ", year, "</b>"], thanksdate = new Date();
    gfwmcal.setMonth(--emonth);
    gfwmcal.setDate(edate - 2);
    gfmonth = gfwmcal.getMonth();
    gfdate = gfwmcal.getDate();
    gfwmcal.setDate(gfdate + 52);
    wmmonth = gfwmcal.getMonth();
    wmdate = gfwmcal.getDate();
    adcal.setMonth(11);
    adcal.setDate(cd);
    if(adcal.getDay()){cd += (7 - adcal.getDay());}
    adcal.setDate(cd - 28);
    admonth = adcal.getMonth();
    addate = adcal.getDate();
    thanksdate.setMonth(10);
    thanksdate.setDate(1);
    thanksdate = 5 - thanksdate.getDay();
    thanksdate += (thanksdate < 1? 28 : 21);
    // Easter and Related
    if (month === emonth && date === edate) dhtml.push("Easter Sunday (Western)");
    if (month === gfmonth && date === gfdate) dhtml.push("Good Friday (Western)");
    if (month === wmmonth && date === wmdate) dhtml.push("Whit Monday");
    // Advent
    if (month === admonth && date === addate) dhtml.push("Advent Sunday");
    [function(){ // January
        if (date === 1) dhtml.push("<b>NEW YEAR'S DAY.</b> On this day in 1960 The Bank of France revalued the French Franc. 100 old Francs was to be worth 1 new Franc (NF). It was also on this day that the US government census put the population of America at 179,245,000, and Johnny Cash played the first of his free concerts for the inmates of San Quentin Prison.  And taking a look back at the U.K. singles chart for this New years day in 1960,  Emile Ford's WHAT DO YOU WANT TO MAKE THOSE EYES AT ME FOR? was the decades first number 1. Adam Faith was at 2 with WHAT DO YOU WANT,  and The Avons were at 3 with SEVEN LITTLE GIRLS SITTING IN THE BACK SEAT.");
        if (date === 2) dhtml.push("On this day in 1960 geophysicist John Reynolds calculated that age of solar system was 4,950,000,000 years old, and in Wakefield, Yorkshire, the Chief Medical Officer for Health, Dr. Cyril Thompson was warning about the dangers obesity in school children because they were eating 'to bigger helpings of school dinners'. And taking look a back at the U.K. singles chart for this day in 1960, Emile Ford and The Checkmates were at number 1 with WHAT DO YOU WANT TO MAKE THOSE EYES AT ME FOR?  Adam Faith was at 2 with WHAT DO YOU WANT, and The Avons were at 3 with SEVEN LITTLE GIRLS SITTING IN THE BACK SEAT");
        if (date === 3) dhtml.push("On this day in 1967 'Beach Boy' Carl Wilson received call up papers from the US Army. He refused to go to Vietnam, and after a long and protracted struggle he eventually won his case five years later in 1972. It was also on this day that Jack Ruby (the man that shot dead President John F Kennedy's alledged assassin Lee Harvey Oswald) died aged 55. And taking a look back at the U.K. singles chart for this day  in 1967, Tom Jones was at number 1 with THE GREEN, GREEN, GRASS, OF HOME. The Seekers were at 2 with MORNING TOWN RIDE,  and Val Doonican was at 3 with WHAT WOULD I BE?");
        if (date === 4) dhtml.push("On this day in 1965 Donald Campbell died while while making an attempt onthe world water speed record on Conniston Water. U.S. President, Lyndon Baines Johnson' delivered his 'Great Society' State of the Union Address in which he set out his vision of the future. It was also on this day that CBS bought the world famous Fender guitar company. And taking a look back at the U.K. singles chart for this day  in 1965, The Beatles were still up there at number 1. Petula Clark had peaked at number 2 with DOWNTOWN, and so had Val Doonican who at number 3 had climbed as high as he was going to go with WALK TALL");
        if (date === 5)


if (date === 31) dhtml.push("<b>NEW YEARS EVE. </b>On this day in 1969 Congo-Brazzaville became a 'People's republic', under  President (major) Ngouabi. And believe it or not. The very last number one record of the decade was not as you might imagine, The Beatles, The Rolling Stones, or even Jimi Hendrix. Niether was it any one of the other sixties  musical inovators. You might just be surprised to learn that it was Rolf Harris's TWO LITTLE BOYS. Throughout the sixties Britain had been the inovative driving force in popular music. But, despite that, the record buying public's taste had regressed back to an early 1950's novelty song  format. Well, of course it was the Christmas season, and Christmas best sellars thankfully, are not always a reliable barometer of musical trends");
    }][month]();
    document.getElementById('datecontainer1').innerHTML = html.join('') + (dhtml.length? ' - ' + dhtml.join(', ') : '');
    if(linebreak){document.getElementById('datecontainer1').appendChild(document.createElement('br'));}
})();
 
Last edited by a moderator:
Solution
I understand where you are coming from. Is it possible to post a screen shot ? that way you could see exactly what I am referring to.
OK, I've cracked it. It turns out that the parameters were outside the script

<META NAME="KEYWORDS" CONTENT="Houghton, Wyton, Houghton and Wyton, RAF Wyton, Village, Huntingdon, Cambridgeshire, St Ives, Huntingdonshire Wytonsite">
<style type="text/css">
#datecontainer1 {
font-weight: normal;
color: black;
font-family: arial;
font-size: 12;

Thats why I could not work out what was going on. Simong1993, and Johna, thankyou so much for your help and suggestions. The problem is now resolved.
Hey there, I'm not sure what you mean, but you can change the font and colour of text like this:
JavaScript:
const element = document.querySelector("#element");  /* select element */
element.style.font = "16px italic bold sans-serif";  /* change font */
element.style.color = "red";                         /* change colour */
 
const element = document.querySelector("#element"); /* select element / element.style.font = "16px italic bold sans-serif"; / change font / element.style.color = "red"; / change colour */
Thank you so much Johna. where exactly do I place this?
Hey there, I'm not sure what you mean, but you can change the font and colour of text like this:
JavaScript:
const element = document.querySelector("#element");  /* select element */
element.style.font = "16px italic bold sans-serif";  /* change font */
element.style.color = "red";                         /* change colour */
 
I mean obviously this piece of code needs attaching to or inserting int the original code I posted, but I dont know where or how. This is the webpage that it relates to http:// thewytonsite.com I am referring to the text in grey centre panel at the top of the page. This provided by the script I posted.
 
Then I think you can just use CSS for this?
Select the element and use the font property and color property.

It seems to have the datecontainer1 ID, so something like this should work:
CSS:
#datecontainer1 {
  font: 16px italic bold sans-serif;
  color: red;
}
 
Then I think you can just use CSS for this?
Select the element and use the font property and color property.

It seems to have the datecontainer1 ID, so something like this should work:
CSS:
#datecontainer1 {
  font: 16px italic bold sans-serif;
  color: red;
}
No, that just inserts itself into the container, but doesn't actually do anything. looks like what I want to acieve is not possible
 
looks like what I want to acieve is not possible
I'm sure it is possible, but I don't understand what exactly you're trying to do.

I've shown you ways to change the style with both JavaScript and CSS, but if none of them do what you want them to do, then I don't understand what result you're trying to get.

Could you explain clearly in more detail what exactly you're trying to do? Your original question didn't really give much info about what you were trying to achieve.
 
Try this 🙂

Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .calendar-content {
            font-family: Arial, sans-serif; /* Change to your desired font */
            color: #333; /* Change to your desired text color */
        }
    </style>
</head>
<body>
    <div id="calendar" class="calendar-content"></div>
    <script>
        (function(){
            var linebreak = true, // should line break be added after date and holidays (if any) (true/false)
            calendar = new Date(), day = calendar.getDay(), month = calendar.getMonth(), date = calendar.getDate(), year = calendar.getFullYear(),
            f = Math.floor, cent = f(year / 100), g = year % 19, k = f((cent - 17) / 25), i = (cent - f(cent / 4) - f((cent - k) / 3) + 19 * g + 15) % 30,
            i = i - f(i / 28) * (1 - f(i / 28) * f(29 / (i+1)) * f((21-g) / 11)), j = (year + f(year / 4) + i + 2 - cent + f(cent / 4)) % 7, l = i - j,
            emonth = 3 + f((l + 40) / 44), edate = l + 28 - 31 * f((emonth / 4)), gfwmcal = new Date(), adcal = new Date(), cd = 25, gfmonth, dhtml = [],
            dayname = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], gfdate, wmmonth, wmdate, admonth, addate,
            monthname = ["January","February","March","April","May","June","July","August","September","October","November","December"],
            html = ["<b>", dayname[day], ", ", monthname[month], " ", date < 10? "0" : "", date, ", ", year, "</b>"], thanksdate = new Date();
            gfwmcal.setMonth(--emonth);
            gfwmcal.setDate(edate - 2);
            gfmonth = gfwmcal.getMonth();
            gfdate = gfwmcal.getDate();
            gfwmcal.setDate(gfdate + 52);
            wmmonth = gfwmcal.getMonth();
            wmdate = gfwmcal.getDate();
            adcal.setMonth(11);
            adcal.setDate(cd);
            if(adcal.getDay()){cd += (7 - adcal.getDay());}
            adcal.setDate(cd - 28);
            admonth = adcal.getMonth();
            addate = adcal.getDate();
            thanksdate.setMonth(10);
            thanksdate.setDate(1);
            thanksdate = 5 - thanksdate.getDay();
            thanksdate += (thanksdate < 1? 28 : 21);
            // Easter and Related
            if (month === emonth && date === edate) dhtml.push("Easter Sunday (Western)");
            if (month === gfmonth && date === gfdate) dhtml.push("Good Friday (Western)");
            if (month === wmmonth && date === wmdate) dhtml.push("Whit Monday");
            // Advent
            if (month === admonth && date === addate) dhtml.push("Advent Sunday");
            [function(){ // January
                if (date === 1) dhtml.push("<b>NEW YEAR'S DAY.</b> On this day in 1960 The Bank of France revalued the French Franc. 100 old Francs was to be worth 1 new Franc (NF). It was also on this day that the US government census put the population of America at 179,245,000, and Johnny Cash played the first of his free concerts for the inmates of San Quentin Prison.  And taking a look back at the U.K. singles chart for this New years day in 1960,  Emile Ford's WHAT DO YOU WANT TO MAKE THOSE EYES AT ME FOR? was the decades first number 1. Adam Faith was at 2 with WHAT DO YOU WANT,  and The Avons were at 3 with SEVEN LITTLE GIRLS SITTING IN THE BACK SEAT.");
                if (date === 2) dhtml.push("On this day in 1960 geophysicist John Reynolds calculated that age of solar system was 4,950,000,000 years old, and in Wakefield, Yorkshire, the Chief Medical Officer for Health, Dr. Cyril Thompson was warning about the dangers obesity in school children because they were eating 'to bigger helpings of school dinners'. And taking look a back at the U.K. singles chart for this day in 1960, Emile Ford and The Checkmates were at number 1 with WHAT DO YOU WANT TO MAKE THOSE EYES AT ME FOR?  Adam Faith was at 2 with WHAT DO YOU WANT, and The Avons were at 3 with SEVEN LITTLE GIRLS SITTING IN THE BACK SEAT");
                if (date === 3) dhtml.push("On this day in 1967 'Beach Boy' Carl Wilson received call up papers from the US Army. He refused to go to Vietnam, and after a long and protracted struggle he eventually won his case five years later in 1972. It was also on this day that Jack Ruby (the man that shot dead President John F Kennedy's alledged assassin Lee Harvey Oswald) died aged 55. And taking a look back at the U.K. singles chart for this day  in 1967, Tom Jones was at number 1 with THE GREEN, GREEN, GRASS, OF HOME. The Seekers were at 2 with MORNING TOWN RIDE,  and Val Doonican was at 3 with WHAT WOULD I BE?");
                if (date === 4) dhtml.push("On this day in 1965 Donald Campbell died while while making an attempt onthe world water speed record on Conniston Water. U.S. President, Lyndon Baines Johnson' delivered his 'Great Society' State of the Union Address in which he set out his vision of the future. It was also on this day that CBS bought the world famous Fender guitar company. And taking a look back at the U.K. singles chart for this day  in 1965, The Beatles were still up there at number 1. Petula Clark had peaked at number 2 with DOWNTOWN, and so had Val Doonican who at number 3 had...");

            // Output the calendar content
            document.getElementById("calendar").innerHTML = html.join(" ") + (dhtml.length ? "<br>" + dhtml.join("<br>") : "");
        })();
    </script>
</body>
</html>
With these changes, the font and color of the displayed text should now reflect the styles defined in your CSS.
 
Try this 🙂

Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .calendar-content {
            font-family: Arial, sans-serif; /* Change to your desired font */
            color: #333; /* Change to your desired text color */
        }
    </style>
</head>
<body>
    <div id="calendar" class="calendar-content"></div>
    <script>
        (function(){
            var linebreak = true, // should line break be added after date and holidays (if any) (true/false)
            calendar = new Date(), day = calendar.getDay(), month = calendar.getMonth(), date = calendar.getDate(), year = calendar.getFullYear(),
            f = Math.floor, cent = f(year / 100), g = year % 19, k = f((cent - 17) / 25), i = (cent - f(cent / 4) - f((cent - k) / 3) + 19 * g + 15) % 30,
            i = i - f(i / 28) * (1 - f(i / 28) * f(29 / (i+1)) * f((21-g) / 11)), j = (year + f(year / 4) + i + 2 - cent + f(cent / 4)) % 7, l = i - j,
            emonth = 3 + f((l + 40) / 44), edate = l + 28 - 31 * f((emonth / 4)), gfwmcal = new Date(), adcal = new Date(), cd = 25, gfmonth, dhtml = [],
            dayname = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], gfdate, wmmonth, wmdate, admonth, addate,
            monthname = ["January","February","March","April","May","June","July","August","September","October","November","December"],
            html = ["<b>", dayname[day], ", ", monthname[month], " ", date < 10? "0" : "", date, ", ", year, "</b>"], thanksdate = new Date();
            gfwmcal.setMonth(--emonth);
            gfwmcal.setDate(edate - 2);
            gfmonth = gfwmcal.getMonth();
            gfdate = gfwmcal.getDate();
            gfwmcal.setDate(gfdate + 52);
            wmmonth = gfwmcal.getMonth();
            wmdate = gfwmcal.getDate();
            adcal.setMonth(11);
            adcal.setDate(cd);
            if(adcal.getDay()){cd += (7 - adcal.getDay());}
            adcal.setDate(cd - 28);
            admonth = adcal.getMonth();
            addate = adcal.getDate();
            thanksdate.setMonth(10);
            thanksdate.setDate(1);
            thanksdate = 5 - thanksdate.getDay();
            thanksdate += (thanksdate < 1? 28 : 21);
            // Easter and Related
            if (month === emonth && date === edate) dhtml.push("Easter Sunday (Western)");
            if (month === gfmonth && date === gfdate) dhtml.push("Good Friday (Western)");
            if (month === wmmonth && date === wmdate) dhtml.push("Whit Monday");
            // Advent
            if (month === admonth && date === addate) dhtml.push("Advent Sunday");
            [function(){ // January
                if (date === 1) dhtml.push("<b>NEW YEAR'S DAY.</b> On this day in 1960 The Bank of France revalued the French Franc. 100 old Francs was to be worth 1 new Franc (NF). It was also on this day that the US government census put the population of America at 179,245,000, and Johnny Cash played the first of his free concerts for the inmates of San Quentin Prison.  And taking a look back at the U.K. singles chart for this New years day in 1960,  Emile Ford's WHAT DO YOU WANT TO MAKE THOSE EYES AT ME FOR? was the decades first number 1. Adam Faith was at 2 with WHAT DO YOU WANT,  and The Avons were at 3 with SEVEN LITTLE GIRLS SITTING IN THE BACK SEAT.");
                if (date === 2) dhtml.push("On this day in 1960 geophysicist John Reynolds calculated that age of solar system was 4,950,000,000 years old, and in Wakefield, Yorkshire, the Chief Medical Officer for Health, Dr. Cyril Thompson was warning about the dangers obesity in school children because they were eating 'to bigger helpings of school dinners'. And taking look a back at the U.K. singles chart for this day in 1960, Emile Ford and The Checkmates were at number 1 with WHAT DO YOU WANT TO MAKE THOSE EYES AT ME FOR?  Adam Faith was at 2 with WHAT DO YOU WANT, and The Avons were at 3 with SEVEN LITTLE GIRLS SITTING IN THE BACK SEAT");
                if (date === 3) dhtml.push("On this day in 1967 'Beach Boy' Carl Wilson received call up papers from the US Army. He refused to go to Vietnam, and after a long and protracted struggle he eventually won his case five years later in 1972. It was also on this day that Jack Ruby (the man that shot dead President John F Kennedy's alledged assassin Lee Harvey Oswald) died aged 55. And taking a look back at the U.K. singles chart for this day  in 1967, Tom Jones was at number 1 with THE GREEN, GREEN, GRASS, OF HOME. The Seekers were at 2 with MORNING TOWN RIDE,  and Val Doonican was at 3 with WHAT WOULD I BE?");
                if (date === 4) dhtml.push("On this day in 1965 Donald Campbell died while while making an attempt onthe world water speed record on Conniston Water. U.S. President, Lyndon Baines Johnson' delivered his 'Great Society' State of the Union Address in which he set out his vision of the future. It was also on this day that CBS bought the world famous Fender guitar company. And taking a look back at the U.K. singles chart for this day  in 1965, The Beatles were still up there at number 1. Petula Clark had peaked at number 2 with DOWNTOWN, and so had Val Doonican who at number 3 had...");

            // Output the calendar content
            document.getElementById("calendar").innerHTML = html.join(" ") + (dhtml.length ? "<br>" + dhtml.join("<br>") : "");
        })();
    </script>
</body>
</html>
With these changes, the font and color of the displayed text should now reflect the styles defined in your CSS.
I understand where you are coming from. Is it possible to post a screen shot ? that way you could see exactly what I am referring to.
 
I understand where you are coming from. Is it possible to post a screen shot ? that way you could see exactly what I am referring to.
OK, I've cracked it. It turns out that the parameters were outside the script

<META NAME="KEYWORDS" CONTENT="Houghton, Wyton, Houghton and Wyton, RAF Wyton, Village, Huntingdon, Cambridgeshire, St Ives, Huntingdonshire Wytonsite">
<style type="text/css">
#datecontainer1 {
font-weight: normal;
color: black;
font-family: arial;
font-size: 12;

Thats why I could not work out what was going on. Simong1993, and Johna, thankyou so much for your help and suggestions. The problem is now resolved.
 
Solution

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom