RSS and Javascript Newsfeeds

RSS newsfeeds are all the buzz. An RSS feed is handy on your desktop or in your Yahoo pages but what about adding some live news to your website. You can add RSS to a website, however, this is usually involved and generally is no better than HTML or Javascript news sources. In some cases if you use an RSS feed some viewers will not be able to view this news. RSS involves XML and PHP and this requires extra learning, coding and time. Below are some quick solutions to adding an HTML or Javascript live news feed to any template or website.

Before you start
Below is some newsfeed code and some recommended newsfeed services to use with the code. If you use any of these services be sure to read their "Terms of Use" or "Policies" as many feeds have different rules.

ADD-ON BUGS (Please Read):
You may encounter some problems in some templates with the "auto scrolling" add-on in IE due to bugs in this browser. In some cases the scroller will not work on your local hard drive but may work when uploaded. In some cases your template DOCTYPE may be the problem. Be aware Allwebco does NOT provide support for these errors. If this scroller works in your template in IE then it will cause no problems and will work in all other newer browsers.

There are no know bugs if you use code from Example #1 on this page.

Your display options
The samples on this page are showing newsfeeds in small windows on the right. If you want the content right on an HTML page instead, such as on your home or links pages, skip the next section and go right to "News Feed Services" later on this page. If you want to use a small window like the samples on the right at your site, on any page or in a .js file such as in your sidebar.js or under the links on a vertical menu in your menu.js keep reading.

Example #1 "Freshcontent.net" feed
The first example on this page is using a news feed from Fresh Content. Fresh Content does not allow their news to display in a scrolling ticker of any kind so we are using a static IFrame. Download this add-on and follow the steps on the included "help-news_iframe.html".

Download complete code and instructions for Sample #1 (.zip)


Example #2 "Worldpress.org" feed
Example two is using a feed from Worldpress.org. To add a scroller as seen in example #2, first, download and setup the scrolling news IFrames script. Come back to this page and download the "Worldpress news page" below to replace the "news_win.htm".

Download the Worldpress.org news page only (.zip)


Example #3 "Freenewsfeed.com" feed
Example three is using a feed from Freenewsfeed.com. To add a scroller as seen in example #3, first, download and setup the scrolling news IFrames script. Come back to this page and download the "Worldpress news page" below to replace the "news_win.htm".

Download the Freenewsfeed.com news page only (.zip)


Using other news feeds
With these examples you can use an HTML or Javascript news feed from any news source. To set this up, Setup the scrolling news IFrames script in your template. Go to the news feed site you have chosen and follow their steps to add their code to the "news_win.htm".

The feed I want to use offers only RSS feeds
RSS is tricky to setup. Here are some options you can check.

Converters:
RSS to JavaScript at Feed2JS
Free RSS to JavaScript Service
RSS & Atom Software & Services
Advanced users:
Using RSS News Feeds at Web Reference



Javascript HTML News Feed Services

---

The newsfeed services listed below all offer HTML Javascript code so a newsfeed can be easily added to any Allwebco template or website. Follow the directions at the following websites to add live news to your website.

Worldpress.org | Go to Worldpress.org Newsfeeds
With this service you can add HTML news feeds to any website or template. They offer HTML Javascript or RSS code. They ask you to link back to their website. This feed is example #2 on this page.

Send2Press | Go to Send2Press Newsfeeds
With this service you can add HTML news feeds to any website or template. They offer HTML Javascript or RSS code. You must send them a link to show where you have added the newsfeed at your site. This feed has been on-line since 1998.

Freshcontent.net | Go to Freshcontent.net Newsfeeds
With this service you can add news feeds like "outdoors", "travel" or "entertainment" to any website or template. They offer easy to add Javascript code. They do not allow the news to be displayed in a scroller or ticker. This feed is example #1 on this page.

FreeNewsFeed.com | Go to FreeNewsFeed.com
Newsfeeds from USA Today, VNU Business Online and others. They offer HTML Javascript or RSS code. This feed is example #3 on this page.

News4Sites | Go to News4sites.com
Just did a quick test of one news feed on this site and it had a nice ticker effect. It looks like they have a few options for adding news feeds to a website.


Related Topics:
Scrolling News IFrames
Static IFrames
More Scripts

source: allwebco-templates.com

Read more...

Summary only...

Simple News Scroller

This is a very simple scroller script that can be added to any HTML page, to a sidebar.js or under your menu in the menu.js. This add-on has been tested and is compatible in IE, Netscape, Firefox and Opera browsers.

