Menu

Solutions to Problems or Custom Needs in a Website

Many solutions we create for one site can be used and appreciated on other sites also.

Have a look at this list of components and solutions we have developed over time and if you could benefit from any of them you are welcome to them.

Please let us know if you would like to discuss the details or would like some help getting one installed.

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

Please login or register to post comments.

RSS
1234