Litie - Flat CSS3 Calendar (Miscellaneous)

Purchase $3.00

Hello there, welcome to Litie a flat CSS3 calendar solution.

Files Included

• HTML


• CSS


• Documentation

Updates

v1.0

• Initial release

TimeZone Corrector (Miscellaneous)

Purchase $5.00

TimeZone Corrector is a JavaScript tool which corrects time and dates in website content.

Most of the websites in Internet are international and often these websites publish dates which are corresponding to their local timezone. Most of the times it’s really hard for visitors from different timezones to catch up with the time difference and here comes the TimeZone Corrector.

With this tool the visitors will be able to see the correct time and date in their timezone only by hovering over the time and date.

Supported formats:

• (H|G):i


• (h|g):i (a|A)


• (H|G):i (m|n).(d|j).Y


• (h|g):i(a|A) (d|j).(m|n).Y


• (d|j).(m|n).Y (H|G):i:s


• (m|n).(d|j).Y (h|g):i:s (a|A)

Examples of these formats:

• 14:23


• 7:32 pm


• 17:29 3.25.2013


• 4:53am 25.03.2011


• 15.11.2013 19:23:44


• 07.29.1990 01:55:23 am

* the date and time formats are according to PHP date() function

What it has?

• The script is not dependant of any framework (jQuery/Prototype/etc).


• It can be used unlimited times on a page. It is organized as JavaScript Class.


• It has two neutral themes and unlimited number of themes can be build with CSS.


• It is signular file. The CSS is appended to the head of the document on run time.


• It is only 5KB minified and 9KB not minified.


• It is cross-browser compatible. It works on IE6+, Firefox, Chrome, Safari, Opera.

How to use it?

1. 
   First you have to include the script in the document:
   

   <script type="text/javascript" src="tzc/tzc.min.js"></script>

   
   


2. 
   Then you should initialize the class by using this script:
   

   var myTZC = new TimeZoneCorrector('tzcselector');

   
   

   The first parameter is the selector of the HTML element. For ID the selector must be #elemendit or elementid. For class it must be .classname (like css). You can also use element object directly.

   
   

   The second parameter is (optional) object with options for TimeZone Corrector. Please check all the available options from the table below.

   
   

   Examples:

   
   

   ID selector

   var myTZC = new TimeZoneCorrector('tzcselector');

   
   

   ID selector

   var myTZC = new TimeZoneCorrector('#tzcselector');

   
   

   Class selector

   var myTZC = new TimeZoneCorrector('.tzcselector');

   
   

   Direct object selector

   var myTZC = new TimeZoneCorrector(document.getElementById('tzcselector'));

   
   

   Selecting with jQuery

   var myTZC = new TimeZoneCorrector($('.tzcselector'));

   
   Note: TimeZoneCorrector() class is the same as TZC so use the one you prefer.
   

Options

phpfile       (string) the path to the tzc.php file. It can be relative or absolute path
cookieName    (string) the name of the cookie which tzc.php file creates
labelText     (string) the text which is before the corrected time in the tooltip
theme         (string) the theme name. Default: [dark]. Possible options: [dark, light]

Example of using all options:

<div id="mycontent">
    My long content ... with dates like this 16:30 03.10.2013 ... etc
</div>

<script type="text/javascript">
var myTZC = new TZC('mycontent', {
    labelText  : 'In your timezone:',
    phpfile    : 'tzc/tzc.php',
    cookieName : 'tzc',
    theme      : 'dark'
});
</script>

Timezone settings

How to change the default timezone of your website?

Often your website is hosted in different timezone than yours. In order to correct this you should open file tzc.php in the tzc folder.

In this file you have the following settings:

$timezone           = 'America/New_York';   // The timezone
$cookieName         = 'tzc';                // The cookie name
$cookieExpiration   = 2;                    // The cookie expiration time in hours

In order to change the default timezone of your website you should first find the correct timezone name at http://www.php.net/manual/en/timezones.php

Then change the value of the variable $timezone to your selected one.

The other two settings are related to the cookie which the script creates. If you want to change the name of the cookie you can do it by changing the value of the $cookieName variable. If you change the name of the cookie you should set the new name with cookieName option when initializing the TZC script.

Also the cookie expiration time can be changed by $cookieExpiration variable. The value for this variable is in hours.

Changelog

• 
  

  v 1.0 – Initial version

  
  


