Quantcast

Jump to content

» «
Photo

Javascript To Change Web Content Monthly

12 replies to this topic
justin007
  • justin007

    Justin007, yep that's me

  • Members
  • Joined: 21 May 2002

#1

Posted 23 May 2006 - 02:06 PM

I have a page on one of the sites that I maintain where everyone's birthday in that month is listed... The birthdays usally stay the same each year...
Currently I edit the page each month in Dreamweaver, retyping everyone's name every year...
CODE
<h3>~ May Birthdays</h3>
<p> Name (1st)<br />
Name (1st)<br />
Name (5th)<br />
And so on (6th)</p>
(Very Simple... lol)
I want to find a Javascript code or something that will show a specific <div> each month of the year so I don't have to keep editing the page every month... I should only have to edit it any time I need to remove or add someone to the list...

Any help would be great...
I've been searching google for several weeks now... finding lots of other cool Javascript things to add to my sites... but no luck on this issue...
I did find a couple things but they want $$$... lol...

Anyways... Thanks In Advance...
Justin

Sixdust
  • Sixdust

    April 2nd, V2

  • Members
  • Joined: 25 Jan 2005

#2

Posted 23 May 2006 - 02:10 PM

I will report this for you, this belongs in WD&P (web design and programming)

Dom0803
  • Dom0803

    Boss

  • Leone Family Mafia
  • Joined: 23 Aug 2002

#3

Posted 23 May 2006 - 02:43 PM

QUOTE (Sixdust @ May 23 2006, 15:10)
I will report this for you, this belongs in WD&P (web design and programming)

Your generosity knows no bounds, Sixdust

justin007
  • justin007

    Justin007, yep that's me

  • Members
  • Joined: 21 May 2002

#4

Posted 23 May 2006 - 03:00 PM

QUOTE (Dom0803 @ May 23 2006, 08:43)
QUOTE (Sixdust @ May 23 2006, 15:10)
I will report this for you, this belongs in WD&P (web design and programming)

Your generosity knows no bounds, Sixdust

Your Generosity Will Not Go Overlooked...

Any Help On My Issue Here???

Justin

Luke
  • Luke

    suckmyrocket

  • Moderator
  • Joined: 01 Dec 2003
  • None

#5

Posted 23 May 2006 - 03:47 PM

Does the sever you're using support PHP?

justin007
  • justin007

    Justin007, yep that's me

  • Members
  • Joined: 21 May 2002

#6

Posted 23 May 2006 - 03:51 PM

QUOTE (Luke @ May 23 2006, 09:47)
Does the sever you're using support PHP?

The only thing I know about the server it's being hosted on is that it uses PERL...

Does that help?

Svip
  • Svip

    I eat babies

  • The Connection
  • Joined: 12 Nov 2001
  • None

#7

Posted 23 May 2006 - 04:23 PM Edited by Svip, 23 May 2006 - 04:29 PM.

Err... as Luke asked, check if it has PHP.

Else, you might consider storing it all in the same file. And have something like this.

HTML
<ol>
<li><a href="#jan">Janaury</a></li>
<li><a href="#feb">February</a></li>
<!--...snip...-->
</ol>

<h3><a name="jan"></a>January Birthdays</h3>
<dl>
<dt>User #1</dt>
<dd>Birthday</dd>
<dt>User #2</dt>
<dd>Birthday</dd>
<!--..snip...-->
</dl>

<h3><a name="feb"></a>February Birthdays</h3>
<!--... snip... and so on...-->


You might want to consider to use something else than those <br /> tags, be it lists or <dl>'s (or whatever their name is). You can have a list on the top of the page going to bookmarks throughout the page. It will also be nice to see other months.

Edit
Also:
CODE
EXTERIOR: DAGOBAH -- DAY
          With Yoda strapped to his back, Luke climbs up one of the
       many thick vines that grow in the swamp until he reaches the
       Dagobah statistics lab. Panting heavily, he continues his
       exercises -- grepping, installing new packages, logging in as
       root, and writing replacements for two-year-old shell scripts
       in Python.

