Categories


JAVA Scrolling Banner Code

In addition to using vertical and horizontal menus to build websites, thought you might find using a scrolling JAVA banner equally useful. A scrolling banner is a great way to put a lot of information into a small space. This particular banner allows you to use images, text or combination of both. But best of all – you can make the images and text active links to other pages or websites. This is great for selling advertising space or linking to other projects.  (Click on the image below to see this script in action.)

If you check out the links included in this post, you’ll see that the complete code for this JAVA banner comes in three parts – two for the JAVA script and one for the HTML.    The JAVA code is available at this link  (HTML code is below).

JAVA – Parts 1 & 2

The first part of the JAVA script puts a box or frame around the banner and the second part creates the action of continuous scrolling.

In the first section that places a ‘box’ (frame) around the banner, you can change some of the ‘sizes’ to get the look you want. The features you can change are:

  • margin – 0px
  • placement – center
  • width of border – 1px
  • type of border – solid
  • color – #000 (again, using triplet colors)

If you were to leave out this portion of the code, there would be no frame around the banner.

The second part of the JAVA script code causes the scrolling action. There are only two (2) changes you may want to make to this code. These changes have to do with the width and height size the banner displays. Those lines are shown below:

Sample code:

 // width of the banner container

var contWidth = 252;

// height of the banner container

var contHeight = 100;

In the code above, the 252 references the width of the banner; the 100 references the height. You would change these numbers to fit your space.

HTML

The HTML code contains the three

tags, the images, text and links (if wanted) for your banner.

NOTE: The size you have assigned to the banner’s width in the JAVA script code MUST be the same in the HTML code for the lines where width is shown in the three

lines (see below). The width of 252 (pixels) in the code below corresponds to the 252 for width in our JAVA script.

Sample HTML code:

252px;overflow:hidden;text-decoration:none”> 

252px;overflow:hidden;text-decoration:none”> 

252px;overflow:hidden;text-decoration:none”>

In order for the scroll to work correctly, you must use the same HTML code, in the same order, for both

slideA and
slideB – this gives you the seamless roll.

You’ll note, that in our sample we’ve  made the image a link to one page with separate lines of text under the image where each line of text is linked to a different page. (See Advertising image with three lines of text underneath.)

Also, we placed a line of text below the scroll after the last

. This line of text can be added, deleted or expanded, it has nothing to do with the scrolling banner working – but may be used to give instructions or offer an advertising opportunity.

We’ve written the HTML code for a scrolling banner and it’s available  at this link  . . .  the code is for five separate scrolling images.  You can copy and paste the HTML code from this link into your own HTML editor and then place you own information for links 1-5 in the correct spaces indicated by Link 1, Image 1, Text 1, Link 2, etc. .   If you don’t need five places, just delete the ones you don’t want- in BOTH slideA and slideB

sections.

Just like with the CSS – you can place the JAVA code on the page or upload it to the Root directory as a .js file and then reference it in the head section of the HTML document.   If you upload the script to the Root Directory – only use the JAVA code when saving as a text document, do not include the information included in the   tags.  For more information about JAVA – visit this link

PS – On checking for additional information for this code, we were surprised to find that the website we used to reference is no longer available. So…. in the near future, we’ll be posting some new links where you can find information relevant to our JAVA Scripts.


Comments are closed.