Author Archives: Brian Hall

Firefox and CommonSpot

Share

As Belinda noted, the new version of CommonSpot only supports Firefox up to the version 10 ESR release.  I have noticed that if I try to use FF14, that many of the editing controls do not respond properly and some of the reports of problems that we have had sound like users are also encountering this problem.

So, if you want to use Firefox, make sure that you are using version 10 ESR and not any of the newer releases.

You can download 10 ESR here:  http://www.mozilla.org/en-US/firefox/organizations/all.html

More on Missing Editing Controls in IE

Share

As an update the to previous post, here is a permanent solution to the missing control problem that makes changing the URL of the page unnecessary.

  1. Open up Internet Options
  2. Pick the Security tab
  3. Pick the Trusted Sites option
  4. Click the  Sites button
  5. Add https://author.ecu.edu/
  6. Click Close, then OK
  7. Restart IE

Everything should now work.

Missing Editing Controls in IE

Share

If you are using IE, you might encounter a problem that has come up a few times. In author mode, the links for adding new elements appear, but the links for editing existing content (the gear icons) do not, as you can see here:

To try to fix this, change the URL of the page that you are looking at from https://[URL] to http://[URL] (in other words just remove the “S” after the http.  When we do this, the controls show up:

We will get this resolved so that it doesn’t matter which address you use, but until then this workaround should help.

Pasting in Chrome and Safari

Share

As you may know, the new version of CommonSpot now supports authoring in Safari and Chrome.  But pasting into a Text-block element in these browsers is a little different than what you are used to.

Safari

To paste in Safari, you have to right-click and pick paste from the popup submenu or you can use the appropriate keyboard shortcut.

Chrome

To paste in Chrome, you first have to download a Chrome extension.

  1. Go to http://author.ecu.edu/commonspot/dhtmledit/paperthin_chrome_extension.crx and save the extension to your desktop.
  2. When the download is finshed, drag the file to Chrome to install it.  A warning will appear in the bottom left of the window.  Click “Continue”.
     
  3. Click Add when the next window appears.
     
  4. A confirmation that the installation succeeded will appear.
     

After you have installed the plugin, you will be able to paste with Chrome.  To do this, you have to use the paste button that is on the RTE toolbar (Control + V and the right click context menu do not work in Chrome).

Missing Flash Element after Upgrade

Share

We have  had a couple of reports of missing Flash elements post-upgrade.  There is a relatively easy fix you can try that has fixed all the examples that we have seen so far.

  1. Select the Flash option from the Element submenu.  A popup like this will appear:

    Click the Edit Button

  2. A new popup will appear:
    • If you have a local copy of the Flash file, skip this step. Copy the URL (labeled “1” in the screenshot). Open http://author.ecu.edu/[copied URL] in Chrome or Firefox (IE will not work). Save the Flash file to your desktop by using File..Save As or Control + S
    • Change the type to “New Document Version” (labeled “2”).
    • Click Next
  3. Pick the local copy of the file that you just saved in the next window

Click Save to close out. The element should be working properly.

Previous Versions

Share

The ability to view previous versions of a page and the associated chance to revert pages to those previous versions seems to be one of the lesser known and understood features of CommonSpot. Until very recently, I actually thought that it wasn’t working, because I misunderstood how the process worked. So let’s look at some of what you can do and some of what you cannot.

CommonSpot, by default, stores all previous versions of all pages for 30 days. A new version of the page is made when you change the content of the page and submit the page or the element. Since some changes (e.g. changes to custom elements, changes to custom metadata, adding or removing style sheets) do not require a submission to become active, these do not create new versions. While 30 days is the default, upon request, we can change the settings for a subsite to 90 days. The settings for individual pages can also be changed via “Document Information” under “Tools & Information” on the menu bar (if in author mode).

All the saved versions of the page can be seen by choosing “Version History…” under “Page View”. A new window will appear listing all the saved versions. You can see any previous version by clicking on the hyperlink with the date and time of when the version was saved, or you can check two versions and compare them by then clicking on the “Visual Difference” button at the top.

There are some considerations that affect how complete the previous version are. As noted above, changes to custom elements are not saved, so when you view a previous version, any custom elements will have the same content as the current version. Also, any element that you delete is deleted from previous versions as well. So, for example, if you delete an entire Formatted Text Element, using the previous version option will not let you see the content of that element. Instead, the area where that text was will appear blank.

Elements that have remained on the page and only changed their content can be reverted back to their previous state. When looking at a previous version in author mode, these elements will have a grey arrow pointing to the left that will let you revert the content or compare it to the current version.

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

CommonSpot Corner: Preview Mode

Share

After yesterday’s Users Group meeting, I was chatting with a couple of the attendees, and a complaint came up that I bet many people have had. As everyone knows, when you are in author mode, the page does not render exactly as it does in read mode, so when you are making changes, it is not unusual for the page to look fine when you make the change in author mode, but then when you submit the change and go to read mode, it changes, and so you have to go to author mode, edit, submit, go to read mode, repeat, until you get it right.

But there is a simpler way. After you have made your change but before you submit it, you can see how the page will look in Read Mode by picking “Preview” under the Page View menu.

Making Collapsible Content with jQuery

Share

One thing that you might want to do if you have very long lists of content is make them collapse or not display until the user clicks on a trigger that makes the content appear. A good example of this is the ITCS Service Catalog. If the page displayed all the links at once, the page gets very long, so instead we displayed the categories, then reveal the links when the user clicks on the category name.

