Ron Paul Blimp Scrolls Over Web Page

[bjrnet]

UPDATE: FOR LATEST BLIMP SCROLL EFFECTS EXAMPLES CHECK OUT http://www.bjrnet.com/ronpaulblimps

NOTE: Some of the code below (and in this thread) has changed and has been improved. See link above for latest code.

-------------------
Last night, while waiting for the Tea Party to begin I had an idea! What if visitors to my web site could see Ron Paul's blimp slowly scroll across the screen.

So, I did a little research and found some Javascript that could do the job. A little graphic editing to come up with the blimp graphic was also required.

Check out the final result example on http://www.bjrnet.com/ronpaulblimps. If you click on the blimp you will be redirected to http://ronpaul2008.com.

Everyone is welcome to use this code to promote and support Ron Paul. Here is the link to the code:

http://www.bjrnet.com/js/dw_float.js

On the page you want the blimp scroll effect you need to add the following to the head section:

<style type="text/css">#floatDiv {position:absolute;visibility:hidden;left:0;top:0; z-index:200;}</style>
<script src="http://www.bjrnet.com/js/dw_float.js" type="text/javascript"></script>

Now add this where you want the blimp to scroll from:

<div id="floatDiv"><a href="http://www.ronpaulblimp.com" target="_blank"><img src="/images/politics/RonPaulBlimp.gif" width="288" height="92" border="0" alt="Join the Revolution - Support Ron Paul" title="Join the Revolution - Support Ron Paul"></a></div>

And finally, add the following near the end of the file:

<script type="text/javascript">
/* This code is from Dynamic Web Coding at http://www.dyn-web.com/ Copyright 2003 by Sharon Paine See Terms of Use at http://www.dyn-web.com/bus/terms.html */
// arguments: id, left, top, direction, speed (pixels per loop), delay for restart or null
new floatObject("floatDiv", 1200, 40, "left", 1, null);
</script>

[FreeTraveler]

Wow, that is CLASSIC. We now have our own version of the Energizer Bunny we can put on any web page! Toooo Cooool.

[Primbs]

Very cool.

[qednick]

Do you know if it's possible to put this on myspace profiles?

[bjrnet]

UPDATE: FOR LATEST BLIMP SCROLL EFFECTS EXAMPLES CHECK OUT http://www.bjrnet.com/ronpaulblimps

------------------------------

Take a look at http://www.bjrnet.com/board/wwbjn1/index.cgi?read=7031 .

That post has the Ron Paul blimp scroll without using the HEAD section of the page.

Note: In the code presented is a link to http://www.bjrnet.com/js/dw_float.js. Using that link is OK for the time being but be aware that I can't guarantee that code will be there forever. You should copy and put it somewhere else to guarantee your blimp won't just stop working.

[Syren123]

Sheer genius.

[1913_to_2008]

awesome

[ItsTime]

very nice. But I would point the URL to www.ronpaul2008.com so people can actually find out who he is :D

[xexkxex]

That is too cool :)

[bjrnet]

UPDATE: FOR LATEST BLIMP SCROLL EFFECTS EXAMPLES CHECK OUT http://www.bjrnet.com/ronpaulblimps

-----------------------------

I originally had it point to http://www.ronpaul2008.com but I thought that since the graphic is from http://www.ronpaulblimp.com I better point there until they approve of me pointing somewhere else. If they approve this, I will point to the main Ron Paul campaign site.

[hawks4ronpaul]

That is very nice. Can we get the blimp to then cross back at the bottom with the revolution message showing?


http://hawks4ronpaul.blogspot.com/

[bjrnet]

UPDATE: FOR LATEST BLIMP SCROLL EFFECTS EXAMPLES CHECK OUT http://www.bjrnet.com/ronpaulblimps

----------------------------

Yes, having the blimp cross back with the revolution message is a great idea. I just need to create the graphic. If I find time today I will attempt it. Or if someone else would like to take a crack at it...

[Tarzan]

