[TUT] Add a floating "donate" link to your downloads page

in Tutorials on 04 Jul 2010

Add a floating "donate" link to your downloads page
This script will add a floating "donate" box to your downloads page and will disappear in 10 seconds.

(Requires the downloads mod by vbgamer)

Demo: http://www.bluedevilcustoms.com/index.php?action=downloads

Create a file called: bc.htm  in your forum root....

and add this to it.  This is the code of the popup.

<div id="ajaxdiv" style="width:160px; border:1px solid black; padding: 10px; background:#443b31">

<div style="text-align:center"><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="4WHLT96W38VTU">
<input type="image" src="http://www.bluedevilcustoms.com/images/donate%20copy.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
<p><span style="color: #e0dcdc; ">Please donate, help keep this website alive.</span>

<p><span style="color: #e0dcdc; ">This message disappears in <b>10</b> seconds. <a href="javascript:alwaysOnTop.hidediv('ajaxdiv')">Click here</a> to hide  it now.</span></p>


Replace the paypal button with your own!

Create a file called:  stayontop.js in your forum root....

This handles the scrolling and fading part.

Add this to it:

//** Stay on Top content script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** Script available at usage terms at http://www.dynamicdrive.com
//** v1.0 (May 12th, 09')

var alwaysOnTop={

dsettings: {
targetid: '',
orientation: 2,
position: [10, 30],
externalsource: '',
frequency: 1,
hideafter: 0,
fadeduration: [500, 500],
display: 0 //internal setting on whether to display target element at all (based on frequency setting)

settingscache: {},

positiontarget:function($target, settings){
var fixedsupport=!document.all || document.all && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
var posoptions={position:fixedsupport? 'fixed':'absolute', visibility:'visible'}
if (settings.fadeduration[0]>0) //if fade in
posoptions[(/^[13]$/.test(settings.orientation))? 'left' : 'right']=settings.position[0]
posoptions[(/^[12]$/.test(settings.orientation))? 'top' : 'bottom']=settings.position[1]
if (document.all && !window.XMLHttpRequest) //loose check for IE6 and below
posoptions.width=$target.width() //IE6- seems to require an explicit width on a DIV
if (!fixedsupport){
this.keepfixed($target, settings)
var evtstr='scroll.' + settings.targetid + ' resize.'+settings.targetid
jQuery(window).bind(evtstr, function(){alwaysOnTop.keepfixed($target, settings)})
this.revealdiv($target, settings, fixedsupport)
if (settings.hideafter>0){ //if hide timer enabled
}, settings.hideafter+settings.fadeduration[0])

keepfixed:function($target, settings){
var $window=jQuery(window)
var is1or3=/^[13]$/.test(settings.orientation)
var is1or2=/^[12]$/.test(settings.orientation)
var x=$window.scrollLeft() + (is1or3? settings.position[0] : $window.width()-$target.outerWidth()-settings.position[0])
var y=$window.scrollTop() + (is1or2? settings.position[1] : $window.height()-$target.outerHeight()-settings.position[1])
$target.css({left:x+'px', top:y+'px'})

revealdiv:function($target, settings){
if (settings.fadeduration[0]>0) //if fade in
$target.show().animate({opacity:1}, settings.fadeduration[0])
if (settings.frequency=="session") //set session only cookie (name: 'sots' + targetid)?
this.setCookie('sots'+settings.targetid, 'shown')
else if (/^\d+ day/i.test(settings.frequency)){ //set persistent cookie (name: 'sotp' + targetid)?
var persistdays=parseInt(settings.frequency)
this.setCookie('sotp'+settings.targetid, persistdays, persistdays)

hidediv:function(targetid){ //public function
var $target=jQuery('#'+targetid)
if ($target.css('display')=='none') //if target hidden already
var settings=this.settingscache[targetid]
if (settings.fadeduration[1]>0) //if fade out
$target.animate({opacity:0}, settings.fadeduration[1], function(){$target.hide()})
var evtstr='scroll.' + settings.targetid + ' resize.'+settings.targetid

loadajaxcontent:function($, settings){
url: settings.externalsource,
alert('Error fetching Ajax content.\nServer Response: '+ajaxrequest.responseText)
var $target=$(content)
if ($target.get(0).id==settings.targetid)
alwaysOnTop.positiontarget($target.appendTo('body'), settings)
alert('Error: The value you have entered for "targetid" ('+settings.targetid+') '
+ 'doesn\'t match the ID of your remote content\'s DIV container ('+$target.get(0).id+'). This must be corrected'

var settings={}
  settings=jQuery.extend(settings, this.dsettings, options)
if (typeof settings.frequency=="number") //value of 1=show, 0=hide
settings.display=(settings.frequency>Math.random())? 1 : 0
else if (settings.frequency=="session")
settings.display=(this.getCookie('sots'+settings.targetid)=='shown')? 0 : 1 //session cookie name: 'sots' + targetid
else if (/^\d+ day/i.test(settings.frequency)){ //match 'xx days'
//If admin has changed number of days to persist from current cookie records, reset persistence by deleting cookie
if (parseInt(this.getCookie('sotp'+settings.targetid))!= parseInt(settings.frequency))
this.setCookie('sotp'+settings.targetid, '', -1)
settings.display=(this.getCookie('sotp'+settings.targetid)!=null)? 0 : 1 //persistent cookie name: 'sotp' + targetid
if (settings.externalsource!='' && settings.display){ //if ajax content
alwaysOnTop.loadajaxcontent($, settings)
else if (settings.externalsource==''){ //inline content
var $target=$('#'+settings.targetid)
if (!settings.display){ //if hide content (based on frequency setting)
return false
alwaysOnTop.positiontarget($target, settings)
}) //end ready

var re=new RegExp(Name+"=[^;]*", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null

setCookie:function(name, value, days){
if (typeof days!="undefined"){ //if set persistent cookie
var expireDate = new Date()
var expstring=expireDate.setDate(expireDate.getDate()+days)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()
document.cookie = name+"="+value+"; path=/"

Open the downloads template....


Find at the top:

function template_mainview()
global $scripturl, $txt, $context, $modSettings, $subcats_linktree, $user_info;

Add after:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.bluedevilcustoms.com/stayontop.js">

* Stay on Top content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more


<script type="text/javascript">

targetid: \'ajaxdiv\',
orientation: 2,
position: [20, 200],
hideafter: 20000,
externalsource: \'http://www.bluedevilcustoms.com/bc.htm\'


On this code, replace my URL's with yours.   That's it. ;)

idesignSMF Team
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF.com and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.

idesignSMF.com | SimpleMachines.org


Hi Mick

I have created the bc.htm and the stayontop.js   I added the the lines to the download2.template and I keep getting this error (see image below)
I followed the tutorial step by step but still the error persists.  Any help you could give me to fix this would be much appreciated.

Thanks in advanced


Tutorials. We have a great selection of tutorials to help you make the most of your theme.