Page 1 of 1

javascript condensation

Posted: Mon Mar 29, 2004 9:23 am
by m3rajk
i'm trying to condense a javascript section in a page head from

Code: Select all

<script type="text/javascript">
      <!--
/* preload the pictures necessary for the image flips */
chaton= new Image(90,47); // when over the option
chaton.src="sitepics/chaton.png"; // picture source
chatoff= new Image(90,47); // when not over the image
chatoff.src="sitepics/chatoff.png"; // picture source

controlon= new Image(90,47); // when over the option
controlon.src="sitepics/controlon.png"; // picture source
controloff= new Image(90,47); // when not over the image
controloff.src="sitepics/controloff.png"; // picture source

faqon= new Image(90,47); // when over the option
faqon.src="sitepics/faqon.png"; // picture source
faqoff= new Image(90,47); // when not over the image
faqoff.src="sitepics/faqoff.png"; // picture source
/*
finduseron= new Image(90,47); // when over the option
finduseron.src="sitepics/finduseron.png"; // picture source
finduseroff= new Image(90,47); // when not over the image
finduseroff.src="sitepics/finduseroff.png"; // picture source
*/
forumson= new Image(90,47); // when over the option
forumson.src="sitepics/forumson.png"; // picture source
forumsoff= new Image(90,47); // when not over the image
forumsoff.src="sitepics/forumsoff.png"; // picture source

loginon= new Image(90,47); // when over the option
loginon.src="sitepics/loginon.png"; // picture source
loginoff= new Image(90,47); // when not over the image
loginoff.src="sitepics/loginoff.png"; // picture source

logouton= new Image(90,47); // when over the option
logouton.src="sitepics/logouton.png"; // picture source
logoutoff= new Image(90,47); // when not over the image
logoutoff.src="sitepics/logoutoff.png"; // picture source

newon= new Image(90,47); // when over the option
newon.src="sitepics/newon.png"; // picture source
newoff= new Image(90,47); // when not over the image
newoff.src="sitepics/newoff.png"; // picture source

searchon= new Image(90,47); // when over the option
searchon.src="sitepics/searchon.png"; // picture source
searchoff= new Image(90,47); // when not over the image
searchoff.src="sitepics/searchoff.png"; // picture source

signupon= new Image(90,47); // when over the option
signupon.src="sitepics/signupon.png"; // picture source
signupoff= new Image(90,47); // when not over the image
signupoff.src="sitepics/signupoff.png"; // picture source

topon= new Image(90,47); // when over the option
topon.src="sitepics/topon.png"; // picture source
topoff= new Image(90,47); // when not over the image
topoff.src="sitepics/topoff.png"; // picture source

/* functions that do the image flips */
function selopt(which){ // switch what is selected
  switch(which){ // which switch is executed?
  case 'chat': document.chat.src=chaton.src; return true; break;
  case 'control': document.control.src=controlon.src; return true; break;
  case 'faq': document.faq.src=faqon.src; return true; break;
//  case 'finduser': document.finduser.src=finduseron.src; return true; break;
  case 'forums': document.forums.src=forumson.src; return true; break;
  case 'login': document.login.src=loginon.src; return true; break;
  case 'logout': document.logout.src=logouton.src; return true; break;
  case 'new': document.nouveau.src=newon.src; return true; break;
  case 'search': document.search.src=searchon.src; return true; break;
  case 'signup': document.signup.src=signupon.src; return true; break;
  case 'top': document.top.src=topon.src; return true; break;
  }
}
function deselopt(which){ // switch what is un-selected
  switch(which){ // which switch is executed?
  case 'chat': document.chat.src=chatoff.src; return true; break;
  case 'control': document.control.src=controloff.src; return true; break;
  case 'faq': document.faq.src=faqoff.src; return true; break;
//  case 'finduser': document.finduser.src=finduseroff.src; return true; break;
  case 'forums': document.forums.src=forumsoff.src; return true; break;
  case 'login': document.login.src=loginoff.src; return true; break;
  case 'logout': document.logout.src=logoutoff.src; return true; break;
  case 'new': document.nouveau.src=newoff.src; return true; break;
  case 'search': document.search.src=searchoff.src; return true; break;
  case 'signup': document.signup.src=signupoff.src; return true; break;
  case 'top': document.top.src=topoff.src; return true; break;
  }
}
      -->
    </script>
and came up with

Code: Select all

<script type="text/javascript">
      <!--
/* array for various uses */
var buttons=new Array('chaton','chatoff','controlon','controloff','faqon','faqoff','finduseron','finduseroff','forumson','f
orumsoff','loginon','loginoff','logouton','logoutoff','newon','newoff','searchon','searchoff','signupon','signupoff','topon
','topoff');

for(i=0;i<22;i++){ // preload the pictures necessary for the image flips
  var pic=buttons[i];
  pic= new Image(90,47); // create variable for picture
  pic.src='sitepics/'+pic+'.png'; // get picture source
}

/* functions that do the image flips */
function selopt(which){ // switch what is selected
  switch(which){ // which switch is executed?
  case 'chat': document.chat.src=chaton.src; return true; break;
  case 'control': document.control.src=controlon.src; return true; break;
  case 'faq': document.faq.src=faqon.src; return true; break;
    //  case 'finduser': document.finduser.src=finduseron.src; return true; break;
  case 'forums': document.forums.src=forumson.src; return true; break;
  case 'login': document.login.src=loginon.src; return true; break;
  case 'logout': document.logout.src=logouton.src; return true; break;
  case 'new': document.nouveau.src=newon.src; return true; break;
  case 'search': document.search.src=searchon.src; return true; break;
  case 'signup': document.signup.src=signupon.src; return true; break;
  case 'top': document.top.src=topon.src; return true; break;
  }
}
function deselopt(which){ // switch what is un-selected
  switch(which){ // which switch is executed?
  case 'chat': document.chat.src=chatoff.src; return true; break;
  case 'control': document.control.src=controloff.src; return true; break;
  case 'faq': document.faq.src=faqoff.src; return true; break;
//  case 'finduser': document.finduser.src=finduseroff.src; return true; break;
  case 'forums': document.forums.src=forumsoff.src; return true; break;
  case 'login': document.login.src=loginoff.src; return true; break;
  case 'logout': document.logout.src=logoutoff.src; return true; break;
  case 'new': document.nouveau.src=newoff.src; return true; break;
  case 'search': document.search.src=searchoff.src; return true; break;
  case 'signup': document.signup.src=signupoff.src; return true; break;
  case 'top': document.top.src=topoff.src; return true; break;
  }
}
      -->
    </script>
which isn't working.
it seems to be that the images are not being given names. not sure where to go from here to fix the new one. not quite sure how to make it evalutate out to the name from the variable becasue "pic" just made it have an error there.

any pointers to getting the condensed version to work would be appreciated.

Posted: Mon Mar 29, 2004 3:24 pm
by feyd
There are many ways of doing this, here's one that should be compatible with what you are currently doing: note, I wrote this quickly, not checking if it works, but should get you there

Code: Select all

<script type="text/javascript><!--
var rolls = new Array();
var buttons = new Array('chat','control','faq','finduser','forums','login','logout','new','search','signup','top');
var pretext = 'sitepics/';
var exttext = '.png';
var ind;
for(i = 0; i < buttons.length; ++i)
{
  ind = i*2;
  roll[ind] = new Image();
  roll[ind].src = pretext+buttons[i]+'on'+exttext;
  roll[++ind] = new Image();
  roll[ind].src = pretext+buttons[i]+'off'+exttext;
}

function selopt(which)
{
  var i;
  for(i = 0; (i < buttons.length) && (buttons[i] != which); i++); // find the name
  if( i == buttons.length )  // didn't find it.
    return false;
  i *= 2; // get its roll index
  document.images[which].src = roll[i].src;
  return true;
}

function deselopt(which)
{
  var i;
  for(i = 0; (i < buttons.length) && (buttons[i] != which); i++); // find the name
  if( i == buttons.length )  // didn't find it.
    return false;
  i *= 2; // get its roll index for on
  i++; // adjust the index to its off version
  document.images[which].src = roll[i].src;
  return true;
}

--></script>
fixed old-new php highlighter

Posted: Thu Apr 08, 2004 7:39 pm
by m3rajk
sorry it took so long to get back to this... is there a difference between i++ and ++i?

Posted: Thu Apr 08, 2004 8:25 pm
by m3rajk
i need to have it so it takes a few different arrays. as it turns out the graphics designer now wants a few other things using image swaps. the new code i have (that doesn't work) which is based on yours is

Code: Select all

var usr=new Array('logout','chat','faq','new','top','control','search','forums','finduser');

var rolls= new Array(); // empty image array
var pretxt='sitepics/'; var endtxt='.png';
var ind;

function preload(var imgs){ // preload images
  end=imgs.length; // find array size
  for(i=0;i<end;++i){ // for each picture
    ind=i*2;
    rolls[ind]= new Image();
    rolls[ind].src=pretext+imgs[i]+'on'+endtxt;
    rolls[++ind]= new Image();
    rolls[ind].src=pretext+imgs[i]+'off'+endtxt;
  }
}
function selopt(choice,array){ // mouseover highlight
  var i; for(i=0;((i<array.length)&&(array[i]!=choice));i++);
  if(i==array.length){ return false; } else{ i*=2; document.array[which].src=rolls[i].src; return true; }
}
function deselopt(choice){ // mouseout return to load state
  var i; for(i=0;((i<array.length)&&(array[i]!=choice));i++);
  if(i==array.length){ return false; } else{ i*=2; i++; document.array[which].src=rolls[i].src; return true; }
}
function sub(form){ document.form.submit(); } // submit a form
and the most up to date version can be seen here: http://24.91.157.113/findyourdesire/ztest.php

Posted: Sat Apr 10, 2004 11:53 am
by m3rajk
ok. i updated the one on the server becasue i've found some errors and corrected them. it's still not working.
the line changes depending on the button, but i get the error
Error: document.array has no properties
Source File: http://24.91.157.113/findyourdesire/ztest.php
Line: 24

Posted: Sat Apr 10, 2004 7:58 pm
by feyd
document.array isn't in the DOM last I checked.

Posted: Sat Apr 10, 2004 10:12 pm
by m3rajk
i changed that a small bit since there was a possible issue with javascript and reserved words.

more info here: http://www.webmaster-forums.net/showthread.php?t=24267


currently it's using document.bttn[variable]=....
where bttn is the array

Posted: Sat Apr 10, 2004 10:22 pm
by feyd
m3rajk wrote:sorry it took so long to get back to this... is there a difference between i++ and ++i?
i++ is a post-increment. when evaluated like this:

Code: Select all

var i = 2;
var j = i++; // j is 2.. i returns 2, then increments...
// i is now 3;
whereas ++i is pre-increment:

Code: Select all

var i = 2;
var j = ++i; // j is 3, i is 3;
used in the context of the for loops I wrote, there is no difference. I must have switched trains of thought during writing it.

fix old-new php highlighter

Posted: Sat Apr 10, 2004 10:32 pm
by feyd
some notes:
getElementById() is only available on mozilla based browsers.
getElementbyID() doesn't exist. (it's your second one, in function deselopt())
I find it easier to go through the images array to get at my rollovers: document.images[<name|number>]
and, the bttn you are passing is a string. not a reference to the array. Unless you are going to have multiple arrays of image names, I'd lose that bit..

Posted: Sun Apr 11, 2004 9:54 am
by m3rajk
current javascript is

Code: Select all

<!--
var usr= new Array('chat','control','faq','finduser','forums','login','logout','newm','search','signup','top');
var rolls=new Array(); // empty image array
var pretxt='sitepics/'; var endtxt='.png'; var ind;// variables used to preload

function preload(imgs){ // preload images
  end=imgs.length; // find array size
  for(i=0;i<end;++i){ // for each picture
    ind=i*2;
    rolls[ind]= new Image();
    rolls[ind].src=pretxt+imgs[i]+'on'+endtxt;
    rolls[++ind]= new Image();
    rolls[ind].src=pretxt+imgs[i]+'off'+endtxt;
  }
}
function selopt(choice,bttn){ // mouseover highlight
  var i; 
  for(i=0;((i<bttn.length)&&(bttn[i]!=choice));i++)
    if(i==bttn.length){ return false; } else{ i*=2; document.getElementById(choice).src=rolls[i].src; return true; }
}
function deselopt(choice,bttn){ // mouseout return to load state
  var i; 
  for(i=0;((i<bttn.length)&&(bttn[i]!=choice));i++)
    if(i==bttn.length){ return false; } else{ i*=2; i++; document.getElementById(choice).src=rolls[i].src; return true; }
}
function sub(formname){ document.formname.submit(); } // submit a form

preload('usr');
-->
which switches to alt text when it rolls over and not the image. mozilla's console gives no errors
and i tried the switching prefix/postfix. you need prefix for ind, but postfix works fine for the rest.

Posted: Sun Apr 11, 2004 1:04 pm
by feyd
you're asking preload to try loading a string.

Posted: Sun Apr 11, 2004 3:24 pm
by m3rajk
changing it to preload(usr); and i get the issue that everything becomes chat on/off
http://24.91.157.113/findyourdesire/ztest.php

i do not understand why it's going to chat for everythig.

Posted: Sun Apr 11, 2004 3:30 pm
by feyd

Code: Select all

onmouseout="deselopt('newm','usr');" onmouseover="selopt('newm','usr');"
you're passing in strings instead of the array to use.

btw, those for loops were meant to have nothing execute... which is why I wrote ; after the ).. their execution is handled by it's conditional parameters. The if following them, was meant to run after the for loop, not during.


