Need help with loading selected options selected index value...

Discussion in 'JavaScript' started by ShadowIce, Jun 4, 2009.

0
  1. #1
    Hi all, I figured out a way to have different cookie names for different parts of a website. Now I have but 1 small problem. the name of the cookie that my code should be returning is index[0], index[1], etc... PROBLEM is that index[0] SHOULD = whatever number the selected index is, and should load it when u refresh the page, thus displaying the value of that index that was selected the 1st time.

    here's the code: 

    <html><head><title>bgchanger</title></head>
<body onload="loadall();">

<script type="text/javascript">
showfile("?");

function showfile() {
var pathname = location.href;
var filename = pathname.substr(pathname.lastIndexOf("/")+1,pathname.length);
var filename = filename.substr(filename,filename.lastIndexOf(".") );
if(filename == ""){
var filename = pathname.substr(pathname.lastIndexOf("/")+1,pathname.length);
var filename = filename.substr(filename,filename.lastIndexOf(".") )+"?";
}
return filename;
}
function showpath() {
var pathname = location.pathname;
pathname = pathname.substr(1,pathname.length);
}

var backgroundImages =
[ "",
"images/CrystalForest_Sky.jpg" ];
var backgroundNames =
[ "Default",
"Crystal Forest" ];
var backgroundColors = 
[ "red",
"green",
"blue" ];
var backgroundColornames = 
[ "red",
"green",
"blue" ];
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(){
getDivBG("image"+"_"+showfile());
loadOptions(document.TheForm.favSelect);
loadpositionopt(document.TheForm.favSelect2);
setDiv("position"+"_"+showfile(),"repeat"+"_"+showfile());
setIndex();
alert(document.cookie);
}

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 loadcoloropt( into2 )
{
    for ( var b1 = 0; b1 < backgroundColors.length; ++b1 )
    {
        into2.options[into2.options.length] =
            new Option( backgroundColornames[b1], backgroundColors[b1] );
    }
}

function saveindex(){
    var favIndex = document.TheForm.favSelect.selectedIndex;
    var favIndex2 = document.TheForm.favSelect2.selectedIndex;
    if(favIndex != "" || favIndex != ""){
    if(favIndex){
    DeleteCookie("index"+"["+favIndex+"]"+"_"+showfile()+"["+favIndex+"]");
    }else if(favIndex2){
    DeleteCookie("index"+"["+favIndex2+"]"+"_"+showfile()+"["+favIndex2+"]");
    }
    }
    SetCookie("index"+"["+favIndex+"]"+"_"+showfile()+"["+favIndex+"]", favIndex, exp);
    SetCookie("index"+"["+favIndex+"]"+"_"+showfile()+"["+favIndex2+"]", favIndex2, exp);
}

function savepos(){
    var favPos = document.forms.TheForm.favSelect2.value;
    if ( favPos == "" ) return;
    SetCookie("position"+"_"+showfile(), favPos, exp);
location.href = location.href;
}

function savecolor(){
    var favColor = document.forms.TheForm.favSelect3.value;
    if ( favColor == "" ) return;
    SetCookie("color"+"_"+showfile(), favColor, exp);
}

function saverep(rep){
    var favrep = rep;
    if ( favrep == "" ) return;
    SetCookie("repeat"+"_"+showfile(), favrep, exp);
}

function setColor(cookie){
document.getElementById("about").style.backgroundColor=GetCookie(cookie);
}

function setIndex(){

for (var x = 0; x < document.TheForm.favSelect.length; x++) {

document.TheForm.favSelect.selectedIndex = GetCookie("index"+"_"+showfile()+"["+x+"]");

}

for (var x = 0; x < document.TheForm.favSelect2.length; x++) {

document.TheForm.favSelect2.selectedIndex = GetCookie("index"+"["+x+"]"+"_"+showfile()+"["+x+"]");

}
 
alert("document.TheForm.favSelect.selectedIndex="+document.TheForm.favSelect.selectedIndex);
alert("document.TheForm.favSelect2.selectedIndex="+document.TheForm.favSelect2.selectedIndex);

}

function setDiv(cookie,cookie2){
document.getElementById("about").style.backgroundPosition=GetCookie(cookie);
document.getElementById("about").style.backgroundRepeat=GetCookie(cookie2);
}

function saveImage()
{
    var favImage = document.forms.TheForm.favSelect.value;
    if (favImage == "") DeleteCookie("position"+"_"+showfile());
    SetCookie("image"+"_"+showfile(), favImage, exp);
    getDivBG("image"+"_"+showfile());
location.href = location.href;
}

function menu(){
document.write('<form name="TheForm">\n'
+'<td valign="top" style="width: 25%; height: 100%;"><br><hr><Center><span id="menutitle">News Menu</span></Center><hr><br>\n'
+'<span id="opt1">Background Image: </span><select style="width: 100%; height: 10;" name="favSelect" onchange="getDivsBG(this); saveImage(); saveindex();">\n'
+'        <option value="">--choose--</option>\n'
+'    </select></font>\n'
+'<span id="opt2">Background Position: </span><select style="width: 100%; height: 10;" name="favSelect2" onchange="getPosBG(this); savepos(); saveindex();">\n'
+'        <option value="">--choose--</option>\n'
+'    </select></td>\n'
+'</form>\n');
}
     
