Tags:
create new tag
view all tags

SID-01227: Scrolling text out of the box!

Status: Answered Answered TWiki version: 4.2.4 Perl version:
Category: ScrollBoxAddOn Server OS: Last update: 12 years ago

I am actually toddling with the WIKI. Not really familiar with script programming either. I've has been trying to improve our internal corporate site. Thus, I wanted to add some scrolling text on it. The guys at the IT department installed the scroll box add on for me.

I'd prepared the following code:

%INCLUDE{ "%SYSTEMWEB%.ScrollBoxAddOn" section="scroll_box_engine" }%
%INCLUDE{ "%SYSTEMWEB%.ScrollBoxAddOn"   section="scroll_box"   name="textExample"   title="Test "
 content="<br /> Georgie Porgy pudding pye, kissed a girl and made her cry, when the boys came out to play, Georgie Porgy ran away"
 delay="100"
 vstep="1"
 width="300"
 height="150" }%

As a result IŽm getting the following line on the page %ADDTOHEAD{ "scroll_box_engine" text=" " }%, just above the container area. Also, the text keeps scrolling out from the container area.

I don't know if IŽm missing something, but again gotta tell you: I’m really new to programming. Any advise would be greatly appreciated. Thanks!

-- GeorgeBolanos - 2011-07-07

Discussion and Answer

Oops, I just checked, ADDTOHEAD is new in TWiki-5.0. I updated ScrollBoxAddOn to list only TWiki-5.0.

If you want to use this add-on with earlier TWiki versions you need to remove the ADDTOHEAD, e.g. the section named "scroll_box_engine" should only contain the Javascipt and CSS, and exclude the ADDTOHEAD. Edit your TWiki.ScrollBoxAddOn topic and change the "scroll_box_engine" section as follows:

<!--=====================================
%STARTSECTION{ "scroll_box_engine" }%<script type='text/javascript'>
 // inspired by www.dhtmlgoodies.com/index.html?whichScript=scrolling_content
 var scrollData = new Array();
 function doScrollCanvas( containerID )
 {
  var vPos = scrollData[containerID]['canvasObj'].style.top;
  if( scrollData[containerID]['doScroll'] ) {
   vPos = vPos.replace(/[^\-0-9]/g,'') - scrollData[containerID]['verticalStep'];
   if( vPos/1 + scrollData[containerID]['canvasHeight']/1 < 1 ) { vPos = 0 };
   scrollData[containerID]['canvasObj'].style.top = vPos + 'px';
  }
  setTimeout('doScrollCanvas("' + containerID + '")', scrollData[containerID]['delay']);
}
 function doStopScroll()
 {
  var containerID = this.id;
  scrollData[containerID]['doScroll'] = false;
 }
 function doStartScroll()
 {
  var containerID = this.id;
  scrollData[containerID]['doScroll'] = true;
 }
 function initScrollBox( containerID, delay, vstep, width, height )
 {
  var scrollContainer = document.getElementById( containerID );
  var scrollCanvas = scrollContainer.getElementsByTagName( 'DIV' )[0];
  if( ! delay ) { delay = 1000; }
  if( ! vstep ) { vstep = scrollContainer.clientHeight; }
  if( width )   { scrollContainer.parentNode.style.width = width + 'px'; }
  if( height )  { scrollContainer.style.height = height + 'px'; }
  scrollContainer.onmouseover = doStopScroll;
  scrollContainer.onmouseout = doStartScroll;
  scrollData[containerID] = new Array();
  scrollData[containerID]['canvasObj'] = scrollCanvas;
  scrollData[containerID]['canvasHeight'] = scrollCanvas.offsetHeight;
  scrollData[containerID]['verticalStep'] = vstep;
  scrollData[containerID]['delay'] = delay;
  scrollData[containerID]['doScroll'] = true;
  scrollCanvas.style.top = scrollData[containerID]['verticalStep'] + 'px';
  doScrollCanvas( containerID );
 }
</script>
<style type='text/css' media='all'>
 .scrollBoxOuter {
  border: solid #dddddd 1px;
  width: 300px;
  padding: 10px;
  background-image: url(%PUBURLPATH%/%WEB%/%TOPIC%/gradient-title.png);
  background-repeat: repeat-x;
  background-color: #ffffff;
 }
 .scrollBoxTitle {
  text-align:center;
  font-size:19px;
  font-weight:bold;
  color: #333335;
  padding:0 0 12px 0;
  white-space: nowrap;
  overflow: hidden;
 }
 .scrollBoxContainer {
  overflow: hidden;
  height: 40px;
  padding: 0px;
 }
 .scrollBoxContent {
  position: relative;
  top: 0px;
  padding: 0px;
  background-color: #ffffff;
  text-align: justify;
 }
 .scrollBoxContent img {
  padding: 0px;
  vertical-align: middle;
 }
 </style>%ENDSECTION{ "scroll_box_engine" }%
=========================================-->

-- PeterThoeny - 2011-07-07

It worked! Thanks a ton! I got rid of the ADDHEAD…code message on the page. Still struggling in trying to keep the scrolling text inside the framed area, though. Any suggestion there? Thanks again!

-- GeorgeBolanos - 2011-07-08

Are you using IE7 (or IE8 in compatibility mode) ? Know issue with IE7.

-- PeterThoeny - 2011-07-08

Nop, IŽm using IE8.

-- GeorgeBolanos - 2011-07-13

If you are using IE8 in compatibility mode you will get that behavior. Somebody with better Javascript and CSS debugging skills than me need to debug this and find a workaround fix for IE7 and IE8 in compatibility mode.

-- PeterThoeny - 2011-07-13

Ok...IŽll try to get some help in that direction. IŽll keep you guys in the loop. In the meantime IŽll leave the question open just in case somebody out there comes up with a solution for the strange behavior. Thanks a lot!

-- GeorgeBolanos - 2011-07-20

Let me open the question...

-- PeterThoeny - 2011-07-20

Closing this question after more than 30 days of inactivity. Feel free to reopen if needed. Consider engaging one of the TWiki consultants if you need timely help. We invite you to get involved with the community, it is more likely you get community support if you support the open source project!

-- PeterThoeny - 2011-09-08

      Change status to:
ALERT! If you answer a question - or someone answered one of your questions - please remember to edit the page and set the status to answered. The status selector is below the edit box.
SupportForm
Status Answered
Title Scrolling text out of the box!
SupportCategory ScrollBoxAddOn
TWiki version 4.2.4
Server OS

Web server

Perl version

Edit | Attach | Watch | Print version | History: r9 < r8 < r7 < r6 < r5 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r9 - 2011-09-08 - PeterThoeny
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.