javascript condensation
i'm trying to condense a javascript section in a page head from
<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> <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>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 ccondensed version to work would be appreciated.
POSIX. because a stable os that doesn't have memory leaks and isn't buggy is always good.
Vincent Puglia posted this at 17:00 — 29th March 2004.
They have: 634 posts
Joined: Dec 1999
Hi,
1) you are rewriting the image variable -- 'pic' -- and declaring local to the function.
2) you need to declare a global array and preload the images there.
3) kill your 'selopt' & 'deselopt' functions and replace them with the 'doit()' function
4) pass a number to the function (the cell within the array)
<?php
var pic = new Array();
for(i = 0; i < 22;i++)
{
pic[i] = new Image(90,47); // create variable for picture
pic[i].src='sitepics/'+buttons[i]+'.png'; // get picture source
}
function doit(which)
{
document.forums.src = pic[which].src;
}
<img src=\"http://members.aol.com/grassblad/images/grassAvatar.jpg\" name=\"forums\" onmouseover='doit(1)'>
?>
Vinny
Where the world once stood
the blades of grass cut me still
Suzanne posted this at 19:39 — 29th March 2004.
She has: 5,507 posts
Joined: Feb 2000
See, I was just going to recommend you put a nice absorbent cloth under it and look into a dehumidifier.
Vincent Puglia posted this at 23:00 — 29th March 2004.
They have: 634 posts
Joined: Dec 1999
Hi Suzanne,
But wouldn't the dehumidifier give him 'evaporated' rather than 'condensed'?
Vinny
Suzanne posted this at 00:56 — 30th March 2004.
She has: 5,507 posts
Joined: Feb 2000
Is my insanity catching? ha!
Evaporation is just Extreme Condensation! Or maybe it would just fill the bucket in the bottom of the dehumidifier that has to be emptied on the rose garden... All those stray semi-colons bringing beautiful summer flowers!
Vincent Puglia posted this at 01:57 — 30th March 2004.
They have: 634 posts
Joined: Dec 1999
Gee and I thought we were talking about evaporated vs condensed milk -- got any?
Vinny
Suzanne posted this at 02:45 — 30th March 2004.
She has: 5,507 posts
Joined: Feb 2000
No, but I should get some. I have a craving for Nanaimo bars like crazy this spring!
m3rajk posted this at 01:27 — 9th April 2004.
They have: 461 posts
Joined: Jul 2003
erm.. trying to make it so i can have multiple arrays.. possiblyy multiple forms so that i can use image swaps in the forums via links that use the javascript submit function.
this is what i have so far
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
POSIX. because a stable os that doesn't have memory leaks and isn't buggy is always good.
Vincent Puglia posted this at 02:33 — 9th April 2004.
They have: 634 posts
Joined: Dec 1999
Hi,
Guess it's too late in the evening for me; I don't understand the question/problem.
Vinny
m3rajk posted this at 14:59 — 9th April 2004.
They have: 461 posts
Joined: Jul 2003
hey vincet. it's been a while. i think it's the off track humor that i think i needed when i saw it that confuzzled you.
the problem is that the roll over is not working (i'm testing in mozilla). it tells me the functions aren't defined when i know they are. i don't get why. i don't even know if the preload is working because of that. i don't know how to fix it
i'm trying to do this so that i can switch out the arrays being used.
i'll need at least three:
1 for the mail/im pics in one page
1 for the navigation bar
1 for the forums so i can do an image swap for those buttons (graphics designer wants that now)
so i need to get the new swap function working as well as the submit for the forms
POSIX. because a stable os that doesn't have memory leaks and isn't buggy is always good.
Vincent Puglia posted this at 20:26 — 9th April 2004.
They have: 634 posts
Joined: Dec 1999
Hi,
Error 1: function preload(var imgs){ // preload images
javascript is not c/c++ where you need to type the arguments.
Should be: function preload(imgs){ // preload images
Also...why...
<?phpfunction sub(form)
{
document.form.submit();
} // submit a form
-->
</script>
</head>
<body style=\"background-color:#000000; color:#ffffff; \">
<!-- nav bar-->
<script type=\"text/javascript\"><!-- preload(usr); --></script>
?>
instead of:
<?php....
preload(usr);
</script>
</head>
<body style=\"background-color:#000000; color:#ffffff; \">
<!-- nav bar-->
?>
the former is somewhat confusing, especially since it's implying the 'preload' function is part of the navbar.
This:
var i; for(i=0; ( (i
Where the world once stood
the blades of grass cut me still
m3rajk posted this at 16:54 — 10th April 2004.
They have: 461 posts
Joined: Jul 2003
i found some other errors too and fixed them. now the line number it's on changes, but the error is the same and there's no highlight (have not tried the submit, i figure let's get it working one part at a time)
POSIX. because a stable os that doesn't have memory leaks and isn't buggy is always good.
Vincent Puglia posted this at 17:15 — 10th April 2004.
They have: 634 posts
Joined: Dec 1999
try renaming 'array' -- everywhere you use it. You shouldn't be using reserved words for variableNames (and I would also change 'imgs' to 'myImgs' or somesuch.
Vinny
Where the world once stood
the blades of grass cut me still
m3rajk posted this at 18:49 — 10th April 2004.
They have: 461 posts
Joined: Jul 2003
i know that images[] is a preset array.
now it's giving me
for selopt and deselopt respectively
in the one i have now i have id and name in the image tag. should that get moved to the link tag? would that have any effect? makes more sense to me to have it on the image tag, but that's the only thing i can think of as of now
also i checked the submit. works if i explicitly call the form name in the function, but otherwise, even though i've changed it to formname since form[] is a reserved, it gives me the error that it can't find the form on the page
POSIX. because a stable os that doesn't have memory leaks and isn't buggy is always good.
Abhishek Reddy posted this at 22:01 — 10th April 2004.
He has: 3,348 posts
Joined: Jul 2001
Use one of
document.getElementById(bttn)
document.images.bttn
to select the element.
document.all.bttn <-- IE-only; avoid.
m3rajk posted this at 03:04 — 11th April 2004.
They have: 461 posts
Joined: Jul 2003
i despise anything ie only. i actually use mozilla since it's w3c compliant, and is notplauged with cookie and other types of issues like ie.
is the first i tried. doesn't work. then that has no properties
and it tells me there's no such function
POSIX. because a stable os that doesn't have memory leaks and isn't buggy is always good.
Abhishek Reddy posted this at 09:05 — 11th April 2004.
He has: 3,348 posts
Joined: Jul 2001
getElementById(), not getElementByID()
m3rajk posted this at 14:08 — 11th April 2004.
They have: 461 posts
Joined: Jul 2003
i forgot that javascript is very case sensitive
arg. i'm starting to wonder how anyone can do this without explicit calls...
once for selopt nd once for deselopt
subsequently realizing that i gave the id name the same name as the image so that it's
<img class="..." id="balh" name="blah" src="..." />'choice should be all i need, so i modified it to<!--
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);
-->
and now it changes everything to chat on/off instead of the one it should.
any suggestions? i haven't a clue as to what's failing
added something to show what i currently is, and it's never going beyond 0 for some reason. yet the item being passed is obviously changing. i also modified the form submit slightly on a hunch then tested that. it wowrks now, so all i need to get the new modular form working is to get i to actually find the correct indicie (sp?)
POSIX. because a stable os that doesn't have memory leaks and isn't buggy is always good.
m3rajk posted this at 21:54 — 11th April 2004.
They have: 461 posts
Joined: Jul 2003
fixed.
issue was several fold.
finished and fixed code to compare for others to fix if they have similar flaws:
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);
POSIX. because a stable os that doesn't have memory leaks and isn't buggy is always good.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.