Scrolling AdBlocks


How to install JavaScrips…
May 15th, 2006
Here is some more information about JavaScripts and how to install them.

Todays’ date
May 17th, 2006
This will help to make your website look as up-to-date as possible.

Special offer expiry date with a twist
May 19th, 2006
You’ll have an active deadline date counting down the days until your offer expires.

Countdown to extra profits
May 21st, 2006
Have you seen those popup windows that have a timer in them?

Page printing for offline reading
May 23rd, 2006
When it comes to reading something online you can’t beat printing it out and reading it in your own time whilst drinking a nice cup of cofee long after you’ve left your computer.

Online subliminal messaging
May 25th, 2006
Have you ever seen those ticker tape messages that appear at the bottom of your web browsers window?

Countdown to the end of your offer
May 27th, 2006
How many more sales do you think you’ll make if your potential customers believed that if they didn’t order by a certain date they would lose out?

User friendly popup’s
May 29th, 2006
A link like this makes each popup window you create that much easier to close down and much less likely to annoy.

Do you have a lot of Ads and a tiny spot at your pages where you’d like to push them all?..
Are you forced to use a banner rotator or look for a similar solution? This tip is for you.

Show all your ads at the same time!

It’s not a script… It’s not even a trick…
It’s a pure HTML.

<MARQUEE>

The <marquee>...</marquee> HTML-element creates a scrolling text marquee. This is all we need.
We’ll use 4 main parameters of the element:
* BEHAVIOR     - sets how the text scrolls in the marquee,
* DIRECTION    - sets the direction in which the text should scroll,
* SCROLLDELAY  - sets the speed of the marquee scroll,
* SCROLLAMOUNT - sets the number of pixels the text scrolls between each subsequent drawing of the marquee.

<marquee BEHAVIOR="scroll" ... > specifies one of the following values:
 scroll  Default. Marquee scrolls in the direction specified by the DIRECTION parameter. The text scrolls off the end and starts over.
 alternate  Marquee scroll direction reverses when its content reaches the edge of the container.
 slide  Marquee scrolls in the direction specified by the DIRECTION parameter. The text scrolls to the end and stops.
 
<marquee DIRECTION="up" ... > specifies one of the following values:
 left  Default. Marquee scrolls left.
 right  Marquee scrolls right.
 down  Marquee scrolls down.
 up  Marquee scrolls up.
 
<marquee SCROLLDELAY="60" ... > specifies the delay, in milliseconds.
  The parameter has a default value of 85.
 
<marquee SCROLLAMOUNT="1" ... > specifies the number of pixels.
  The parameter has a default value of 6.

Scroll your text Ads

You may have a continued text or several paragraphs with your ads scrolling up through a spot at your page.
Lets suppose you have a <DIV> with specified width and height:

<DIV width="120" height="100">
<marquee BEHAVIOR="scroll" DIRECTION="up"
    SCROLLDELAY="60" SCROLLAMOUNT="1"
    style="width:120px;height:100px;
        border:1px solid silver;padding:4px;">

    <b>Ad 1</b>
    <a href="url_1">link 1</a>
    Advertising text 1.

    <b>Ad 2</b>
    <a href="url_2">link 2</a>
    Advertising text 2.

    <b>Ad 3</b>
    <a href="url_3">link 3</a>
    Advertising text 3.
</marquee>
</DIV>



Ad 1
link 1
Advertising text 1.

Ad 2
link 2
Advertising text 2.

Ad 3
link 3
Advertising text 3.


Rotate your banner images

Do you have banner images with equal sizes? Great!
You can rotate them without any script.

Set the SCROLLAMOUNT parameter of your marquee to your images height and the SCROLLDELAY parameter to 1000 for a second (1000 milisecinds).
Look at this:

<DIV width="60" height="62">
<marquee BEHAVIOR="scroll" DIRECTION="up"
    SCROLLDELAY="1000" SCROLLAMOUNT="62"
    style="width:60px;height:62px;">
        <img width="60" height="62" src="url_1" />
        <img width="60" height="62" src="url_2" />
        <img width="60" height="62" src="url_3" />
        ...
</marquee>
</DIV>

Stop scrolling

When you scroll ads with links it would be nice to stop scrolling to let the user clicks the link.
The marquee allows you to do this too.

I promised there wouldn’t be a script… I were cunning ;-)
You’ll need a small script.

Use the onmouseover attribute to trigger the stop() method and the onmouseout attribute to trigger the start() method to scroll the text again after the user takes his mouse away.

This sample is for horizontal scroll.

<marquee BEHAVIOR="alternate" DIRECTION="left"
    SCROLLDELAY="100" SCROLLAMOUNT="5"
    onmouseover="this.stop()" onmouseout="this.start()">
    <b>Touch this text with mouse to stop it</b>
</marquee>

Touch this text with mouse to stop it

 

by Michel Komarov, © Copyright 2006. iCoder.com

 

Share in social bookmarking:These icons link to social bookmarking sites where readers can share and discover new web pages.  digg del.icio.us BlinkList Reddit NewsVine YahooMyWeb co.mments

4 Responses to “Scrolling AdBlocks”

  1. paulinet Says:

    I’m having a problem with having 2 or more javascripts on a webpage. Is there away around this?

  2. michel Says:

    Hi Paulinet,

    Please let me know the URL of your page where you get a problem.

  3. successvirus Says:

    we use it now at www.thecatblog.com to embedd fake google ads that scroll… however we noticed that sometimes when you load the page some of the scrolling windows are empy. It might have to do that the scrolling code gets repeated after every blog post in wordpress. Any Ideas how to avoid that?

  4. michel Says:

    You’re using nested tables to create an ads block like below:
    <table bgcolor="#336699" height="90" width="728">
    <tr><td valign="top">
      <table height="76" width="100%">
      <tr>
      <td bgcolor="#ffffff">...ADS...</td>
      <td bgcolor="#ffffff">...ADS...</td>
      ...
      </tr>
      </table>
      <table bgcolor="#336699" width="100%">
      <tr><td>Ads By Moritz</td></tr>
      </table>
    </td></tr>
    </table>

    Try to combine the ads block into ONE table like below:
    <table bgcolor="#336699" height="90" width="728">
    <tr>
    <td bgcolor="#ffffff">...ADS...</td>
    <td bgcolor="#ffffff">...ADS...</td>
    ...
    </tr>
    <tr><td bgcolor="#336699"><font color="white">Ads By Moritz</font></td></tr>
    </table>

    Hope this helps.

    Michel

Got a question?   Leave a Reply

You must be logged in to post a comment.