Category Archives: Custom Elements

Creating a jQuery Accordion

Share

One task that jQuery makes very easy is creating an accordion effect. To do this, we will use the jQuery UI extension library. This is useful if you have a long section of text that is broken up into subsections. By using an accordion, you only display one subsection at a time, but all the other text is available to read at any time. So, for example, on this sample page, there is a long string of information about Piratedrive, broken up in to seven subsections (General Information, Personal Piratedrive, etc.). So to make the page shorter, I’m going to put the text into an accordion. As you will see, this is very easy to do – in fact, I would say that creating the HTML structure is harder than the actual JavaScript in this case.

HTML Content

First, the content has to be formatted so that it can be converted easily. The jQuery UI library requires that the page content be formatted something like this:

<h3><a href="#">Subsection One Title</a></h3>
<div>
     Subsection One Content.  Can be text, image, links, anything you want.

     The content can be multiple paragraphs and contain any html tags that you want.
</div>

<h3><a href="#">Subsection Two Title</a></h3>
<div>
     Subsection Two Content.  Again, can be text, image, links, anything you want
</div>

The links (a href=”#”) are required, because they will be the triggers that cause the subsections to open. The subsection headings do not actually have to be h3’s, but that is the default, so for the tutorial that is what I’ll use. I’ll post a link to the documentation so if you want to do something more advanced you can. So, for step one of the tutorial, I’ve set up the sample page linked above with the content in that format.

The other next step is that all the subsections have to be wrapped in a div tag with an id that we will use to identify it. I’m going to call this one “myAccordion”, just to make it easy to see what I want it to be converted into, but you can name it any valid name.

<div id="myAccordion">
     <h3><a href="#">Subsection One Title</a></h3>
     <div>
          Subsection One Content.  Can be text, image, links, anything you want.

          The content can be multiple paragraphs and contain any html tags that you want.
     </div>

     <h3><a href="#">Subsection Two Title</a></h3>
     <div>
          Subsection Two Content.  Again, can be text, image, links, anything you want
     </div>
</div>

Remember, id’s are required to be unique on a page, so if you plan on putting two accordions on your page, you cannot name both of them “myAccordion”.

Importing jQuery UI

The next step is to include the jQuery UI library on the page. To do this, you would use the Include JavaScript Custom Element. We have the library stored on our server at http://www.ecu.edu/js/jquery-ui-1.8.13.min.js, so when you put the element on the page, put “/js/jquery-ui-1.8.13.js” (minus the quotes) in the external source text box:

Last Step

And now, there is only one more step to go. You need to add other Include JavaScript Custom Element and put this code in the Script Input box:

$(document).ready(function() {
    $('#myAccordion').accordion();
});

If you named your div something other than “myAccordion”, put that in place of the “myAccordion” (that follows the “#”) in the code.

Styling

When your page reloads, will should see that the accordion works, as here: http://www.ecu.edu/cs-training/hallwa/Accordion-Step-Two.cfm. As you can see, the style is rather plain, so you can either create your own style sheet, use one of two ECU customized one, located at /css/jquery-ui.css (very purple and gold themed) or http://www.ecu.edu/css/custom-theme/jquery-ui-1.8.2.custom.css (a subtler theme), or some combination of an existing style sheet and your own styles. There is a tutorial here on how to use a style sheet in CommonSpot.

After applying the purple and gold theme, the page looks like this: http://www.ecu.edu/cs-training/hallwa/Accordion-Step-Three.cfm

Advanced Configuration

There are several advanced configuration options that you set if you dislike the defaults. For example, as you can see, by default the first subsection is active (opened for viewing) and the height of all the subsections is the same (the height of the tallest), and one subsection is open at all times. Let’s use the advanced options (found here http://jqueryui.com/demos/accordion/ under Options) to change our accordion so that when the page loads all the tabs are closed, the user can close a subsection by clicking on it while it is open, and to have each subsection only use its own height.

To do this, we have to edit our code that called the accordion function. Right now it is

$(document).ready(function() {
    $('#myAccordion').accordion();
});

.

Within the accordion() function, we are going to change the parameters. First let’s make the accordion collapsible, i.e. not required at a subsection is open at all times. We change the code to

$(document).ready(function() {
    $('#myAccordion').accordion( { collapsible: true  } );
});

Next, let’s make all the subsections load closed:

$(document).ready(function() {
    $('#myAccordion').accordion( { collapsible: true, active: false} );
});

Last, let’s change the height as sections load.

$(document).ready(function() {
    $('#myAccordion').accordion( { collapsible: true, active: false, autoheight: false  } );
});

When all completed, the page now looks like this:
http://www.ecu.edu/cs-training/hallwa/Accordion-Step-Four.cfm

New Custom Element: Include HTML

Share

We have created a new Custom Element: Include HTML file.  This element takes HTML that is stored in a separate file and includes it in a CommonSpot page.

To use this element, first take the HTML that you want to use and store it in a separate file.  Because the HTML code in this file will be included in a larger HTML document, you do not want to include the HTML tags <html>, <head>, <body> or any tags that may only be used within the <head> tag (e.g. <link>).  You may include <script> and <style> tags.  Then upload that file via your tools page.

Next, include a Include HTML file custom element.  The only field to complete is the HTML file location.  By default, the field is prepopulated with the path to your tools page, so you would only need to put the name of the file at the end.  For example, if I have a file named ‘myFile.html’ and uploaded it my training site tools page (http://author.ecu.edu/cs-training/hallwa), then the field would already have “/cs-training/hallwa/customcf/” in it and I would just need to add “myFile.html” to the end of that.  When I click finish, the text in myFile.html will be on the page.

tutorials- Include html

The element will not process any ColdFusion tags, so you cannot use it to process any dynamic content.  The big advantage that this element has is that to update the page (or pages) that have the element, you only have to upload a new version of the HTML file and the content of the page will be updated without having to change any pages to read mode.

Custom Elements: “Google Search”

Share

The Google Search Custom Element lets you take advantage of the power of our Google Mini search appliance, the same index that we use on all our ECU pages, but limit the search to your desired subsite.

To use it, just use the “Click to insert new element” link on any CommonSpot page.  Pick Google Search, listed under Custom Elements.  Use the “Click here to define the custom element data” link to bring up the popup window that will let you define the details.

tutorials- Google Search

The only required field is “Subsite to Search”.  By default the element inserts the URL of the current subsite, but you can change it anything that you want.  As the text says, only put the part of the URL after “www.ecu.edu”.

The Search Field Size tells the long to make the search box on the page.  It does not limit what the user can type in, only what will appear on the screen.

The Search Field Default Text lets you put a text hint in the search box.  When the user clicks on the search box, whatever you typed in there will be erased.

The Search Button lets you decide what text will appear on the submit button.

The Search Button Image lets you pick an image to use as the submit button instead of using a button.

Two search forms, one using a button and one using an image can be seen here: http://www.ecu.edu/cs-training/hallwa/Google-Search.cfm

Rotating Images with the Cycle Element Tutorial

Share

The newest Custom Element is Cycle Images.  This element uses the Jquery Cycle plugin to create a rotating images effect.  The element has 12 different transition effects.  Several examples of the effects that this element can perform can be seen here: http://www.ecu.edu/cs-training/hallwa/Rotating-Images.cfm.

To use the element, you just need a collection of identically sized images.  The element takes all those images, lets you specify a duration and effect and then creates all the JavaScript and HTML for you.

First, log into your tools page and create a new folder.  For this example, I named my folder rotatingImages.  Then upload as many identically sized images as you want into that folder.  The images can be different types (jpegs, gifs and pngs are all allowed) but for the element to display the images properly, they must all be the same size.  For my examples, I used images 770 pixels wide and 170 high.

Next, add a Cycle Images Custom Element (listed under Custom Elements) to your page.  Then click the “Click here to define the custom element data” link.  A popup window will launch.  Fill in the appropriate fields, like so:

  • Image Directory – the folder name where you uploaded the file.  Required.
  • Time to display – the the length of time in seconds to display each image before the transition effect takes place.  Required.  Must be a number, and  decimals are valid, so you can put 3.5 to display each image for three and a half seconds.
  • Change Duration – The length of time in seconds that the transition should take.  Required.  Must be a number, decimals are valid.  In my opinion, all the effects except the Fade effect look best with short (i.e. less than one second) durations.  The fade effect looks very nice with relatively long (5 seconds or more) durations.
  • Transition Effect – the visual effect that you want as the images change.  The option are:
    • Fade – The current image fades out and the next image fades in at the same time.
    • Cover – The current image remains in place and the next image moves in from the left to cover it.
    • ScrollDown – The current image moves down and at the same time the next image moves down to replace it.
    • ScrollUp – The same as ScrollDown but upward instead of downward.
    • ScrollLeft – The same as ScrollDown but the direction is to the left.
    • ScrollRight – The same as ScrollDown but the direction is to the right.
    • SlideX – The current image appears to fold in to the left and the next image folds out to the right.
    • Turndown – Simulates somewhat the effect of turning a photocube downward.
    • CurtainY – The current image folds in toward the middle and the next folds out from the middle.
    • Wipe – The current image remains in place and the next image is revealed from the top left diagonally to the bottom right.
    • Toss – The current image moves off screen to the right, revealing the next image beneath.
    • Shuffle – The current image moves off to the left and then moves behind the next image.
  • Height – The height of the images in pixels.  Required.
  • Width – The width of the images in pixels.  Required.
  • Margin – The CSS margin desired for the element.  Optional, by default is set to 0.  When using the element as a replacement for the header image, then 0 is what you want.  If you are using the element anywhere else on a page and want to have the image use all the width of the page, you need to set this to -10 (negative 10) to compensate for the inherited properties.

cycledImages

Two final caveats:

  1. If you try to put two of these on a page, only the first will work.  This is because the JavaScript works by identifying the element by its id, and these must be unique.
  2. If you copy a page that this element is on, then if you change anything in this element, it will be changed on both pages, since those pages will be sharing one instance of the element.  You can copy the page and then remove the element and add a new one however to prevent this from happening.

As always, if you have questions, comments or suggestions, please let me know.  And be sure to check out the ITCS Learning Center for lots more information about how to use CommonSpot more effectively.