HTML Goodies: Script Tip: Week 51

By Joe Burns

 

Tip to my lou...

     I received this "Proportional" script from Ann Evansfor posting on JavaGoodies. It was a great idea. You entered the height and width of an image you wanted to resize. Then, by entering a new height, the script figured the new width, keeping the same proportions the image original had.

     I really liked the script, but thought it asked too much of the user. I knew you could grab the image's height and width straight from the image. Then, after setting the new height and width, it seemed logical to show the image in its new dimensions.

     So, using Ann's original calculations and table structure, I re-wrote and added on until I got this. Try it out.


When the prompt appears, put in "angel.jpg"
(without the quotes!)

See it in Action


Here's the Code

(It's big. Get it all.)


     Did you like the purple background? I thought it was a bit easier on the eyes than bright white.

     The script uses a series of steps to complete the effect. We'll start with the first thing you see on the page, the prompt. The blip of prompt code asks for the path to the image. Yes, I know it's a little wordy and long to read.

     Once the prompt has the path and/or name of the image, then it uses that to create an image flag that posts the image to the page. Let's look at it. Please understand that I have greatly reduced the amount of text in the prompt box for this example.

<SCRIPT LANGUAGE="javascript">

var path = prompt("Text on the gray","Text in the box")

if(path == "Text in the box")
{
alert('Come on, put in an image name')
javascript:location.reload()
}

if(path == null)
{
alert('Do not click Cancel')
javascript:location.reload()
}

else
{document.write("<IMG NAME=thepic SRC=" +path+ ">");}

</SCRIPT>

     As I pointed out in the last series of Script Tips, one of the hardest things to do when writing a script is to guess at all the possibilities that could occur when someone uses your script. When this prompt pops up, I saw four events that could happen. Here are those events and my solutions:

  • The user enters a correct image name and/or path
         Solution: the image is posted

  • The user clicks OK making to changes
         Solution: Alert box telling user to put in image name

  • The user clicks CANCEL
         Solution: Alert box asking for image name

  • The user enters incorrect information
         Solution: I can't predict incorrect info, so that results in a broken image, which gives a 40X40 height and width.

     I wrote the prompt above to cover each of those concerns. If you'd like to go back to the example and try each event, click here. Otherwise, let's take it in order.

var path = prompt("Text on the gray","Text in the box")

     This is the basic format of a prompt. Again, I have greatly reduced the text used in the original, you you'll get the idea. What ever the user writes in the box, is assigned the variable name "path".

if(path == "Text in the box")
{
alert('Come on, put in an image name')
javascript:location.reload()
}

     The first IF statement is used if the user simply presses OK without changing the information in the box.

    If the "path" equals "Text in the box" (note the double quote so that 'text in the box' is seen as a text string rather than code), then pop up an alert that reads "Come on, put in an image name". Once the user clicks OK on the alert box, javascript:location.reload()reloads the page and the prompt pops up again.

    Two things: There are curly brackets around the alert and the reload. That's important so that the Script understand to do both if the statement is true. Also, note that the text string is the same as what is in the text box on the prompt. Make sure those two are the same when you use the script or no dice.

if(path == null)
{
alert('Do not click Cancel')
javascript:location.reload()
}

     Here's the second If statement. The Script goes to this one if the first isn't found to be true. This is triggered if the prompt data is null. That means the user simply clicked CANCEL. Notice "null" is not in quotes. It is not a text string, but rather a command.

     The same basic format is used if this If statement is true. An alert pops up, the page is reloaded and the prompt pops up again.

else
{document.write("<IMG NAME=thepic SRC=" +path+ ">");}

     If both of the If statements are false, which is what you're hoping for, then a document.write statement is used to create a basic image flag posting the picture the user has entered.

     See the NAME=thepicin the flag? That will become important in the next section of this Script Tip.

Next Week: Grab and Display the Dimensions


Learn to write your own JavaScripts with the HTML Goodies 30-Step Primer Series


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date