Ron Paul Blimp Scrolls Over Web Page

Last edited:
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.
 
Last edited:
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>
 
Latest Scrolling Blimp Code

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
 
Last edited:
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" :-)
 
Last edited:
MySpace

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?
 
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!
 
Nice, but even better if it would show other side too

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.
 
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
 
Last edited:
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
 
Last edited:
Love the new code !

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.
 
Last edited:
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.
 
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
 
Last edited:
Blimp on Google Blogs (Here is how!!!)

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>
 
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!!!!
 
Back
Top