ADD-ON BUGS (Please Read):
You may encounter some problems in some templates with the "auto scrolling" add-on in IE due to bugs in this browser. In some cases the scroller will not work on your local hard drive but may work when uploaded. In some cases your template DOCTYPE may be the problem. Be aware Allwebco does NOT provide support for these errors. If this scroller works in your template in IE then it will cause no problems and will work in all other newer browsers.

The Examples >>>
On the right on this page are three examples. All examples are an embedded standard HTML page that uses an IFrame and Javascript to scroll. Example one is set to scroll through the page and then rescroll from the bottom. Example two is set to scroll through and then restart. Example three is like example one but is setup with an RSS type news feed. This feed is using Javascript instead of XML. This news feed can be added to any HTML website is available for free at worldpress.org. For more info please see adding news feeds.


Skip the steps and download:
In a rush? Just click below to download the embedded HTML page and code samples for this add-on. Refer back to this page for help.

Download Scrolling News With Samples (.zip)


Step #1 HTML code:
Select and copy the following code. Paste this into THE "MAIN" or "CONTENT" table on any of your HTML template pages.

FOR AN HTML PAGE:

<!-- COPY THIS CODE TO PASTE INTO ANY HTML PAGE --> <table cellpadding="2" cellspacing="0" border="0" style="border: #000000 1px solid; background-color: #C0C0C0;COLOR: #000000; FONT: 13px arial, sans-serif; font-weight: bold;"><tr><td align="center"> Current News<br /> </td></tr><tr><td> <iframe id="NewsWindow" src="news_win.htm" width="150" height="200" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" style="border: #000000 1px solid;"></iframe> </td></tr></table> <br /><br /> <!-- END CODE -->

If you use the code above you can float this with a DIV. Click here for details. NOTE: The samples in the download above on this page include DIV code.


Step #1 in a .js file:
Or... If you would like to globally add this to all your pages you can paste this into your sidebar.js or in your menu.js.

In a sidebar.js One option would be to add the code below 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.

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 below near the bottom of this 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 the step above for HTML page options instead.


FOR A .JS FILE LIKE THE sidebar.js OR menu.js:

// SAMPLE SCROLLING NEWS FOR A .JS FILE - NON-FLOATING document.write('<table cellpadding="2" cellspacing="0" border="0" style="border: #996600 1px solid; background-color: #F0F0F0;COLOR: #996600; FONT: 13px arial, sans-serif; font-weight: bold;"><tr><td align="center">'); document.write('JS Sample<br />'); document.write('</td></tr><tr><td>'); document.write('<iframe id="NewsWindow" src="news_win.htm" width="150" height="200" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" style="border: #000000 1px solid;"></iframe>'); document.write('</td></tr></table>'); document.write('<br /><br />'); // END NEWS SCROLLER

Step #2:
Download the embedded page "news_win.htm" and place this page in your main template folder with your other HTML pages.

Download News Page With No Samples (.zip)

Or...

Download Scrolling News With Samples (.zip)


Step #3:
Test your webpages. The scroller should now be working. Edit the "news_win.htm" to change your page text for the scroller.


Set speeds:
You can edit the "news_win.htm" to change speeds and starting pause time. These are variables near the bottom of this page. See the notes in this file in HTML source view.

News font colors:
You can edit the page font colors and sizes. This will be the CSS code near the top of the "news_win.htm".

News box, border and title colors:
The box colors and title color will be in the HTML code you added to your pages. Not in the "news_win.htm".

News box size:
Edit the IFrame height and width in the HTML code you added to your pages. If you change the size of the IFrame window edit the "frameheight" variable in the "news_win.htm" to match your new window size. The IFrame size and "frameheight" variable should match so the text re-scrolls from the bottom of the window. The height in the default code is 200.

Restart or scroll again option:
To have the scroller reload at the top for the second time through, change the "frameheight" to "2" and change the "nextdelay" to "1" or "2". If you are re-scrolling set the "nextdelay" to 0. See "Examples" on this support page.

Link targets:
The "news_win.htm" includes two target "_top" sample links. You can use this target or you can use a target="_blank" to target links outside the scroller window.

Multiple scrollers:
You can add as many scrollers to your HTML pages as you need. Use the code above in step #2. Edit the src="news_win.htm" to for example src="news_win2.htm" in one place. Make a copy of the src="news_win.htm" and name it src="news_win2.htm".


Related Topics:
Static IFrames
News Feeds
More Scripts

source: allwebco-templates.com

