a little JS help

[sheff]

I'm not a JS guy but I do have a programming background. I'm trying to use style to make bar1 visible and set the border to black onclick of a submit button. Can someone give me the correct syntax for the code below. With this code, bar1 is becoming visible but I can't get the black border around it. I need to know how to string two style properties together using this method and the correct JS keyword for "bordercolor". I've been spending way to much time trying to reslolve this .

[code]
onclick="javascript:bar1.style.visibility='visible';bar1.style.borderColor='black'">
[end code]

Thx...Franko

[mwinter]

With this code, bar1 is becoming visible [...]

[code]
onclick="javascript:bar1.style.visibility='visible';bar1.style.borderColor='black'">
[end code]

In some user agents, perhaps. The approach that you're taking is one dreamt up by Microsoft, and thankfully ignored by most user agents. You should not treat id attribute values as global identifiers. It is not widely supported, and a horrible feature in my opinion. Instead, use the getElementById method:

var element, style;

if(document.getElementById) {
  element = document.getElementById('bar1');
}
if(element && (style = element.style)) {
  style.visibility = 'visible';
  style.borderColor = 'black';
}

This code demonstrates something else, too: feature detection. Though the use of getElementById will be more successful, it's not guaranteed to work with all user agents. Specifically early, obsolete ones like NN4 and IE4. So before calling the method, the code above tests for the presence of the method, then calls it. After that, the code then checks that an object reference was obtained, and that the reference has a style property before accessing any of its properties.

As you can appreciate, it's better to use a function, and perhaps make it reusable:

function showElement(id) {
  var element, style;

  if(document.getElementById) {
    element = document.getElementById(id);
  }
  if(element && (style = element.style)) {
    style.visibility = 'visible';
    style.borderColor = 'black';
  }
}

As for the missing border, are you trying to change the colour of an existing border, or show one that wasn't there to begin with? I suspect the latter.

Assuming you're trying to create a border, the problem is not that the colour isn't being assigned, it's that border styles default to 'none'. No matter what you do to the colour or width, the border won't be drawn until the style is changed to something like 'solid' or 'dashed'.

If all borders will be black, it might be an idea to apply the appropriate border width and colour to all applicable elements, then set the style in script to render the border. As you haven't shown any kind of document structure, I can't help you there.

A final note: you don't need to include 'javascript:' at the beginning of intrinsic event attributes. Most user agents will just assume that it's a label - only IE attaches any meaning to it.

Hope that helps,
Mike

[sheff]

Thanks Mike,

As I said, I'm not a JS guy, I'm just trying to hack and slash until I get it working. As for your assumption, bar1 is already there with a white border that matches my page background. I want it to show up with a black border when they click submit.

I have set up my code like this but it doesn't appear to be working. Did I not follow your instructions properly? Franko

<script type="text/javascript">
function showElement(id) {
 var element, style;

 if(document.getElementById) {
 element = document.getElementById(id); 
}
 if(element && (style = element.style)) {
 style.visibility = 'visible';
 style.borderColor = 'black'; 
}
}
</script>


<INPUT NAME="Submit" TYPE="submit" VALUE="Submit" onclick="showElement(bar1)">

To shed some more light on the matter, here is the code I'm using to put out bar1 in the firest place and hide it.

<script type="text/javascript">
var bar1= createBar(300,15,'white',1,'white','blue',85,7,1,"");
bar1.style.visibility="hidden";
</script>

To shed even more light, you can look at the link below to see what I'm trying to do. I want to hide the progress bar until they click submit, then display it until the php functions are completed after they submit the form.

http://www.dynamicdrive.com/dynamici...rogressbar.htm

[mwinter]

To shed even more light [...]

http://www.dynamicdrive.com/dynamici...rogressbar.htm

You know, it helps to provide crucial information from the start, not after the fact. You gave absolutely no indication you were interacting with a script of this kind. Based on what you posted, I had the impression you were trying to style an element with a particular id attribute.

The return value from the createBar function is not the actual bar itself, but the 'blocks' it contains. The containing div element is a property, bar, of that return value. So, to set the border colour, you would execute:

bar1.bar.style.borderColor = 'black';

As for showing and hiding the bar, use the showBar and hideBar methods. For example,

bar1.showBar();

Mike

[sheff]

Thanks Mike for the code, and the slap on the wrist. It's working now!!

Sorry I didn't give you enough Info the first time. As I said, I'm not a JS guy and wasn't sure how much info I had to provide. I didn't want to bog everyone down with unnecessary drivel.

Just from looking at other JS code I came soooooo close, but no cigar.

my guess - bar1.style.visibility='visible';bar1.style.borderColor='black'
your code - bar1.style.visibility='visible';bar1.bar.style.borderColor='black'

Appreciate your help.

Franko

p.s. - I tried bar1.hideBar(); and bar1.showBar(); but they didn't seem to work the way I wanted. Probably my fault.

[mwinter]

my guess - bar1.style.visibility='visible';bar1.style.borderColor='black'
your code - bar1.style.visibility='visible';bar1.bar.style.borderColor='black'

Actually, 'my' code would begin 'bar1.bar' for both statements. As I implied (or at least, tried to), hiding the object referenced by bar1 will hide the content of the progress bar, not the bar itself. That is represented by the bar property. Why the object is organised this way, I don't know. It doesn't make much sense to me...

Presumably, you've set the border white initially because the bar itself isn't being hidden. If this is the case, you should be able to set the border black as usual and use the methods (showBar and hideBar) I mentioned previously. These will make the entire widget disappear without the need to play around with the border colour.

Note that the last snippet in my code was not a typo. Though you'd need to style the bar property to affect the containing div element -

bar1.bar.style.borderColor = 'black';

- the show/hide methods are properties of the return value -

bar1.showBar();

bar1.hideBar();

Mike

[mwinter]

I could have edited my previous post in light of your edit, but it might have some kind of relevance so I'll make a separate follow-up...

p.s. - I tried bar1.hideBar(); and bar1.showBar(); but they didn't seem to work the way I wanted. Probably my fault.

Could you describe how you'd expect them to work, and show a complete, but minimal example (preferably in the form of a URL) that demonstrates how they don't live up to that expectation. It might be something you've done, it might not. Only one way to find out...

Mike

[sheff]

Mike,

I've sent you an email with two URL's and the userid and password to access them. The page is used to upload files and is password protected. I sent it to the address you have supplied on this site.

Franko

[mwinter]

Yep, it's your fault.

var bar1= createBar(300,15,'white',1,'black','blue',85,7,0,"bar1.hideBar()");

The last two arguments define behaviour that occurs when the progress bar animation completes a certain number of cycles. With the arguments above, the bar will be hidden as soon as a cycle ends, every time.

Instead, use:

var bar1 = createBar(300, 15, 'white', 1, 'black', 'blue', 85, 7, 0, '');
bar1.hideBar();

along with your current 'show' implementation on the submit button.

Mike

[mwinter]

Sorry to be a pain but, been there, done that, got the t-shirt.

You didn't check the script error console though.

var bar1= createBar(300,15,'white',1,'black','blue',85,7,0,"");
bar1.hideBar()";

Notice that misplaced double quote directly after the function call? Remove it and you should have no problems.

Mike