Hello all =) I have been doing yet more research on cookies, and this time on css background positions.
Now I have a small problem with 1 or 2 of the functions which i created.
the problem is i either get an 'object expected' or a 'document.TheForm.favSelect is null or not an object' or 'document.TheForm.favSelect2 is null or not an object'. What i NEED for this code to do, is unless u select a background, an alert message is brought up and u cant basically change the position of the background UNLESS a background is there, and when both the background and position of background is selected, the div "news"'s background changes and BOTH select menus disappear, and both the image & the position of the background image are saved to 2 seperate cookies.
Here is my code:
Code:
<body onload="loadall();">
<script type="text/javascript">
var backgroundImages =
[ "images/Crystal_clear_water_Yamma_Sam_Island.jpg",
"images/CrystalForest_Sky.jpg" ];
var backgroundNames =
[ "Default",
"Crystal Forest" ];
var backgroundPositions =
[ "top Left",
"top Center",
"top Right",
"Left",
"Center",
"Right",
"bottom Left",
"bottom Center",
"bottom Right" ];
var backgroundPositionnames =
[ "top Left",
"top Center",
"top Right",
"Left",
"Center",
"Right",
"bottom Left",
"bottom Center",
"bottom Right" ];
function loadOptions( into )
{
for ( var b = 0; b < backgroundImages.length; ++b )
{
into.options[into.options.length] =
new Option( backgroundNames[b], backgroundImages[b] );
}
}
function loadpositionopt( into1 )
{
for ( var c1 = 0; c1 < backgroundPositions.length; ++c1 )
{
into1.options[into1.options.length] =
new Option( backgroundPositionnames[c1], backgroundPositions[c1] );
}
}
function savepos(image){
var favPos = image;
if ( favPos == "" ) return;
SetCookie("position", favPos, exp);
return favPos;
}
function saveImage()
{
//if the 2nd index is select and the 1st 1 is null or "" or 2nd index select and the 1st 1 is null or ""
if(document.TheForm.favSelect2.selectedIndex && GetCookie("image") == null || document.TheForm.favSelect2.selectedIndex && GetCookie("image") == ""){
alert('NO!');
document.TheForm.favSelect2.selectedIndex = 0;
}else{
if(document.TheForm.favSelect.selectedIndex){
getDivsBG(this.value);
saveImage();
}else if(document.TheForm.favSelect2.selectedIndex){
window.location.href=window.location.href;
setDiv(document.TheForm.favSelect2.selectedIndex,'repeat');
savepos();
}
}
}
function loadall(){
getDivBG("image");
setDiv("position","repeat");
loadoptions(document.TheForm.favSelect);
loadpositionopt(document.TheForm.favSelect2);
}
function saverep(rep){
var favrep = rep;
if ( favrep == "" ) return;
SetCookie("repeat", favrep, exp);
return favrep;
}
var expDays = 365;
var exp = new Date();
var favImage = "";
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function GetCookie(name)
{
var cookies = document.cookie.split(/; /g);
var arg = name + "=";
for ( var c = 0; c < cookies.length; ++c )
{
var ck = cookies[c];
if ( ck.indexOf(arg) == 0 )
{
var temp = ck.split(/=/);
return unescape(temp[1]);
}
}
return "";
}
function SetCookie (name, value)
{
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie (name)
{
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
function getBodyBG(cookie)
{
document.body.style.backgroundImage="url('" + GetCookie(cookie) + "')";
}
function getDivsBG(pic)
{
if ( pic != ""){
document.getElementById("news").style.backgroundImage="url('" + pic + "')";
}
}
function setDiv(cookie,cookie2){
document.getElementById("news").style.backgroundPosition=GetCookie(cookie);
document.getElementById("news").style.backgroundRepeat=GetCookie(cookie2);
}
function getDivBG(cookie)
{
document.getElementById("news").style.backgroundImage="url('" + GetCookie(cookie) + "')";
}
function menu(){
alert(GetCookie("image"));
alert(GetCookie("position"));
if(GetCookie("image") == null || GetCookie("image") == ""){
document.write('<hr>\n'
+'<font size="2px">News Menu\n'
+'<form name="TheForm">\n'
+'<select name="favSelect" style="width: 25%; height: 10; border:3px solid #6666FF; font-family: Arial; text-transform: capitalize; color: #000000; background-color: #6666FF; font-size:10pt; font-weight:bold" onchange="getDivBG(this.value), saveImage();">\n'
+' <option value="">--choose--</option>\n'
+' </select> ');
}
if(GetCookie("position") == null || GetCookie("position") == ""){
document.write('<select name="favSelect2" style="width: 25%; height: 10; border:3px solid #6666FF; font-family: Arial; text-transform: capitalize; color: #000000; background-color: #6666FF; font-size:10pt; font-weight:bold" onchange="loadpositionopt(this.value), savepos();">\n'
+' <option value="">--choose--</option>\n'
+' </select><br>\n'
+'</form></font>\n');
}
}
function getnews(newsbody){
checkxmlhttprequest();
var txtFile = new XMLHttpRequest();
txtFile.open("GET", "myremotefile.txt", true);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) { // Makes sure the document is ready to parse.
if (txtFile.status === 200) { // Makes sure it's found the file.
allText = txtFile.responseText;
lines = txtFile.responseText.split(/\r?\n/g); // Will separate each line into an array
document.getElementById(newsbody).innerHTML = lines;
} else {
document.getElementById(newsbody).innerHTML = 'News file not found';
}
}
}
txtFile.send();
}
function gettitle(newstitle){
var txtFile = new XMLHttpRequest();
txtFile.open("GET", "myremotetitle.ini", true);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) { // Makes sure the document is ready to parse.
if (txtFile.status === 200) { // Makes sure it's found the file.
allText = txtFile.responseText;
lines = txtFile.responseText.split("\n"); // Will separate each line into an array
document.getElementById(newstitle).innerHTML = lines;
} else {
document.getElementById(newstitle).innerHTML = 'News file not found';
}
}
}
txtFile.send();
}
function checkxmlhttprequest(){
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
} else {
alert('Sorry, your browser doesn\'t support XMLHTTPRequests');
return null;
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert('Sorry, your browser doesn\'t support XMLHTTPRequests');
return null;
}
}
</script>
<Center><p align="Center">
<table border="1" style="background-Color: #44CFFC;" width="400" height="300" name="about"><tr><td valign="top">
<div id="news" style="height: 30%; background-Color: #44CF00;">
<script type="text/javascript">menu();</script>
</div><hr>
</table></td></tr>
</p></Center>
</body>
Is there a specific reason why you did not put the option panels in HTML? Currently it does not work because it is constantly looping through the function saveImage, because once someone selects from the first drop down, they then are stuck in that loop until they select from the second drop down.
Ok, I have a fix.. It was working a minute ago, but for some reason, when i select an image position, it's telling me 'object.length is null or not an object'
Seriously now, WHAT is going ON w/ this? :S
Here's the code:
Code:
<body onload="loadall();">
<script type="text/javascript">
var backgroundImages =
[ "images/Crystal_clear_water_Yamma_Sam_Island.jpg",
"images/CrystalForest_Sky.jpg" ];
var backgroundNames =
[ "Default",
"Crystal Forest" ];
var backgroundPositions =
[ "top Left",
"top Center",
"top Right",
"Left",
"Center",
"Right",
"bottom Left",
"bottom Center",
"bottom Right" ];
var backgroundPositionnames =
[ "top Left",
"top Center",
"top Right",
"Left",
"Center",
"Right",
"bottom Left",
"bottom Center",
"bottom Right" ];
function loadall(){
alert(GetCookie("image"));
alert(GetCookie("position"));
getDivBG("image");
loadOptions(document.TheForm.favSelect);
loadpositionopt(document.TheForm.favSelect2);
setDiv("position","repeat");
}
function loadOptions( into )
{
for ( var b = 0; b < backgroundImages.length; ++b )
{
into.options[into.options.length] =
new Option( backgroundNames[b], backgroundImages[b] );
}
}
function loadpositionopt( into1 )
{
for ( var c1 = 0; c1 < backgroundPositions.length; ++c1 )
{
into1.options[into1.options.length] =
new Option( backgroundPositionnames[c1], backgroundPositions[c1] );
}
}
function savepos(){
var favPos = document.forms.TheForm.favSelect2.value;
if ( favPos == "" ) return;
SetCookie("position", favPos, exp);
}
function saverep(rep){
var favrep = rep;
if ( favrep == "" ) return;
SetCookie("repeat", favrep, exp);
return favrep;
}
var expDays = 365;
var exp = new Date();
var favImage = "";
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function setDiv(cookie,cookie2){
document.getElementById("blahnews").style.backgroundPosition=GetCookie(cookie);
document.getElementById("blahnews").style.backgroundRepeat=GetCookie(cookie2);
}
function saveImage()
{
var favImage = document.forms.TheForm.favSelect.value;
if ( favImage == "" ) return;
SetCookie("image", favImage, exp);
getDivBG("image");
}
function menu(){
document.write('<form name="TheForm">\n'
+'<font size="2pt">News Menu | Change Background: <select name="favSelect" onchange="getDivsBG(this.value); saveImage();">\n'
+' <option value="">--choose--</option>\n'
+' </select></font>\n'
+'<select name="favSelect2" onchange="loadpositionopt(this.value); savepos();">\n'
+' <option value="">--choose--</option>\n'
+' </select>\n'
+'</form>\n'
+'');
}
var expDays = 365;
var exp = new Date();
var favImage = "";
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function GetCookie(name)
{
var cookies = document.cookie.split(/; /g);
var arg = name + "=";
for ( var c = 0; c < cookies.length; ++c )
{
var ck = cookies[c];
if ( ck.indexOf(arg) == 0 )
{
var temp = ck.split(/=/);
return unescape(temp[1]);
}
}
return "";
}
function SetCookie (name, value)
{
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie (name)
{
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
function getBodyBG(cookie)
{
document.body.style.backgroundImage="url('" + GetCookie(cookie) + "')";
}
function getDivsBG(pic)
{
if ( pic != ""){
document.getElementById("blahnews").style.backgroundImage="url('" + pic + "')";
//document.getElementById("blahnews").style.backgroundImage="url('" + pic + "')";
}
}
function getDivBG(cookie)
{
document.getElementById("blahnews").style.backgroundImage="url('" + GetCookie(cookie) + "')";
//document.getElementById("blahnews").style.backgroundImage="url('" + GetCookie(cookie) + "')";
}
function getnews(newsbody){
checkxmlhttprequest();
var txtFile = new XMLHttpRequest();
txtFile.open("GET", "myremotefile.txt", true);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) { // Makes sure the document is ready to parse.
if (txtFile.status === 200) { // Makes sure it's found the file.
allText = txtFile.responseText;
lines = txtFile.responseText.split(/\r?\n/g); // Will separate each line into an array
document.getElementById(newsbody).innerHTML = lines;
} else {
document.getElementById(newsbody).innerHTML = 'News file not found';
}
}
}
txtFile.send();
}
function gettitle(newstitle){
var txtFile = new XMLHttpRequest();
txtFile.open("GET", "myremotetitle.ini", true);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) { // Makes sure the document is ready to parse.
if (txtFile.status === 200) { // Makes sure it's found the file.
allText = txtFile.responseText;
lines = txtFile.responseText.split("\n"); // Will separate each line into an array
document.getElementById(newstitle).innerHTML = lines;
} else {
document.getElementById(newstitle).innerHTML = 'News file not found';
}
}
}
txtFile.send();
}
function checkxmlhttprequest(){
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
} else {
alert('Sorry, your browser doesn\'t support XMLHTTPRequests');
return null;
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert('Sorry, your browser doesn\'t support XMLHTTPRequests');
return null;
}
}
</script>
<Center><p align="Center">
<div id="blahnews">
<table border="1" style="width="100%" height="100%" name="about"><tr><td valign="top">
<script type="text/javascript">menu();</script><hr>
</table></td></tr>
</p></Center>
</div>
</body>
in the main() function you need to change +'<select name="favSelect2" onchange="loadpositionopt(this.value); savepos();">\n' to: +'<select name="favSelect2" onchange="loadpositionopt(this); savepos();">\n'
line: 97.
What was happening was you were trying to get the loadpositionopt function to run with the value, and you want it to run with just the option object. Honestly i do not know why you have that function in there.
Before you post, read our: 