Read more...

Summary only...

Password Protect a Single Page

The code below is the simplest way to password protect a single page on your website using javascript. This is not totally secure but will keep most user away from your protected area.


Once you have downloaded the .zip file, unzip the folder and look for the "help-password.html".

View a sample protected page (password is pepper)

View the instructions page

Download sample page and instructions (.zip)



Related Topics:
More secure protection options

source: allwebco-templates.com

Read more...

Summary only...

Password Protect Part or All of Your Website

Once you have your template setup you may want to password protect all, or parts of your website. We don't provide support for adding this feature, however here is some help and guidelines for setting this up. Protecting an area of your website will take some time and energy to setup properly.

Option #1: Protecting one page:
Javascript is the easiest way to password protect a single page on your website but is not considered very secure.

Click here to view our very simple protection script.
Click here to view advanced password protection scripts.

Option #2: Protecting one area:
If you would like to protect an area, or the front page of your website, or any other single page or group of pages, you can use javascript to do this. Search engines may still be able to find your protected pages so this is not 100% secure. Download the script below and follow the included directions.

Click here for the Gatekeeper login Javascript


Option #3: Protecting a directory:
In most cases, you can password protect an entire directory on your hosting server. This is very secure. See step #4 for hosting compatibility.

Step #1:
Use FTP software to create a new directory on your hosting server.

Step #2:
You must edit all the website pages that you intend to put in the new directory to make them work. There are two ways to do this. To understand how this works, go through these steps:

Step A:
Make a sub directory of your website directory on your local hard drive.

Step B:
Put the HTML pages you want protected in the new directory.

Action:
Open any page you put in the sub directory in your browser. You can drag it into your browser to open it. You will notice that you will see no images and no header and the entire page is missing areas. This is because all the support files are up one directory. There are three ways to deal with this.

Fix Option #1: (Not Recommended)
Copy all the .js files and .swf files and the flash.txt and your "picts" directory into the new directory. The problem with this is that some links will no longer work and you will need to maintain two sets of everything.


Fix Option #2: (Somewhat Recommended)
You must tell every page you moved where all the support files are. You will need to put this: "../" in front of all of the support file calls. Images, .js files and .css files and links. The problem with this is the menu links will not work unless you maintain two menus. One with "../" in front of every link for the pages in the subdirectory. The two dots and a dash tell the pages to look up one directory.

Here is an example: You will have something like this now for the .css file call in your HTML pages. (near the top)

<link rel="StyleSheet" href="coolstyle.css" type="text/css" media="screen">

Add the code indicated in red:
<link rel="StyleSheet" href="../coolstyle.css" type="text/css" media="screen">



Fix Option #3: (Highly Recommended)
This is what is known as Absolute Mode. First, upload your support files to your server using FTP software. Be sure to upload the "picts" directory and all the .js files, the .css file and the flash.txt. The page you are reading now is done in absolute mode. You can do a "view", "view source" to see how we have done this page.

After you have uploaded, edit one of the html pages on your local drive in the subdirectory you created (see note above). You will put "http://your-domain.com/" in front of all the .js files, the .css files, the links and in front of every image. Here is an example (code in red has been added).

<link rel="StyleSheet" href="http://your-domain.com/coolstyle.css" type="text/css" media="screen">

Now the page will know to look at your domain for the "coolstyle.css". You must do this with every picture and every file that is up one directory. You must also edit your menu.js and put "http://your-domain.com/" in front of all the links and images and also you may need to edit all the .js files to add your domain. You will need to do a lot of editing to your pages to make this work properly. Also, you may need to copy the "flash.txt" into your subdirectory, or use a graphic logo for the protected pages.

You may want to do your menu.js totally in absolute mode, replacing for example: "index.html" with "http://your-domain.com/index.html" and the spacers "picts/spacer.gif" with "http://your-domain.com/picts/spacer.gif".

Note:
In most cases, using your domain (absolute mode) for calling files is more dependable. Be sure to edit the .js files with your domain as well as the .css files. (as seen above in red)

Step #3:
Upload the edited pages you want to protect into the new directory you created on your server.

Step #4:
Protect the directory. If you have AllWebCo hosting, go to your control panel at: "http://your-domain.com/cgi-bin/plusmail" choose, Site Manager, click the button for the directory you want to protect, hit the protect button and follow the directions. Click here for more details about Allwebco password protection.

If you have another hosting company you will need to check your control panel or contact their support for help protecting a directory.


Related Topics:
Simple Javascript Password Protection