YODA: Code!  Yes.  A programmer's strength flows from code maintainability.
     But beware of Perl.  Terse syntax... more than one way to do it...
     default variables.  The dark side of code maintainability are they.
     Easily they flow, quick to join you when code you write.  If once
     you start down the dark path, forever will it dominate your destiny,
     consume you it will.

LUKE: Is Perl better than Python?

YODA: No... no... no.  Quicker, easier, more seductive.

LUKE: But how will I know why Python is better than Perl?

YODA: You will know.  When your code you try to read six months from
     now.

Source!

TheJkWhoSaysNi
  • TheJkWhoSaysNi

    Goes into lifts and presses all the floors

  • Members
  • Joined: 28 Jun 2004

#8

Posted 23 May 2006 - 04:25 PM Edited by TheJkWhoSaysNi, 23 May 2006 - 04:32 PM.

If you want to do it in javascript (not a bad idea for this.)


You could do something like

HTML file:
CODE
<div id="month1">...content...</div>
<div id="month2">...content...</div>
...etc.


The reason for using month1, month2 etc is that using javascript getMonth() returns the number of the current month.

Then you could do this:

CODE
var now=new Date();
for (var i=1;i<=12;i++) {
if (now.getMonth() != i) document.getElementById('month' + i).className = 'hidden';
}


Of course you'd need a css class to define hidden:
CODE
.hidden {visibility: hidden; height: 0;}


This will mean you dont have to edit the page at all. It will be based on the current date (assuming the users clock is correct...)

p.s. The reason for hiding the ones that arent current instead of starting them hidden and showing the one of the current month is so that people with javascript disabled will see the content.

Edit: Doing this serverside is a bit over the top if the contents are being stored in the file. Unless you're planning to store the birthdays in a database you may as well do it with Javascript.

justin007
  • justin007

    Justin007, yep that's me

  • Members
  • Joined: 21 May 2002

#9

Posted 23 May 2006 - 05:03 PM Edited by justin007, 23 May 2006 - 05:21 PM.

TheJkWhoSaysNi...
That is exactly what I was looking for...
but it doesn't work???

Edit: Removed Test Link...

Thanks
Justin

TheJkWhoSaysNi
  • TheJkWhoSaysNi

    Goes into lifts and presses all the floors

  • Members
  • Joined: 28 Jun 2004

#10

Posted 23 May 2006 - 05:10 PM

The problem is the javascript is being run before the entire page has loaded.

Try replaing it with this:

CODE
window.onload=birthdays;
function birthdays() {
var now=new Date();
for (var i=1;i<=12;i++) {
if (now.getMonth()+1 != i) document.getElementById('month' + i).className='hide';
}
}


You should put height: 0 in .hidden{} or there will empty space. Also you may need font-size: 0px too.

Oh, and my bad, getMonth() starts from 0. I've updated the code there to work with your html smile.gif

justin007
  • justin007

    Justin007, yep that's me

  • Members
  • Joined: 21 May 2002

#11

Posted 23 May 2006 - 05:20 PM

There...
That works now...

I had to change the hide to:
CODE
.hide {
position: absolute;
left: -1000px;
visibility: hidden;
height: 0
}
The height: 0 didn't remove the blank space...
But anyways... It works now...
Thank you very much...
This will save me a lot of typing time... lol...
Thanks,
Justin

TheJkWhoSaysNi
  • TheJkWhoSaysNi

    Goes into lifts and presses all the floors

  • Members
  • Joined: 28 Jun 2004

#12

Posted 23 May 2006 - 05:22 PM Edited by TheJkWhoSaysNi, 23 May 2006 - 05:25 PM.

to remove the extra space use font-size: 0px;

Oh, it doesnt work in IE sad.gif

edit: To get it to display at the top use:

.hide {
visibility: hidden; height: 0; padding: 0; margin: 0;
font-size: 0px;
position: absolute;
top: 0px;

}

Svip
  • Svip

    I eat babies

  • The Connection
  • Joined: 12 Nov 2001
  • None

#13

Posted 23 May 2006 - 05:51 PM

Svip sighs


How about...
CODE
.hide {
 display: none;
}

? Works all the time.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users