Prevent scrolling

[Gustaf]

I'm working on a code generator for documentation of VBA projects. It outputs HTML docs, including simple JS. I don't have much experience with JS however, so I need some help with this sample output:

http://www.algonet.se/~gustafl/test/frmCalcMany.html

Whenever I click 'Show source' after scrolling down a bit, the page instantly jumps to the top of the page, which may hide the source. I understand this is because of href="#", but I don't know what I could do instead. The behavior I want is of course to show/hide the source, but without scrolling.

Gustaf

[Janwillem Borleffs]

Gustaf schreef:

I'm working on a code generator for documentation of VBA projects. It
outputs HTML docs, including simple JS. I don't have much experience
with JS however, so I need some help with this sample output:

http://www.algonet.se/~gustafl/test/frmCalcMany.html

Whenever I click 'Show source' after scrolling down a bit, the page
instantly jumps to the top of the page, which may hide the source. I
understand this is because of href="#", but I don't know what I could do
instead. The behavior I want is of course to show/hide the source, but
without scrolling.

Change:

onclick="ToggleShowSource

Into:

onclick="return ToggleShowSource
When this doesn't work, have ToggleShowSource() return false as its last
statement.
JW

[Gustaf]

Janwillem Borleffs wrote:

Change:

onclick="ToggleShowSource

Into:

onclick="return ToggleShowSource
When this doesn't work, have ToggleShowSource() return false as its last
statement.

I'm not sure I understand exactly. The result from adding 'return' to each call is that the link disappears completely when clicked, and no source is shown.

Gustaf

[SAM]

Le 9/25/08 12:27 PM, Gustaf a écrit :

>
I'm not sure I understand exactly. The result from adding 'return' to
each call is that the link disappears completely when clicked, and no
source is shown.

Gustaf

example :

<a href="apage.htm" onclick="alert('with JS no link'); return false;">
test 1
</a>

<script type="text/javascript">
function test() {
alert('with JS enabled : no link');
return false;
}
</script>

<a href="apage.htm" onclick="return test();">
test 2
</a>

--
sm

[Janwillem Borleffs]

Gustaf schreef:

I'm not sure I understand exactly. The result from adding 'return' to
each call is that the link disappears completely when clicked, and no
source is shown.

End each onclick with a "; return false". Example:

onclick="ToggleShowSource('show4');ToggleShowSourc e('hide4');ToggleShowSource('source4');
return false"

HTH;
JW

[Henry]

On Sep 25, 11:27 am, Gustaf wrote:

Janwillem Borleffs wrote:

>Change:

>onclick="ToggleShowSource

>Into:

>onclick="return ToggleShowSource

>When this doesn't work, have ToggleShowSource() return false as its last
statement.

I'm not sure I understand exactly. The result from adding 'return' to each call is that the link disappears completely when clicked, and no source is shown.

The point of adding the - return - is to have the function that is
called in response to click events return a boolean false value and so
cancel the navigation that is the default action taken when you click
on a link ('#' being, effectively, the URL of the top of the current
page, so you navigate to the top of the page).

The change (or rather, that specific change) doesn't work for you
because your onclick attribute code is:-

onclick="ToggleShowSource('show2');ToggleShowSourc e('hide2');ToggleShowSource('source2');"

- and that translates into a function with the form:-

link.onclick = function(event){
ToggleShowSource('show2');
ToggleShowSource('hide2');
ToggleShowSource('source2');
}

- and just sticking - return - at the beginning turns it into:-

link.onclick = function(event){
return ToggleShowSource('show2');
ToggleShowSource('hide2');
ToggleShowSource('source2');
}

- which is going to cancel the naviation (if ToggleShowSource returns
false) but the return happens before the second and third calls to
ToggleShowSource and so some of the hiding/showing that is wanted will
not happen.

There are several ways around that; putting - return false; - at the
end of the onclick attribute code would work (even if it is a bit
clunky, style-wise).

An alternative would be to stop using links for the triggers and
instead use <input type="button"elements (styled to resemble links
if necessary) as they don't navigate when you click on them so there
is no default to be cancelled.

[Gustaf]

Many thanks everyone, and good explanation!

Gustaf