Hi to all javascript coder,
Sorry dont have any idea how i should name the title.I hope this thread will get some attention from some expert here.
My intention is simple. There will be a minimize menu moving as you scroll down.this minimize menu can be expandable at any time.it can be expanded and it can be minimize as well.
All the function i describe above work but when i click to expand/minimize for the menu. the scroll is return to the very top of the page and thus the menu will be shown expand and minimize on the very top of the page as well. what i want is that when minimized/expanded menu is click, the menu should minimize/expand at the current scroll position and not reset to the top.
can anyone show me how do i modify the code below?
Code:
<html>
<head>
<style type="text/css">
span{
position:absolute;
top:10px;
right:20px;
z-index:200;
background-color:white;
}
</style>
</head>
<body onscroll ="repositionhelpmenu()">
<span>
<a href='#' onclick='showhidemenu()'>show help</a>
<table style='background-color:white;display:none;'>
.....table content with static element, tr and td only
(5 rows 2 columns maximum here)
</table>
</span>
<table class='data'>
...table content with static element, tr and td only
(1000 rows 10 columns maximum here)
</table>
</body>
<script language='javascript' type='text/javascript'>
function showhidemenu()
{
var spanvar = document.getElementsByTagName("span")[0]
if(spanvar.getElementsByTagName("a").innerHTML=="hide")
(
spanvar.getElementsByTagName("table")[0].style.display="none"
spanvar.getElementsByTagName("a")[0].innerHTML="show help"
)
else if(spanvar.getElementsByTagName("a").innerHTML=="show help")
(
spanvar.getElementsByTagName("table")[0].style.display="block"
spanvar.getElementsByTagName("a")[0].innerHTML="hide"
)
}
function repositionhelpmenu()
{
var spanvar = document.getElementsByTagName("span")[0]
spanvar.style.top=document.getElementsByTagName("body")[0].scrollTop + 20
}
</script>
</html>
Sorry dont have any idea how i should name the title.I hope this thread will get some attention from some expert here.
My intention is simple. There will be a minimize menu moving as you scroll down.this minimize menu can be expandable at any time.it can be expanded and it can be minimize as well.
All the function i describe above work but when i click to expand/minimize for the menu. the scroll is return to the very top of the page and thus the menu will be shown expand and minimize on the very top of the page as well. what i want is that when minimized/expanded menu is click, the menu should minimize/expand at the current scroll position and not reset to the top.
can anyone show me how do i modify the code below?
Code:
<html>
<head>
<style type="text/css">
span{
position:absolute;
top:10px;
right:20px;
z-index:200;
background-color:white;
}
</style>
</head>
<body onscroll ="repositionhelpmenu()">
<span>
<a href='#' onclick='showhidemenu()'>show help</a>
<table style='background-color:white;display:none;'>
.....table content with static element, tr and td only
(5 rows 2 columns maximum here)
</table>
</span>
<table class='data'>
...table content with static element, tr and td only
(1000 rows 10 columns maximum here)
</table>
</body>
<script language='javascript' type='text/javascript'>
function showhidemenu()
{
var spanvar = document.getElementsByTagName("span")[0]
if(spanvar.getElementsByTagName("a").innerHTML=="hide")
(
spanvar.getElementsByTagName("table")[0].style.display="none"
spanvar.getElementsByTagName("a")[0].innerHTML="show help"
)
else if(spanvar.getElementsByTagName("a").innerHTML=="show help")
(
spanvar.getElementsByTagName("table")[0].style.display="block"
spanvar.getElementsByTagName("a")[0].innerHTML="hide"
)
}
function repositionhelpmenu()
{
var spanvar = document.getElementsByTagName("span")[0]
spanvar.style.top=document.getElementsByTagName("body")[0].scrollTop + 20
}
</script>
</html>