• 
  

  v 1.1 – Added support for selecting elements by class and by providing element object to the class

  
  
  

  Example:

  
  
  

  Selecting by class 15:23 adipiscing elit. Nam vel risus 10:57 am nunc.

  
  

  Selecting by class 16:23 adipiscing elit. Nam vel risus 9:57 am nunc.

  
  

  Selecting by DOM object 18:23 adipiscing elit. Nam vel risus 02:57 am nunc.

  
  
  

  Code:

  <p class="tzcClass">Selecting by class 15:23 adipiscing elit. Nam vel risus 10:57 am nunc.</p>
  <p class="tzcClass">Selecting by class 16:23 adipiscing elit. Nam vel risus 9:57 am nunc.</p>
  <p id="tzcObject">Selecting by DOM object 18:23 adipiscing elit. Nam vel risus 02:57 am nunc.</p>

  
  

  <script type="text/javascript">
      var classTZC = new TimeZoneCorrector('.tzcClass');
      var elObjTZC = new TimeZoneCorrector(document.getElementById('tzcObject'));
  </script>

  
  

Smart Timer And Counter (Countdowns)

Purchase $8.00

Plugin Information

Smart Timer And Counter is a jQuery plugin that can be used to add timers and clocks to the web page. Plugin is highly configurable and expandable through custom skins (visual component), modes (clock/timer logic) and languages (translate labels).

• Styling is done using CSS (and Canvas for Circular skin), and all included styles are pure CSS with no images used.


• Responsive, uses media queries to change counter sizes, and it can break into multiple lines on smaller screens.

Plugin is tested with current Android (with 2.3.5, 4.0.2 and 4.1.2) browsers, iPhone and iPad Safari and Chrome (with iOS7), all modern desktop browsers (IE8 and IE9 will not show some of the styling). It requires JavaScript and jQuery support to work.

Clock and Counter Modes, Custom Layouts

Plugin can work as clock or as counter. If used as clock, you can show current date/time, or you can start from any date. Counter can countdown to any date, countdown any number of seconds or countup to any seconds limit. Plugin can display different combination of time and date elements, dividers and labels.

List of Modes Controls

• Layout: combine order for ‘years, ‘months’, ‘days’, ‘hours’, ‘minutes’, ‘seconds’.


• Dividers: several dividers available to split date / time elements.


• Number of Digits: customize number of digits for each date / time element.

List of Counter Methods

• Date: it must be in the future set using JavaScript Data object. Plugin will count to zero to reach set date.


• Elapsed: it must be in the past set using JavaScript Data object. Plugin counts how much time has elapsed since past date.


• Seconds: count to zero from specified number of seconds.


• Target: count from zero to specified number of seconds.

5 Skins for display: Simple, Animated, Circular and Inline

Plugin has 5 skins to display clocks/counters. Simple and Animated skins have 14 styles each (some the same). Animated skin uses animations (SlideIn, SlideOut, Fade, FadeIn, FadeOut) to change digits. Inline skin can be used on SPAN tags for adding counters inline with text with minimal styling changes.

List of Available Skins

• Simple: simple way of displaying digits, comes with 14 predefined styles.


• Animated: uses animation to change digits, comes with 14 predefined styles and 5 animations.


• Inline: for elements inside the text, comes with 4 predefined styles.


• Circular: uses Canvas to render circular dials, unlimited color customizations.


• Custom: extended from Animated Skin, allows free control over colors and styling.

Custom Skin allows free customization

To use this skin, Animated skin also needs to be loaded. This skin has no predefined skins. But, you can set custom colors, background, shadows, effects from plugin settings. This allows you easy customization of colors and styles. Also, you can change colors independently for every counter element.

Circular Skin uses Canvas to show circular dials

Based on third party jQuery Knob library, allows full customization of size and colors (even using transparency) for number dials.

Easy customization and integration with detailed documentation

Plugin has wide range of settings for skins, modes, language. It is easy to customize and use with any jQuery based project. Documentation contains detailed explanation of all settings, list of values, list of styles and more. Plugin package has plenty of demos.

Other plugin features

• Support for translation using language objects to change date/time element labels.


• Attach your own code on callback events to handle start, stop, finish and other things.


• Many settings to control counters display: dividers, spacing, labels location, responsiveness…


• Includes methods to start, stop, reset or modify counter object for each applied element.


• Includes 12 page PDF documentation with information on skins, modes, settings and styles.

Changelog

Version 2.0 / 2013.11.24.

• Added: New Skin: Custom


• Added: Counter Mode: new method ‘Elapsed’


• Added: Examples page for Custom Skin


• Updated: Expanded existing list of examples


• Updated: Improvements to all examples


• Updated: jQuery Knob to version 1.2.2


• Fixed: Minor issues with some of the examples


• Fixed: Few problems with Circular Skin settings

Version 1.0 / 2013.11.07.

• First Release

RegalCalendar (Calendars)

Purchase $5.00

