Search:
Template:MindTouch > ToBeDeveloped > Template:InnerFade

Template:InnerFade

    Table of contents
    No headers
    /*
    
    Author: rberinger
    jQuery Author Website: http://medienfreunde.com/deutsch/weblog/aus_der_praxis.html?nid=162
    Versio: 1.0
    
    Usage:
    InnerFade(Id or Class: str?, options: map? , Styles: str?)
    
    Parameters:
    id: Must start with # for id or . for a class
    options: a map of values as defined below
    styles: any valid css styling
    
    Options:
    animationtype: 'fade' or 'slide'
    speed: Fade or Slide Speed in milliseconds or (slow, normal, fast)
    timeout: Time between the fades in milliseconds (2000 = 2secs)
    type: 'Sequence', 'Random' or 'Random_start' (then will continue in sequence) 
    containerheight: height of the containing element in any css-height-value
    
    
    EXAMPLE:
    InnerFade{id: '#news', 
    options:{animationtype: 'fade', 
    timeout: 3000}, 
    styles: 'ul#news{border: 1px solid #ccc;padding: 2em;background: yellow;list-style-type:none;}'};
    */
    
    
    
    var id = ($id ?? $0 ?? ''); /* If start with # then id if start with . then class */
    var opts = ($options ?? $1 ?? {animationtype: 'slide', speed: 2000, timeout: 5000, type: 'sequence', containerheight: 'auto'});
    var css = ($styles ?? $2 ?? '');
    var myOptions = {animationtype: 'slide', speed: 2000, timeout: 5000, type: 'sequence', containerheight: 'auto'};
    
    // Append or change the passed in options from the defaults
    let myOptions ..= opts;
    
    <html><head>
    <script type="text/javascript" src="http://medienfreunde.com/lab/innerfade/js/jquery.js"></script> 
    <script type="text/javascript" src="http://medienfreunde.com/lab/innerfade/js/jquery.innerfade.js"></script> 
    <script type="text/javascript"> "
    $(document).ready(
    function(){
    $('" ..id .."').innerfade("..JSON.emit(myOptions)..");
    });
    "</script>
    
    // I'm not quite sure yet how to best handle the CSS
    <style type="text/css">
    css;
    </style>
    
    </head></html>
    

    Files (0)

     

    Comments (0)

    You must login to post a comment.