Related Links:
Gatekeeper login Javascript

source: allwebco-templates.com

Read more...

Summary only...

Adding a Slideshow

(for templates that currently have no slideshow)

---

If your template does NOT have a slideshow and you want to add one, here is the script and instructions to download. We do not however provide support for adding this type of item.

Click to download Slideshow.zip

Once you have downloaded and unzipped the file, look for the "slideshow-help.html" for complete instructions.

Related Topics:
Adding a Second Slideshow

source: allwebco-templates.com

Read more...

Summary only...

Adding Music to a Template

You can add a sound player console or a musical background to your template, we have provided code you can copy on this page. You can use .midi .wav .mp3 or many other file types. Be sure to read the "Notes" at the bottom of this page.

NOTES: The following options have been set to work in most popular browser but were not tested on a Mac. For the highest compatibility it is recommended that you use one of the Flash players suggested on this page.


NOTES: Active X Messages: In the newest version of IE you may want to add the code on this page into a .js file to stop "click to activate" messages. For help adding items to .js files click here. Or, you may want to view the Allwebco xmp3Player add-on for a simple skinnable mp3 player with no "Active X" issues or messages.


Option #1 - Background Sound
For simple background music in IE only use the following code:

<bgsound src="your-file.mid" loop="false">

Option #2 - Background Sound (for mp3, wav, mid, au files)
For simple background music with javascript, compatible in most browsers use the following code. Be sure to edit "your-file.mp3" in two places with this code.

<!-- START SOUND CODE, DELETE TO REMOVE --> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="your-file.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="your-file.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"></embed><br />'); } // End --> </script> <!-- END SOUND CODE -->

Option #3 - Quicktime Player (for mp3, wav, mid, au or video files)
To add a small Quicktime console, copy and paste the following code. Compatible in IE, Firefox and Netscape browsers. For Mac and PC as long as Quicktime is installed. Be sure to edit "your-file.mid" in two places with this code. Quicktime code may display messages about Active X controls in IE.

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="16" width="250"> <param name="src" value="your-file.mid"> <param name="autoplay" value="true"> <param name="controller" value="true"> <embed height="16" width="250" src="your-file.mid" pluginspage="http://www.apple.com/quicktime/download/" type="video/quicktime" controller="true" autoplay="true"></embed> </object>

Option #4 - Windows Player (for mp3, wav, mid, au or video files)
To add a Windows Media console with a border as you see below: 1. Download the "S_script_music_WIN.js" and place this in your template folder. 2. Copy and paste the code below into any HTML page. Compatible in IE, Firefox and Netscape browsers. Be sure to edit "your-file.mid" in two places in this .js file. Can be used for video as well.

Click to download the .js file used for the WinMedia player.

<script language="JavaScript" type="text/javascript" src="S_script_music_WIN.js"></script>

Option #4B - Windows Player Page Code (for mp3, wav, mid, au or video files)
The following code may display messages about Active X controls in IE. To add a Windows Media console with a border as you see above, copy and paste the following code. Compatible in IE, Firefox and Netscape browsers. Be sure to edit "your-file.mid" in two places with this code. Can be used for video as well.

<table border="3" cellspacing="0" cellpadding="0" bordercolor="#99CCFF" bordercolorlight="#DBEDFF" bordercolordark="#5B7997"><tr><td> <object id="MediaPlayer1" width="300" height="45" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902" standby="Loading Microsoft Windows Media Player..." type="application/x-oleobject"> <param name="FileName" value="your-file.mid"> <param name="animationatStart" value="false"> <param name="transparentatStart" value="true"> <param name="autoStart" value="true"> <param name="showControls" value="true"> <param name="Volume" value="-100"> <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="your-file.mid" autostart="true" showstatusbar="1" volume="-1" height="50" width="300"></embed></object> </td></tr></table>

Option #4 - RealAudio Player (for mp3, wav, mid, au or video files)
You can add the realaudio player to any template. Click here for realaudio details, or copy the code below and paste it into your page.

<object id="RVOCX" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="350" height="36"> <param name="SRC" value="your-file.mp3"> <param name="CONTROLS" value="ControlPanel"> <param name="CONSOLE" value="one"> <embed src="your-file.mid" width="350" height="36" nojava="true" controls="ControlPanel" console="one"></embed> </object>

Flash Players
Whitfield and Associates offers a nice Flash music player that can be added to any Allwebco template. Streaming Flash (.SWF) MP3 music players sold with or without sound tracks. Click here to visit the WAA players site.

