NOTICE! THIS CODE WONT WORK PERFECTLY, BECAUSE I SOMEHOW CAN'T ADD THR NEEDED BACKSLASHES. IF YOU CAN'T ADD THEM YOURSELV, THEN PLEASE CONTACT MÉ BY PM, OR REPLY TO THIS THREAD.
Some of us may know a function, that makes it possible for the user, to choose their own background. I've decided to create such a function for forumotion boards, by using the users cookies and NOT by storing the value into a database. The database is though the easiest and best method, but since there isn't a lot of users on forumotion, that uses an external host for database storage, decided I to do it with the cookies.
The function itself adds a little link in the footer. A little box will be visible, when someone clicks that link. The box contains a short explantion about the function, a textfield and two buttons - one to choose the background image, and one to delete the background image.
To give a short description of what the Javascript does, then read the following points:
- First of all, are we creating the function, that stores the background in a cookie. That is done by creating a variable, which contains the value of the textfield, which the user can submit their image URL in. This cchanger functions is activated when clicking the "choose background"-button, and a cookie is created with a value equal to the picked URL of the image.
- Next are we creating a function which deletes the background-image. This is done with the creset function. This function simply does the same as the cchanger function, but instead of seeting the cookies value as the textfields value, will it set the value to none. This should be changed to a URL, if you're having an image as the default backgorund on your board.
- The next function is activated after the page is loaded, and will create the link + the little popup box, that will contain the option to change the background. It will also check the cookies value, and set the background-image as equal to that value.
Here you have the Javascript for the 4 different versions of forumotion boards:
Invision:
- Code:
function cchanger() {
var cc = document.getElementById("ccvalue").value;
my_setcookie("bgcolor",cc,true);
document.body.style.backgroundImage = "url(" + cc + ")";
}
function creset() {
var cbg = "none";
my_setcookie("bgcolor",cbg,true);
document.body.style.backgroundImage = "url(" + cbg + ")";
document.getElementById("ccvalue").value = "none";
}
$(function() {
document.body.innerHTML+="<div id='bgchanger'><div>Insert the URL of the image you wish to have as background on this website, in the field below.<br/><br/><input type='text' id='ccvalue' /> <input type='button' value='Choose image' onclick='cchanger();' /> <input type='button' value='Delete image' onclick='creset();' /><br/><br/><a href='javascript:void(0)' onclick='document.getElementById("bgchanger").style.display="none";'>Close this box</a></div></div>";
document.getElementById("gfooter").childNodes[0].childNodes[2].childNodes[0].childNodes[0].childNodes[0].innerHTML+=" | <a rel='nofollow' href='javascript:void(0)' onclick='document.getElementById("bgchanger").style.display="block";'>Change background</a>";
var cccookie = my_getcookie("bgcolor");
document.getElementById("ccvalue").value = cccookie;
document.body.style.backgroundImage = "url(" + cccookie + ")";
}); PHPBB2:
- Code:
function cchanger() {
var cc = document.getElementById("ccvalue").value;
my_setcookie("bgcolor",cc,true);
document.body.style.backgroundImage = "url(" + cc + ")";
}
function creset() {
var cbg = "none";
my_setcookie("bgcolor",cbg,true);
document.body.style.backgroundImage = "url(" + cbg + ")";
document.getElementById("ccvalue").value = "none";
}
$(function() {
document.body.innerHTML+="<div id='bgchanger'><div>Insert the URL of the image you wish to have as background on this website, in the field below.<br/><br/><input type='text' id='ccvalue' /> <input type='button' value='Choose image' onclick='cchanger();' /> <input type='button' value='Delete image' onclick='creset();' /><br/><br/><a href='javascript:void(0)' onclick='document.getElementById("bgchanger").style.display="none";'>Close this box</a></div></div>";
document.getElementById("page-footer").childNodes[0].childNodes[0].childNodes[0].innerHTML+=" | <a rel='nofollow' href='javascript:void(0)' onclick='document.getElementById("bgchanger").style.display="block";'>Change background</a>";
var cccookie = my_getcookie("bgcolor");
document.getElementById("ccvalue").value = cccookie;
document.body.style.backgroundImage = "url(" + cccookie + ")";
}); PHPBB3:
- Code:
function cchanger() {
var cc = document.getElementById("ccvalue").value;
my_setcookie("bgcolor",cc,true);
document.body.style.backgroundImage = "url(" + cc + ")";
}
function creset() {
var cbg = "none";
my_setcookie("bgcolor",cbg,true);
document.body.style.backgroundImage = "url(" + cbg + ")";
document.getElementById("ccvalue").value = "none";
}
$(function() {
document.body.innerHTML+="<div id='bgchanger'><div>Insert the URL of the image you wish to have as background on this website, in the field below.<br/><br/><input type='text' id='ccvalue' /> <input type='button' value='Choose image' onclick='cchanger();' /> <input type='button' value='Delete image' onclick='creset();' /><br/><br/><a href='javascript:void(0)' onclick='document.getElementById("bgchanger").style.display="none";'>Close this box</a></div></div>";
document.getElementById("pun-foot").childNodes[0].childNodes[1].childNodes[0].innerHTML+=" | <a rel='nofollow' href='javascript:void(0)' onclick='document.getElementById("bgchanger").style.display="block";'>Change background</a>";
var cccookie = my_getcookie("bgcolor");
document.getElementById("ccvalue").value = cccookie;
document.body.style.backgroundImage = "url(" + cccookie + ")";
}); PUNBB:
- Code:
function cchanger() {
var cc = document.getElementById("ccvalue").value;
my_setcookie("bgcolor",cc,true);
document.body.style.backgroundImage = "url(" + cc + ")";
}
function creset() {
var cbg = "none";
my_setcookie("bgcolor",cbg,true);
document.body.style.backgroundImage = "url(" + cbg + ")";
document.getElementById("ccvalue").value = "none";
}
$(function() {
document.body.innerHTML+="<div id='bgchanger'><div>Insert the URL of the image you wish to have as background on this website, in the field below.<br/><br/><input type='text' id='ccvalue' /> <input type='button' value='Choose image' onclick='cchanger();' /> <input type='button' value='Delete image' onclick='creset();' /><br/><br/><a href='javascript:void(0)' onclick='document.getElementById("bgchanger").style.display="none";'>Close this box</a></div></div>";
document.getElementById("pun-foot").childNodes[0].childNodes[1].childNodes[0].innerHTML+=" | <a rel='nofollow' href='javascript:void(0)' onclick='document.getElementById("bgchanger").style.display="block";'>Change background</a>";
var cccookie = my_getcookie("bgcolor");
document.getElementById("ccvalue").value = cccookie;
document.body.style.backgroundImage = "url(" + cccookie + ")";
}); But we are not done yet. We also need some CSS to make the box float and give it a cool and proffesional look.
Things such as padding, margin, colors and size can of course be edited. But be careful. Removing/editing the wrong attributes and values can mess up the view of the function.
- Code:
#bgchanger {
display: none;
background-image: url("http://i52.tinypic.com/2v9oqxx.png");
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#bgchanger div {
background: #FFFFFF;
border-radius: 5px;
padding: 5px;
margin: 50px auto;
width: 450px;
overflow: hidden;
} Good luck and enjoy!
*The function will only work on those pages, the Javascript and CSS is visible on. Also, if you're using either PUNBB or PHPBB2, and have edited the templates, may that cause an error.
|
Home
JavaScript Custom Background Changer Sun Mar 18, 2012 10:59 pm