var expDays = 365;
var exp = new Date(); 
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,cookie2,cookie3)
{
    document.body.style.backgroundImage="url('" + GetCookie(cookie) + "')";
    document.body.style.backgroundPosition=GetCookie(cookie2);
    document.body.style.backgroundRepeat=GetCookie(cookie3);
}

function getColorBG(bgcolor){
   if(bgcolor != null){
     document.getElementById("about").style.backgroundColor=GetCookie(bgcolor);
   }
}

function getPosBG(bg){
   if(bg != null){
     document.getElementById("about").style.backgroundPosition=GetCookie(bg);
   }
}

function getDivsBG(pic)
{
    if ( pic != ""){
	 document.getElementById("about").style.backgroundImage="url('" + pic + "')";
       //document.getElementById("blahnews").style.backgroundImage="url('" + pic + "')";
       //document.getElementById("blahnews").style.backgroundImage="url('" + pic + "')";
    }
}

function getDivBG(cookie)
{
       document.getElementById("about").style.backgroundImage="url('" + GetCookie(cookie) + "')";
       //document.getElementById("blahnews").style.backgroundImage="url('" + GetCookie(cookie) + "')";
}

function getnews(newsbody,newsdata){

checkxmlhttprequest();

var txtFile = new XMLHttpRequest();
txtFile.open("GET", newsdata, 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 = allText;
      } else {
       document.getElementById(newsbody).innerHTML = 'News file not found';
      }
    }
  }
 txtFile.send();

}

function gettitle(newstitle,title_data){

var txtFile = new XMLHttpRequest();
txtFile.open("GET", title_data, 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 = '<span id=\"newsnotfound\">News file not found</span>';
      }
    }
  }
 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>

<div id="about" style="width: 400px; height: 300px; background-Color: #44CFFC;">
</div>
<script type="text/javascript">menu();</script>
</table></td>
</div>
</body>
</html>
    Code (markup):
    ANY help is GREATLY appreciated! :) any criticism is greatly ignored! ;)

    ~SI~
     
    ShadowIce, Jun 4, 2009 IP
  2. ShadowIce

    ShadowIce Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Ok, ALLS i need is a fixed version of saveindex() and setindex() NOTHING more. :) I learn by example, not by PARTIAL code.

    ALLS i need is the name of each index file to be equal to the selected index value and i need it to ALWAYS load and change the selected option of the dropdown to whatever the selectedIndex value is.

    For example, if I selected:

    "myimage" in the drop down, if i refreshed OR left the page, and came back to the page later, it would automatically select "myimage" again, and change the background of the div i select to "myimage.jpg"

    here's the code:

    ONLY pay attention to saveindex(), setindex(), and load_all()

    <html>

<head><title>bgchanger</title></head>

<body onload="loadall();">

<script type="text/javascript">
showfile();

function showfile() {
var pathname = location.href;
var filename = pathname.substr(pathname.lastIndexOf("/")+1,pathname.length);
var filename = filename.substr(filename,filename.lastIndexOf(".") );
if(filename == ""){
var filename = pathname.substr(pathname.lastIndexOf("/")+1,pathname.length);
var filename = filename.substr(filename,filename.lastIndexOf(".") )+"?";
}
return filename;
}
function showpath() {
var pathname = location.pathname;
pathname = pathname.substr(1,pathname.length);
}

var backgroundImages =
[ "",
"myimage.jpg" ];
var backgroundNames =
[ "Default",
"My Image" ];
var backgroundColors = 
[ "red",
"green",
"blue" ];
var backgroundColornames = 
[ "red",
"green",
"blue" ];
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(){
getDivBG("image"+"_"+showfile());
loadOptions(document.TheForm.favSelect);
loadpositionopt(document.TheForm.favSelect2);
setDiv("position"+"_"+showfile(),"repeat"+"_"+showfile());
setIndex();
}

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 loadcoloropt( into2 )
{
    for ( var b1 = 0; b1 < backgroundColors.length; ++b1 )
    {
        into2.options[into2.options.length] =
            new Option( backgroundColornames[b1], backgroundColors[b1] );
    }
}

function saveindex(){
    var favIndex = document.TheForm.favSelect.selectedIndex;
    var favIndex2 = document.TheForm.favSelect2.selectedIndex;
    SetCookie("index"+"["+favIndex+"]"+"_"+showfile()+"["+favIndex+"]", favIndex, exp);
    SetCookie("index_2"+"["+favIndex2+"]"+"_"+showfile()+"["+favIndex2+"]", favIndex2, exp);
}

