Javascript
It is possible to add custom Javascript to your site.
NOTE: You must have Site Administrator rights to add custom Javascript.
To add custom Javascript
- Click Configuration in the black admin toolbar, then 5. Custom CSS and Javascript under KU Settings.
- Type in any javascript you would like to run to the Additional/custom javascript field
NOTE: jQuery is installed by default on the server; to use it, follow this example:
$kuj(document).ready(function() {
$kuj('.alert').click(function(){
alert('some alert');
});
});
Adding an external javascript class
You can also refer to an external javascript file by adding it to the Other <head> HTML field, and sourcing your script directly.
Example:
<script type="//ajax.googleapis.com/ajax/libs/webfont/1.0.28/webfont.js"></script>
Common Javascript Requests
Accordions
HTML:
<h3 class="head"><a href="#">Title 1</a></h3> <div class="accordion">Number 1 contents</div> <h3 class="head"><a href="#">Title 2</a></h3> <div class="accordion">Number 2 contents</div> <h3 class="head"><a href="#">Title 3</a></h3> <div class="accordion">Number 3 contents</div>
Code:
$kuj(document).ready(function() { $kuj('.accordion').hide(); $kuj('.head').click(function() { $kuj(this).next('.accordion').toggle('fast'); return false; }); });
This code here is primarily for documentation purposes. For ease-of-use we have incorporated this into the CMS. Click here for details.
Show/Hide (toggle)
HTML:
<select id="SelectBoxId"> <option>1</option> <option>2</option> <option>ID With Multiple Words</option </select> <div id="1" class="hideme">Option 1 Selected</div> <div id="2" class="hideme">Option 2 Selected</div> <div id="ID_With_Multiple_Words" class="hideme">Option 3 Selected</div>
Code:
$kuj(document).ready(function() {
var id='';
$kuj('.hideme').hide();
id = $kuj('#SelectBoxId').val().split(' ').join('_');
$kuj('#'+ id).show();
$kuj('#SelectBoxId').change(function() {
$kuj('.hideme').hide();
id = $kuj(this).val().split(' ').join('_');
$kuj('#'+ id).show();
});
});
Example: