Custom Code HowTo - jQuery

This HowTo shows briefly how to add custom jQuery stuff, which is not included in Tiki ( sorry guys, we cannot include all 😉 ).

LavaLamp jQuery Plugin Example

To ensure the main jQuery JavaScript is loaded before any custom jQuery scripts that you want to add to your site and to ensure that they will always load (dependencies) and work properly, you should use the Tiki's Smarty jq block and get the scripts nested using the jQuery $.getScript() function. Then just put your desired jQuery code inside. For example you can put this in the Admin > Look & Feel > General Layout > "Custom End of <body> Code" textarea:

Copy to clipboard
{jq}
$.getScript('files/custom/jquery.easing.min.js', function() {
  $.getScript('files/custom/jquery.lavalamp.min.js', function() {
    $(".cssmenu_horiz").lavaLamp({
                                    fx: "backout",
                                    speed: 800
    });
  });
});
{/jq}


Note: for Tiki versions prior to Tiki 6 use $jq prefix instead of just $.

Assuming that you have saved the files in files/custom/jquery.easing.min.js and files/custom/jquery.easing.min.js, you have enabled jQuery and that you want to apply the LavaLamp "backout" effect on your top horizontal CSS menu the code above is all you should need, along with the CSS rules from lavalamp_test.css as required for the hover background image, etc. For more information about the The LavaLamp jQuery Plugin go to http://nixbox.com/projects/jquery-lavalamp/demos.php .

For comparison, this is from the original LavaLamp demo page:

Copy to clipboard
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
    <script type="text/javascript" src="jquery.easing.min.js"></script>
    <script type="text/javascript" src="jquery.lavalamp.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#1, #2, #3").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>


Related

You can create styles/custom.js or styles/yourtheme/custom.js and that should get included automatically. You may need to empty your Tiki cache.