To do this, we use jQuery, an open source JavaScript library.  Since jQuery is loaded on every CommonSpot page, all of its library functions are readily available for you to use at any time.  This tutorial only some of the most simple tasks that  jQuery is capable of. You can read about everything it can do at the jQuery Documentation site.

Setting up the HTML Content

The first step to cover is to create the list without hiding it. This is important, because if you hide it by default, then users who have disabled JavaScript will not be able to see the links that you are creating. I made a page with the list of links that are in the tool bar on the ECU Homepage, and some text that will be the trigger for displaying and hiding the links. The HTML for the content is this:

<p>Click Here to Toggle Links</p>
<ul id="hideableContent">
 <li><a href="http://blackboard.ecu.edu">Blackboard</a></li>
 <li><a href="http://help.ecu.edu">Help Desk</a></li>
 <li><a href="http://pirateid.ecu.edu">PirateId</a></li>
 <li><a href="/csecu/links_index.cfm">A to Z Index</a></li>
 <li><a href="/banner">Banner</a></li>
 <li><a href="/cs-ecu/email_phone.cfm">Email/Phone</a></li>
 <li><a href="http://onestop.ecu.edu">OneStop</a></li>
 <li><a href="/cs-ecu/calendar.cfm">Calendar</a></li>
 <li><a href="/admin/accessibility/">Accessibility</a></li>
</ul>

The next step is to hide the links when the page loads. What we want to hide is the list element that starts with <ul id=”hideableContent”> and ends with </ul>. The id that I have given this list is important, as that will let us change this list but not others on the page that we don’t want to hide.

Selecting

So to hide this, we will use jQuery. To explain simply what jQuery does: it selects (or finds) an element or elements and then usually performs some tasks on what is selected. The code follows this pattern:

$("[what you want to select]").[what you want to do to what is selected];

We want to select the ul with the id hideableContent, so the specific code is this:

$("#hideableContent").toggle();

The string “#hideableContent” tells the selector what to look for and is made up of two parts: the pound sign, and hideableContent.

The #hideableContent select the element with an id of hideableContent. This is case sensitive, so make sure you match the id exactly.  Also, make sure that you use an id only once per page.  If you use the same id value more than once unpredictable things will happen.  The pound sign tells the selector that the next word is an id. The toggle() function hides what is visible and shows what is hidden. Since the content is visible when the page loads, this code will hide it.

You can also use a dot and the class name to select everything that has a specific class (e.g. $(‘.collapsible) would select everything that has a class of collapsible).

You can also select html tags by using just the tag with no dot or pound sign (e.g. $(‘ul’) would select every unordered list in the document).

You can select tags that are within other tags by putting them together with a space (e.g. $(‘ul li’) would select all the list items within all the unordered lists on a page).

And finally (actually this is a far from comprehensive list, but it is all I’m going to cover today) you can limit the selection to tags that have a class or id (e.g. $(‘ul.collapsible’) would select all unordered lists that have a class of collapsible. These are just a small part of the selectors. Can read about all the other options at the jQuery Documentation site.

The ready() Function

To get our code to work, the page needs to execute it. This is done by using the ready() function. It looks like this:

$(document).ready ( function () {
     [Code we want to execute goes here]
});

This is a function that is run automatically when the page is “ready”, i.e. when the DOM (Document Object Model) hierarchy has been fully constructed. So, to hide the list on page load, first you would put a JavaScript Include element on your page. Then you have two options. You could put the JavaScript code in the Script Input box, like this:

Or, you can save the code in a separate file, upload it via the tools page, and then include the location of the file, as here, where I have saved the code in file collapse-version1.js and uploaded it via my tools page. This seems the better option to me, because to update the page, all I have to do is make the changes to my JavaScript file and upload it, overwriting the previous version.

When the page reloads, you can see that the list is now hidden.

Activating the Toggle

The last step is to make the “Click Here to Toggle Links” active. I’m using a text hyperlink, but you can use anything you want, for example a button or an image. It just has to be selectable.

So first we will make that text a link, but instead of linking to a page, we set the link to be “#”. So that part of the HTML code will now look like this:

<p><a href="#">Click Here to Toggle Links</a></p>

Next, we want to add an id to the link, so that we can select it when it is clicked on. The Rich Text Editor in CommonSpot will not let you do this without switching to HTML view, so click on the button. It will show this:

Change the <a href=”#”> to <a href=”#” id=”toggleLink”>, then click the HTML button again and the Finish button.
The only thing left to do is write the jQuery code that will actually do the toggle. To do this, first you select the link, like this:

$("#toggleLink")

and add the click() function and the start of the code for the click function:

$('#toggleLink').click( function() {
     [toggling code will go here]
});

All this code does is tell jQuery to select the link and then do something when it is clicked on.
The code that will actually toggle the list is the same as we did when the document is ready:

$('#hideableContent').toggle();

So the whole JavaScript code will be:

$(document).ready( function() {
     $('#hideableContent').toggle();
     $('#toggleLink').click( function() {
          $('#hideableContent').toggle();
     });
});

And that is it. Your page should now work like this one.

As I said, this just a tiny example of what you can do. The jQuery documents cover it all. If you have any questions, feel free to ask and I will do my best to find an answer.