for websites

First, download the following files. While you can put the files in any directory you would like, these instructions assume that they are in the root directory. If they are in a different directory, or have different file names, you will need to modify the code to reflect those changes. Note that if you are using jQuery downloaded from the official site, you will most likely need to change the filename.

Firefox Bar Complete (.zip) [download]

Firefox Bar Javascript (.js) [view][download]
jQuery Framework (.js) [download][official]
Firefox Bar Stylesheet (.css) [view][download]
Firefox Bar Background (.jpg) [view][[download]
Firefox Bar Logo (.jpg) [view][download]

Once you have uploaded the previously mentioned files, you will need to add HTML code to the pages on which you want the bar displayed. Add the following code somewhere between the <head> and </head> tags in your HTML source code.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ffbar.js"></script>
<link href="ffbar.css" rel="stylesheet" type="text/css" />

Then, add this code within the <body> and </body> tags. Adding it towards the end is suggested, as it will load after your content has loaded.

<div id="ffbar">
    <div id="ffbar_l">
        <h1><a href="http://www.spreadfirefox.com/node&id=245078&t=1" rel="external">
        Get Firefox</a> | </h1>This site recommends Firefox for better browsing.
    </div>
    <div id="ffbar_r">
        <a href="http://ffbar.damienallen.com" rel="external" title="get firefox bar for your site">
        firefox bar</a> | <a href="#" id="ffclose" title="close this bar">close</a></div>
    <div id="shad1"></div>
    <div id="shad2"></div>
    <div id="shad3"></div>
</div>

That's it! Unless you use a different conflicting Javascript framework.

If you are already using a Javascript framework (such as MooTools, Prototype, Dojo or YUI to name a few), you will probably be okay. Firefox Bar uses jQuery's noConflict function attempt to remove conflicts. If you still get a conflict (or simply wish to use another framework), an outline of the small Javascript application is posted below. Most frameworks should have the ability to fill in the missing pieces.

if (document.cookie.indexOf("ffbar=") == -1) { // cookie check
    function() { // Run this function on load 
        // Get browser data
        if(/* Browser != mozilla/gecko */) {
            // Transition #ffbar DIV into view
            function () { // Run onclick of #ffclose 
            document.cookie = "ffbar=true";						  
            // Transition #ffbar DIV out of view
            } 
        } // end of browser check conditional
    } // end of onload function
} // end of cookie check conditional

For reference, the commented jQuery code is shown below.

// noConflict code removed from here

if (document.cookie.indexOf("ffbar=") == -1) { // cookie check
    jQuery(function($) { // run function onload
        jQuery.each(jQuery.browser, function(i, val) { // get browser info
            if(i=="mozilla" && val==false) { // check if mozilla/gecko
                jQuery("#ffbar").fadeIn("slow"); // fade bar in
                jQuery("#ffclose").click(function () { // run function onlcick
                    document.cookie = "ffbar=true"; // set cookie						  
                    jQuery("#ffbar").fadeOut("slow"); // fade bar out
                });
            } // end of browser check conditional
        });  // end of browser info loop
    }); // end of onload function
} // end of cookie check conditional

If you have rewritten Firefox Bar JavaScript for another framework, we can add a link to your page. Simply email us at .

for websites

Get Firefox |