Allwebco Design Corporation - Add-On||
[ 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:
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.
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.
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
MORE OPTIONS: | Click for details
If you do the steps above and the IFrame is not working:
Best of luck with your new add-on and your website!
COPYRIGHT © Allwebco Design Corporation