[SOLVED] Keep the page position? [modified]
-
Hello all, I'm trying to keep the page still... :rolleyes: without luck... In one of the pages I'm making I have a list of divs that are giving an effect of rows in a listctrl... you know one is gray, the next one white, the third gray again and so on... In each of those rows there is a link that allows me to show/hide a form that is at the bottom of each div (I'm using some code like this one[^]). If the complete page doesn't fit into the explorer window, each time that I press that link the page moves to the top giving the user a strange feeling as the user has to search again the content that needs in the page... How could I maintain it at the same position? Thank you in advance! :thumbsup:
[www.tamelectromecanica.com] Robots, CNC and PLC machines for grinding and polishing.
modified on Thursday, June 9, 2011 11:18 AM
One simple solution to this problem would be to focus on an anchor (<a> tag) or one of the form fields that you're dynamically showing, e.g.:
function focusOn(elementId) {
getElementById(elementId).focus();
}I assume this is required because the page must be reloaded when you're showing the form controls? A better solution may be to just have them on the page all the time, but using the
display:none
CSS style, and then set the one you want to be visible. Hope this helps! Cheers!
-
Hello all, I'm trying to keep the page still... :rolleyes: without luck... In one of the pages I'm making I have a list of divs that are giving an effect of rows in a listctrl... you know one is gray, the next one white, the third gray again and so on... In each of those rows there is a link that allows me to show/hide a form that is at the bottom of each div (I'm using some code like this one[^]). If the complete page doesn't fit into the explorer window, each time that I press that link the page moves to the top giving the user a strange feeling as the user has to search again the content that needs in the page... How could I maintain it at the same position? Thank you in advance! :thumbsup:
[www.tamelectromecanica.com] Robots, CNC and PLC machines for grinding and polishing.
modified on Thursday, June 9, 2011 11:18 AM
-
One simple solution to this problem would be to focus on an anchor (<a> tag) or one of the form fields that you're dynamically showing, e.g.:
function focusOn(elementId) {
getElementById(elementId).focus();
}I assume this is required because the page must be reloaded when you're showing the form controls? A better solution may be to just have them on the page all the time, but using the
display:none
CSS style, and then set the one you want to be visible. Hope this helps! Cheers!
Hello all_in_flames (I hope you are well :rolleyes:), I've tried the first option about the <a> tag... this semi-works as the page gets moved as before but a little bit better as it shows the content centered... Also tried to use focus()... without luck... it seems it don't work for me...
function toggle(id)
{
var e = document.getElementById(id);
if(e.style.display == 'block')
{
e.style.display = 'none';
e.focus();
}
else
{
e.style.display = 'block';
e.focus();
}
}then arriving at your last recommendation... I think it is how I'm doing it right now... I've put all the content there but the style is display:none and I "only" show and hide it... This has been my initial approach and the behavior is not what I want... Any idea on what should I do? Thank you in advance!
[www.tamelectromecanica.com] Robots, CNC and PLC machines for grinding and polishing.
-
Hello all_in_flames (I hope you are well :rolleyes:), I've tried the first option about the <a> tag... this semi-works as the page gets moved as before but a little bit better as it shows the content centered... Also tried to use focus()... without luck... it seems it don't work for me...
function toggle(id)
{
var e = document.getElementById(id);
if(e.style.display == 'block')
{
e.style.display = 'none';
e.focus();
}
else
{
e.style.display = 'block';
e.focus();
}
}then arriving at your last recommendation... I think it is how I'm doing it right now... I've put all the content there but the style is display:none and I "only" show and hide it... This has been my initial approach and the behavior is not what I want... Any idea on what should I do? Thank you in advance!
[www.tamelectromecanica.com] Robots, CNC and PLC machines for grinding and polishing.
There are only a small subset of HTML elements that can accept focus. I believe all of the input fields (text boxes, check and radio boxes, etc) and anchor tags are able to accept a focus() call. I would pass the id of an element that can be focused on as well as the id of the element to be shown/hidden:
function toggle(toggleId, focusId)
{
var e = document.getElementById(toggleId);
var f = document.getElementById(focusId);
if(e.style.display == 'block')
{
e.style.display = 'none';
f.focus();
}
else
{
e.style.display = 'block';
f.focus();
}
}Good luck!
-
It is not a floating div... Not at least if you are speaking about the "float" style. Anyway I've searched for the overflow parameter and I've seen that it is used to show scrollbars... :~ Thank you for your feedback.
[www.tamelectromecanica.com] Robots, CNC and PLC machines for grinding and polishing.
-
There are only a small subset of HTML elements that can accept focus. I believe all of the input fields (text boxes, check and radio boxes, etc) and anchor tags are able to accept a focus() call. I would pass the id of an element that can be focused on as well as the id of the element to be shown/hidden:
function toggle(toggleId, focusId)
{
var e = document.getElementById(toggleId);
var f = document.getElementById(focusId);
if(e.style.display == 'block')
{
e.style.display = 'none';
f.focus();
}
else
{
e.style.display = 'block';
f.focus();
}
}Good luck!
X| OK, now I've put the focus on the first editbox in the form... I'm seeing another problem here... and I think I'm trying to solve it in the wrong way: In order to allow the user to click somewhere to toggle the form on/off I've put a link. That link links to # (href="#") this seems to be the cause of my problems as if I remove that (href="#") then the page doesn't moves. The only problem here is that it also shows the link as plain text (black + no hovering effects) so the user won't notice it as a link... How would you proceed in that case? Thank you for your time! :thumbsup:
[www.tamelectromecanica.com] Robots, CNC and PLC machines for grinding and polishing.
-
Hello all, I'm trying to keep the page still... :rolleyes: without luck... In one of the pages I'm making I have a list of divs that are giving an effect of rows in a listctrl... you know one is gray, the next one white, the third gray again and so on... In each of those rows there is a link that allows me to show/hide a form that is at the bottom of each div (I'm using some code like this one[^]). If the complete page doesn't fit into the explorer window, each time that I press that link the page moves to the top giving the user a strange feeling as the user has to search again the content that needs in the page... How could I maintain it at the same position? Thank you in advance! :thumbsup:
[www.tamelectromecanica.com] Robots, CNC and PLC machines for grinding and polishing.
modified on Thursday, June 9, 2011 11:18 AM
Make sure that your click handler returns false:
<a href="#" onclick="function();return false">Link</a>
or
<a href="#" onclick="return function();">Link</a>
if
function()returns false. -
There are only a small subset of HTML elements that can accept focus. I believe all of the input fields (text boxes, check and radio boxes, etc) and anchor tags are able to accept a focus() call. I would pass the id of an element that can be focused on as well as the id of the element to be shown/hidden:
function toggle(toggleId, focusId)
{
var e = document.getElementById(toggleId);
var f = document.getElementById(focusId);
if(e.style.display == 'block')
{
e.style.display = 'none';
f.focus();
}
else
{
e.style.display = 'block';
f.focus();
}
}Good luck!
Already solved... Nice suggestion to use focus on the desired control, but it did not make it... Anyway returning false after the function worked... See Graham Breach[^] answer[^]. Thank you again for your time and feedback!
[www.tamelectromecanica.com] Robots, CNC and PLC machines for grinding and polishing.
-
Already solved Richard, Graham Breach[^] has saved me! :-D The way to do it was to return a false... See his answer[^]. thank you for your time and help! :thumbsup:
[www.tamelectromecanica.com] Robots, CNC and PLC machines for grinding and polishing.
-
Make sure that your click handler returns false:
<a href="#" onclick="function();return false">Link</a>
or
<a href="#" onclick="return function();">Link</a>
if
function()returns false.Definitely Graham... there should be a button with more "o" as in "Goooo...oooood answer". This was one of those things that can't be searched in the internet (not at least with my google-fu). a big THANK YOU! :thumbsup:
[www.tamelectromecanica.com] Robots, CNC and PLC machines for grinding and polishing.
-
Definitely Graham... there should be a button with more "o" as in "Goooo...oooood answer". This was one of those things that can't be searched in the internet (not at least with my google-fu). a big THANK YOU! :thumbsup:
[www.tamelectromecanica.com] Robots, CNC and PLC machines for grinding and polishing.
I know what you mean - without already knowing the answer, I wouldn't know what to search for either. Here's quite an interesting page I found about it: http://www.quirksmode.org/js/events_early.html[^]