position page fragment (anchor) on top of page.

E

Erwin Moller

I have a page with multiple repeating divs that display history-entries
for some thing I am developing.
Each div contains an "edit" and "delete" icon.
When edit is clicked, the page reloads with the clicked item open for edit.
It will be positions on top of the page via an anchor
(mypage.php?histid=2345#edit).
That is all fine. The user clicks the item, and it appears on top of the
page in editmode (with a form), and all others are just displayed in
display/view mode (no form).

However, I also have a "new entry" link, that opens a form at the bottom
of the page (mypage.php#new).
To get this also on top of the page, I add a bunch of <br> under that
form, otherwise the form will be low on the screen, since it is the last
thing displayed on the document.

My question: I somehow dislike these stupid <br> at the end of my
document. For myself, if I look at a page, I often scroll down to see
what is there, but in this case it is only empty space.
So all those <br> feel somehow like a stupid solution.

I wonder if anybody has any suggestions for a cleaner solution.

Note: I try to develop in such a way that my visitors don't need
Javascript to use the webpage.

Regards,
Erwin Moller
 
D

dorayme

Erwin Moller said:
I have a page with multiple repeating divs that display history-entries
for some thing I am developing.
Each div contains an "edit" and "delete" icon.
When edit is clicked, the page reloads with the clicked item open for edit.
It will be positions on top of the page via an anchor
(mypage.php?histid=2345#edit).
That is all fine. The user clicks the item, and it appears on top of the
page in editmode (with a form), and all others are just displayed in
display/view mode (no form).

However, I also have a "new entry" link, that opens a form at the bottom
of the page (mypage.php#new).
To get this also on top of the page, I add a bunch of <br> under that
form, otherwise the form will be low on the screen, since it is the last
thing displayed on the document.

My question: I somehow dislike these stupid <br> at the end of my
document. For myself, if I look at a page, I often scroll down to see
what is there, but in this case it is only empty space.
So all those <br> feel somehow like a stupid solution.

I wonder if anybody has any suggestions for a cleaner solution.

Note: I try to develop in such a way that my visitors don't need
Javascript to use the webpage.


Yes, <br>s are a little inelegant. I guess not much better is an empty
last DIV styled to have a height at least to the number of BRs you
were using.

Another way would be to have the form off the page and linked to a
separate page, that would mean a different design (something I would
have no hesitation in doing and keeping pages short and
single-purposed).

If you are really wanting it to be on the same page, perhaps something
like the following, maybe you can play with the percentage assigned to
the last DIV to suit your purpose if you don't think it as inelegant
as the BRs (the width to body is merely to exacerbate the height for
the demo, you would not need it. I also use Ps instead, not important
though:

html, body {height: 100%;}
body {width: 8em;}
#lastItem {height: 100%;}

<body>
<p>
<a href="#lastItem">Last Item link</a> Cras vel eros. Vivamus
sed odio et orci tincidunt ornare. Duis dui lectus, commodo ut,
gravida id, ultricies quis, tellus. Vestibulum blandit nibh eget
turpis. Quisque mollis, lacus consectetur eleifend convallis, diam
augue blandit magna. And more of the same...
</p>
<p>
Cras vel eros. Vivamus sed odio et orci tincidunt ornare. Duis
dui lectus, commodo ut, gravida id, ultricies quis, tellus. Vestibulum
blandit nibh eget turpis. Quisque mollis, lacus consectetur eleifend
convallis, diam augue blandit magna. And more of the same...
</p>
<p>
Cras vel eros. Vivamus sed odio et orci tincidunt ornare. Duis
dui lectus, commodo ut, gravida id, ultricies quis, tellus. Vestibulum
blandit nibh eget turpis. Quisque mollis, lacus consectetur eleifend
convallis, diam augue blandit magna. And more of the same...
</p>
<p id="lastItem">
<b>Last item</b> Cras vel eros. Vivamus sed odio et orci
tincidunt ornare. Duis dui lectus, commodo ut, gravida id, ultricies
quis, tellus. Vestibulum blandit nibh eget turpis. Quisque mollis,
lacus consectetur eleifend convallis, diam augue blandit magna. And
more of the same...
</p>
</body>
 

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

Members online

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,062
Latest member
OrderKetozenseACV

Latest Threads

Top