Home


[ Code for HTML ]
[ Code for .js file ]

[ Allwebco Design ]
[ Allwebco Hosting ]



 Responsive Scrolling News Window
 This script is provided free for any type of website project. Support is not included. Note: Always make backup files and test after each edit before you go to another edit. You can always delete your backups later.

View support for this addon


STEP 1.) Copy Files
Copy the "news_scroll.html" and "news_scroll.css" into your website folder.


STEP 2.) Option #1 </head> Code
Copy and paste the following code into the "head" of your existing webpage(s) that you want the scrolling news window on. Put the code just before the </head> near the top of the page. Make backups of your webpages before you start. Use option #2 below instead to add this globally to all your webpages.




STEP 2.) Option #2
Instead of adding the above code to each HTML page, if you have a global css file, you can add the css globally using css "import". Add the following line to the top of your css file like the "style.css" or "colortheme.css":




STEP 3.) Add IFrame Code
Select how you want to add this to your template pages:

Code for an HTML page | Add this to any HTML webpage. In most cases you will paste this code into your "MAIN CONTENT" or "SIDEBAR" area. Perhaps just before or after your page or sidebar text ends.

Code for .js file. | Add this to a .js file like your sidebar.js menu.js. Here are some options for where to paste the code in a .js file:
  1. In a sidebar.js: Add the code from the "sample-JS.html" in this attached zip file to your sidebar.js. You can add this code in any blank area. One option would be to add this just before the "SMALL PICTURE AREA" note. Make a copy of your sidebar.js for backup and try pasting in the code and test your pages in a web browser.
  2. In a menu.js: If you have a vertical menu style you can probably add this to your menu.js. Make a backup of your menu.js. Open the menu.js and try pasting the code from the "sample-JS.html" near the bottom of that file. Most likely you will add this just before some </td></tr></table> or </div> code. This may not work in some template models see above for HTML page options instead.

STEP 4.) Test
Test the webpage you added the scrolling news window to in a web browser. The news frame should now be working.


STEP 5.) Edit News Page
Edit the "news_scroll.html" with your text and titles. In some editors you may need to edit this page in source code view. To use a different news feed service see options below.



OPTIONS
COLORS & FONTS: | Click for color help
Edit the colors for the scrolling news window in the "news_scroll.css".


SCROLLING NEWS WINDOW SIZE:
The news frame can be any size you require, however you need to edit 2 areas.
  1. Edit the height and max-width for the scrolling news window in the "news_scroll.css". Do not edit the width: 100%. Edit the max-width with your window width. If you edit the height do the next step.
  2. Edit the "var frameheight = 176;" in the "news_scroll.html" on about line #104 with the news window height you set in the "news_scroll.css".
  3. Note: In older HTML 4.01 non-responsive templates, edit the width 100% in the "news_window.css" with a fixed width like "250px" and make it the same as the max-width.

SCROLLING SPEED:
Edit the following code in the "news_scroll.html" near the bottom to change the speed. You can use decimal speeds such as 1.5 or 2.2.

var scrollspeed = 1.1; // ADJUST SCROLL SPEED


USING A NEWS FEED SERVICE: | Click for more feeds and help

See example on the sample-HTML.html. View the source code of the news_scroll-feed.html.

You can use any HTML or Javascript news feed in the "news_scroll.html". Paste your news feed code between the "SCROLLER CONTENT STARTS HERE" notes in the "news_scroll.html". Most news feed websites include instructions to use their code. Also, always check the news feed "Terms of Use" before you use their code.


RSS FEEDS:
This download is setup for HTML or Javascript feeds. For RSS feeds you would need to convert the code. Please see the RSS support page for more info.


MORE OPTIONS: | Click for details
See the Simple News Scroller and also the RSS and Javascript Newsfeeds for more options and news window details.



TROUBLESHOOTING
 If you do the steps above and the IFrame is not working:
  1. Try doing the above steps again from the start.
  2. You are testing the wrong HTML page that you added the News IFrame code to.
  3. You are editing on-line files instead of files on your hard drive.
  4. You have not used ALL the code from the sample pages in this download. Redo step #2.
  5. You have an error in the sidebar.js or menu.js file. Click for help.
  6. If you have uploaded: Remember that hosting areas are case sensitive. Be sure all file, folder names and link names match exactly.
  7. Note: Always make backup files and test after each edit before you go to another edit. You can always delete your backups later.



Best of luck with your new add-on and your website!
~Allwebco Design~


COPYRIGHT © Allwebco Design Corporation
Unauthorized use or sale of this script is strictly prohibited by law. You are authorized to use this on any Allwebco template, website or any template from another company for business or personal use. You are also authorized to modify all included files. View terms of use.