WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

Go to page : 1, 2  Next

View previous topic View next topic Go down  Message [Page 1 of 2]

1 JavaScript Custom Background Changer on Sun Mar 18, 2012 9:29 pm

Unknown Data


Registered Member
Registered Member
JavaScript Custom Background Changer
Members can choose their own background - Forumotion


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.

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.



Last edited by Unknown Data on Sun Jun 24, 2012 4:15 pm; edited 7 times in total

http://woops.dk

2 Re: JavaScript Custom Background Changer on Sun Mar 18, 2012 9:53 pm

Sanket


Administrator
Administrator
Nice tutorial, well explained.

Although i added it on my test forum. http://testing.4rumer.com/forum

There are two links at the bottom, is it supposed to create two links?

http://www.webartzforum.com

3 Re: JavaScript Custom Background Changer on Sun Mar 18, 2012 11:18 pm

Unknown Data


Registered Member
Registered Member
Wierd, there wasn't any problem on my testboard scratch

Have you edited your "overall_footer_begin/-end" or "simple_footer" template? it could be that, that are occuring an error.

http://woops.dk

4 Re: JavaScript Custom Background Changer on Mon Mar 19, 2012 2:52 pm

Sanket


Administrator
Administrator
Yes, i have modified the overall_footer_end

http://www.webartzforum.com

5 Re: JavaScript Custom Background Changer on Mon Mar 19, 2012 10:29 pm

Unknown Data


Registered Member
Registered Member
Oh, that's properbly what's causing the error.
Guess I should add that in the tutorial. Smile

http://woops.dk

6 Re: JavaScript Custom Background Changer on Tue Mar 20, 2012 7:30 am

ankillien


Administrator
Administrator
Very nice and innovative tutorial UD Very Happy
Tell me once you make necessary changes in the tutorial, I'll accept it.

7 Re: JavaScript Custom Background Changer on Thu Mar 22, 2012 12:55 am

Unknown Data


Registered Member
Registered Member
Thanks! I've changed the first post, should be all good now. Smile

http://woops.dk

8 Re: JavaScript Custom Background Changer on Thu Mar 22, 2012 1:16 am

black beauty


Registered Member
Registered Member
Really excited


the codes world very attractive how can i learn something about it

9 Re: JavaScript Custom Background Changer on Thu Mar 22, 2012 1:38 am

Mr.Joker


Mr. WebArtz
Mr. WebArtz
First learn javascript, then jQuery

10 Re: JavaScript Custom Background Changer on Thu Mar 22, 2012 7:32 am

ankillien


Administrator
Administrator
black beauty wrote:Really excited


the codes world very attractive how can i learn something about it


You can learn from here: http://www.webartzforum.com/t93-list-of-tutorials

Start with HTML, then CSS and then JS Smile

Tutorial Accepted

Thanks UD Very Happy

11 Re: JavaScript Custom Background Changer on Fri Mar 30, 2012 2:26 pm

Epyk


Registered Member
Registered Member
I'm rather excited about this tutorial, but so far every time I've tried to set it up on my test forum...for every version type, it hasn't worked for me.

I've added the JS to JS management section, and added the CSS. But the link fails to show up in my footer.

Am I missing a step?

12 Re: JavaScript Custom Background Changer on Fri Mar 30, 2012 4:38 pm

Unknown Data


Registered Member
Registered Member
Link to testforum please

http://woops.dk

13 Re: JavaScript Custom Background Changer on Sat Mar 31, 2012 4:30 am

Epyk


Registered Member
Registered Member
thesec.forumotion.com

It's a fresh out of the box forum, Iv'e made no other alterations to it other than trying out this JS/CSS combo.
*currently running the invision version*

14 Re: JavaScript Custom Background Changer on Sat Mar 31, 2012 3:53 pm

Unknown Data


Registered Member
Registered Member
The error is causing, because this board is removing backslashes from the post. I've tried several times to post the code with the backslash in the first post, but it seems that this board is removing them, and therefore wont the code work.

I don't know why the first post won't accept backslash, but it seems that the comments will. So try this updated version of the code, which contains the backslashes.
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. NOTE! This website is using cookies to store the image.<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 + ")";
});

http://woops.dk

15 Re: JavaScript Custom Background Changer on Sat Mar 31, 2012 9:51 pm

Sanket


Administrator
Administrator
UD, on this board the backslashes are being deleted?

http://www.webartzforum.com

16 Re: JavaScript Custom Background Changer on Sat Mar 31, 2012 10:27 pm

Unknown Data


Registered Member
Registered Member
For my first post in this thread it does. I can't paste in the needed backslashes in the first post, without them being deleted.

http://woops.dk

17 Re: JavaScript Custom Background Changer on Sun Apr 01, 2012 6:46 am

Epyk


Registered Member
Registered Member
Awesome.
Thanks for the help Data, and for the work on the BG changer in general.

18 Re: JavaScript Custom Background Changer on Fri Jul 13, 2012 9:52 am

aldoani


Registered Member
Registered Member
Very Happy thank u

http://dowan.7olm.org/

19 Re: JavaScript Custom Background Changer on Sat Nov 24, 2012 7:57 am

jonasmarsh621


Registered Member
Registered Member
This Data is very well appreciated UD. Hopefully I can do this stuff faster.

http://icreatesolutions.com.au/

20 Re: JavaScript Custom Background Changer on Tue Feb 19, 2013 8:49 am

Brian Mitchell


Registered Member
Registered Member
Thanks for sharing. This is really a very nice and well explained tutorial.

View previous topic View next topic Back to top  Message [Page 1 of 2]

Go to page : 1, 2  Next

Permissions in this forum:
You cannot reply to topics in this forum