Also check out the Wimpy Flash Player website.


Flash Welcome Message
See the "Skinnable Big Button" on the Allwebco Flash Applications page.


NOTES: Copy the above selected code and paste these lines into your webpage anywhere in the body of the HTML document. You can place it after the text in the page or anywhere else is fine. It is best to do this edit using Notepad or a Simple Text editor.


Related Topics:
Add a Music Popup
Bob's Mighty MIDI Site

source: allwebco-templates.com

Read more...

Summary only...

Adding a Popup Window With a Music Selection

OPTIONS: This add-on can be an auto popup or a link to the popup. You can add more songs to the popup and edit all colors and sizes. Click for details.

One problem with adding music to your webpages is that the sound will stop as soon as the user clicks on one of the links to go to another page. By adding a music popup you can have it so the music continues to play even as a user browsers your website. There should now be a popup with music playing on this page. If you do not see a popup now you may be running popup blocking software.

Click here to view other sound options.

Try closing the music window you are now seeing and then Click here to see how the music popup can open with a link. (Note: You may not now see a popup if you have a popup blocker. Just Click here.)

Step #1 Download:
Download the popup player. View the included help page.

Download the popup player (.zip)


Step #2:
Unzip this file on your computer hard drive, create a folder called "music" in your main template folder and place all files in this .zip file in the "music" folder.


Step #3:
Find the "help-music_popup.html" and follow the steps to set this popup player up with your template or website.


NOTES:
This music popup has been tested in and is compatible in Internet Explorer, Netscape and Firefox browsers. This was not tested in all available browsers but should work in most other browsers. For info on all options with this add-on please View the included help page.


Related Topics:
Adding sound to your template

source: allwebco-templates.com

Read more...

Summary only...

Welcome Message Add-on

With this add-on (shown at right) you can add a wav, mp3, mpeg, mpg or mov audio/video intro to any website or Allwebco template. You can download the following welcome message code free of charge. Instructions are included, however, we do not provide support for this template add-on. This add-on has been tested and is compatible in IE, Netscape and Firefox browsers.

Once you have downloaded the .zip file, unzip the folder and look for the "help-welcome.html" for complete instructions and options.


Welcome Message: View help page with sample.

Download code and instructions (.zip)


Message Options:
With this add-on you can replace all images and buttons, edit all text in the popups, edit all font colors and sizes, edit the page popup size, edit the video window size and use any web compatible audio or video file. This add-on can be added to any HTML page or any .js file. See the "help-welcome.html" in the download for details.


Related Topics:
Professional Movie Trailer Code Setup
Using the Gallery to Display Other File Types


Related Websites:
Windows logo usage
Quicktime logo usage

source: allwebco-templates.com

Read more...

Summary only...

Professional Movie Trailer Code Setup

Adding movie code to any webpage can be tricky. Different browsers do not support different movie file types and can cause problems if not setup correctly. Below is industry standard .mov video code for displaying a movie a trailer on a website.

NOTES: Active X Messages: In the newest version of IE you may want to add the code on this page into a .js file to stop "click to activate" messages. For help adding items to .js files click here.

Movie trailer file type and code
Typically movie websites will use .mov files for the highest viewing compatibility. Below is the code to use for a .mov file.

Select and copy the code below. Paste this into any webpage. Edit "your-filename.mov" in 2 places. Adjust the height and width in 2 places.

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="160" height="136" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="your-filename.mov"> <param name="autoplay" value="true"> <param name="controller" value="true"> <param name="loop" value="false"> <embed src="your-filename.mov" width="160" height="136" autoplay="true" controller="true" loop="false" pluginspage="http://www.apple.com/quicktime/"></embed> </object><br />

How this will display
The above Quicktime code will display on your page like the image below. If not, adjust the height and width in 2 places until you see the controls and video.




Notes:
The above is code used on most professional movie trailer type websites. You can use a .mpg file instead of a .mov file but the code will then be less browser compatible. The reason you edit everything in 2 places is because the "OBJECT" code is typically used by IE and the "EMBED" is used by most other browsers.

Test! Test! Test!
Always test in at least 2 browsers. Internet Explorer and either Firefox or Netscape.

Be professional and give them a choice
The code above will work in most browsers, however, you may want to give your viewers a choice. Create 2 new pages, setup one page with the code above and a .mov file. The, setup a .wmv or .mpg video on the other page using the code below. Then add links for users to choose on your video page that link to these 2 different pages. The above is "Quicktime" video, the code below is "Windows Media" code.

