Table of contents
| Table of Contents | Current Page Views:
| |
Introduction
It's designed to fade any element inside a container in and out. These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.
Known Issues
This jQuery plugin relies heavily on CSS styling to proper presentation. I have not yet decided on the best approach to this without limiting the functionality of the template. If anyone has any suggestions please let me know. Other than that I will continue to look at this and publish a new version if I come up with anything.
All discussion of this template should be directed to this thread on the forums.
History
| Version | Date | Author | Description |
| 1.0 | 09/15/2009 | rberinger | Initial release |
Requirements
- This template has only been tested on MindTouch Core (Lyons)
How do I install it?
- Create a template, call it "Template:TemplateName" (or rename as you desire). You must have UNSAFECONTENT permission for this to work.
- Create a "DekiScript" block on the template page (use the "Style" menu in the editor")
- Copy the code from the end of this page and paste it into the DekiScript block. To copy, click "expand source", then mouse over the top right corner of the source code, and click the "view source" button. This will pop up a window with the source code. Select all, then copy to clipboard.
- Make sure there isn't an extra blank paragraph after the DekiScript block! Do this every time you edit!!!
- Save.
A quick note about the examples on this page
For all the examples on this page, the code is shown before the working example. The code is shown with the syntax extension, and looks like this:
InnerFade(id or class: str?, options: map?, styles: str?);
This means that the actual code on the page should be enclosed in a DekiScript block. If you want to copy the code from this page, then use the same procedure as described in steps 2-4 above.
How do I use it?
See examples... and/or the jQuery Innerfade website for options and ideas
Arguments
| Name | Type | Default | Description |
| id | str | n/a | The id or class of the parent element |
| options | map | {animationtype: 'slide', speed: 2000, timeout: 5000, type: 'sequence', containerheight: 'auto'} | See table below |
| styles | str | n/a | Any valid CSS styling. (This is almost a requirement) |
Examples
Example: This example cycle thru some linked images to various search engines. Of course this could just as easily become a photo slide show.
InnerFade{id: '#searchlinks',
options:{containerheight:'90px', animationtype: 'slide', timeout: 3000},
styles: 'ul#searchlinks{padding: 2em;list-style-type:none;}a.external {background-image: none;padding: 0px;}'
};
var files = wiki.getpage(page.path).files;
<ul id="searchlinks">
foreach(var f in files) {
<li>
<a href=(f.description)>
<img src=(f.uri) />
</a>
</li>
}
</ul>
Result: The images are clickable!
Example of a news or text ticker:
InnerFade{id: '#news',
options:{animationtype: 'slide', timeout: 3000},
styles: 'ul#news{border: 1px solid #ccc;padding: 2em;background: yellow;list-style-type:none;}'
};
<ul id="news">
<li>'This is News item 1'</li>
<li>'This is News item 2'</li>
<li>'This is News item 3'</li>
</ul>
Result:
- This is News item 1
- This is News item 2
- This is News item 3
InnerFade{id: '.fade',
options:{containerheight:'1.5em', animationtype: 'fade', timeout: 3000},
styles: '.fade p{margin-bottom: 2em; text-align: center; width: 100%; background: green;}'
};
<div class="fade">
<p> 1; </p>
<p> 2; </p>
<p> 3; </p>
<p> 4; </p>
<p> 5; </p>
</div>
<div class="fade">
<p> 'A'; </p>
<p> 'B'; </p>
<p> 'C'; </p>
<p> 'D'; </p>
</div>
Result:
1
2
3
4
5
A
B
C
D
Credits/Special Thanks
- jQuery Team
- InnerFade creator
Template/Extension Source Code
/*
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>
Disclaimers
Any License requirements per: http://medienfreunde.com/deutsch/weblog/aus_der_praxis.html?nid=162
- Was this page helpful?
- Tag page
- What links here
Files 3
| File | Version | Size | Modified | |
|---|---|---|---|---|
| ||||
| ||||
| ||||
| Images 3 | ||
|---|---|---|
 http://www.bing.combing.jpg |  http://www.google.comgoogle.jpg |  http://www.yahoo.comyahoo.jpg |
Copyright © 2011 MindTouch, Inc. Powered by