javascript condensation

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

javascript condensation

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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
Last edited by feyd on Fri Jan 13, 2006 7:53 pm, edited 2 times in total.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

sorry it took so long to get back to this... is there a difference between i++ and ++i?
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post 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
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post 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
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

document.array isn't in the DOM last I checked.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post 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
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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
Last edited by feyd on Fri Jan 13, 2006 7:55 pm, edited 1 time in total.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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..
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

you're asking preload to try loading a string.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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
Last edited by feyd on Fri Jan 13, 2006 7:58 pm, edited 1 time in total.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post 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.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post 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);
Post Reply