Yes, having the blimp cross back with the revolution message is a great idea. I just need to create the graphic. If I find time today I will attempt it. Or if someone else would like to take a crack at it...

This is great stuff! You can download the PSD files with tranparency intact from here: Blimp Files (http://ronpaulideas.com/Blimp.htm)

The destination URL is up to you... having it go to the official donation page would be great... especially today! (TeaParty07) We would certainly welcome having it point to the Blimp site later... we leave that to your choice.

Just terrific! thanks!!!

http://ronpaulideas.com/images/signatureblimp.png (http://RonPaulBlimp.com/)

[Tarzan]

We are using Word Press on the Ron Paul Blimp Blog (http://www.ronpaulblimpblog.com/). I do not have access to the raw content... just access using the Word Press interface.

Does anyone know how I can add bjrnet's script through the Word Press interface?
I want to link the floating blimp to the campaign's donation page.

http://ronpaulideas.com/images/signatureblimp.png (http://RonPaulBlimp.com/)

[hawks4ronpaul]

We are using Word Press on the Ron Paul Blimp Blog (http://www.ronpaulblimpblog.com/). I do not have access to the raw content... just access using the Word Press interface.

Does anyone know how I can add bjrnet's script through the Word Press interface?
I want to link the floating blimp to the campaign's donation page.

http://ronpaulideas.com/images/signatureblimp.png (http://RonPaulBlimp.com/)

Do you have a "template" or similar editing section where you can add text code in both the head and body sections?



http://hawks4ronpaul.blogspot.com/

[Tarzan]

Do you have a "template" or similar editing section where you can add text code in both the head and body sections?


Not that I can find. I just started using this thing yesterday so there is still a lot I do not know. We have WordPress 2.3.1 and I only have access to the normal admin interface.

If this is possible can someone walk me through the steps?

thanks

[hawks4ronpaul]

I installed on my site and it scrolls with the alt text instead of the image.


http://hawks4ronpaul.blogspot.com/

[bjrnet]

I don't use Photoshop and don't have access to the raw blimp images with a transparent background. I've had to create them myself. If anyone wants to attempt a very clean image for both sides of the blimp with a transparent background please feel free to do so. Just let me know so I can update the images I am using. Thanks,

[hawks4ronpaul]

I don't use Photoshop and don't have access to the raw blimp images with a transparent background. I've had to create them myself. If anyone wants to attempt a very clean image for both sides of the blimp with a transparent background please feel free to do so. Just let me know so I can update the images I am using. Thanks,

The GIF is fine but do you know why it does not display on my site?

Thank you.

http://hawks4ronpaul.blogspot.com/

[hawks4ronpaul]

Not that I can find. I just started using this thing yesterday so there is still a lot I do not know. We have WordPress 2.3.1 and I only have access to the normal admin interface.

If this is possible can someone walk me through the steps?

thanks

See http://codex.wordpress.org/FAQ_Layout_and_Design for the favicon instructions about the code in the "head" section and that site might help you with the body section as well.

Remember what you do so you can undo if necessary.

[bjrnet]

UPDATE: FOR LATEST BLIMP SCROLL EFFECTS EXAMPLES CHECK OUT http://www.bjrnet.com/ronpaulblimps

--------------------------------

hawks4ronpaul:

Your image is pointing to http://hawks4ronpaul.blogspot.com/images/politics/RonPaulBlimp.gif

You need to either copy the image to your web server or point to
http://www.bjrnet.com/images/politics/RonPaulBlimp.gif

I recommend you copy the image to your own server or space.

PS - I am working on the revolution blimp image right now. Almost done.

[hawks4ronpaul]

hawks4ronpaul:

Your image is pointing to http://hawks4ronpaul.blogspot.com/images/politics/RonPaulBlimp.gif

You need to either copy the image to your web server or point to
http://www.bjrnet.com/images/politics/RonPaulBlimp.gif

I recommend you copy the image to your own server or space.

PS - I am working on the revolution blimp image right now. Almost done.

I just noticed that. You might want to change the code that you posted to an absolute file path instead of the relative file path.

Use a Photobucket URL if you need bandwidth.

I do not mind uploading images for myself but it would be easiest for everyone if they simply could copy-paste.

[hawks4ronpaul]

Here is an absolute file path for the image and the link to the Tea Party site.


<div id="floatDiv"><a href="http://www.teaparty07.com/" target="_blank"><img border="0" width="288" alt="Join the Revolution - Support Ron Paul" src="http://www.bjrnet.com/images/politics/RonPaulBlimp.gif" height="92" title="Join the Revolution - Support Ron Paul"/></a></div>

[Tarzan]

Here are two transparent gifs:

Transparent Blimp Gifs (http://ronpaulideas.com/Blimp.htm)

[hawks4ronpaul]

This code can be modified with the latest image and URL for the latest event:

Rolling cartoon bomb for Guy Fawkes

Sail ship for Tea Party


Click here for demo of the blimp:

http://hawks4ronpaul.blogspot.com/

[bjrnet]

UPDATE: FOR LATEST BLIMP SCROLL EFFECTS EXAMPLES CHECK OUT http://www.bjrnet.com/ronpaulblimps

-------------------------

OK guys, I've made some changes that allow the latest clean blimp transparent images (from ronpaulblimp.com) to be used and to randomly use the portside or starboard images. In otherwords, sometimes the blimp will scroll left to right (Revolution) or right to left (Who is.). I've set up my site for 60% "Who is Ron Paul" and 40% "Revolution". Also, notice the change in the graphic image names

Example: http://www.bjrnet.com
(Reload the page a few times until you see both left to right and right to left blimps.)

Here we go:
First you need the main Javascript file at http://www.bjrnet.com/js/dw_float.js .

Now in the HEAD (notice the new random function call):
<style type="text/css">#floatDiv {position:absolute; visibility:hidden;left:0;top:0;z-index:200;}</style>
<script src="/js/dw_float.js" type="text/javascript"language="javascript"></script>
<script type="text/javascript" language="javascript">var ronpaul=(100*Math.random());</script>

Now in the HTML where you want the blimp to scroll from:
<script type="text/javascript" language="javascript">
if(ronpaul<60)document.write("<div id='floatDiv'><a href='http://www.ronpaul2008.com' target='_blank'><img src='/images/politics/BlimpPort.gif' width='280' height='95' border='0' alt='Join the Revolution - Support Ron Paul' title='Join the Revolution - Support Ron Paul'></a></div>");
else document.write("<div id='floatDiv'><a href='http://www.ronpaul2008.com' target='_blank'><img src='/images/politics/BlimpStarboard.gif' width='280' height='95' border='0' alt='Join the Revolution - Support Ron Paul' title='Join the Revolution - Support Ron Paul'></a></div>");
</script>

And finally at the end of the file to prevent the blimp from scrolling until the page is fully loaded:
<script type="text/javascript" language="javascript">
/* This code is from Dynamic Web Coding at http://www.dyn-web.com/ Copyright 2003 by Sharon Paine See Terms of Use at http://www.dyn-web.com/bus/terms.html */
// arguments: id, left, top, direction, speed (pixels per loop), delay for restart or null
if(ronpaul<60)new floatObject("floatDiv", 1200, 40, "left", 1, null);
else new floatObject("floatDiv", -70, 40, "right", 1, null);
</script>

And finally, don't forget that the image locations above are shown as relative. If you want to use the images you need to copy them to your server or point to http://ronpaulideas.com/Files/BlimpPort.gif and http://ronpaulideas.com/Files/BlimpStarboard.gif.

Let me know if see any errors or problems.

Enjoy!
Michael Dalton
Blackjack Review Network
http://www.BJRnet.com
http://www.mypokerbonuscodes.com

[bjrnet]

UPDATE: FOR LATEST BLIMP SCROLL EFFECTS EXAMPLES CHECK OUT http://www.bjrnet.com/ronpaulblimps

-------------------

I just noticed an error in the last code I published here (above). I've already fixed it.

If you already copied it, here is the change:

if(ronpaul<50)document.write("<div id='floatDiv'...........

SHOULD BE

if(ronpaul<60)document.write("<div id='floatDiv'...........

In otherwords, the "ronpaul" variable needs to match the value of the ronpaul check lower in the code. I discovered this when I noticed that occasionally the blimp would scroll "backward" :-)

[chucksheen]

Very neat javascript RP Blimp!

Thanks!

[AFedForFreedom]

Is there a way to get this to work on a MySpace page?

I'm not very good with code, I mean not good at all!

Suggestions?

[HOLLYWOOD]

BLIMP!

[mrchubbs]

Not that I can find. I just started using this thing yesterday so there is still a lot I do not know. We have WordPress 2.3.1 and I only have access to the normal admin interface.

If this is possible can someone walk me through the steps?

thanks

I think I can. I set it up on Liberty Maven, which uses Wordpress.

Do you have FTP access so you can upload the .js file and the images?

The hardest part is not editing the files, but getting the .js file and images in place and linking to them properly from within the code.

First from the Admin interface....
Click on "Presentation".... then "Theme Editor"....

Once on that page you should see an edit window with one of the theme/template files with a mixture of HTML and PHP in it... On the right side you should see a list of other files you can bring up for editing.

These files are highly dependent on the theme you are using, but in general you should have both "Header" and "Footer" files.

First edit the "Header" file by clicking on it on the right of the Theme Editor page. It will come up in the edit window. Scroll down until you see the end of the head section: </head>

You want to copy and paste the code that belongs in the head section just before that line.

Also, make sure to modify the location of the javascript file you uploaded to be the proper path for your site. That section looks like this:

<script src="/js/dw_float.js"

Just change the /js/dw_float.js to the proper location.

Then just after the <body> tag copy and paste the 2nd piece of code, which should make the blimp scroll across the top of the page (or near the top).

In this section of code, you will need to modify the image locations to be proper for your site (wherever you uploaded them). These are the two paths that are X in img src="X" in this code section. Or you can link to the images hosted somewhere else, but nonetheless these need to be modified.

Save the changes to the Header file.

Open the Footer file for editing.

At the bottom of the Footer file just before the close body tag </body> copy and paste the final code snippet. You don't have to modify anything in this one.

Save it.

Go to the page and reload it and see if it works. Mine worked on the first try.

Great stuff bjrnet. Thanks for posting this and doing this work.

If you have any problems/questions let me know and I'll try to help. The caveat here is that Wordpress themes vary quite a bit and sometimes have different sections in different files, so YMMV.

Enjoy!

[antiwardoc]

[QUOTE=bjrnet;623429]Last night, while waiting for the Tea Party to begin I had an idea! What if visitors to my web site could see Ron Paul's blimp slowly scroll across the screen.

Nice, but it would be even better if, after finishing up flying from left to right showing the Ron Paul Revolution banner, if you could activate a second script where it would fly from right to left, showing the "Who is Ron Paul?" "Google Ron Paul" banner.

Should be easy to add on.

[bjrnet]

UPDATE: FOR LATEST BLIMP SCROLL EFFECTS EXAMPLES CHECK OUT http://www.bjrnet.com/ronpaulblimps

--------------------------

Check my latest code (posted a few posts ago). That code which uses a random function will randomly scroll the blimp from left to right OR right to left and use the two different blimp banners.

Yes, I guess you could scroll both ways on a single load. I'll try to find the time to check if it is possible.

Michael Dalton
http://www.BJRnet.com
http://www.mypokerbonuscodes.com

[bjrnet]

UPDATE: FOR LATEST BLIMP SCROLL EFFECTS EXAMPLES CHECK OUT http://www.bjrnet.com/ronpaulblimps

-------------------------

OK, I just changed a bit of code and now I have "both" blimps on the screen.

The Revolution blimp scrolls in from the left and the WhoIs blimp scrolls in from the right "at the same time".

Random blimp example is at http://www.bjrnet.com/index.html

Dual blimp example is at http://www.bjrnet.com/index_blimptest1.html

Check the source of the page for the code. Very simple to make this change.

AND now here is an example of one blimp after another with a 30 second (or so) delay for the second blimp: Dual blimp example is at http://www.bjrnet.com/index_blimptest2.html

Michael Dalton
http://www.bjrnet.com
http://www.mypokerbonuscodes.com

[george in pahrump]

Thanks, it's now floating on our local discussion board.

http://www.pahrumptalks.com/

Note the poll results.

[antiwardoc]

http://www.bjrnet.com/index_blimptest2.html

On my widescreen laptop, the right-going blimp appears before the left-going blimp has reached the end of the page, but this is actually interesting.

The blimps don't loop, but stop after they make their journey across the page. This is good, too, since it doesn't get too annoying.

Now the next step is to make it work on the cnn.com home page :-)

Great job! Hope this goes viral on myspace and the usual places.

Regarding the one at: http://www.pahrumptalks.com/

I find it annoying when the blimp loops and keeps appearing. I think a single pass is enough. Less is more.

<B>Probability algorithm</B>
I would also add a probability algorithm, so that the blimp only appears on every 5th page load. This will keep the script from being annoying, and actually is more interesting, since you load the page and wait, and you don't know if the blimp will or will not appear.

If the blimp appears on every page load, it can get tiring for frequent users of the site.

[noVember5th]

Hello. Thanks for the scrolling graphic. Its incredible. Still, i'm having trouble getting it to work on my blog. You give good instructions for copying and pasting the 3 elements of the code, but what do i do with the original long piece of code that you have in your link? I'm not good with code at all. check out my blog at http://dutchninja.blogspot.com/ When I follow your directions, at least to the best of my ability, all that ends up happening is that my background in my header changes colors. Can you give me a step by step instructions, or help me some other way. Thanks again.

[bjrnet]

UPDATE: FOR LATEST BLIMP SCROLL EFFECTS EXAMPLES CHECK OUT http://www.bjrnet.com/ronpaulblimps

------------------------

Response to a couple of above posts:

1) The probability algorithm idea is good. Yes, depending on the site, the blimp scroll may get old really quick. One pass per visit is enough in my opinion. For some sites, once every 5 visits might be OK. You might use cookies to remember when the last scroll was. Should be easy to change the code. You could also have the blimp "start" scrolling at different times.

2) The main dw_float.js file and style setting needs to be added to the HEAD section of your HTML file as follows:
<style type="text/css">#floatDiv {position:absolute; visibility:hidden;left:0;top:0;z-index:200;}</style>
<script src="http://www.bjrnet.com/js/dw_float.js" type="text/javascript"language="javascript"></script>
<script type="text/javascript" language="javascript">var ronpaul=(100*Math.random());</script>

OR I have found that the scroll will also work if you simply put the call to the Javascript direct in the page as follows:
<script src="http://www.bjrnet.com/js/dw_float.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">var ronpaul=(100*Math.random());</script>
AND modify the DIV (floatDiv) directly as follows:
<div style="position:absolute;visibility:hidden;left:0;top:0;z-index:200;" id="floatDiv">

Please remember you are pointing to my site http://www.bjrnet.com in the above. I can't guarantee this file will always be there so you should copy it and move it somewhere else.

Michael Dalton
http://www.bjrnet.com
http://www.mypokerbonuscodes.com

[bjrnet]

OK, I've managed to get the blimp to scroll on one of my Google blogs. Check out:
http://mypartypokerbonuscodes.blogspot.com/ . Note that this is only the random blimp version as described above.

Check the blog source to see how I did it or follow the instructions below. But you should change references to www.bjrnet.com as I can't guarantee the files will always be there. Copy the 2 images and copy the main dw_float.js file to your own server.

>>>>>>>>>> IN THE HEAD SECTION
<!-- Ron Paul Blimp -->
<script src="http://www.bjrnet.com/js/dw_float.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">var ronpaul=(100*Math.random());</script>


>>>>>>>>>> IN THE MAIN HTML SECTION
<!-- Ron Paul Blimp -->
<script type="text/javascript" language="javascript">
//<![CDATA[
if(ronpaul<60)document.write("<div id='floatDiv'><a href='http://www.ronpaul2008.com' target='_blank'><img src='http://www.bjrnet.com/images/politics/BlimpPort.gif' width='280' height='95' border='0' alt='Join the Revolution - Support Ron Paul' title='Join the Revolution - Support Ron Paul'></a></div>");
else document.write("<div id='floatDiv'><a href='http://www.ronpaul2008.com' target='_blank'><img src='http://www.bjrnet.com/images/politics/BlimpStarboard.gif' width='280' height='95' border='0' alt='Join the Revolution - Support Ron Paul' title='Join the Revolution - Support Ron Paul'></a></div>");
//]]>
</script>


>>>>>>>>>>> AT THE END OF HTML BEFORE </BODY>
<!-- Ron Paul Script -->
<script type="text/javascript" language="javascript">
//<![CDATA[
// This code is from Dynamic Web Coding at http://www.dyn-web.com/
// Copyright 2003 by Sharon Paine
// See Terms of Use at http://www.dyn-web.com/bus/terms.html
// arguments: id, left, top, direction, speed (pixels per loop), delay for restart or null
if(ronpaul<60)new floatObject("floatDiv", 1200, 40, "left", 1, null);
else new floatObject("floatDiv", -70, 40, "right", 1, null);
//]]>
</script>

[xexkxex]

Does anyone know how to get it so that the blimp comes down with the viewing area when a person scrolls down the page...

...sort of like those ads that stay with you..???

..and maybe go back and forth 2-3 times before disappearing???

If not..its cool....this is very awesome!!!!

[Tarzan]

I have created transparent images which will work better on a black background.
Feel free to download them from here: Blimp Stuff (http://ronpaulideas.com/blimp.htm)

great work brjnet!

[Doji]

I wrote my own where the blimp turns around and goes back the other way when it reaches the top of the page. To try it out, simply paste the following code anywhere in the body of your page (near the end will probably work best):


<style type="text/css">#floatDiv {position:absolute;left:0px;top:0px; z-index:200;} #floatDiv img{border: none;}</style>

<div id="floatDiv"><a href="http://www.ronpaul2008.com" target="_blank"><img id="blimpImg" src="http://www.jugglecentral.com/RonPaul/RonPaulBlimp.gif" alt="Join the Revolution - Support Ron Paul" title="Join the Revolution - Support Ron Paul"></a></div>

<script type="text/javascript">
var w = window.innerWidth? window.innerWidth : document.body.clientWidth? document.body.clientWidth : 640;
var blimp = document.getElementById("floatDiv");

var travelLength = w-document.getElementById('blimpImg').width;
var leftPos = travelLength;

var timer = setInterval("moveLeft()", 1);

function moveLeft()
{
if(leftPos > 0)
{
leftPos -=2;
blimp.style.left= leftPos+"px";
}
else if(leftPos <= 0)
{
document.getElementById('blimpImg').src = "http://www.jugglecentral.com/RonPaul/RonPaulBlimp2.gif";
clearInterval(timer);
timer = setInterval("moveRight()", 1);
}
}

function moveRight()
{
if(leftPos < travelLength)
{
leftPos +=2;
blimp.style.left= leftPos+"px";
}
else if(leftPos >= travelLength)
{
document.getElementById('blimpImg').src = "http://www.jugglecentral.com/RonPaul/RonPaulBlimp.gif";
clearInterval(timer);
timer = setInterval("moveLeft()", 1);
}
}
</script>


You can use the one above if you like, but I see two problems with our current designs.
1. It does not work in myspace. Myspace filters javascript for security reasons, so it can't be used there. This is a major disadvantage because myspace would be a great place to get the message out.
2. It's annoying and gets in the way. It covers up actual content, and ones that do multiple passes like the one I made don't go away, which is even worse.

To solve these problems someone should make an animated gif or flash applet banner. I plan to give the gif a shot, but I have no experience with them so I'm sure someone else could do better.

[flames2dust77]

No it doesn't work on Myspace. Myspace no likey javascipt. I do have a dummy account and tested the image there, BUT I had to put it in w/ < marquee > < / Marquee> which is so blah AND that code only works in internet explorer.

[bjrnet]

I tried to organize some of the Ron Paul Blimp Javascript effects examples.

Check out http://www.bjrnet.com/ronpaulblimps for an index of the test examples.

1) Look at the source for the code
2) Check the source header if an Javascript file is needed

I have one of the examples (random effect 5) running on http://www.bjrnet.com main page.

[bjrnet]

Bump

These scripts are ready to use.

I like example 5, which I am using on my site, but it could be a bit better. I've got the blimp that scrolls from left to right to disappear at end of journey but since it is actually still there the horizontal scroll bar shows. I'd like to get rid of the horizontal scroll bar. I'll keep trying to fix that.

[Minnesota Chris]

Thanks bjrnet, these are great! I put option 3 on my freebie Ron Paul page:

http://halfen.50megs.com/rp2008.html

[bjrnet]

Post your website here if you use one of these scripts or even if you create one of your own!

[Doriath]

Post your website here if you use one of these scripts or even if you create one of your own!

Not mine but I found the virtual blimp today via lewrockwell.com...

http://www.libertymaven.com/2007/12/19/the-official-media-guide-to-attacking-ron-paul/

Fun article too!

[bjrnet]

UPDATE: FOR LATEST BLIMP SCROLL EFFECTS EXAMPLES CHECK OUT http://www.bjrnet.com/ronpaulblimps

--------------------------------

I think I just fixed the scrollbar problem.

One of the problems was that the horizontal scrollbar would show when the "left to right" blimp went off the screen. Here is how you fix it:

Add the style command ------> style='overflow-x:hidden;' to the DIV

as follows:

<div id='floatDiv' style='overflow-x: hidden;'> ....... </div>

Now when the blimp goes off screen the scrollbar will not be seen.

Michael Dalton
http://www.bjrnet.com
http://www.mypokerbonuscodes.com

[Tarzan]

I think I just fixed the scrollbar problem.
One of the problems was that the horizontal scrollbar would show when the "left to right" blimp went off the screen. Here is how you fix it:


Something similar happens with the "right to left" blimp as well. Could you give that a look as well? Then post the entire code?

regardless... great stuff... thanks!
.

[bjrnet]

Yes, it happens both ways actually, but the solution is the same.

Just change the DIV entry where you define where the blimp will start to the following:

<div id='floatDiv' style='overflow-x: hidden;'> ....... </div>

The STYLE element above is what fixes it by setting the overflow to hidden.

Michael Dalton
http://www.bjrnet.com
http://www.mypokerbonuscodes.com

[DirtMcGirt]

damn that's sweet...

[bjrnet]

Looks like using

div id='floatDiv' style='overflow-x: hidden;'> ....... </div>

only works in Firefox (and possibly Netscape as well). It appears that the horizontal scrollbar still is visible if you use Microsoft Internet Explorer.

Oh well, I'll keep looking for a complete fix to the problem.

If anyone has any suggestions please post here.

Michael Dalton
http://www.bjrnet.com
http://www.mypokerbonuscodes.com

[Doji]

Don't we all just love IE...
Here's the blimp in a 720x90px banner. You can position it anywhere on the page you want, and put anything in the banner (behind the blimp). It's easy to change the width, just make sure the width in the css and travelLength in the javascript are the same.


<style type="text/css">#blimpBanner {overflow-x:hidden;background: url('http://www.jugglecentral.com/RonPaul/rp_banner.jpg') no-repeat center center;width: 720px;margin: 0 auto;border: 2px inset #aaa;} #blimpImg{border: none;position: relative;bottom: 8px;}</style>

<a href="http://www.ronpaul2008.com" target="_blank">
<div id="blimpBanner">
<img id="blimpImg" height="90px" src="http://www.jugglecentral.com/RonPaul/RonPaulBlimp.gif" alt="Join the Revolution - Support Ron Paul" title="Join the Revolution - Support Ron Paul">
</div>
</a>

<script type="text/javascript">
var travelLength = 720, leftPos = travelLength;
var blimp = document.getElementById("blimpImg");

var timer = setInterval("moveLeft()", 1);

function moveLeft()
{
if(leftPos > 0-document.getElementById('blimpImg').width)
{
leftPos -=2;
blimp.style.left= leftPos+"px";
}
else if(leftPos <= 0-document.getElementById('blimpImg').width)
{
document.getElementById('blimpImg').src = "http://www.jugglecentral.com/RonPaul/RonPaulBlimp2.gif";
clearInterval(timer);
setTimeout('timer = setInterval("moveRight()", 1)', 1500);
}
}

function moveRight()
{
if(leftPos < travelLength)
{
leftPos +=2;
blimp.style.left= leftPos+"px";
}
else if(leftPos >= travelLength)
{
document.getElementById('blimpImg').src = "http://www.jugglecentral.com/RonPaul/RonPaulBlimp.gif";
clearInterval(timer);
setTimeout('timer = setInterval("moveLeft()", 1)', 1500);
}
}
</script>

[VicDeHaven]

I don't have a web page right now.
But I would love to have this blimp as a GIF that would scroll across my e-mail stationery.

That should be simple compared to doing the Java script thing for a web page.

Who's gonna make us a GIF that moves across our e-mail???

[Kacela]

For MySpace, perhaps we could use the <marquee> tags?

[bjrnet]

UPDATE: FOR LATEST BLIMP SCROLL EFFECTS EXAMPLES CHECK OUT http://www.bjrnet.com/ronpaulblimps

[Knightskye]

Blump

[pacelli]

This would be a great idea for the ron paul blimp site.

[Man from La Mancha]

Cool, like them all. Can you make one where the blimp just parks some where on the screen. Also could you make some sort of game out of it where you try to catch the blimp with your cursor but can't ever make. Or have a littler blimp follow your cursor around. Thanks for all your work.

.

[bjrnet]

UPDATE: FOR LATEST BLIMP SCROLL EFFECTS EXAMPLES CHECK OUT http://www.bjrnet.com/ronpaulblimps

[european]

hahaha ace :D

[bjrnet]

Blump

UPDATE: FOR LATEST BLIMP SCROLL EFFECTS EXAMPLES CHECK OUT http://www.bjrnet.com/ronpaulblimps

These effects are easy to incorporate on your website. You can link directly to the Ron Paul campaign, Ron Paul Blimp site or any site you want.

[bjrnet]

blump

[devil21]

Has any code been devised for myspace pages?

[Doji]

Has any code been devised for myspace pages?

I was working on this using Kacela's idea, but with limited success. The code I came up with works like a charm in firefox, but for some reason it doesn't go to the top of the myspace page in other browsers. I'm pasting it here for people to play around with, maybe someone will get it to work.


<marquee direction="left" scrolldelay="1" scrollamount="3" style="position: absolute; top:0; left: 0;width: 100%;"><img src = "http://www.jugglecentral.com/RonPaul/RonPaulBlimp.gif" /></marquee>

[bjrnet]

blimp

[bjrnet]

blimp

[Agora]

huge! /# 6/

[JakeW]

This code will work on MySpace.

<marquee direction="left" scrolldelay="1" scrollamount="3" style="position: absolute; top:0; left: 0; height: 120px; width: 100%;"><img src = "http://www.jugglecentral.com/RonPaul/RonPaulBlimp.gif" /></marquee>

[All Seeing Eye]

brilliant work