PDA

View Full Version : Adding spaces between string variables when using writeln


japangreg
09-26-2002, 02:38 PM
Hey, everyone.

I am working on a script in an HTML file to open any image document on the server by adding some information to the URL I use to call the page. So, when I write a link as:

<a href="picture_pop.html?image1.jpg">

picture_pop.html opens, executes my script and displays image1.jpg in it's proper place (in a cell in a table)

I have this working. What I'm trying to do now is add arguments to the end of the URL to alter height, width, style, ect. So my link now appears as follows:

<a href="picture_pop.html?image1.jpgheight=200width=100">

I can get the name of the image, the height and width into variables. So now I have the following:

image_name = "image1.jpg";
width = "width=100";
height = "height="200";
out_put = "<img src='/images/" + image_name + width + height + "'>";
document.writeln(out_put);


My problem occurs because I do not have any spaces in the variables. So what gets printed to my HTML file appears as:

<img src="/images/image1.jpgwidth=100height=200">

I've tried adding a space to the variables and then combining them, but I get the %20 character where the space should be. I've tried unescaping the "out_put" variable, but that still generates the %20.

Any help would be appreciated. The entire code section follows (variable names may be changed from above):


try1 = window.location.toString();
//converts current URL to a string
//alert(try1);

try2 = try1.indexOf("?")+1;
//finds image name delineator (?) position, begins substring on next character

result = try1.substring(try2);
//sets result equal to passed image name.
//alert(result);

format_seperator = result.indexOf(".")+4;
//finds the period after the file name, sets seperator three characters after it to include file type

image_name = result.substring(0,format_seperator);
tag_opener = "<img src='http://www.japangreg.com/images/" + image_name;
//sets the first part of the img tag to include the file name: code below adds paramaters

additions = result.substring(format_seperator);
//checks to see if there is anything behind the image name

if (additions && additions != "l"){
//there is something, and it isn't the L left behind when the
page is opened without a file after the ?

alert(additions);

//code to check for each parameter here
width_start = additions.indexOf("width");
height_start = additions.indexOf("height");
if (width_start < height_start){
//width is specified before height
width = additions.subString(width_start,height_start);
alert(width);
height = additions.subString(height_start);
alert(height);
}else{
//height is specified before width
height = additions.subString(height_start,width_start);
alert(height);
width = additions.subString(width_start);
alert(width);

complete = tag_opener + width + height + "'>";

}else{
complete = tag_opener + "'>";
//there are no additions, just cap the
img src tag and write it out
}

document.write(complete);

//write passed image name to img src

JSB
09-26-2002, 04:25 PM
Um I think that <a href="picture_pop.html?image1.jpgheight=200width=100">

should be this

<a href="picture_pop.html?image1.jpg&height=200&width=100">

Also the first part doesn't look right (although it might be)

<a href="picture_pop.html?theimage=image1.jpg&height=200&width=100">
where theimage is just a name I made up to represent whatever variable image1.jpg will be assigned to on the following page.

Sorry. I just read over your post again...

width = "width=100";
height = "height="200";
out_put = "<img src='/images/" + image_name + width + height + "'>";


should be
width = " width=100";
height = " height=200";
out_put = "<img src='/images/" + image_name + width + height + "'>";

Owl
09-26-2002, 05:08 PM
Hi japangreg,

Following JSB with a slight difference:<a href="picture_pop.html?image1.jpg'&height=200&width=100">Notice the single quote after the img name.

On the target page (picture_pop.html) replace your script with this:s = location.search.substr(1).split('&').join(' ')
document.write( "<img src='http://www.japangreg.com/images/" + s + " />" )( •) (• )
>>V

japangreg
09-26-2002, 07:17 PM
Hey, Owl, JSB. Thanks for the replies.

Actually, I got it working while I was waiting for a response. The problem wasn't the spacing, it was the single quote that JSB mentioned. I caught it when I was so frustrated, I just asked the code to output what I wanted it to as a complete string. Then, I noticed, I had a single quote that wasn't in any of the variables.

Owl, thanks for the code; I'm still rather new to JavaScript, so I'm still unsure of methods. The split.join looks like it would be more efficient than what I have; maybe I'll recode the page to use it. But for right now, it works so I'm happy.

Thanks again for the responses!
japangreg

Sorry, I jut noticed in the code above I was looking for the indexOf(width) and indexOf(height); should have been indexOf("width") and ("height")

japangreg
09-26-2002, 07:33 PM
Hey, Owl. I just tested the code you mentioned above, and it is still giving me a %-number combination.

Here's what I have:

tag_opener = "<img src='http://www.japangreg.com/images/" + image_name +"'";
additions = result.substring(format_seperator);

if (additions && additions != "l"){
s = additions.split('&').join(' ')
alert(s);
complete = tag_opener + s + ">"
}else{
complete = tag_opener + "'>"
}

document.writeln(complete);


gives an alert output of: %26width=200 when I enter the URL as ?image1.gif&width=200

I'm not sure why it does this; again, excuse my ignorance as I am still rather new to JavaScript, but does it have something to do with escape or unescape?

Any help (and that already given) much appreciated.
japangreg

JSB
09-26-2002, 08:41 PM
You're welcome.

You noticed the quote that shouldn't have been there.
Did you also notice that I added spaces to (infront of):
width = " width=100";
height = " height=200";

That oughtta make it easier to have spaces in there like you wanted.

japangreg
09-26-2002, 09:36 PM
Hey, JSB.

Actually, I noticed I was missing a quote. Here:


image_name = result.substring(0,format_seperator);
tag_opener = "<img src='http://www.japangreg.com/images/" + image_name;

should be:

image_name = result.substring(0,format_seperator);
tag_opener = "<img src='http://www.japangreg.com/images/" + image_name + "'";

which now works with the additional information.

As for the spaces, the code is pulling the string values from the URL, which I can't add spaces to. My problem was (is), now that I have those values in the variable, I can't add the spaces. JavaScript refuses to let me write a space and insists on displaying %20 and %26 (the latter when I use Owl's code) even if I use unescape.

Sorry if this I didn't explain it very well; thanks for the help.
japangreg


Guess what - I am an idiot. I was trying to unescape the results after I had assigned the values to them. I unescaped the "additions" variable before I ran Owl's script over it, and it works like a charm. Final code as follows:

additions2 = unescape(additions);
s = additions2.split('&').join(' ');
alert(s);
complete = tag_opener + s + ">"

Many thanks to both JSB and Owl for their help.