Using javascript variables in html code? [Archive]

View Full Version : Using javascript variables in html code?

PhotoJoe

01-26-2003, 07:52 PM

I have over 400+ webpage using the same basic layout to code. The only difference is a word or two that is different in 40 table cells.

I created some javascript array variable for use in some other javascripts. I made the variables global to the page.

Here is the first element of three of the array varaibles:

var arrSlideNumbers = new Array('AK000',
var arrSlideWidth = new Array('100',
var arrSlideHeight = new Array('65',

Here is the part of the html code I want to use these variables:

<td width="20%" height="116" valign="middle" align="center"><img border="0" src="images/AK_Small/tn_AK000.jpg" alt="AK000.jpg" width="100" height="65"></td>

I think I need some inline javascript that will create the <img> tag for me. The only thing that will change from one table cell to the next (20 cells) is the slide number (AK000) The width will either be (100) or (65) and the height will be the other.

I also have another 20 table cells that could use the slide number variable:

var arrSlideNumbers = new Array('AK000',

Here is the part of the html code I want to use this variable:

<td width="20%" height="20" valign="bottom" align="center"><font
face="Comic Sans MS" size="4" color="#CC3300">AK000</font></td>

The only thing that will change in these 20 cells is AK000.

Thanks for any help you can give me.

Photo Joe

ez4me2c3d

01-26-2003, 07:56 PM

have you tried usingdocument.write('<img src="whatever.jpg" alt="whatever">');

PhotoJoe

01-26-2003, 09:02 PM

I want to use the same piece of code over and over again so it needs to be builted up from the array variables plus used inline in each table cell. The ideal is I want to write one page of code that I can reuse again and again only having to change the value of the array variable at the top of the page in the head section. I need to be able to call a function within the table cell and pass the array element number and have the function do the document.write for that table cell.

Thanks,

scroots

01-26-2003, 09:30 PM

it might be some use to you, some code i devloped the other day for making photogalleries in tables.

<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>How many images do you have</title>
</head>
<body>
<form name="f">
<p>Image filenames should be in a numerical order e.g. 1.jpg 2.jpg 3.jpg or
x1.jpg x2.jpg x3.jpg (x can be any letter you like, x is the prefix)</p>
<p> If the image file names  have a prefix enter it here<input type="text" name="p" size="3" value="a"> </p>
<p>the file names range from <input type="text" name="f" size="3" value="1"> to <input type="text" name="t" size="3" value="10">
and there extension is <input type="text" name="ex" size="5" value=".jpg"></p>
<p>How many rows?<input type="text" name="r" size="3" value="5">   
Thumbnail size Width <input type="text" name="h" size="3" value="50">Height<input type="text" name="w" size="3" value="60"></p>
<p>How many columns?<input type="text" name="pr" size="3" value="2"><input type="button" value="Generate" onClick="rr()"></p>
<p>Copy and paste the code below into your page</p>
<p><textarea rows="6" name="output" cols="69"></textarea></p>
</form>
<SCRIPT>
var name
var num
var fn=0
//current code
var ci=0
var rn=0
var cr=0
function rr(){
if (rn==0){document.f.output.value+='<table>';}
if (rn<document.f.r.value){document.f.output.value+='<tr>';er();}
if (rn==document.f.r.value){document.f.output.value+='</table>';rn=0;}
// writes a picture
function er(){
for (cr!=''; cr<document.f.pr.value; cr++){u();}
for (cr!=''; cr==document.f.pr.value; cr=0){uu();}}
}
function u(){
var name
if (fn<document.f.t.value){
fn++;
num=fn;
if(document.f.p.value!=''){name=document.f.p.value+fn+document.f.ex.value;}
if(document.f.p.value==''){name=fn+document.f.ex.value;}}
document.f.output.value+='<td>';
//<a href="#" onClick="pp('a')"><img border="0" src="peeps.gif" width="42" height="43"></a>
document.f.output.value+='<img src="'
document.f.output.value+=name;
document.f.output.value+='" width="'
document.f.output.value+=document.f.w.value
document.f.output.value+='" height="'
document.f.output.value+=document.f.h.value
document.f.output.value+='">'
document.f.output.value+='</td>';
}
function uu(){
document.f.output.value+='</tr>';
rn++;
cr=0;
rr();
}
//end of current code
</SCRIPT>

</body>

</html>

scroots

ez4me2c3d

01-26-2003, 09:37 PM

i wont write the entire code for you but you can create a loop that runs once for every array element and as it does so you can have the loop writ ethe table syntax and img syntax on the fly.

before the loop you should initialize the table and after the loop close the table. that simple

PhotoJoe

01-26-2003, 10:57 PM

Here is a javascript function that I wrote trying to do this:

function tumbImage(element) // *** thumb Photo src ***
{
tumbsrc = "'images/AK_Small/tn_" + arrSlideNumbers[element] + ".jpg' alt='" + arrSlideNumbers[element]
+ ".jpg' width='" + arrSlideWidth[element] + "' height='" + arrSlideHeight[element] + "'"
}

Here is the part of the html code that calls it.

<td width="20%" height="116" valign="middle" align="center"><a href="javascript:winopen(0)">
<img border="0" src="javascript:tumbImage(0)"></a></td>

The function is not creating the "src" correctly because I get the little white box with the red x in it. The "a href" still works ok. That opens the full size image.

I might be messing up the quotetation marks, what do you think?

Thanks,
Photo Joe

PhotoJoe

01-26-2003, 11:20 PM

Thank you Scroots,

But your code will not work for me. I use leading zeros as place holders in my slide file names for example:
AK000
AK001
AK002

I do this so they will sort correctly.

Also my photos are a mix of horizontal and vertical formats so the height and width could switch back and forth.

Anthony,

I not sure what you are talking about. Are you saying I need to write the complete table with javascript code? If so can you give me some ideal on how to do that?

Thanks,

ez4me2c3d

01-27-2003, 07:04 AM

something like this..
http://rap.midco.net/ez4me2c3d/html/gallery_js.html
ok, so i ended up writting the whole code for you. oh well, i hope it helps

scroots

01-27-2003, 06:06 PM

Photo joe, thank you for your suggestions I will be improving my current code when i have time to include different heights and widths.

scroots