Difference between revisions of "News Ticker Javascript"

From Ittichai Chammavanijakul's Wiki
Jump to navigation Jump to search
(Created page with "Reference: http://www.mioplanet.com/rsc/newsticker_javascript.htm # Download the javascript from http://www.mioplanet.com/rsc/webticker_lib.zip. # Unzip and upload only the web...")
 
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
Reference: http://www.mioplanet.com/rsc/newsticker_javascript.htm
 
Reference: http://www.mioplanet.com/rsc/newsticker_javascript.htm
  
# Download the javascript from http://www.mioplanet.com/rsc/webticker_lib.zip.
+
== Configuration ==
 +
* Download the javascript from http://www.mioplanet.com/rsc/webticker_lib.zip.
  
# Unzip and upload only the webticker_lib.js to the Shared Components > Static Files of your application.
+
* Unzip and upload only the webticker_lib.js to the Shared Components > Static Files of your application.
  
# Post the following codes in any HTML region.
+
* Post the following codes in any HTML region.
  
 
<pre>
 
<pre>
Line 17: Line 18:
 
</pre>
 
</pre>
  
 +
* The DIV ID must be '''TICKER''' because that is being referred to in the Javascript. If you plan to change it, you have to do it in both places.
  
# The DIV ID must be '''TICKER''' because that is being referred to in the Javascript. If you plan to change it, you have to do it in both places.
+
* Any text contents within the DIV tag will be displayed. Feel free to modify to suite your needs.
  
# Any text contents within the DIV tag will be displayed. Feel free to modify to suite your needs.
+
* The attributes of the ticker are in the JS script. The following are the default values.
 
 
# The attributes of the ticker are in the JS script. The following are the default values.
 
  
 
<pre>
 
<pre>
Line 30: Line 30:
 
TICKER_PAUSED = false;
 
TICKER_PAUSED = false;
 
</pre>
 
</pre>
 +
 +
== Demo in APEX ==
 +
http://apex.oracle.com/pls/apex/f?p=57043:5
 +
 +
[[Category:APEX_Sample_Applications]]

Latest revision as of 05:16, 7 March 2011

Reference: http://www.mioplanet.com/rsc/newsticker_javascript.htm

Configuration

  • Unzip and upload only the webticker_lib.js to the Shared Components > Static Files of your application.
  • Post the following codes in any HTML region.
<DIV ID="TICKER" STYLE="overflow:hidden; width:520px"  onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false">
    <span>10/10/2007 </span><a href="http://www.google.com">Google Search ...</a> 
    <span>10/10/2007 </span><a href="http://www.yahoo.com">Yahoo Search ...</a>
    <span>10/10/2007 </span><a href="http://www.apple.com">Apple ...</a>
</DIV>

<script type="text/javascript" src="#WORKSPACE_IMAGES#webticker_lib.js" language="javascript"></script>
  • The DIV ID must be TICKER because that is being referred to in the Javascript. If you plan to change it, you have to do it in both places.
  • Any text contents within the DIV tag will be displayed. Feel free to modify to suite your needs.
  • The attributes of the ticker are in the JS script. The following are the default values.
TICKER_RIGHTTOLEFT = false;
TICKER_SPEED = 2;
TICKER_STYLE = "font-family:Arial; font-size:12px; color:#444444";
TICKER_PAUSED = false;

Demo in APEX

http://apex.oracle.com/pls/apex/f?p=57043:5