fix old-new php highlighter

Posted: Sun Apr 11, 2004 4:23 pm
by m3rajk
ok. i thought that was the case but some others felt that was a cause of failure in my writing. thanx for the heads up. i just ggot the submit working so lemme try this fix.

Posted: Sun Apr 11, 2004 4:53 pm
by m3rajk
thanx. that works perfectly now!
fixed.
issue was several fold.
finished and fixed code to compare for others to fix if they have similar flaws:

Code: Select all

var usr= new Array('chat','control','faq','finduser','forums','login','logout','newm','search','signup','top');
var rolls=new Array(); // empty image array
var pretxt='sitepics/'; var endtxt='.png'; var ind;// variables used to preload

function preload(imgs){ // preload images
  end=imgs.length; // find array size
  for(i=0;i<end;i++){ // for each picture
    ind=i*2;
    rolls[ind]= new Image();
    rolls[ind].src=pretxt+imgs[i]+'on'+endtxt;
    rolls[++ind]= new Image();
    rolls[ind].src=pretxt+imgs[i]+'off'+endtxt;
  }
}
function selopt(choice,bttn){ // mouseover highlight
  var i; 
  for(i=0;((i<bttn.length)&&(bttn[i]!=choice));i++){ document.qsearch.curri.value=i; } 
  if(i==bttn.length){ return false; } else{ i*=2; document.getElementById(choice).src=rolls[i].src; return true; }
}
function deselopt(choice,bttn){ // mouseout return to load state
  var i; 
  for(i=0;((i<bttn.length)&&(bttn[i]!=choice));i++){ document.qsearch.curri.value=i; }
  if(i==bttn.length){ return false; } else{ i*=2; i++; document.getElementById(choice).src=rolls[i].src; return true; }
}
function sub(choice){ document.getElementById(choice).submit(); } // submit a form

preload(usr);