Loading...
 
Skip to main content

History: Custom Code HowTo - jQuery

View published page

Source of version: 15 (current)

Copy to clipboard
            !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:
{CODE(colors="javascript")}
{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}
{CODE}

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:
{CODE()}
    <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>
{CODE}


! 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.