CODEWITHSUNDEEP
jquery
Nick
Nick

Reputation: 2551

jQuery - Show/Hide Elements on certain date & time?

So I've been challenged with the task of "stunting" events. I'm very new to jQuery, so I'm kind of learning on the go. I said I'd give it my best shot and after Googling around I think I've made a start but I have no idea on how to continue. So here I am to call for help! :)

Here's what's been requested:

The User wants the ability to

So the end result would be something like:

I kind of get what I need to do, and I think I've made a start - But I'm certain I've got my code mixed up and in the wrong places!

Any direction would be great!

Here's a fiddle of what I have so far: http://jsfiddle.net/sfe0hs4v/1/

Here's the list of Variables I'd like the end user to be able to change:

var target = $('#stuntEvent');
var startDate = "04/10/2014";
var startTime = "09:00";
var endDate = "06/10/2014";
var endTime = "08:59";
var url = "http://www.google.co.uk";
var bgImg = "http://i.imgur.com/npe3PKm.gif";

Thanks!

Upvotes: 1

Views: 1570

Answers (1)

Antoine Combes
Antoine Combes

Reputation: 1454

Ok I have done something, I don't know if it's what you expect. The thing is to use the HTML5 data types to pass information to your JS script, such as the starting/ending date and time of your event, your url and background url. This implies to be able to edit the way your events are printed into your page so you can incorporate those elements.

(function ($) {
    function stuntEvent(target) {
        var startDate = new Date(target.data("start-date")),
            endDate = new Date(target.data("end-date")),
            url = target.data("href"),
            bgImg = target.data("bg-img");

        if (startDate <= fullDate && fullDate <= endDate) {
            target.prop('href', url);
            target.css({"background": "url(" + bgImg + ") center no-repeat #fff"});
        }
    }

    var fullDate = new Date();
    stuntEvent($('#stuntEvent'));
})(jQuery);
body {
  background: #333;
}
#stuntEvent {
  width: 300px;
  height: 200px;
  background: url('http://i.imgur.com/eWoIOYD.gif') center no-repeat #ffffff;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="stuntEvent" data-start-date="10/04/2014 14:00" data-end-date="10/06/2014 17:00" data-bg-img="http://i.imgur.com/npe3PKm.gif" data-href="http://www.google.co.uk"></a>

Upvotes: 1

Related Questions