I found this widget by Jeremy Satterfield which adds an virtual keyboard to any input or text area. I really liked it and had a lot of ideas that I wanted to add :P
<style type="text/css">
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip { width: 250px; }
#tooltip, #preview {
color:#dddddd;
background:#222222;
border: 1px solid #333333;
padding:5px;
opacity: 0.9;
filter: alpha(opacity=90);
text-align:left;
border-radius: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
display:none;
}
</style>
<script src="jatt.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.jatt();
});
</script>| basic tip (a) | <a class="tooltip { direction: n; width: 100px; background: #222; color: #ddd; }" href="#" title="Tooltip (a) Content">basic tip (a))</a> |
| External page (a) | <a class="tooltip { direction: ne; width: 200px; }" href="http://wowmotty.blogspot.com/2009/06/new-and-improved-jquery-tooltips.html #Blog1_cmt-3390748906554490641">External page (a)</span> |
Object on page (div) | <div class="tooltip { direction: e; width: 150px; background: #9bff8f; color: #333; }" rel="#tip1">Object on page (div)</div> <div id="tip1" style="display:none">Hi</div> |
 | <img class="tooltip { direction: se; width: 200px; background: #808080; color: #000; opacity: 1; }" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJB6BDlv3S2lwtKXWg7geoqgt0S-d-efE1yluu0NikMlLfjVEFMiq4N_wlTHkPItSGDbT2xPhgvUnIwGsTI0zj9BtKGN8elCL2GTMaRX0NHE-jfjSRtm0sCP_ja9ih3snjzxFNgpuheKA/s320/hideshow.gif" title="Tooltip (img) Content" > |
| Link (span) | <span class="tooltip { followMouse: false; direction: s; width: 300px; background: #008080; color: #ddd; }" title="Tooltip (span) Content">Link (span)</span> |
 | <a class="preview { direction: e; opacity: 1; text-align: center; }" href="URL to full size image" title="Google's Logo"><img src="URL to image thumbnail"></a> |
