Using the day of the month to turn on or off the visibility of either a div or span?
June 12, 2007 1:37 PM Subscribe
How can I do this in javascript? Using the day of the month to turn on or off the visibility of either a div or span.
Say I have a variable called dayofmonth
dayofmonth = dayofmonth.getDate();
so it should be the day of the month.
What I want to do is use that variable to set the visibility of a div or span with an id equal to the day of the month to visible, and leave all other div or spans to remain invisible...
It seems like I need to create a function that finds the ID equal to dayofmonth and then set its visibility to "visible" but the only book examples I can find check for user input, and I can't figure out how to compare the id and dayofmonth any other way.
How can I pull this off?
Say I have a variable called dayofmonth
dayofmonth = dayofmonth.getDate();
so it should be the day of the month.
What I want to do is use that variable to set the visibility of a div or span with an id equal to the day of the month to visible, and leave all other div or spans to remain invisible...
It seems like I need to create a function that finds the ID equal to dayofmonth and then set its visibility to "visible" but the only book examples I can find check for user input, and I can't figure out how to compare the id and dayofmonth any other way.
How can I pull this off?
d = new Date();getElementById('date' + d.getDate()).style.display = 'none';posted by MonkeySaltedNuts at 2:17 PM on June 12, 2007
A little more
days = ["Sunday", "Monday", "Tuesday", "Wedn.....
dayofweek = days[new Date().getDay()]
posted by bitdamaged at 2:19 PM on June 12, 2007
days = ["Sunday", "Monday", "Tuesday", "Wedn.....
dayofweek = days[new Date().getDay()]
posted by bitdamaged at 2:19 PM on June 12, 2007
If you have divs with IDs of "date1", "date2", "date3", ..., "date31" try the following within your page header.
First set the default visibility to "none":
<style type="text/css">
<!--
#date1, #date2, #date3, (etc.) #date30, #date31 { display: none; }
//-->
</style>
(this can probably be done a lot more elegantly).
After you've defined the style, add the following script to the <head>er section of your code:
<script type="text/javascript">
function showDiv() {
var dayofmonth = new Date().getDate();
el = document.getElementById('date'+dayofmonth);
el.style.display = 'block' ;
}
</script>
and finally your BODY tag should read:
<body onload="javascript:showDiv()">
Not the best code in the world, I know, but it works.
posted by Lionel d'Lion at 3:05 PM on June 12, 2007
First set the default visibility to "none":
<style type="text/css">
<!--
#date1, #date2, #date3, (etc.) #date30, #date31 { display: none; }
//-->
</style>
(this can probably be done a lot more elegantly).
After you've defined the style, add the following script to the <head>er section of your code:
<script type="text/javascript">
function showDiv() {
var dayofmonth = new Date().getDate();
el = document.getElementById('date'+dayofmonth);
el.style.display = 'block' ;
}
</script>
and finally your BODY tag should read:
<body onload="javascript:showDiv()">
Not the best code in the world, I know, but it works.
posted by Lionel d'Lion at 3:05 PM on June 12, 2007
I think everyone's got the answer you're looking for, but if I could ask a question: you want to show the div with the proper day of the week and hide all the others, yes? So if it's Sunday, only the "Sunday" div shows up? Why not just have one div and inject the proper text into the div upon load? ex.
HTML:
Javascript:
posted by chrominance at 3:15 PM on June 12, 2007
HTML:
<div id="dayofweek"></div>Javascript:
window.onload = writeDayDiv
function writeDayDiv() {
// change these strings to whatever you wish, ex. "Sun." instead of "Sunday"
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
// find the current day of the week; returns a number between 0-6
var currentDay = new Date().getDay()
var dayDiv = document.getElementById("dayofweek")
// create a new text element containing the proper day string, then insert that node into the empty "dayofweek" div in your HTML
dayDiv.appendChild(document.createTextNode(days[currentDay]))
}posted by chrominance at 3:15 PM on June 12, 2007
This thread is closed to new comments.
The tricky part is for this to work you want to wait for the page to load before activating it.
window.onload = turnoffdiv
function turnoffdiv() {
dayofweek = Date .. get day of week, you need to look it up
document.getElementById(dayofweek).style.visibility = "hidden";
}
posted by bitdamaged at 2:13 PM on June 12, 2007