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]

Re: Prevent scrolling

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="Toggle ShowSource

Into:

onclick="return ToggleShowSourc e


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


JW

[Gustaf]

Re: Prevent scrolling

Janwillem Borleffs wrote:

Change:
>
onclick="Toggle ShowSource
>
Into:
>
onclick="return ToggleShowSourc e
>
>
When this doesn't work, have ToggleShowSourc e() 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]

Re: Prevent scrolling

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]

Re: Prevent scrolling

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="Toggle ShowSource('sho w4');ToggleShow Source('hide4') ;ToggleShowSour ce('source4');
return false"

HTH;
JW

[Henry]

Re: Prevent scrolling

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

Janwillem Borleffs wrote:

>Change:

>

>onclick="Toggl eShowSource

>

>Into:

>

>onclick="retur n ToggleShowSourc e

>

>When this doesn't work, have ToggleShowSourc e() 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="Toggle ShowSource('sho w2');ToggleShow Source('hide2') ;ToggleShowSour ce('source2');"

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

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

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

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

- which is going to cancel the naviation (if ToggleShowSourc e returns
false) but the return happens before the second and third calls to
ToggleShowSourc e 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"el ements (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]

Re: Prevent scrolling

Many thanks everyone, and good explanation!

Gustaf