| LMYC | <a class="screenshot { direction: e; opacity: 1; text-align: center; } " href="http://www.guildportal.com/Guild.aspx?GuildID=194525&TabID=1643295" title="<center>Loch Modan Yacht Club</center>" rel="http://www.axiomfiles.com/Images/Spotlight/194525.jpg">LMYC</a> |
| <a class="screenshot { direction: e; }" href="http://www.google.com" title="<center>Google</center>" rel="#">Google</a> |
$(document).ready(function(){
$.jatt({
// options that can be modified by metadata
direction : 'n', // direction of tooltip
followMouse : true, // tooltip follows mouse movement
content : 'title', // attribute containing tooltip text
speed : 300, // tooltip fadein speed
local : false, // if true, the script attachs the tooltip locally; if false, the tooltip is added to the body
xOffset : 20, // x distance from mouse (no negative values)
yOffset : 20, // y distance from mouse (no negative values)
zIndex : 1000, // z-index of tooltip
// options not supported by metadata
live : false, // use live event support?
metadata : 'class', // attribute that contains the metadata, use "false" (no quotes) to disable the metadata.
activate : 'mouseenter focusin', // how tooltip is activated
deactivate : 'mouseleave focusout', // how tooltip is deactivated
// change tooltip, screenshot and preview class
tooltip : '.tooltip', // tooltip class
screenshot : 'a.screenshot', // screenshot class
preview : 'a.preview', // preview class
// tooltip & preview ID (div that contains the tooltip)
tooltipId : 'tooltip', // ID of actual tooltip
previewId : 'preview' // ID of screenshot/preview tooltip
});
});| Key | Value (default shown) | Description |
|---|---|---|
| direction | 'n' | Choose the direction of the tooltip (in quotes; choose from n, ne, e, se, s, sw, w, nw). |
| followMouse | true | When hovering over the object with a tooltip, the tooltip will follow the mouse if true. If false, it will be positioned relative to the object. |
| content | 'title' | Attribute containing the tooltip content. By default it is the "title" attribute. |
| speed | 300 | Time in milliseconds for the tooltip to fade in. By design the tooltip has no fade out because it is removed immediately. |
| local | false | Where the tooltip is attached. By default it is false and will attach to the document body; if true, it will be attached before the object. |
| xOffset | 20 | Number of pixels between the tooltip and the mouse (or object if followMouse = false) in the X direction. |
| yOffset | 20 | Number of pixels between the tooltip and the mouse (or object if followMouse = false) in the Y direction. |
| zIndex | 1000 | Adjust this if the tooltip is below another object. |
| live | false | Set to true if you add tooltip objects to your page dynamically (added after the page is loaded). |
| metadata | 'class' | Location of the tooltip metadata. By default it will look in the class attribute. If set to "false" it will disable the metadata. |
| activate | 'mouseenter focusin' | The event that causes the tooltip to display information. |
| deactivate | 'mouseleave focusout' | The event that causes the tooltip to be removed. |
| tooltip | '.tooltip' | The class used to activate the tooltip. And the ID of the actual tooltip. |
| screenshot | 'a.screenshot' | The class used to activate the screenshot script which shows an image associated with the URL. And this is the ID of both the screenshot & preview tooltips. |
| preview | 'a.preview' | The class used to activate the preview script which shows the an image in the tooltip from the href. |
| tooltipId | 'tooltip' | The ID of the actual tooltip. |
| previewId | 'preview' | The ID of the actual preview/screenshot tooltip (the share the same one). |
CSS<ul id="sortable"> <li> <h3>Content 1</h3> <div class="hidden">Some Content</div> </li> <li> <h3>Content 2</h3> <div class="hidden">Some Content</div> </li> <li> <h3>Content 3</h3> <div class="hidden">Some Content</div> </li> <li> <h3>Content 4</h3> <div class="hidden">Some Content</div> </li> <li> <h3>Content 5</h3> <div class="hidden">Some Content</div> </li> </ul>
/* set list width & remove bullets */
#sortable {
width: 500px;
list-style: none;
}
/* clickable header */
h3 {
font-size: 20px;
width: 200px;
background: #444;
margin: 5px;
padding-left: 5px;
}
/* header with revealed content */
h3.opened {
background: #0080c0;
}
/* hidden content */
.hidden {
display: none;
min-height: 100px;
background: #444;
color: #ddd;
padding: 5px;
}$(document).ready(function(){
var last, diff, moved,
clickDelay = 500; // millisecond delay
$('#sortable')
// make the list sortable
.sortable()
// make h3 in the list "clickable"
.find('h3')
.bind('mousedown', function(e){
// set time on mousedown (start of click)
last = e.timeStamp;
// clear moved flag
moved = false;
})
.bind('mouseup mousemove', function(e){
// flag showing that the mouse had been moved
if (e.type == 'mousemove') {
moved = true;
// no need to continue
return;
}
// find time difference on mouse up (end of click)
diff = e.timeStamp - last;
// check moved variable, to ignore click if the mouse had been moved (dragged)
// if time difference is less than delay, then it was a click
// if time difference is greater than the delay, then it was meant for dragging
if ( !moved && diff < clickDelay ) {
// toggle the opened class and the hidden content
$(this).toggleClass('opened').next().toggle();
}
});
});$(document).ready(function(){
var last, diff,
clickDelay = 500; // millisecond delay
$('#sortable')
// make the list sortable
.sortable()
// make h3 in the list "clickable"
.find('h3')
.bind('mousedown', function(e){
// set time on mousedown (start of click)
last = e.timeStamp;
})
.bind('mouseup', function(e){
// find time difference on mouse up (end of click)
diff = e.timeStamp - last;
// if time difference is less than delay, then it was a click
// if time difference is greater than the delay, then it was meant for dragging
if ( diff < clickDelay ) {
// toggle the opened class and the hidden content
$(this).toggleClass('opened').next().toggle();
}
});
});
<div id="sidemenu"> <ul> <li><a href="#home">Home</a></li> <li><a href="#work">Work</a></li> <li><a href="#blog">Blog</a></li> <li><a href="#projects">Projects</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div>
#sidemenu { position: fixed; top: 50px; left: 20px; background: #444; width: 120px; }
#sidemenu ul { list-style-type: none; margin: 0; padding: 0; }
#sidemenu li { margin: 5px; padding: 5px; width: 100px; text-align: center; }
#sidemenu li.selected { background: #555; }
#sidemenu a { text-decoration: none; color: #bbbbff; }
#sidemenu a:hover { color: #fff; }$(document).ready(function(){
$('#sidemenu').visualNav();
});<div id="menu"> <div class="link" title="#Home">Home</div> <div class="link" title="#work">Work</div> <div class="link" title="#blog">Blog</div> <div class="link" title="#projects">Projects</div> <div class="link" title=".about">About</div> <div class="link" title=".contact">Contact</div> </div>
#menu { position: fixed; top: 50px; left: 20px; background: #444; width: 120px; }
#menu div.link { margin: 5px; padding: 5px; width: 100px; text-align: center; }
#menu div.selected { background: #555; }$(document).ready(function(){
$('#menu').visualNav({
link : 'div.link',
targetAttr : 'title',
selectedAppliedTo : 'div.link'
});
});$('#sidemenu').visualNav({
link : 'a', // Add a link class, as necessary
targetAttr : 'href', // added in case you have link = "div" and attribute something like
selectedClass : 'selected', // css class applied to menu
selectedAppliedTo : 'li', // to only apply to the link, use "a"
topRange : 100, // measure from the top of the viewport to X pixels down
topMargin : 100, // margin above the top where the target updates the menu
bottomMargin : 20, // margin from the end of the page where the last menu item is used
animationTime : 1200 // time in milliseconds
});
| Dates | Description |
| 0 | Set image as a default (will only display if no date specific images are found). |
| 1/1 | Dispaly image only on Jan 1st. |
| 1/1 - 1/5 | Dispaly image from Jan 1st to Jan 5th (spaces are okay). |
| 7/20 - 8/20 | Display image from June 20th to August 20th. |
| 1/3rdMon | Display image only on the 3rd Monday of January. |
| 5/lastMon | Display image only on the last Monday of May. |
| 11/3rdThur-11/4thThur | Display image from the 3rd Thursday of Nov to the 4th Thursday of Nov. |
| 12/20-1/1stSun | Display image from Dec 20th to the 1st Sunday of January. |
As you see, the list is stored in an <li> tag with the date in the rel attribute, the url in the title attribute and the comment inside the tag. This is how to set the script to gather the data correctly.<ul id="myImageList"> <li rel="0" title="images/main1.jpg">Hello</li> <li rel="0" title="images/main2.jpg">Hello</li> <li rel="12/31-1/5" title="images/new-year.jpg">Happy New Year!</li> <li rel="5/1-8/5" title="images/Summer.jpg">Summer time!</li> </ul>
$('#todaysImage').todaysImage({
data : $('#myImageList li'),
dataObject : ['rel', 'title', 'html'] // these must be in this order: [date, url, comment]
});the script below will access this data. Notice the dataObject option sets the order of the image array. If you already have an array with similar data, all you need to do is set the dataObject to point to the correct index so that this order is maintained [ date, image URL, comments ] (e.g. images.push([ "comment", "other data", "dates", "url' ]), would required the dataObject to be [2, 3, 0]).var images = []; images.push(["0","images/main1.jpg","Hello"]); images.push(["0","images/main2.jpg","Hello"]); images.push(["12/31-1/5","images/new-year.jpg","Happy New Year!"]); images.push(["5/1-8/5","images/Summer.jpg","Summer time!"]);
$('#todaysImage').todaysImage({
data : images,
dataObject : [0,1,2]
});var imageList = {"images": [
{
"dates" : "0",
"image" : "images/main1.jpg",
"comment": "Hello"
},{
"dates" : "0",
"image" : "images/main2.jpg",
"comment": "Hello"
},{
"dates" : "12/31-1/5",
"image" : "images/new-year.jpg",
"comment": "Happy New Year!"
},{
"dates" : "5/1-8/5",
"image" : "images/Summer.jpg",
"comment": "Summer time!"
}
]};$('#todaysImage').todaysImage({
data: imageList.images
});{"images": [
{
"dates" : "0",
"image" : "images/main1.jpg",
"comment": "Hello"
},{
"dates" : "0",
"image" : "images/main2.jpg",
"comment": "Hello"
},{
"dates" : "12/31-1/5",
"image" : "images/new-year.jpg",
"comment": "Happy New Year!"
},{
"dates" : "5/1-8/5",
"image" : "images/Summer.jpg",
"comment": "Summer time!"
}
]};$.getJSON( 'images.json', function(imageList){
$('#todaysImage').todaysImage({
data: imageList.images
})
})$('#todaysImage').todaysImage({
data : '', // dataObject contains the date, image and comment names as seen in the data (names if JSON, numbers [0,1,2] in an array)
dataObject : ['dates','image','comment'],
comment : '.imageComment', // class or id where the current image comment will be added; if it doesn't exist, no comment will be shown
noImageTitle : false, // if true, the script will not add the comment to the image's title attribute
/* language options */
dayEndings : 'st|nd|rd|th', // 1st, 2nd, 3rd, 4th, etc. (e.g. 1stMon & 3rdThu)
dayLast : 'last', // last weekday/weekend of the month
dayWeek : ['sun','mon','tue','wed','thu','fri','sat'], // days of the week (case insensitive)
/* debugging options */
locked : false,// prevent debug mode onscreen output if true (debug setting from browser URL only).
debug : false,// set debug mode.
debugId : 'imagedebug', // id of the debug output div - all info and show all images will be added here.
debugElement : 'body', // Location where debug id is added (where debugId div is appended)
defaultDate : '1/1/2010', // date used if setting debug mode but no default date.
inRangeColor : '#080', // color highlight (green) for signifying the date is in range.
notInRangeColor : '#f00'// color highlight (red) for dates not in range.
})| Option | Description |
| data | Please refer to the Data Sources section above on how to set this data |
| dataObject | Please refer to the Data Sources section above on how to set this data |
| comment | This option targets the class or Id of an HTML element where you want the current image comment to be displayed, if this target doesn't exist, no comment will be shown |
| noImageTitle | Prevent the script from adding the comment to the image title. Done if you want to apply a tooltip to the image to display the message |
| dayEndings | Abbreviation suffixes for 1st, 2nd, 3rd, 4th, etc. The script actually only uses these to match the date string, but they are ignored otherwise. So if you mistakenly add 4rd, it will use the 4 and not the "rd" |
| dayLast | String used to match and causes the script to find the last weekday/weekend of the month (e.g. lastMon) |
| dayWeek | List of days of the week. It is used to match the weekday from the data date, so this is language agnostic, but the first day of the array must start with sunday to match the javascript date method. Limit these names to three letters and the letter case doesn't matter. |
| monthFirst | Set to true (default) to use standard US date formatting - mm/dd/yyyy. If set to false, the European date format can be used - dd/mm/yyyy. |
| locked | Locks out using the debug mode from the browser address bar (adding "#debug" to the url will enable debug mode if the script isn't locked, like my demo) |
| debug | Enable debug mode through the script. This value is set to true if the script is not locked and "#debug" is added to the url. This mode will display image data to show matches found and date ranges. For more detail, see the troubleshooting section below |
| debugId | This is the Id of the element to find to output the debug data. If it doesn't exist and debug mode is initiated, a div with this Id will be added to the debugElement (see below) which by default is the document body. If using the showAll() method above, this element will need to me manually added before images will be displayed. |
| debugElement | By default, the debug element is the document body. This is where the debugId div is appended, if it doesn't exist, when debug mode is initiated. |
| defaultDate | This date is only used if the debug mode is initiated by the script and no other date is supplied. The default date for the debug mode when adding it to the url would be the current date unless otherwise specified - see the troubleshooting section below for more details |
| inRangeColor | Text color applied to the debug text when an image date is in range (green by default) |
| notInRangeColor | Text color applied to the debug text when an image date is not in range (red by default) |
var current = $(image).data('todaysImage').currentImage(); // returns array ['dates','image url','comment']
alert( 'current image url = ' + current[1] );// Sets displayed image to the first (zero based index) image that falls within the date range,
// then returns array ['dates','image url','comment'] of that image
var current = $(image).data('todaysImage').currentImage(1);// return the number of images that have date ranges that match the date
var currentNumber = $(image).data('todaysImage').currentNumber(); // returns a number$(image).data('todaysImage').randomImage(); // displays a random image in the date range & returns array// Show all images in the data, the script targets the id found in "debugId" option
$(image).data('todaysImage').showAll();CSS
HTML#allImages img { height: 100px; width: 100px; } /* make images thumbnail size */
Script<div id="allImages"></div>
// initialization of script $('#todaysImage').todaysImage( // other options here, including data source debugId : 'allImages' });
// initialization of script
$('#todaysImage').todaysImage(
// other options here, including data source
debug: true,
defaultDate: '12/24/2010' // choose any date using this format
});// initialization of script
$('#todaysImage').todaysImage(
// other options here, including data source
// locks out debug mode from the URL
locked: true
});Date used: 11/20/2009
(11/11), derived range: 11-11 is NOT in range; image = veterans1.jpg
(11/11), derived range: 11-11 is NOT in range; image = veterans2.jpg
(11/11), derived range: 11-11 is NOT in range; image = veterans3.jpg
(11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving1.jpg
(11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving2.jpg
(11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving3.jpg
(11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving4.jpg
# of currentImages = 4
current random image = thanksgiving4.jpg
I set up an demo page here.<div> <ul class="imgHL"> <li> <a href="#" rel="sx1,sy1,ex2,ey2">Item #1</a> <p>Description for item #1</p> </li> <li> <a href="#" rel="sx1,sy1,ex2,ey2">Item #2</a> <p>Description for item #2</p> </li> <li> <a href="#" rel="sx1,sy1,ex2,ey2">Item #3</a> <p>Description for item #3</p> </li> </ul> <br> <img id="imgHL" src="myimage.jpg" alt="" /> <div class="description"></div> </div>
/* List link: currently hovered/selected */
a.current { color: #fff; }
/* Hide & Position Descriptions */
.imgHL p { display: none; }
.description { margin: 1em auto; clear: both; width: 450px; height: 2.4em; }
/* General imageHighlighter (overlay and highlight) */
.imageHighlighter, .imgHLDark, .imgHLLight, .imgHLOverlay { padding: 0; margin: 0; } /* overlay and highlight divs */
.imgHLOverlay { background: #000; opacity: .5; filter: alpha(opacity=50); } /* overlay color & opacity */* window load ensures all images are loaded */
$(window).load(function(){
$('#imgHL').imageHighlighter({
list : '.imgHL a'
});
})You can change the highlight properties of each image using: borderColor, borderSize & borderType described in the Customizing/Options section below.
rel="sx1,sy1,ex2,ey2" sx1 Starting X position of the highlight box } top left corner sy1 Starting Y position of the highlight box ex2 Ending X position of the highlight box } bottom right corner ey2 Ending Y position of the highlight box
$("#imgHL").imageHighlighter();In the other example, the pair are wrapped inside of a list (<li>). Make sure that the descriptions are hidden and targeted by the "descrip" plugin option. The script will look inside the link highlight wrapper, so you don't necessarily have to have a specific class assigned to it as long as the element is unique (e.g. don't have two <p>'s inside with the highlight link otherwise the contents of both will be displayed in the description.<span><a rel="sx1,sy1,ex2,ey2">Item #1</a><span class="desc">Description for Item #1</span></span>
$("#imgHL").imageHighlighter({
borderColor : "#fff", // highlight border color
borderSize : 4, // highlight border thickness
borderType : "solid", // highlight border type
list : "a", // links that contain the highlight coordinates (e.g. "li.imgHL a")
descrip : "p", // HTML tag sibling of the link, that contains the description text (hidden) (e.g. "p.desc")
descripClass: ".description", // HTML tag where description text is shown (placeholder)
overlay : true, // display an overlay to make the highlight stand out
current : "current", // class applied to link currently used to highlight the image
hoverTimeout: 100, // hoverIntent timeout (only applied if hoverIntent plugin is loaded)
zindex : 10 // z-index of highlight box, overlay is automatically made 1 less than this number
})
var $current = $('#imgHL').data('imageHighlighter').highlight();- Use a number (indexed from one: first, second, etc) - if the nth link doesn't exist, it will return null.
var $current = $('#imgHL').data('imageHighlighter').highlight(1); // select the first link- Search for the case-sensitive text within the link (uses the jQuery ":contains()" selector) - if the text is not found, the script will return null.
var $current = $('#imgHL').data('imageHighlighter').highlight("frames");- Search for the link with a class or ID - if the selector is not found, the script will return null.
var $current = $('#imgHL').data('imageHighlighter').highlight(".box");
// Enable the editor and use the Jcrop plugin, if it is available
$('div.imageHighlighter img').imageHighlighterEditor();
// Enable the editor, but don't use the Jcrop plugin (even if it has been loaded)
$('div.imageHighlighter img').imageHighlighterEditor({ useJcrop: false });Mouse x,y coordinates (click to lock/unlock) : x,y
Current box coordinates : x1,y1,x2,y2
Methods<script type="text/javascript"> $(function(){ $(selector).movingBoxes({ key: value, key: value, key: value }) }) </script>
Key Value
(default shown)Description startPanel 1 Choose the initial panel to show in the scroll window. width 800 Overall width of movingBoxes. panelWidth .50 Current panel width adjusted to 50% of movingBoxes width. reducedSize .8 Non-current panel size: 80% of current panel size. imageRatio 4/3 Image ratio set to 4:3. Wide screen would be 16:9 (16/9). speed 500 Animation time in milliseconds for the scroll and expanding of the panel. hashTags true If true, hash tags (browser history) are enabled. wrap false If true,the panel will "wrap" at the ends.
Panels are numbered as a standard index (1st panel number is one, second is two, etc.).
External controls:
- Get number of currently selected panel:
$('.slider').data('movingBoxes').currentPanel();- Set currently selected panel:
$('.slider').data('movingBoxes').currentPanel(2);
$('.slider').data('movingBoxes').goForward(); // go forward one slide (if possible) $('.slider').data('movingBoxes').goBack(); // go back one slide (if possible)
I wrote this plugin to allow more control over the progress indicator. To the right is an animated gif progress indicator. All you can do is show or hide this image. This plugin allows you to make a similar indicator that you can fully control. The plugin will animate both text (including bullets) or images, I guess you could also animate embedded objects, but I haven't tested this. The reason I call this progress indicator dynamic is you can modify or update the objects in the indicator at any time (e.g. replace images or text while the indicator is active). I'll make a demo of this when I have more time :).progress {
position: relative;
top: 0;
left: 0;
width: 200px;
height: 200px;
overflow: hidden;
}
.progress span {
position: absolute;
left: -50px; /* hide spans until initialized */
top: 0;
padding: 0;
margin: 0;
border: 0;
}
.display {
position: absolute;
top: 95px;
left: 90px;
}<div class="progress"> <!-- this displays the percent value, position in the middle with CSS --> <div class="display"></div> <!-- add as many <span>s as you want, add any text or image inside --> <span>•</span> <span>•</span> <span>•</span> <span>•</span> <span>•</span> <span>•</span> </div>
<script type="text/javascript" src="jquery.progressindicator.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// initialize: initialValue is uaually zero, and a full list of "options" can be found below.
$(selector).progressIndicator( initialValue, options );
})$(selector).progressIndicator( initialValue, { key: value, key: value, key: value })| Key | Value (default shown) | Description |
| max | 100 | The circle is split into this max number of increments (default set to 100 to match a percentage going from 0-99). |
| radius | 50 | Sets the radius of the circle in pixels measured from the centerX and centerY position (middle). |
| centerX | 100 | Positions the center of the circle 100 pixels from the left edge of its container. |
| centerY | 100 | Positions the center of the circle 100 pixels from the top edge of the container. |
| clockwise | true | Sets the direction of the rotation. Clockwise if true and counter (or anti for you British folk) clockwise if false. |
| startPosition | 0.75 | This may not make sense if you don't know the coordinate system, but basically zero is the far right side of the circle or the x-y coordinates of ( x=radius, y=0 ) . So if you want to have the indicator start with the "zero" at the top of the circle, you need to start from 75% or 3/4 of your way around the circle. So basically, set 0 to start on the right, .25 (25%) for bottom, .5 (50%) for left and .75 (75%) would be the top of the circle where ( x = 0 , y = radius ). |
| sizeStart | 80 | Sets the starting size of the element to 80 pixels. This sets the font size, the height & width of any element inside the span (like an image) |
| sizeDec | 4 | Sets how much to decrement the size of the next element from the starting size. Try to avoid making the decrement size that would cause the last element to be too small or negative (for example: these settings would not look good, 10 spans inside the progress indicator (in the HTML), sizeStart = 20, sizeDec = 2; this would make the last span element have a size of zero (20 - 2 * 10 = 0). |
| showValue | true | Adds the progress indicator value to the "display" class inside the progress div. If you want to be tricky, add the display class to one of your spans to have the indicator move around with the other elements. |
| timerActive | false | Initialize progression indicator start and stop functions allowing the indicator to move independent of the percent value. |
| timerSpeed | 20 | Sets the setInterval time in milliseconds. |
| timerIncrement | 1 | At each setInterval call, the progression indicator is incremented by this value. Make this number bigger to speed up the animation, but the bigger the number, the more choppy the animation. |
// Get current value (percentage)
var value = $(selector).data('progressIndicator').getValue();
// Set/Update current value
$(selector).data('progressIndicator').update( value );// Start animation timer
$(selector).data('progressIndicator').start();
// Stop animation timer
$(selector).data('progressIndicator').stop();
// Reset animation timer (just resets position)
$(selector).data('progressIndicator').reset();| Action | Script | Notes: |
| Set up timer, so the start & stop methods are available. And adjust animation speed. | $('.progress').progressIndicator( 0, { timerActive : true, showValue : false, timerSpeed : 20, timerIncrement : 1 }); | The zero in the first line sets the initial position of the indicator, it's not really that important for the animation timer mode, but necessary to include. "timerActive" enables the start and stop timer methods. "showValue" is set to false to hide the progression value. "timerSpeed" and "timerIncrement" were adjusted to make the progression animation fairly quick. In the demo they are set to 50 and 5 respectively so you can see how much faster you could make this animation without it being too choppy. |
| Rotate counter (anti) clockwise & other adjustments | $('.progress').progressIndicator({ clockwise : false, startPosition : .32, sizeStart : 5, sizeDec : -1 }); | Setting the clockwise option to false with reverse the indicator rotation. Note that reversing the direction also effects the "startPosition" so you may need to adjust this value as well. This example is from progression3 in the demo and it needs a startPostion of .32 (32%) to move the images to the top... the reason it isn't 25% is because the sizeStart begins small (5 pixels) and the sizeDec is negative so this actually increases the image size as it progresses through the elements. You'll probably end up tweeking these numbers to get the look you want. |
| Max value | $('.progress').progressIndicator({ max : 200 }); | By default, the progress indicator is set to work with percentages.. it really only goes from 0 to 99%, but by changing the max option, you can set a full rotation of the progress indicator to any value. Note, the value, set using the update method, and the max value can be fractions. |
<ul id="eventsToAdd">
<li class="fc-event"><span data-id="holiday" class="title" data-start="8a" data-end="4p">Holiday</span></li>
<li class="fc-event"><span data-id="host" class="title {start: '7p', end: '10p', title: 'Get drunk!', duration : 2}">Hosting Event</span></li>
<li class="fc-event"><span data-id="meeting" class="title" data-title="Nap Time!">Meeting</span></li>
<li class="fc-event"><span data-id="party" class="title" data-allDay="false">Party</span></li>
<li class="fc-event"><span data-id="plan" class="title" data-start="5pm" data-end="7p">Planning Session</span></li>
<li class="fc-event"><span data-id="vacation" class="title" data-allDay="true" data-duration="7">Vacation</span></li>
</ul>$('#eventsToAdd li').fcExternalEvents({
calendar : '#calendar', // Selector string that points to the calendar object
newEventObject : 'span.title', // Contains all event data (store in metaData or in data-'attr' as seen in the HTML)
workDayStart : '8a', // use any time format '8','8a','8am','8 a.m.','0800','8:00' -> '08:00:00'
workDatEnd : '4pm', // use any time format '4','4p','4pm','4 p.m.','1600','16:00' -> '16:00:00'
draggableOptions : { revert: true }, // Available options: http://jqueryui.com/demos/droppable/
useMetaData : true, // If plugin exists get metadata from class (plugin: http://docs.jquery.com/Plugins/Metadata)
metaDataOptions : {}, // use this if you put the metadata anywhere beside inside the class attribute (http://docs.jquery.com/Plugins/Metadata/metadata#options)
editExternalEvent: true, // true: allows you to click on an external event to edit it's data.
addExternalEvent : true, // true: allows you to add an external event to the list.
disableConfirm : false // true: disables the confirmation popup when you try to delete an event.
});
// *****************************************
// External event added to fullCalendar event trigger
// *****************************************
// fcEventObject = fullCalendar event object
$('#calendar').bind('ExternalEventAddedToFullCalendar', function(event, fcEventObject){
updateDisplay('Event added to fullCalendar: ' + fcEventObject.title );
});
// *****************************************
// External Event triggers:
// Add, update and delete are triggered on the PARENT element!
// *****************************************
$('#eventsToAdd')
// External Event Added/Updated
// ********************
// externalEventElement = jQuery object targeting newly added draggable event
// fcEventObject = fullCalendar event object
.bind('ExternalEventUpdated ExternalEventAdded', function( event, fcEventObject, externalEventElement ){
var whichEvent = ( event.type == 'ExternalEventAdded' ) ? 'added' : 'updated';
var txt = 'External event ' + whichEvent + ':' + externalEventElement.find('span.title').text() + ' (' + fcEventObject.title + ')';
updateDisplay( txt );
})
// External Event Deleted
// ********************
// externalEventElement = jQuery object targeting newly added draggable event
// fcEventObject = fullCalendar event object
.bind('ExternalEventDeleted', function(event, fcEventObject, externalEventElement ){
var txt = 'External event Deleted:' + externalEventElement.text();
updateDisplay( txt );
});
| Event Object | Data attribute | Type |
| id | data-id | String/Integer |
| title | data-title | String |
| allDay | data-allDay | true or false (Boolean) |
| start | data-start | String (time only) - The external event script adds the correct month, day & year to the event after it is dropped on the calendar |
| end | data-end | String (time only) -The external event script adds the correct month, day & year to the event after it is dropped on the calendar |
| url | data-url | String - the editor does not validate the URL. |
| className | data-className | String/Array |
| editable | data-editable | true or false (Boolean) |
| duration | data-duration | Integer (# of days) - This attribute is used by the external event script to determine the end date of an event. It might be best to also set the "allDay" attribute to true if this value is more than one. |
<li>
<span class="title { id: 'event1', title: 'My Event', allDay: false, start: '1pm', end: '2pm' }">My External Event Name</span>
</li>$('#listWrapper eventWrapper').fcExternalEvents({ key: value, key: value, key: value })| Key | Value (default shown) | Description |
| calendar | '#calendar' | This selector string should point to a fullCalendar object. After fullCalendar renders a calendar, it adds an '.fc' class, but this doesn't target specific calendars, so please use a unique ID for this value if you have more than one calendar per page. |
| newEventObject | 'span.title' | In the HTML above, the external event list is added as an unordered list. Using this option allows you to target each event using this selector, but the way the script is set up, it should have at least three levels (main wrapper > event wrapper > newEventObject) or (#eventsToAdd > li > span.title) |
| workDayStart | '8a' | I tried to account for just about any time format (8, 8a, 8am, 8 a.m., 0800, 08:00). But this time is basically the default event start time if no start time is set. |
| workDatEnd | '4pm' | As with the workDayStart, I tried to account for different time formats (it may not be 100% perfect). This time sets the default event stop time if no end time is set. |
| draggableOptions | { revert: true } | By default, the draggable element will revert to the starting position. Use this option to add or remove any of the draggable options. |
| useMetaData | true | The script detects the metadata plugin. It will use the metadata it finds if this option is set to true. |
| metaDataOptions | {} | If you do have metadata you want to use, it will by default look in the "newEventObject" class attribute. Adjust these metadata options if it is located elsewhere. |
| editExternalEvent | true | If you don't want users to edit the list of external events, set this option to false |
| addExternalEvent | true | Allows users to add additional external events. They will automatically be able to edit these newly added events even if the "editExternalEvent" option is false. |
| disableConfirm | false | Disables the confirmation to delete an external event |