Windows video. Your second choice
For the code below a .wmv video file is the best choice. A .mpg would be your second choice.

Right click in the window below and "select all" then choose "copy". Paste this into any webpage. Edit "your-filename.wmv" in 2 places. Adjust the height and width in 2 places.

<object id="MediaPlayer1" width="310" height="278" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject"> <param name="FileName" value="your-filename.wmv"> <param name="animationatStart" value="false"> <param name="transparentatStart" value="true"> <param name="autoStart" value="true"> <param name="showControls" value="true"> <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="your-filename.wmv" autostart="true" showstatusbar="0" volume="-1" height="278" width="310"></embed></object><br />

How this will display
The above Windows code will display on your page like the image below. If not, adjust the height and width in 2 places until you see the controls and video.




Notes:

1. When editing this type of code always edit the filename and height and width in 2 places.
2. Generally do not add both sets of code above on the same page.
3. It is recommended that you do not use this code on a homepage. It's best to always link to pages with the code above.
4. Always test in at least 2 browsers. Internet Explorer and either Firefox or Netscape.

Related Topics:
Using the Gallery to Display Other File Types
Welcome Message Add-on


Related Websites:
Windows logo usage
Quicktime logo usage

source: allwebco-templates.com

Read more...

Summary only...

Add a Floating Menu

This is a very simple item to add to any Allwebco template. Please keep in mind that we do not provide support for adding this to a template or webpage. This page covers all the details of this menu.

Example:
On the right side of this page is a sample of this floating menu. You will see a "Home", "Contact" and "top" button. Try scrolling down on this page or making your browser small in height and use your scrollbar to see the menu float. This menu works well on pages with lots of text. If you do not see this menu your browser may not support this floating menu.

Adding This To Your Template:

Step #1
Select your menu style and click below to download the "floating_menu.js" and images included in this add-on. See lower on this page to view menu styles. (there also is a download link under each menu set)

Download Menu Style One (.zip)
Download Menu Style Two (.zip)
Download Menu Style Three (.zip)
Download Menu Style Four (.zip)

Step #2
Unzip this zip file. Put the floating_menu.js in your main template folder with your HTML pages. Put the .gif images in this zip file in your "picts" folder. The "ReadMe_floating.txt" in the download also includes instructions.

Step #3
Add the following code to the very bottom of any template HTML page you want the menu to be on. Be sure to add this just before the < /BODY>< /HTML> code at the page bottom: Add this code:

<script language="JavaScript" type="text/javascript" src="floating_menu.js"></script>

The floating menu should now be working. If not, remove this tag from the top of your HTML pages:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

OPTIONS: Images:
You can replace the default .gif images in this menu download with your own .gif images and create a custom menu.

OPTIONS: Extra Buttons:
Here are the available menu styles. You can right click on any of these and choose to save them in your template "picts" folder, or download the zip file below with all images and the menu script included. Then see "Adding more items" below. These buttons were created with an 11 or 12 point Verdana font.




Download Menu Style One (.zip)





Download Menu Style Two (.zip)





Download Menu Style Three (.zip)





Download Menu Style Four (.zip)





OPTIONS: Adding more items:
You can add more buttons to this menu. See the note in the "floating_menu.js" to do this. Also see the next option to make room for more buttons.

OPTIONS: Placing the menu up and down:
You can move this menu up or down on the page. Edit the "floating_menu.js" and find this code: "Yloc = 275;". Change the 275 to a larger number to move the menu up or smaller to move this down.

OPTIONS: Placing the menu left or right:
You can place the menu on the left or right side. Edit the "floating_menu.js" and find this code: "right=x;". Change this to left or right.

OPTIONS: Changing links:
You can change what these images link to. Edit the "floating_menu.js" in Notepad and for example change the "index.html" to link to any page you would like.

TROUBLESHOOTING: If the "top" link does not work:
If the top link is not working. Add this code just after the "body" tag near the top of the HTML page:

<a name="top"></a>

TROUBLESHOOTING: If the menu is not working:
Go through the steps again. If this does not work:

1. Check the information that is in the "ReadMe_floating.txt" in the floating menu download.
2. Try the steps again from the start on another HTML page.
3. The menu may be under another item on your page. This can not go over any flash animation.
4. Your browser is not compatible with this script.
5. On some websites or templates such as Ministes you must remove or modify this tag at the top of each HTML page for this menu to float:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Related Topics:
Unzipping Files
More Scripts

source: allwebco-templates.com

Read more...

Summary only...