Menu

Action Form Notes

Action Form is a module developed by DNNSharp.com for the DNN Content Management System and Development Platform. The developers at LetItShine.biz have used the Action Form module for countless projects and solutions for a number of years. The following is an modest collection of notes that we have started to record about techniques to take advantage of the strengths of this module. We record this here not to become a secondary help system for Action Form users or DNNSharp. But if you can find something here that helps you, that makes us happy too.

Return to the list
Mark Buelsing

Scrolling Text Banner

News Ticker

Scroll Text With Code

This can be done a number of ways. This example uses some HTML and some CSS. You can put all this in an HTML module and it will work. The downside of doing it that way is that it is easy to mess up the html when you are simply trying to change the announcement text. See the code here and scroll down to see a nicer way to do it.

HTML

<div id="scroll-container">
  <div id="scroll-text">This is scrolling text.<div>
</div>

 

CSS

#scroll-container {
  border: 3px solid black;
  border-radius: 5px;
  overflow: hidden;
}

#scroll-text {
  /* animation properties */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  
  -moz-animation: my-animation 15s linear infinite;
  -webkit-animation: my-animation 15s linear infinite;
  animation: my-animation 15s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateX(100%); }
  to { -moz-transform: translateX(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
 

 

The Nicer Way

We configured a simple Action Form to allow you to change the announcement without risk of editing the HTML or CSS. If you have the Action Form module on your site, you can import this design into your module and use it too.

Form Template

Previous Article Pop Up a Page, or a Page with a Form on it
Next Article Collapse DNN empty panes in Edit Mode
Print
148 Rate this article:
5.0

Leave a comment

This form collects your name, email, IP address and content so that we can keep track of the comments placed on the website. For more info check our Privacy Policy and Terms Of Use where you will get more info on where, how and why we store your data.
Add comment