Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Easy Java Script Code for Animated Banner - Squeeze Text

By Stephen Bucaro

MY BANNER TEXT

Using Java Script along with CSS (Cascading Style Sheets) allows us to create some fun and interesting animations. One of the easiest things to create is an animated banner. In this article I'll show you how to use JavaScript and CSS to create an animated banner that squeezes text and which you can easily customize for your own use.

A basic banner is a box displayed on a webpage. To create the box, we'll use an html DIV element. You place the html code for the DIV in the body section of your webpage. The code for a DIV is shown below.

<div id="myBanner">

</div>

The first thing we'll do is style the DIV. To do this, you place a style code block in the head section of your webpage. The code for the style block is shown below.

<style>
#myBanner
{
display:inline-block;
width:468px;
height:60px;
border-style:solid;
border-color:#0000ff;
border-width:1px;
background-color:#bbbbff;
}
</style>

The meaning of most of the style rules are self evident. The DIV will be 468 pixels wide by 60 pixels high. This is the most common standard size for a div. You can edit these dimensions to change the size of the banner. The style rules define a solid border, the border color being blue (#0000ff being hexadecimal code for blue, of course you could just use the word blue here) one pixel in width, with a background color of light-blue.

The first property in the style definition needs some explanation. Defining the DIV's display property as inline-block allows it to flow inline with the text and other elements on your webpage. In order for this to work in both the Internet Explorer and Firefox browsers requires you to use <!DOCTYPE html>. If you want to appear on its own line, you don't need the display:inline-block rule or the html DOCTYPE, because a DIV is a block element by default.

One of the most difficult and complicated things to do with CSS is to position a box on your webpage where you want it. Generally you'll either want it to flow inline with the text and other elements, or you'll want it on its own line, but there are other methods to position an element (e.g. relative, absolute, z-order, etc.) If you have trouble positioning your banner where you want it, study the CSS box model and CSS positioning. Or you might just contact me for some advise.

Now lets put some text on our banner. Inside your banner DIV, put an html P (paragraph) element with an id of "myText" and an align attribute set to "center". The code for this is shown below.

<div id="myBanner">
<p id="myText" align="center">MY BANNER TEXT</p>
</div>

The next thing we'll do is style the paragraph. To do this, add the following code within the style block in the head section of the webpage.

#myText
{
font-family:verdana;
font-size:14px;
font-weight:bold;
color:#000000;
}

This sets the font to verdana, 14 pixels in size, bold, with a color of black. (#000000 being hexadecimal code for black, of course you could just use the word black here).