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
$counter=@sublevel($node["id"], $counter, $level, $content_page,
$sub_content_page, $state_data, $selected_link, $selected_links);
?>

</div>

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

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

</body>
 
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?
Click to expand...

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'>";
}
}
Click to expand...

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'>
Click to expand...

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)>";
Click to expand...

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?
Click to expand...

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);
Click to expand...
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'>";
}
}
Click to expand...

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";
Click to expand...
$nodeResult = mysql_query($sql) or die("SELECT query failed");
$counter = 0;
$level=0;
Click to expand...
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
Scroll Bar, Example 2
<table cellpadding='10' cellspacing='0'>
Click to expand...

Why a table? Clearly this calls for nested lists.


<tr><td>
Click to expand...
<?php
while($node = mysql_fetch_assoc($nodeResult))
{
$selected_link=$node["title"];
?>
<table id=main_table cellpadding="1" cellspacing="1">
<tr>
<td>
Click to expand...
<?php
echo "<a id=x$counter href='#' onClick=javascript:Toggle($counter)>";
?>
Click to expand...
<?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>
Click to expand...

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

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);'
Click to expand...

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.
Click to expand...
Return false from this function
Click to expand...
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)>";
Click to expand...
Click to expand...
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:
Click to expand...
onclick='return Toggle($counter);'
Click to expand...

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?
Click to expand...

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?
Click to expand...

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

Thomas 'PointedEars' Lahn

rjpeek36 said:
1: why not post server side code?
Click to expand...

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

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Working on mobile css menu with plenty of frustration! 2
Login form no longer working 2
Sort by number of characters 1
Script to send email not working 1
SendGrid email issue in responsive Gmail 1
Survey details won't go through using php, ajax, Mysql 0

Members online

No members online now.
Total: 198 (members: 2, guests: 196)
Robots: 146

Forum statistics

Threads
473,931
Messages
2,570,085
Members
46,536
Latest member
keelop

Latest Threads

Top