make a div visible - works in IE on a pc but not in IE on a mac

[lawrence]

Here is a script that is suppose to turn the DIV tag "optionalDiv"
visible on click. This works fine on a PC (IE and Netscape both I
think) but not on a Mac. Why?

<script language="javascript">
document.getElementById('optionalDiv').style.visib ility='hidden';

function makeOptionalDivVisible() {
document.getElementById('optionalDiv').style.visib ility='visible';
document.getElementById('optionalDiv').style.heigh t='auto';
}
</script>

<a href="#" onclick="makeOptionalDivVisible();">More options?</a>
</div>
<div id="optionalDiv" class="optional">

[Lee]

lawrence said:

<a href="#" onclick="makeOptionalDivVisible();">More options?</a>

I don't know if this is the problem, but a browser would
be perfectly correct to call your function, making the
div visible, and then immediately reload the page, making
it hidden again.

If you don't want to load the link specified in the href
attribute (the top of the current page, in the case of "#"),
your onclick handler should return false.

onclick="makeOptionalDivVisible();return false"

[lawrence]

Lee <RE**************@cox.net> wrote in message news:<cb*********@drn.newsguy.com>...

lawrence said:

<a href="#" onclick="makeOptionalDivVisible();">More options?</a>

I don't know if this is the problem, but a browser would
be perfectly correct to call your function, making the
div visible, and then immediately reload the page, making
it hidden again.

If you don't want to load the link specified in the href
attribute (the top of the current page, in the case of "#"),
your onclick handler should return false.

onclick="makeOptionalDivVisible();return false"

So, I guess I can fix this by putting in the id name? Like this:
<a href="#optionalDiv" onclick="makeOptionalDivVisible();">More options?</a>

[Lee]

lawrence said:

Lee <RE**************@cox.net> wrote in message
news:<cb*********@drn.newsguy.com>...

lawrence said:

><a href="#" onclick="makeOptionalDivVisible();">More options?</a>

I don't know if this is the problem, but a browser would
be perfectly correct to call your function, making the
div visible, and then immediately reload the page, making
it hidden again.

If you don't want to load the link specified in the href
attribute (the top of the current page, in the case of "#"),
your onclick handler should return false.

onclick="makeOptionalDivVisible();return false"

So, I guess I can fix this by putting in the id name? Like this:
<a href="#optionalDiv" onclick="makeOptionalDivVisible();">More options?</a>

No. Make the onclick handler return false, so it doesn't
matter what's in the href attribute.

[lawrence]

Lee <RE**************@cox.net> wrote in message news:<cb********@drn.newsguy.com>...

lawrence said:

Lee <RE**************@cox.net> wrote in message
news:<cb*********@drn.newsguy.com>...

lawrence said:

><a href="#" onclick="makeOptionalDivVisible();">More options?</a>

I don't know if this is the problem, but a browser would
be perfectly correct to call your function, making the
div visible, and then immediately reload the page, making
it hidden again.

If you don't want to load the link specified in the href
attribute (the top of the current page, in the case of "#"),
your onclick handler should return false.

onclick="makeOptionalDivVisible();return false"

So, I guess I can fix this by putting in the id name? Like this:
<a href="#optionalDiv" onclick="makeOptionalDivVisible();">More options?</a>

No. Make the onclick handler return false, so it doesn't
matter what's in the href attribute.

Sorry I'm so ignorant of Javascript. What does Javascript do when a
function returns nothing? How can returning false affect the behavior
of the browser. I would think that returning false equals "Don't do
anything", and I would assume that is the default behavior when no
return is specified. Apparenlty I'm wrong? Why does returning false
effect browser behavior?

[Thomas 'PointedEars' Lahn]

lawrence wrote:

Lee <RE**************@cox.net> wrote in message news:<cb********@drn.newsguy.com>...
Please do not write attribution novels.

lawrence said:

Lee <RE**************@cox.net> wrote [...]
If you don't want to load the link specified in the href
attribute (the top of the current page, in the case of "#"),
your onclick handler should return false.

onclick="makeOptionalDivVisible();return false"

So, I guess I can fix this by putting in the id name? Like this:
<a href="#optionalDiv" onclick="makeOptionalDivVisible();">More options?</a>

No. Make the onclick handler return false, so it doesn't
matter what's in the href attribute.

Sorry I'm so ignorant of Javascript. What does Javascript do when a
function returns nothing?

Nothing :) The value of a function where there is no `return' statement
or that statement is never reached during execution will have a return
value of `undefined', specified in ECMAScript as the sole value of the
Undefined type.
How can returning false affect the behavior of the browser.
Returning a value to an intrinsic event handler can cancel an event
so that the default event action for an element is not performed.
Often this value is `false', sometimes it is `true'. That depends
on the event handler which in turn depends on the DOM of the UA.

Returning `true' to the `onclick' event handler of an element works
as if that element was never clicked (where "click" means the method
used to activate the element, often a mouse click but it can be the
Return key pressed on a focused element, too). For a visible
hyperlink it means, informally speaking, that the "href" attribute
of that element is ignored:

<a href="#" onclick="makeOptionalDivVisible(); return false;"More options?</a>
This can be simplified if the method called already returns `false':

<a href="#" onclick="return makeOptionalDivVisible();"More options?</a>
(However, this link is more often not the right way to do it as it
will be useless for users without client-side script support since
the event handler attribute will be ignored then. The above should
method only be used if the document is accessible only via client-
side scripting. Otherwise, if it is a script-only link that link
should be written dynamically, possibly turned into an CS-styled
"input" element if part of a form. If it is not a script-only link
[and developers should try to create such links], the "href" attribute
should provide a useful alternative for no-client-side-script users
[for example using server-side scripting] while returning `false' to
the "onclick" event handler to prevent users with client-side script
support from seeing that alternative and execute script code instead.)

This way of calling a method in an event handler allows for either
canceling an event or not, depending on other conditions checked
for in the method. A common way of using this technique is client-
side form checking:

<form ... onsubmit="return checkForm(this);">
...
</form>

The checkForm() method should return `false' and thus the event
listener code will return `false' to the handler, if, and only
if, there are some plausibility errors in the form. This will
then prevent the form from being submitted.

If everything in the form is OK, the method should return `true',
returning `true' to the intrinsic event handler in turn which
allows the UA to perform the default action for the "submit"
event of the "form" element which is, of course, to submit the
form. (Note that client-side form checking cannot replace
server-side form checking as the event handler code will be
never executed with having client-side script support absent
or disabled. But the *additional client-side checking can
help to avoid round trips and thus reduce both network and
server load.)
I would think that returning false equals "Don't do anything",
Yes, but if, and only if, `false' is returned to the event handler
and the event handler regards `false' as the cancel value.
and I would assume that is the default behavior when no
return is specified. Apparenlty I'm wrong?

Yes. Not returning anything to the event handler results in the
default behavior: First the event handler executes user-defined
code for the event (the event listener), then the default action
for the element is performed.
HTH

PointedEars