function savepos(){
    var favPos = document.forms.TheForm.favSelect2.value;
    if ( favPos == "" ) return;
    SetCookie("position"+"_"+showfile(), favPos, exp);
location.href = location.href;
}

function savecolor(){
    var favColor = document.forms.TheForm.favSelect3.value;
    if ( favColor == "" ) return;
    SetCookie("color"+"_"+showfile(), favColor, exp);
}

function saverep(rep){
    var favrep = rep;
    if ( favrep == "" ) return;
    SetCookie("repeat"+"_"+showfile(), favrep, exp);
}

function setColor(cookie){
document.getElementById("about").style.backgroundColor=GetCookie(cookie);
}

function setIndex(){

/*for (var x = 0; x < document.TheForm.favSelect.length; x++) {

document.TheForm.favSelect.selectedIndex = GetCookie("index"+"["+x+"]"+"_"+showfile()+"["+x+"]");

}

for (var x1 = 0; x1 < document.TheForm.favSelect2.length; x1++) {

document.TheForm.favSelect2.selectedIndex = GetCookie("index_2"+"["+x1+"]"+"_"+showfile()+"["+x1+"]");

}
*/

    var favIndex = document.TheForm.favSelect.selectedIndex;
    var favIndex2 = document.TheForm.favSelect2.selectedIndex;

alert("index"+"["+document.TheForm.favSelect.selectedIndex+"]"+"_"+showfile()+"["+document.TheForm.favSelect.selectedIndex+"]"+"="+GetCookie("index"+"["+document.TheForm.favSelect.selectedIndex+"]"+"_"+showfile()+"["+document.TheForm.favSelect.selectedIndex+"]"));
alert("index_2"+"["+document.TheForm.favSelect.selectedIndex+"]"+"_"+showfile()+"["+document.TheForm.favSelect2.selectedIndex+"]"+"="+GetCookie("index_2"+"["+document.TheForm.favSelect2.selectedIndex+"]"+"_"+showfile()+"["+document.TheForm.favSelect2.selectedIndex+"]"));

document.TheForm.favSelect.selectedIndex = GetCookie("index"+"["+favIndex+"]"+"_"+showfile()+"["+favIndex+"]");
document.TheForm.favSelect2.selectedIndex = GetCookie("index_2"+"["+favIndex2+"]"+"_"+showfile()+"["+favIndex2+"]");

}

function setDiv(cookie,cookie2){
document.getElementById("about").style.backgroundPosition=GetCookie(cookie);
document.getElementById("about").style.backgroundRepeat=GetCookie(cookie2);
}

function saveImage()
{
    var favImage = document.forms.TheForm.favSelect.value;
    if (favImage == "") DeleteCookie("position"+"_"+showfile());
    SetCookie("image"+"_"+showfile(), favImage, exp);
    getDivBG("image"+"_"+showfile());
location.href = location.href;
}

function menu(){
document.write('<form name="TheForm">n'
+'<td valign="top" style="width: 25%; height: 100%;"><br><hr><Center><span id="menutitle">News Menu</span></Center><hr><br>n'
+'<span id="opt1">Background Image: </span><select style="width: 100%; height: 10;" name="favSelect" onchange="getDivsBG(this); saveImage(); saveindex();">n'
+'        <option value="">--choose--</option>n'
+'    </select></font>n'
+'<span id="opt2">Background Position: </span><select style="width: 100%; height: 10;" name="favSelect2" onchange="getPosBG(this); savepos(); saveindex();">n'
+'        <option value="">--choose--</option>n'
+'    </select></td>n'
+'</form>n');
}
     
var expDays = 365;
var exp = new Date(); 
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,cookie2,cookie3)
{
    document.body.style.backgroundImage="url('" + GetCookie(cookie) + "')";
    document.body.style.backgroundPosition=GetCookie(cookie2);
    document.body.style.backgroundRepeat=GetCookie(cookie3);
}

function getColorBG(bgcolor){
   if(bgcolor != null){
     document.getElementById("about").style.backgroundColor=GetCookie(bgcolor);
   }
}

function getPosBG(bg){
   if(bg != null){
     document.getElementById("about").style.backgroundPosition=GetCookie(bg);
   }
}

function getDivsBG(pic)
{
    if ( pic != ""){
	 document.getElementById("about").style.backgroundImage="url('" + pic + "')";
       //document.getElementById("blahnews").style.backgroundImage="url('" + pic + "')";
       //document.getElementById("blahnews").style.backgroundImage="url('" + pic + "')";
    }
}

function getDivBG(cookie)
{
       document.getElementById("about").style.backgroundImage="url('" + GetCookie(cookie) + "')";
       //document.getElementById("blahnews").style.backgroundImage="url('" + GetCookie(cookie) + "')";
}
</script>

<div id="about" style="width: 400px; height: 300px; background-Color: #44CFFC;">
</div>
<script type="text/javascript">menu();</script>
</table></td>
</div>
</body>
</html>
    Code (markup):
    Thanks! :)

    ~SI~
     
    ShadowIce, Jun 6, 2009 IP