Difference: ScrollBoxAddOn (1 vs. 2)
Revision 22018-07-06 - TWikiContributor
Scroll Box Add-on<-- Contributions to this add-on are appreciated. Please update the add-on page at http://twiki.org/cgi-bin/view/Plugins/ScrollBoxAddOn | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| < < | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| > > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Page contents
Add scroll boxes, image rotation and static boxes to TWiki pages
IntroductionUse this add-on to create nice looking text scroll boxes, logo rolls and boxes with images that get replaced in regular intervals. Scrolling stops if you hover the mouse pointer over the scroll area.
This add-on uses CSS and JavaScript. It falls back to show initial content in case JavaScript is not available. All code is included, e.g. there are no external dependencies. The Scroll Box Add-on is inspired by the scrolling content script The twiki.org redesign of December 2010 added a logo roll to the homepage. This add-on was created based on that work.
UsageThere are two options to create scroll boxes:
Scroll Box Using INCLUDE
Create scroll boxes in TWiki pages by including two named sections defined in the ScrollBoxAddOn topic, called %INCLUDE{ "%SYSTEMWEB%.ScrollBoxAddOn" section="scroll_box_engine" }%
%INCLUDE{ "%SYSTEMWEB%.ScrollBoxAddOn" section="scroll_box"
name="must_be_unique"
title="This is a test"
content="TWiki keeps getting more and more useful."
delay="100"
vstep="1"
width="400"
height="30"
}%
The
The
Scroll Box Using HTML & CSSYou can define your own style and create your own scroll box. Example:
%INCLUDE{ "%SYSTEMWEB%.ScrollBoxAddOn" section="scroll_box_engine" }% <!-- once per page -->
<div id="myOwnBoxContainer">
<div id="myOwnBoxContent">
(put content here)
</div><!-- id="myOwnBoxContent" -->
</div><!-- id="myOwnBoxContainer" -->
<script type="text/javascript">
initScrollBox( 'myOwnBoxContainer', 100, 1, 200, 400 );
</script>
The first parameter of
Static Box Using INCLUDE
Create static boxes in TWiki pages by including two named sections defined in the ScrollBoxAddOn topic, called %INCLUDE{ "%SYSTEMWEB%.ScrollBoxAddOn" section="scroll_box_engine" }%
%INCLUDE{ "%SYSTEMWEB%.ScrollBoxAddOn" section="static_box"
title="Nice box"
content="Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
width="400"
height="225"
}%
The
The
Static Box Using 2 INCLUDEsThis is an alternative to the previous example. The box is split up into two INCLUDEs with a "static_box_start" section, the box content, and a "static_box_end" section. Example: %INCLUDE{ "%SYSTEMWEB%.ScrollBoxAddOn" section="scroll_box_engine" }%
%INCLUDE{ "%SYSTEMWEB%.ScrollBoxAddOn" section="static_box_start"
title="Nice box"
width="400"
height="225"
}%
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
%INCLUDE{ "%SYSTEMWEB%.ScrollBoxAddOn" section="static_box_end" }%
The
The
The
Named sections
This section defines the named sections <--=========================================================
Examples
Text scroll demoThis example shows a box that scrolls text in one pixel increments. How it works: We place the text in a scrollable canvas that is 300 pixels wide. The text is justified left and right as specified in the style sheet of the scroll box content. We tell the scroll box to show a container 300 pixels wide and 150 pixels high. That is, we only see part of the canvas. We move the canvas up 1 pixel at a time and to wait 100 milliseconds between steps, e.g. we get the impression of smoothly scrolling text in the container.
Logo roll demoThis example shows a logo roll that changes every 2 seconds. How it works: We have a set of logos that all have the same height of 30 pixels:
We place the logos in a scrollable canvas that is 300 pixels wide. The logos wrap around; they are justified left and right as specified in the style sheet of the scroll box content. We tell the scroll box to step by 30 pixels at a time, e.g. we will cycle through the logos row by row because the icons are 30 pixels high. Note: It is important to specify the width and height of the images, or scrolling might not work on some browsers. Browsers need to know the total scrollable area before all images are loaded.
Image swap demoThis example shows a box containing an image that get replaced every 3 seconds. How it works: The images are 300 pixels wide and 225 pixels high. We place the images in a scrollable canvas that is 300 pixels wide, e.g. one image fits on each "line". In other words, the images are stacked on top of each other. We tell the scroll box to step by 225 pixels at a time, e.g. the same as the image height. This results in cycling through the images one by one. Note: It is important to specify the width and height of the images, or scrolling might not work on some browsers. Browsers need to know the total scrollable area before all images are loaded.
Static box demo
Installation InstructionsNote: You do not need to install anything on the browser to use this add-on. The following instructions are for the administrator who installs the add-on on the TWiki server. <--/twistyPlugin twikiMakeVisibleInline-->
<--/twistyPlugin-->
Add-On Info
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin twikiMakeVisibleInline--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin-->
Related Topic: TWikiAddOns
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Revision 12013-10-11 - TWikiContributor
Scroll Box Add-on<-- Contributions to this add-on are appreciated. Please update the add-on page at http://twiki.org/cgi-bin/view/Plugins/ScrollBoxAddOn
IntroductionUse this add-on to create nice looking text scroll boxes, logo rolls and boxes with images that get replaced in regular intervals. Scrolling stops if you hover the mouse pointer over the scroll area.
This add-on uses CSS and JavaScript. It falls back to show initial content in case JavaScript is not available. All code is included, e.g. there are no external dependencies. The Scroll Box Add-on is inspired by the scrolling content script The twiki.org redesign of December 2010 added a logo roll to the homepage. This add-on was created based on that work.
UsageThere are two options to create scroll boxes:
Scroll Box Using INCLUDE
Create scroll boxes in TWiki pages by including two named sections defined in the ScrollBoxAddOn topic, called %INCLUDE{ "%SYSTEMWEB%.ScrollBoxAddOn" section="scroll_box_engine" }%
%INCLUDE{ "%SYSTEMWEB%.ScrollBoxAddOn" section="scroll_box"
name="must_be_unique"
title="This is a test"
content="TWiki keeps getting more and more useful."
delay="100"
vstep="1"
width="400"
height="30"
}%
The
The
Scroll Box Using HTML & CSSYou can define your own style and create your own scroll box. Example:
%INCLUDE{ "%SYSTEMWEB%.ScrollBoxAddOn" section="scroll_box_engine" }% <!-- once per page -->
<div id="myOwnBoxContainer">
<div id="myOwnBoxContent">
(put content here)
</div><!-- id="myOwnBoxContent" -->
</div><!-- id="myOwnBoxContainer" -->
<script type="text/javascript">
initScrollBox( 'myOwnBoxContainer', 100, 1, 200, 400 );
</script>
The first parameter of
Static Box Using INCLUDE
Create static boxes in TWiki pages by including two named sections defined in the ScrollBoxAddOn topic, called %INCLUDE{ "%SYSTEMWEB%.ScrollBoxAddOn" section="scroll_box_engine" }%
%INCLUDE{ "%SYSTEMWEB%.ScrollBoxAddOn" section="static_box"
title="Nice box"
content="Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
width="400"
height="225"
}%
The
The
Static Box Using 2 INCLUDEsThis is an alternative to the previous example. The box is split up into two INCLUDEs with a "static_box_start" section, the box content, and a "static_box_end" section. Example: %INCLUDE{ "%SYSTEMWEB%.ScrollBoxAddOn" section="scroll_box_engine" }%
%INCLUDE{ "%SYSTEMWEB%.ScrollBoxAddOn" section="static_box_start"
title="Nice box"
width="400"
height="225"
}%
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
%INCLUDE{ "%SYSTEMWEB%.ScrollBoxAddOn" section="static_box_end" }%
The
The
The
Named sections
This section defines the named sections <--=========================================================
Examples
Text scroll demoThis example shows a box that scrolls text in one pixel increments. How it works: We place the text in a scrollable canvas that is 300 pixels wide. The text is justified left and right as specified in the style sheet of the scroll box content. We tell the scroll box to show a container 300 pixels wide and 150 pixels high. That is, we only see part of the canvas. We move the canvas up 1 pixel at a time and to wait 100 milliseconds between steps, e.g. we get the impression of smoothly scrolling text in the container.
Logo roll demoThis example shows a logo roll that changes every 2 seconds. How it works: We have a set of logos that all have the same height of 30 pixels:
We place the logos in a scrollable canvas that is 300 pixels wide. The logos wrap around; they are justified left and right as specified in the style sheet of the scroll box content. We tell the scroll box to step by 30 pixels at a time, e.g. we will cycle through the logos row by row because the icons are 30 pixels high. Note: It is important to specify the width and height of the images, or scrolling might not work on some browsers. Browsers need to know the total scrollable area before all images are loaded.
Image swap demoThis example shows a box containing an image that get replaced every 3 seconds. How it works: The images are 300 pixels wide and 225 pixels high. We place the images in a scrollable canvas that is 300 pixels wide, e.g. one image fits on each "line". In other words, the images are stacked on top of each other. We tell the scroll box to step by 225 pixels at a time, e.g. the same as the image height. This results in cycling through the images one by one. Note: It is important to specify the width and height of the images, or scrolling might not work on some browsers. Browsers need to know the total scrollable area before all images are loaded.
Static box demo
Installation InstructionsNote: You do not need to install anything on the browser to use this add-on. The following instructions are for the administrator who installs the add-on on the TWiki server. <--/twistyPlugin twikiMakeVisibleInline-->
<--/twistyPlugin-->
Add-On Info
<--/twistyPlugin twikiMakeVisibleInline-->
<--/twistyPlugin-->
Related Topic: TWikiAddOns
|
Copyright © 1999-2025 by the contributing authors. All material on this collaboration platform is the property of the contributing authors. Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.ScrollBoxAddOn.