Banner Time

Version 1.0.0 - Change log

A simple sale baner that can be scheduled to show for a set time.

• Example 1 - Fade
• Example 2 - Slide

Getting started

Set-up

1. Download Banner-Time and put the '/dist/bannerTime.js' file in your site directory.
2. Reference this file from a script tag below where you include Jquery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="bannerTime.js"></script>

If you dont have JQuery in your project already, find it here.

3. Next you must initialise the banner. const myBanner = new Banner() This will create and insert the banner into your site using the default options. You should see the banner transition from 'Stop!!' to 'Banner Time!!'.

4. Insert your banner settings.

<script>
  const bannerSettings = {
    startTime: [2019, 10, 9],
    endTime: [2020, 0, 1],
    CSS: {
      'border-bottom': '2px solid black',
      'background-color': 'darkgrey',
      color: 'white',
    },
    transition: {
      type: 'slide',
      displayDuration: 5000,
      speed: 700,
      interval: 900,
    },
  };
  const myBanner = new Banner(bannerSettings);
</script>

You can set up as many banners as you like, and the one with the most recent start time (and the 'endTime' has not yet expired) will display.

<script>
  const firstBanner = {
    startTme: [2019, 11, 22],
    endTime: [2019, 11, 23],
    bannerText: {
      desktop: ['3 Days Until Xmas', 'Shop now'],
      mobile: ['3 Days To Go!', 'Xmas time!'],
    },
  };
  const secondBanner = {
    startTime: [2019, 11, 23],
    endTime: [2019, 11, 24],
    bannerText: {
      desktop: ['2 Days Until Xmas', 'Shop now'],
      mobile: ['2 Days To Go!', 'Xmas time!'],
    },
  };`
  const thirdBanner = {
    startTime: [2019, 11, 24],
    endTime: [2019, 11, 25],
    bannerText: {
      desktop: ['1 Day Until Xmas', 'Shop now'],
      mobile: ['1 Day To Go!', 'Delivery NOT guaranteed!'],
    },
  };

  const myXmasBanner = new Banner(firstBanner, secondBanner, thirdBanner);
</script>

5. If your shop isn't GTM then be sure to set your time zone in the settings timeZone: -8. This will adjust any start and end times accordingly.

6. Remeber to set the text output for both desktop and mobile screens.

---

Settings

Option	Type	Default	Description
startTime	number array	[2019]	Individual date and time component values. Must be an array of numbers to represent the date and time. [YYYY,MM,DD,hr,min] (year, month, day, hour, minute, second, and millisecond) Any missing fields are given the lowest possible value (1 for the day and 0 for every other component.
endTime	number array	[2080]	The time the banner will finish displaying. See startTime for formatting.
timeZone	number	0	Times are calculated in UTC. Time zone of the shops(servers) location should be provided for corrrect start stop times. Number between -12 and 12.
bannerLink	string		Enter the path of your desired link. Eg. bannerLink: "/products/fidget-spinner"
transition	object (nested..?)	The default values of; type, displayDuration, interval, speed	A nested object with the keys and values for that transition. Declare the ones you need and the rest will remain default.
type	string	"fade"	The type of transition between each slide.
display duration	number	5000	Time in milliseconds that each slide shows for before the next transition begins.
interval	number	800	Time in milliseconds between the slides transition out and in.
speed	number	1000	Time in milliseconds of the transitions.
CSS	object (nested...?)	Any CSS can be added written as string key-value pairs; **	All the CSS you want attribute to each slide.
any CSS property	string

---

Contributing

PLEASE review CONTRIBUTING.markdown prior to requesting a feature, filing a pull request or filing an issue.

---

Acknowledgements

This projected started out by following a modal window tutorial written by Ken Wheeler. Then, in order to follow an example of an open source project, I have borrowed heavily from his Slick Slider repo. Big thanks to him and anyone else who would like to contribute.

License and copyright

© Alexander Wyper

Licensed under MIT License.