Published
on
March 2, 2010
| 2,026 views
| 0 followers
members are following updates on this item.
Not to worry. If you'd like to share a box with the same html content on 25 pages or more, updating that box would be dreadfully painful. This is why updating a single JavaScript file is a quicker alternative.
Our example will include a simple box having a title (Heading 2) with a paragraph (Paragraph).
First, we'll build our box in html using the HTML widget:
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In diam tortor, vehicula nec faucibus a, ultricies in velit. Suspendisse interdum posuere dolor, nec molestie nisl venenatis mollis.</p>
Next, we'll need to give this box a class name. This will be useful for us when building our javascript file. Let's call this box 'box-testing'.
Let's start building the javascript file:
window.addEvent('domready', function(){
if( $$('.box-testing') ){
var content_include = '<h2>Heading</h2>';
content_include = '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>';
$$('.box-testing').each(function(item){
item.set('html',content_include);
});
}
});
Save this file (include.js) and upload it anywhere in the documents area. Preferably create a new folder called JavaScript and upload your JS files in there. Once uploaded, reference the file in the footer area.
<div><script src="/download/documents/javascript/includejs" type="text/javascript"></script></div>
Go back to the HTML widget that you created, but now use the configuration widget to give the box a class name. In the appearance section of the HTML widget configuration, you'll find a class textarea:
Type in the class name we gave the box which is 'box-testing'. Hard refresh (press CTRL + F5) and you should be seeing your work.
Now all you need to do is type in the class in any HTML widget (without putting content) and your box will appear.
Page Options