Tree gets scrolled back to top upon refresh

[Sergio Millich]

I have an annoyîng problem with a javascript tree. When you scroll
down to the bottom of the tree and click to open a node the tree is
refreshed and scrolls back to the top, hiding the node. Is there a way
to prevent the page from being scrolled back to the top on every
refresh? Thank you for your help.

 

[RobG]

I have an annoyîng problem with a javascript tree. When you scroll
down to the bottom of the tree and click to open a node the tree is
refreshed and scrolls back to the top, hiding the node. Is there a way
to prevent the page from being scrolled back to the top on every
refresh? Thank you for your help.

If you post a brief example, you may get an answer more quickly. I'm
not quite sure what you mean by a "javascript tree" - I presume you are
talking about collapsible, hierarchical menus - but I may be wrong.

Rob.

 

[Sergio Millich]

If you post a brief example, you may get an answer more quickly. I'm
not quite sure what you mean by a "javascript tree" - I presume you are
talking about collapsible, hierarchical menus - but I may be wrong.

Rob.

Is is in fact a tree that could be used as a menu or to navigate
through folders in Explorer style, it is indeed collapsible. The main
point is that as it expands in the frame so it has to be scrollable.
The source code snippet wouldn't be meaningful because it is embedded
in JSPs, here's what I have in the page:
<script language="JavaScript">function
setTreeParamsAndGo7129984(action, nodeId)
{setFieldValue('cti_current_contexte', 'GC_LOISFED.');go('/envirolex'
+ action + '?requestURI=%2Fenvirolex%2Fui%2FEnvUiLoisFed.jsp%23tree7129984&nodeId='
+ nodeId, false);}</script>
<a name="tree7129984"></a>
<span class="tree"><ul>
<li><a class="treeActuator"
href="javascript:setTreeParamsAndGo7129984('/fermerNoeud.do','242');"><span
class="treeNodeOpenCH">&nbsp;</a><a class="treeActuator"
title="Numéro: RS 101"
href="javascript:setTreeParamsAndGo7129984('/selectionnerNoeud.do','242');">CONSTITUTION
FEDERALE</a></span><span><a
href="http://www.admin.ch/ch/f/rs/101/index.html"> @ </a></span>
etc...
Pretty meaningless if you don't know what the functions do.
What interests me is how to control the scrolling part. Thank you for
your answers.

Sergio.

 

[Michael Winter]

[snip]

<script language="JavaScript">

The language attribute has been deprecated for many years now in favour of
the (required) type attribute.

<script type="text/javascript">

[reformatted:]

function setTreeParamsAndGo7129984(action, nodeId) {
setFieldValue('cti_current_contexte', 'GC_LOISFED.');
go('/envirolex'
+ action
+ '?requestURI=%2Fenvirolex%2Fui%2FEnvUiLoisFed.jsp%23tree7129984&nodeId='
+ nodeId, false);
}

It would seem to me that the go function call reloads the page containing
the menu. That's why it scrolls.

<a name="tree7129984"></a>

Though this anchor does exist, it may be ignored as it is empty. It would
probably be better to give the target an id with that value.

<span class="tree"><ul>

This is invalid mark-up. A SPAN element, which is inline, cannot contain a
UL, which is block-level. You should validate your HTML
(<URL:http://validator.w3.org/>).

[snip]

<a class="treeActuator"
href="javascript: [...] ">

You might want to read the FAQ (<URL:http://jibbering.com/faq/>),
especially section 2.24.

[snip]

Hope that helps,
Mike

 

[Fred Oz]

If you post a brief example, you may get an answer more quickly. I'm
not quite sure what you mean by a "javascript tree" - I presume you are
talking about collapsible, hierarchical menus - but I may be wrong.

Rob.

Is is in fact a tree that could be used as a menu or to navigate
through folders in Explorer style, it is indeed collapsible. The main
point is that as it expands in the frame so it has to be scrollable.
The source code snippet wouldn't be meaningful because it is embedded
[snip]

Pretty meaningless if you don't know what the functions do.
What interests me is how to control the scrolling part. Thank you for
your answers.

Sergio.

Here are some code posted recently that shows collapsible menus, is
this something like what you are trying to do? These are designed to
work whether the user has JavaScript enabled or not.

Just put some <a> tags into the ends of the branches to get working
menus - follow the bottom branch.

Rob.

<html>
<head>
<script type="text/javascript">
function mClick(n) {
while (n.nodeName != 'LI' && n.nodeName != 'UL') {
n = n.parentNode;
}
var n0 = n;
while (n.nodeName != 'UL') {
n = n.parentNode;
}
var o = n.childNodes;
for (var i=0; i<o.length; ++i) {
if (0 != n0) hideUL(o);
}
for (var k=0; k<n0.childNodes.length; ++k) {
if (n0.childNodes[k].style) n0.childNodes[k].style.display='';
}
}
function hideUL(x) {
if (x.nodeName == 'UL') x.style.display='none';
for (var j=0; j<x.childNodes.length; ++j) {
hideUL(x.childNodes[j]);
}
}
function resetMenu() {
mClick(document.getElementById("menu0"));
}
</script>
</head>
<body>
<!-- Menus start here -->
<ul id="menu0">
<li><a href="#" onclick="mClick(this)">menu 0 Level 0</a>
<ul id="menu1">
<li><a href="#"
onclick="mClick(this)">menu 0 Level 0 Level 0</a>
<ul>
<li>menu 0 Level 0 Level 0 Level 0</li>
<li>menu 0 Level 0 Level 0 Level 1</li>
<li><a href="#"
onclick="resetMenu();
">menu 0 Level 0 Level 0 Level 2</a></li>
</ul
</li>

<li><a href="#"
onclick="mClick(this)">menu 0 Level 0 Level 1</a>
<ul>
<li>menu 0 Level 0 Level 1 Level 0</li>
<li>menu 0 Level 0 Level 1 Level 1</li>
<li>menu 0 Level 0 Level 1 Level 2</li>
</ul
</li>
</ul>
</li>
<li><a href="#" onclick="mClick(this)">menu 0 Level 1</a>
<ul>
<li><a href="#"
onclick="mClick(this)">menu 0 Level 1 Level 0</a>
<ul>
<li>menu 0 Level 1 Level 0 Level 0</li>
<li>menu 0 Level 1 Level 0 Level 1</li>
<li>menu 0 Level 1 Level 0 Level 2</li>
</ul
</li>
<li><a href="#"
onclick="mClick(this)">menu 0 Level 1 Level 1</a>
<ul>

Apple</a></li>

Sun</li>

Mozilla</li>

</ul
</li>
</ul>
</li>
</ul>
<script type="text/javascript">

resetMenu();
</script>

<!-- Menus end here -->

</body>
</html>