2.5: Modify the site in JavaScript

2.6: Using custom variables in your CSS →

← 2.4: Host graphics and other ressource files

Using JavaScript within your pages can be a convenient way to extend your video site with new features or to modify the DOM of the site.

Writing in JavaScript works in a way very similar to CSS: You can change it under Design → JavaScript and just as is the case with stylesheets, scripts are made public immediately after clicking Save:

JavaScript: Using Prototype

23 Video uses the Prototype JavaScript framework as the core of scripting all pages. This provides a solid platform for using JavaScript across browsers in order to use AJAX, extend the DOM or generally increase productivity in using JavaScript.

In general, you should refer to the API documentation for information on using Prototype − but a few helpful features include:

Selecting and extending an element by id using $():

var sidebar = $('sidebar');

Selecting and iterating items by css selector using $$():

$$('.layout-block).each(function(block){ 
    // Ignore empty block
    if(block.hasClassName('layout-block-empty')) return;
    // Add a new element to the block
    block.appendChild(
      new Element('div', {className:'new-block})
        .update('This is a new block')
      )
  });

Using AJAX to read from the API:

document.observe('dom:loaded', function(){
    // Search for tags contaiing 'test'
    new Ajax.Request('/api/tag/list', {
        method:'post', 
        postBody:$H({search:'reboot', raw:1, format:'json'}).toQueryString(), 
        onSuccess:function(r){
          // Read JSON data
          var data = r.responseText.evalJSON();
          // Loop through tags
          data.tags.each(function(item){
              // ... and insert each as a link in the sidebar
              var a = new Element('a', {href:item.url}).update(item.tag);
              $('sidebar').appendChild(a);
            });
        }
    });
  });

JavaScript: Using other frameworks such as jQuery

If you prefer to use other JavaScript frameworks other Prototype, this is easily achieved by insert a new HTML Block in the <head> conatiner under Design → Layout. For example, if you want to use YUI from Google Libraries API, you might include a block with this HTML:

<script 
  src="http://ajax.googleapis.com/ajax/libs/yui/2.8.1/build/yuiloader/yuiloader-min.js">
</script>

There is a single caveat through: Prototype is included in all pages of 23 Video, and functionality relies on $() being mapped to Prototype. This means that you won't be able to use other libraries using $ out of the box − specifically jQuery.

However, this can be solved easily in the case of jQuery, using jQuery.noConflict():

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 <script>
   jQuery.noConflict();
 </script>

Now, you can use Protype with $() and jQuery with $(jQuery):

 // Update in jQuery:
 $('#sidebar').update('Sidebar content');

 // Update in Prototype:
 $$('#sidebar').each(function(el){el.update('Sidebar content')});

JavaScript: Modifying DOM

The examples above show an important part of JavaScript in web browsers: The ability to restructure an HTML document by modifying the DOM. The documentation for Prototype's Element goes over the possibilities in this approach.

Generally though, the most important point in relation to building themes in 23 Video is that DOM scripting allows you to add in new content, modify the structure of content, or to change the properties of an element.

Appending new content to the document or page:

var newLink = new Element('a', {href:'http://www.23video.com'});
var newImage = new Element('img', {src:'http://actvisually.com/company/2777/logo/3/23.png'});
newLink.appendChild(newImage);
$('header').appendChild(newLink);

Changing content in a part of the document or page:

$('header').innerHTML = '<a href="http://www.23video.com">
  <img src="http://actvisually.com/company/2777/logo/3/23.png" /></a>';

Modifying properties of an element in document or page:

$('header').addClassName('custom-header');
$('header').setStyle({borderTop:'1px solid red'});
$('footer').hide();

JavaScript: Using the `visual` object

visual is a JavaScript object available in JavaScript in all pages in 23 Video, which gives access to structured data about the page being displayed. For example, if you display a page including a list of tags, visual.tags wil be an array of tag objects with specific information about the tags being displayed.

The visual object always includes three properties with contextual information about the video site and specific page being displayed:

Object	Content	Examples
`visual.site`	Information about the site in question. This information will always be the same across the site.	`visual.site.domain` `visual.site.site_id` `visual.site.site_name`
`visual.page`	information about the page being displayed. This data will change for every page on the video site.	`visual.page.title` `visual.page.embed_code` `visual.page.name`
`visual.pageuser`	Whenever the data on a page relates to a specific user, this object contains information about that user. When the page data isn't related to a single user, `visual.pageuser.user_id = 0`	`visual.pageuser.user_id` `visual.pageuser.display_name`

Further data in the JavaScript object changes from page to page depending in the content in question. For example, if a page contains either a set of thumbnails or plays a video, visual.photos will be available. If a page list channels or albums, visual.albums is in place.

The data contained in each object mirrors data from the API so more information about each object is available from the API documentation: