Working with Javascript

As a site administrator you have the ability to add custom javascript to your site.  There are two ways to do this.  Both are found by first clicking "Configuration"->"KU Settings"->"Site Settings", then scrolling to the bottom.

Manually adding additional/custom javascript

In the "Additional/custom javascript" box, you can type any javascript you would like to run.  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 editing the "Other <head> HTML" section, and sourcing your script directly.  An example of this might be:

<script type="//ajax.googleapis.com/ajax/libs/webfont/1.0.28/webfont.js"></script>

Common Javascript Requests

Accordions

HTML:

        <h3 class="head"><href="#">Title 1</a></h3>
        <div class="accordion">Number 1 contents</div>
        <h3 class="head"><href="#">Title 2</a></h3>
        <div class="accordion">Number 2 contents</div>
        <h3 class="head"><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:

Selected Option 1
Selected Option 2
Selected Option 3

Training Calendar
CMS Help

If you are experiencing a critical issue with your live website, please contact the IT Customer Service Center at 864-8080 or itcsc@ku.edu.

For questions on CMS policy, look & feel, and all other issues, please visit our help page.

Please contact web services at 864-6415 or webservices@ku.edu for help with your site

Online help can be found under the How-To's section of this website.