Tag Archives: Tutorial Tuesday

Tuesday Tutorial: Multiple Tab Element

2 Replies
Share

Today’s post is about the relatively new  Tabbed Interface Element.  This element let’s you easily make a multiple tab display on any of your CommonSpot pages.  An example of the element can be seen here: http://www.ecu.edu/cs-training/hallwa/Multiple-Tabs.cfm.

To put the element on a page, click the “Click to insert new element” link on your page, then choose “Tabbed Interface Element” listed under Custom Elements.  Then click the “Click here to defined the custom element data” link to open the popup  window that will let you put your content in the element.

Choose how many tabs you want to have, 2, 3, or 4.  Pick the background color for the active and inactive tabs.  With a purple background, the text will be gold, with a gold or white background, the text will be purple and with a gray background, the text will be white.

multi-tabs_0

Then click on the “Tab One” tab to define the content of your first tab.  You must have a Tab Label (the text that will appear on the tab) and content.  Then do the same for each of the other tabs.  You only have to complete as many tabs as you specified that you wanted.  You can put content in more tabs than you specified in the first step, but the element will only display the content in the number that you specified.

multi-tabs_1

Click Finish when all your desired tabs are populated.  The element will write all the CSS and JavaScript for you to display your content.  And if the user has a browser that does not use JavaScript, the element will still display all the content in your element, displaying them down the page in order.

As always, check out the ITCS Learning Center for more information about CommonSpot and other computer topics.

Tuesday Tutorial: YouTube Custom Element

5 Replies
Share

The YouTube Custom Element lets you easily insert a YouTube video into any CommonSpot page. An example of this can be seen at http://wwww.ecu.edu/cs-training/hallwa/youtube.cfm. To use the element, you will just need the URL of a YouTube video like this video of the new Trustees Fountain: http://www.youtube.com/watch?v=d3LVYTbg2H8&feature=player_embedded.

  1. Insert a YouTube Custom Element (listed under Custom Elements) on your page.
  2. Use the “Click here to define the custom element data” link to bring up the data dialogyoutube
  3. Paste the entire YouTube URL into the “YouTube URL” box.
  4. If you want a list of related videos to appear when your video is finished, check the “Include Related Videos” box.
  5. If you want a border to display around you video, check the “Include Border” box.
  6. Check the “Play in HD” if you want your video to play in high definition, if an HD version is available
  7. Check the “Use Purple Skin” if you want your video to use the official ECU purple for the border and control bar.
  8. Pick the size you would like the video to display in. The options are 320 pixels wide by 285 pixels high, 500×315, 580×360, and 660×405.
  9. Click Finish and the video will display on your page.

As a word of explanation, while in author mode, the video will display a small amount below where it will in read mode, because we shifted it down in author mode to see the element control. Also, the video not appear when you mouse over an authoring control anywhere on the page. This is normal and makes it easier to get to the advanced settings on the control.

As always, let me know if you have any suggestions or questions.

Tutorial Tuesday – Inaugural Edition – Remote Script

1 Reply
Share

Every Tuesday, I will post a new tutorial that I hope will help you get more out of CommonSpot.

Remote Script

We have created a new Custom Element called Remote Script.  The element lets you do two things:

  1. Upload your own CFM files without having to wait for ITCS to approve them and move them to the live server.
  2. Upload raw HTML snippet files and have them imported directly into a CommonSpot page.

Let me explain case #2 first:

CommonSpot has always had a built in element for including HTML.  However, maintaining these elements has been somewhat difficult for many users.  With this new element, the process is simplified, and updating the file is easier than ever.

First, create your HTML snippet in DreamWeaver, Microsoft Expression Web (free for download at the Download Center for all faculty and staff), or your favorite editor.  Since this snippet will end up in a larger HTML file, do not include the html, head, body or other like tags.  Then upload your document via your tools file.  The URL, which you will need in a later step, will be http://www.ecu.edu/cs-[site]/[subsite]/customcf/[filename.html].  Go ahead and open it to make sure that it works and everything looks ok.

Then add a Remote Script element (listed under Custom Elements) to the CommonSpot page.  Then paste the URL, except for the “http://”, in the Remote URL text box.  Click Finish, and you are done.

Anytime you want to update your file, just overwrite the existing HTML file and the CommonSpot page will change automatically.


Uploading your own ColdFusion scripts

If you want to upload CFM files, first you need to send an email to hallwa at ecu.edu so that we grant you the file permissions that you will need.  The place where you will load the files is actually on a different web server than the CommonSpot server.  You would then be allowed to freely upload CFM files, and then you can use the Remote Script element, in the same way as above, to import the output of those files into your CommonSpot site.

If you have any questions or comments about this element or any elements that you would like to see developed in the future, please leave a comment.