code.Atomic8Ball.com

• jQuery and jQuery UI

  Current versions are:

  • <link rel="stylesheet" http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css />
    (the theme is optional, see if what you're doing works without the theme first, different themes are available on jqueryui.com)
  • <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  • <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    (load .css files before .js files)
  • Usually using the current version is fine, however, some items (particularly older slideshows) break in the newest versions of jQuery. If that happens try loading 1.8.1 instead.

  jQuery tips:

  • DO: search the site to see of jQuery is already loaded, jQuery should only be loaded once - either on the one, single page that's utilizing jQuery, or on the master page.
  • DON'T: copy/paste loading jQuery and jQueryUI on to lots of different pages. If you have, for example, 8 pages with accordions on them then you should have a nested sub-master page that loads the widget and has the script on it.
  • DO: ask for help if you're confused or need assistance. Miles, Brian and Andrew are all good resources to ask.
  • DON'T: just copy/paste jQuery with no understanding of what it's doing, as you may end up breaking other pages on the site.
  • DO: test every page LIVE that has had jQuery added or modified on it to confirm that it is functioning as expected.

• Add This Event

  

  jQuery plugin that adds ability to quickly add an event to a calendar. Especially useful for seminars, webinars, tradeshows, etc.

  Instructions

  Setup: Approx. 5-10 mins

• tiny Cycle (slideshow)

  

  A minimalist slideshow plugin that supports simple features.

  • Demo
  • Instructions

  Limitations

  • No dot links.
  • Only two fade effects.
  • Speed of transition, and time between transitions are the only variables that can be controlled.
  • If you need more features, then either you know what you're doing, or the task is misassigned.
    Visit http://jquery.malsup.com/cycle2/ and implement Cycle2 instead.

  Setup: Approx. 5-15 mins.

• jQuery Tabs

  Horizontal tab listing

  • Demo
  • Instructions
  • More reading and additional options

  Setup:Approx. 10 mins.

• Carousel

  

  Scrolls through images or text vertically or horizontally.

  • Demo (Horizontal)
  • Demo (Vertical)
  • Instructions

  Setup: Approx. 30-60 mins.

• Tabbed Slideshow

  

  A slideshow with tabs that can be controlled by the user. Alternatively the tabs can be hidden for a slideshow capable of rendering text instead of just images.

  • Demo
  • Instructions

  Setup: Approx. 30-60mins.

• Image Gallery Lightbox

  

  Open and scroll through images from a gallery with a faded shadow background.

  • Demo
  • Instructions

  Setup: Approx. 30 mins.

• jQuery Accordion

  

  Show/hide blocks of text one at a time.

  • Demo
  • Instructions

  Setup: Approx. 5 mins.