using javascript/jQuery to show certain elements on certain dates?

Pretty much as the title. I have been asked if it is possible to have a specific banner shown in a section on a website on different days without any ex开发者_如何学Goternal user input.

My first thoughts are the use of javascript/jquery. We are limited with the functionality however as the site is controlled by the horror that is Netsuite.

Any help/ideas are appreciated :)

-Wayne

EDIT: With regard to your comment, it sounds like you want to load a different slideshow depending on the day of the week.

Here's a simple generic example of how it could be done.

  // Insert the code that loads the individual slideshows in the functions below
var slideshows = [
    function() { /* insert code to load some slideshow */ },
    function() { /* insert code to load some other slideshow */ },
    function() { /* insert code to load a different slideshow */ },
    function() { /* insert code to load yet another slideshow */ }
];
  // call a slideshow function depending on the day of week
slideshows[ new Date().getDate() % slideshows.length ]();

This will call a different function from the Array depending on the day of week. You don't need seven of them. It will automatically rotate.

There are other ways to approach this, but I'd need to see how the slideshows are set up. This is a simple approach.

If you have more than 7 different slideshows, it will need to be changed a bit.

EDIT: This answer assumes you meant different per day of week. Not sure if that was your intention.

This is probably better than my original answer since it doesn't require loading all the banners.

javascript only version

Example: http://jsfiddle.net/patrick_dw/5drgu/4/

var banners = [
    "http://dummyimage.com/120x90/f00/fff.png&text=my+image",
    "http://dummyimage.com/120x90/0f0/fff.png&text=my+image",
    "http://dummyimage.com/120x90/00f/fff.png&text=my+image",
    "http://dummyimage.com/120x90/ff0/fff.png&text=my+image"
    ];
var banner = new Image();
banner.src = banners[ new Date().getDate() % banners.length ];
document.getElementById('container').appendChild( banner );

jQuery version

Example: http://jsfiddle.net/patrick_dw/5drgu/7/

(changed it a bit so it doesn't start with an empty <img>)

var banners = [
    "http://dummyimage.com/120x90/f00/fff.png&text=my+image",
    "http://dummyimage.com/120x90/0f0/fff.png&text=my+image",
    "http://dummyimage.com/120x90/00f/fff.png&text=my+image",
    "http://dummyimage.com/120x90/ff0/fff.png&text=my+image"
    ];
var banner =  $('<img>', { src:banners[ new Date().getDate() % banners.length ]})
                          .appendTo('#container');

html

<div id='container'></div>

Original answer:

Here's one way:

var banners = $('#container img').hide();
banners.eq( new Date().getDate() % banners.length ).show();

<div id='container'>
   <img src = "http://dummyimage.com/120x90/f00/fff.png&text=my+image" />
   <img src = "http://dummyimage.com/120x90/0f0/fff.png&text=my+image" />
   <img src = "http://dummyimage.com/120x90/00f/fff.png&text=my+image" />
   <img src = "http://dummyimage.com/120x90/ff0/fff.png&text=my+image" />
</div>

The first thought should be server-side.

If that is not an option then you could do it with javascript/jquery with the limitations it brings. Javascript enabled browsers.

You could name your files accordingly ie. image-19-7-2011.jpg and use the Date() object to create the filename to use for the current date.

Something like

var d = new Date();
var filename = 'image-' + d.getDate() + '-' + d.getMonth() + '-' + d.getFullYear() + '.jpg';

document.getElementById('banner').src = '/path/to/' + filename;

example at http://jsfiddle.net/rZaqx/

var now = new Date();
var date = now.getMonth() + "-" + now.getDay();
switch(date) {
  case "04-01":
    $('<p>APRIL FOOLS!</p>').appendTo("body");
    break;
  case "01-01":
    $('<p>Happy New Year!</p>').appendTo("body");
    break;
}

This answer assumes you want a different banner image for each day of the week.

If you aren't able to update the banner in the backend then it would be possible just to have all the banners on the page, hidden with the CSS display: none.

Then just use something like:

var date = new Date();
$("#banner" + date.getDay()).show();

This will work if you have 7 elements named banner0 for Sunday, banner1 for Monday, etc.

Alternatively, if you just want to change the banner image then you could set your CSS like so:

div#banner { background-image: url(default.jpg)} // Common styling
div#banner.day0 { background-image: url(image0.jpg); } // Image for Sunday
div#banner.day1 { background-image: url(image1.jpg); } // Image for Monday
div#banner.day2 { background-image: url(image2.jpg); } // Image for Tuesday

Then your jQuery could look like:

var date = new Date(); 
$("div#banner").addClass("day" + date.getDay());

Of course, the issue with both these options are that you need to have a different banner for each day. They're just some ways you can do it (but definitely not the only ways)