Regal Calendar is a component that allows you make known your events every day, let your visitors see when your event starts, the location via google maps and confirm their attendace via Twitter.

RegalCalendar Features

• Easy integration


• Twitter search and post


• CSS3 animations


• More than 300 event types


• 14 color combinations


• Event count down


• Location of your event by google maps


• 5+ tooltip styles


• Modal option


• Metro style

Updates

Version 1.4

• Added multiple events per day support

Version 1.3

• Added timeFormat option, hrs or ampm


• Added mapLink option. Use default map icon or custom text


• Include custom text below day numbers through ‘data-customText’


• Automatically hide tooltips

Version 1.22

• Added startWeek option

Version 1.21

• Can add html content to tooltips

Version 1.2

• Can add text below days


• Show tooltips on mousehover

Version 1.1

• Responsive option


• Draggable tooltips


• Tooltip position option

Smart Timer And Counter (Countdowns)

Purchase $8.00

Plugin Information

Smart Timer And Counter is a jQuery plugin that can be used to add timers and clocks to the web page. Plugin is highly configurable and expandable through custom skins (visual component), modes (clock/timer logic) and languages (translate labels).

• Styling is done using CSS (and Canvas for Circular skin), and all included styles are pure CSS with no images used.


• Responsive, uses media queries to change counter sizes, and it can break into multiple lines on smaller screens.

Plugin is tested with current Android (with 2.3.5, 4.0.2 and 4.1.2) browsers, iPhone and iPad Safari and Chrome (with iOS7), all modern desktop browsers (IE8 and IE9 will not show some of the styling). It requires JavaScript and jQuery support to work.

Clock and Counter Modes, Custom Layouts

Plugin can work as clock or as counter. If used as clock, you can show current date/time, or you can start from any date. Counter can countdown to any date, countdown any number of seconds or countup to any seconds limit. Plugin can display different combination of time and date elements, dividers and labels.

List of Modes Controls

• Layout: combine order for ‘years, ‘months’, ‘days’, ‘hours’, ‘minutes’, ‘seconds’.


• Dividers: several dividers available to split date / time elements.


• Number of Digits: customize number of digits for each date / time element.

List of Counter Methods

• Date: it must be in the future set using JavaScript Data object. Plugin will count to zero to reach set date.


• Elapsed: it must be in the past set using JavaScript Data object. Plugin counts how much time has elapsed since past date.


• Seconds: count to zero from specified number of seconds.


• Target: count from zero to specified number of seconds.

5 Skins for display: Simple, Animated, Circular and Inline

Plugin has 5 skins to display clocks/counters. Simple and Animated skins have 14 styles each (some the same). Animated skin uses animations (SlideIn, SlideOut, Fade, FadeIn, FadeOut) to change digits. Inline skin can be used on SPAN tags for adding counters inline with text with minimal styling changes.

List of Available Skins

• Simple: simple way of displaying digits, comes with 14 predefined styles.


• Animated: uses animation to change digits, comes with 14 predefined styles and 5 animations.


• Inline: for elements inside the text, comes with 4 predefined styles.


• Circular: uses Canvas to render circular dials, unlimited color customizations.


• Custom: extended from Animated Skin, allows free control over colors and styling.

Custom Skin allows free customization

To use this skin, Animated skin also needs to be loaded. This skin has no predefined skins. But, you can set custom colors, background, shadows, effects from plugin settings. This allows you easy customization of colors and styles. Also, you can change colors independently for every counter element.

Circular Skin uses Canvas to show circular dials

Based on third party jQuery Knob library, allows full customization of size and colors (even using transparency) for number dials.

Easy customization and integration with detailed documentation

Plugin has wide range of settings for skins, modes, language. It is easy to customize and use with any jQuery based project. Documentation contains detailed explanation of all settings, list of values, list of styles and more. Plugin package has plenty of demos.

Other plugin features

• Support for translation using language objects to change date/time element labels.


• Attach your own code on callback events to handle start, stop, finish and other things.


• Many settings to control counters display: dividers, spacing, labels location, responsiveness…


• Includes methods to start, stop, reset or modify counter object for each applied element.


• Includes 12 page PDF documentation with information on skins, modes, settings and styles.

Changelog

Version 2.0 / 2013.11.24.

• Added: New Skin: Custom


• Added: Counter Mode: new method ‘Elapsed’


• Added: Examples page for Custom Skin


• Updated: Expanded existing list of examples


• Updated: Improvements to all examples


• Updated: jQuery Knob to version 1.2.2


• Fixed: Minor issues with some of the examples


• Fixed: Few problems with Circular Skin settings

Version 1.0 / 2013.11.07.

• First Release