Menu Tree Scroll Position after onclick


R

rjpeek36

I have a tree menu that is created using PHP. PHP loads each node from
a MySQL database and then PHP displays it to the user. I use
Javascript to toggle the displayed node icons from open to closed and
then back when the user clicks the node icon. When the menu first
loads all the nodes are opened and the vertical scroll bar is at the
top. When the user scrolls down to view a node at the bottom of the
page and then clicks on a node located toward the bottom, the node
icon and content close/hide and the scrollbar moves to the top. How do
I retain the scroll position after a user clicks on node icon?

function Toggle(item)
{
obj=document.getElementById(item);
visible=(obj.style.display!="none")
key=document.getElementById("x" + item);

if (visible)
{
obj.style.display="none";
key.innerHTML= "<img src='folder.gif' hspace='0' vspace='0'
border='0'>";
}
else
{
obj.style.display="block";
key.innerHTML= "<img src='textfolder.gif' hspace='0' vspace='0'
border='0'>";
}
}


$sqlConn = mysql_connect($server, $user, $password) or die("Couldn't
connect to database");
$dbConn = mysql_select_db($database, $sqlConn) or die("Couldn't
connect to database");
$sql = "select * from menu where parentid = 0 order by title asc";

$nodeResult = mysql_query($sql) or die("SELECT query failed");
$counter = 0;
$level=0;

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
Scroll Bar, Example 2
<table cellpadding='10' cellspacing='0'>
<tr><td>

<?php
while($node = mysql_fetch_assoc($nodeResult))
{
$selected_link=$node["title"];
?>
<table id=main_table cellpadding="1" cellspacing="1">
<tr>
<td>

<?php
echo "<a id=x$counter href='#' onClick=javascript:Toggle($counter)>";
?>

<?php
if ($selected_links[$level]==$node["title"])
{
$display="block";
echo "<img src='/images/textfolder.gif' width='16' height='16'
hspace='0' vspace='0' border='0'>";
}
else
{
$display="none";
echo "<img src='/images/folder.gif' width='16' height='16'
hspace='0' vspace='0' border='0'>";
}
?>

</a>
</td>

<td id="title<?php echo $counter; ?>"><b>
<?php
echo "<a id=x$counter href='#' onClick=javascript:Toggle($counter)>";
echo $node["title"];
echo "</a>";
?>
</b>
</td>
</tr>
</table>

<div id="<?php echo $counter; ?>" style="display:block; margin-left:
2em;">

<?php
[email protected]($node["id"], $counter, $level, $content_page,
$sub_content_page, $state_data, $selected_link, $selected_links);
?>

</div>

<?php $counter++; ?>
<?php
}
?>

</td></tr>
</table>

</body>
 
Ad

Advertisements

D

David Mark

I have a tree menu that is created using PHP. PHP loads each node from
a MySQL database and then PHP displays it to the user. I use
Javascript to toggle the displayed node icons from open to closed and
then back when the user clicks the node icon. When the menu first
loads all the nodes are opened and the vertical scroll bar is at the
top. When the user scrolls down to view a node at the bottom of the
page and then clicks on a node located toward the bottom, the node
icon and content close/hide and the scrollbar moves to the top. How do
I retain the scroll position after a user clicks on node icon?

First off, don't post server side code.
function Toggle(item)
{
obj=document.getElementById(item);
visible=(obj.style.display!="none")
key=document.getElementById("x" + item);

if (visible)
{
obj.style.display="none";
key.innerHTML= "<img src='folder.gif' hspace='0' vspace='0'
border='0'>";
}
else
{
obj.style.display="block";
key.innerHTML= "<img src='textfolder.gif' hspace='0' vspace='0'
border='0'>";
}
}

Return false from this function
$sqlConn = mysql_connect($server, $user, $password) or die("Couldn't
connect to database");
$dbConn = mysql_select_db($database, $sqlConn) or die("Couldn't
connect to database");
$sql = "select * from menu where parentid = 0 order by title asc";

$nodeResult = mysql_query($sql) or die("SELECT query failed");
$counter = 0;
$level=0;

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
Scroll Bar, Example 2
<table cellpadding='10' cellspacing='0'>

Why a table? Clearly this calls for nested lists.
<tr><td>

<?php
while($node = mysql_fetch_assoc($nodeResult))
{
$selected_link=$node["title"];
?>
<table id=main_table cellpadding="1" cellspacing="1">
<tr>
<td>

<?php
echo "<a id=x$counter href='#' onClick=javascript:Toggle($counter)>";
?>

<?php
if ($selected_links[$level]==$node["title"])
{
$display="block";
echo "<img src='/images/textfolder.gif' width='16' height='16'
hspace='0' vspace='0' border='0'>";
}
else
{
$display="none";
echo "<img src='/images/folder.gif' width='16' height='16'
hspace='0' vspace='0' border='0'>";
}
?>

</a>
</td>

<td id="title<?php echo $counter; ?>"><b>
<?php
echo "<a id=x$counter href='#' onClick=javascript:Toggle($counter)>";

Get rid of the "javascript:" prefix as it is not needed. The
attribute should be "onclick" and all attribute values should be
quoted. And you need to return false, so:

onclick='return Toggle($counter);'
 
R

rjpeek36

I have a tree menu that is created using PHP. PHP loads each node from
a MySQL database and then PHP displays it to the user. I use
Javascript to toggle the displayed node icons from open to closed and
then back when the user clicks the node icon. When the menu first
loads all the nodes are opened and the vertical scroll bar is at the
top. When the user scrolls down to view a node at the bottom of the
page and then clicks on a node located toward the bottom, the node
icon and content close/hide and the scrollbar moves to the top. How do
I retain the scroll position after a user clicks on node icon?

First off, don't post server side code.




function Toggle(item)
{
obj=document.getElementById(item);
visible=(obj.style.display!="none")
key=document.getElementById("x" + item);
if (visible)
{
obj.style.display="none";
key.innerHTML= "<img src='folder.gif' hspace='0' vspace='0'
border='0'>";
}
else
{
obj.style.display="block";
key.innerHTML= "<img src='textfolder.gif' hspace='0' vspace='0'
border='0'>";
}
}

Return false from this function


$sqlConn = mysql_connect($server, $user, $password) or die("Couldn't
connect to database");
$dbConn = mysql_select_db($database, $sqlConn) or die("Couldn't
connect to database");
$sql = "select * from menu where parentid = 0 order by title asc";
$nodeResult = mysql_query($sql) or die("SELECT query failed");
$counter = 0;
$level=0;
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
Scroll Bar, Example 2
<table cellpadding='10' cellspacing='0'>

Why a table? Clearly this calls for nested lists.


<?php
while($node = mysql_fetch_assoc($nodeResult))
{
$selected_link=$node["title"];
?>
<table id=main_table cellpadding="1" cellspacing="1">
<tr>
<td>
<?php
echo "<a id=x$counter href='#' onClick=javascript:Toggle($counter)>";
?>
<?php
if ($selected_links[$level]==$node["title"])
{
$display="block";
echo "<img src='/images/textfolder.gif' width='16' height='16'
hspace='0' vspace='0' border='0'>";
}
else
{
$display="none";
echo "<img src='/images/folder.gif' width='16' height='16'
hspace='0' vspace='0' border='0'>";
}
?>
</a>
</td>

<td id="title<?php echo $counter; ?>"><b>
<?php
echo "<a id=x$counter href='#' onClick=javascript:Toggle($counter)>";

Get rid of the "javascript:" prefix as it is not needed. The
attribute should be "onclick" and all attribute values should be
quoted. And you need to return false, so:

onclick='return Toggle($counter);'

I made the changes as you suggested and now it behaves correctly but I
do have a few questions.
1: why not post server side code?
2: can you explain what my code was doing before and now after the
changes you suggested?
 
D

David Mark

First off, don't post server side code.
Return false from this function
Why a table? Clearly this calls for nested lists.
<tr><td>
<?php
while($node = mysql_fetch_assoc($nodeResult))
{
$selected_link=$node["title"];
?>
<table id=main_table cellpadding="1" cellspacing="1">
<tr>
<td>
<?php
echo "<a id=x$counter href='#' onClick=javascript:Toggle($counter)>";
?>
<?php
if ($selected_links[$level]==$node["title"])
{
$display="block";
echo "<img src='/images/textfolder.gif' width='16' height='16'
hspace='0' vspace='0' border='0'>";
}
else
{
$display="none";
echo "<img src='/images/folder.gif' width='16' height='16'
hspace='0' vspace='0' border='0'>";
}
?>
</a>
</td>
<td id="title<?php echo $counter; ?>"><b>
<?php
echo "<a id=x$counter href='#' onClick=javascript:Toggle($counter)>";
Get rid of the "javascript:" prefix as it is not needed. The
attribute should be "onclick" and all attribute values should be
quoted. And you need to return false, so:
onclick='return Toggle($counter);'

I made the changes as you suggested and now it behaves correctly but I
do have a few questions.
1: why not post server side code?

Because this is a JavaScript group and it is hard to debug JavaScript
that has PHP directives embedded in it. Just post the client side
code that is generated by the server.
2: can you explain what my code was doing before and now after the
changes you suggested?

It wasn't preventing the default action of the links (navigating to an
anchor with no name.)
 
Ad

Advertisements

T

Thomas 'PointedEars' Lahn

rjpeek36 said:
1: why not post server side code?

This should be obvious really for someone who understands how client-server
HTTP communication works.

Do not post server-side code when the problem is (assumed to be)
client-side; it is of little to no use for analysis. Server-side code
is transformed into other code which is then served to the client; the
client-side script engine works of course on *that* code (which View
Source etc. reveals in UAs), _not_ on the original server-side code.


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top