Small test file and asking for help
Charles Dobie
rw-website-help group yesterday and today.
I've prepared a small test file which contains a few small things which
continue to bug me. I can't seem to solve them using CSS, but maybe
someone here has suggestions or can point me to solutions.
I've explained the problems in the text at the top of the test file at
https://www.dobiegenealogy.org/testfiles/testing-sticky-banner.htm
Thanks,
Charlie Dobie.
Barry Carlson
Charlie,
I've had a look at your 'bugs', and
yes they can all be fixed.
The sticky-banner can be fixed with CSS, but as its height increases when the width decreases, causing some of the text to wrap to the next line, javascript will be need to get the new offsetHeight and pass that to the divs that are scrolled to the top.
I've attached a screenshot showing
p#d1972 following the link to it being clicked on when the page
is at full width.
The styles follow, but you will not
that part of the .sticky-banner class has been split off into an
id p#d1972.
div#sB {
width: 100vw;
display: -webkit-flex;
display: flex;
box-sizing:border-box;
margin:0;padding:0;
text-align:center;
font-variant-caps: small-caps;
background:gainsboro;
position: -webkit-sticky;
position: sticky;
top:0;
}
div.sticky-banner p {
width:100%;
padding:.25em .5em;
margin:0;
display:inline-block;
border: 1px solid black;
margin-top:2px;
font-weight:bold;
text-align:center;
text-indent:0;
}
p#d1972 {
scroll-margin-top:48px;
}
The style - scroll-margin-top:48px is designed to do what you require, but with the proviso that the value will need to be adjusted as mentioned earlier.
I'll post again when I have sorted out the javascript to do the job. It will work by sensing when the .sticky-banner is resized and pass the new offsetHeight value to a class which is common to any div you may want to scroll to the top. I will use the addAdjacentHTML method to pass a new style to be the last item in the <style> tag in the header of the page. So, irrespective of any scroll-margin-top style, whether linked to, or in the header styles, the added style will be the one used.
The other matters, I'll address later.
Barry
Barry Carlson
Charlie,
My previous post needs correcting!
The sticky-banner can be fixed with CSS, but as its height increases when the width decreases, causing some of the text to wrap to the next line, javascript will be needed to get the new offsetHeight and pass that to the divs that are scrolled to the top.
I've attached a screenshot showing
p#d1972 following the link to it being clicked on when the page
is at full width.
The styles follow, but you will note that part of the .sticky-banner class has been split off into an id div#sB.
B.
Barry Carlson
Charlie,
Thanks for that. I finished doing something similar, though spent some time working out what were margins or padding by changing background colors. The page I now have looks very similar to what you originally posted.
The p.date class is currently
updated by javascript when the div height changes, and is
checked when the windows width or height is changed.
I've placed a copy of the files in my web test folder at https://ngamotu.nz/test/sticky-mod.html
The javascript is just prior to the </body> tag, the CSS file is linked in the head of the page, and <style></style> are there - with nothing in them. The javascript puts the .date {scroll-margin-top:??px;} in the <style> div, the browser sees it, but you wont. I've also placed links to all the .date divs.
B.
Barry,
I fixed the border-top: 1px solid black problem. Instead of placing it at the top of each paragraph, where it was affected by the left indent correcting the hanging first line, I put the border on top of the div containing each paragraph. So that looks good.
Barry Carlson
Charlie,
Okay. I'll have a look at the 1911 crew list and see what I can do with it. I've recently adopted a different sort table script, and will see if I can get it to work the way you want.
While on this subject; a few days ago I finished putting together a page shedding a new light on the 2024 Olympic Games Medals Table. I will now most likely make the header of the table 'sticky' before releasing it to the rest of world.
Barry.
-------------------------------------------
Barry -- many thanks for this! I have several large census files on my websites which are arranged in spreadsheet format and I can apply this javascript solution to some of them.
And while I have your attention, please take a look at this crew list -- https://www.rcnhistory.org/hmcs-niobe-1911-crewlist.htm
There are links in the "notes", and they work, but if you sort the list on any of the fields, and click on a link, then return to the list, it is displayed in unsorted order again. There must be a way, (through javascript?) to return the sorted version and position of the list to the user.
Later,
Charlie.
Barry Carlson
Charlie,
Yes, I am aware of the problem and will have a go at fixing it. You'll note that there is a onresize="checkSticky()" attribute in the <body> tag, and the script also needs to be triggered as the page initially loads. There may be a simple way of getting this right, or a more difficult way. I'll work on getting it sorted.
B.I found a minor glitch with your script. It works fine after I've re-sized the window, and even after I re-size and then restore it to full width. But if I start off at full screen width and don't re-size, the targeted page header is still hidden below the headers.
Take care,
Charlie.
--
Website FAQs: https://sites.rootsweb.com/~gearyfamily/rootsweb-hosted-web-sites.html
FTP FAQs: https://sites.rootsweb.com/~gearyfamily/publishing-your-sites.html
To contact the owners of this group, write to rw-website-...@googlegroups.com
---
You received this message because you are subscribed to the Google Groups "RootsWeb-Website-Help" group.
To unsubscribe from this group and stop receiving emails from it, send an email to rw-website-he...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/rw-website-help/e1773309-2e01-47ac-a042-10eb8f4b1c3a%40gmail.com.
Barry Carlson
Charlie,
Haven't done much testing, but have added after the end of the checkSticky() script - onload=checkSticky(). This will run the script the instant the page initially loads. Any changes in the page size, resulting in the .sticky-banner changing size will be triggered from the <body onresize="checkSticky()".
See how it goes.
B.
Barry Carlson
That seems to work fine now -- many thanks!
Chas.
Barry Carlson
Charlie,
I've checked the rendering on a Android mobile, and found that https://ngamotu.nz/test/sticky-mod.html looks good and works well. A change of orientation doesn't automatically rerun the script. Detecting the change of orientation in all mobiles is not easy, but just clicking on any one of the links, fires the checkSticky() script and all's back to normal.
B.
--
Website FAQs: https://sites.rootsweb.com/~gearyfamily/rootsweb-hosted-web-sites.html
FTP FAQs: https://sites.rootsweb.com/~gearyfamily/publishing-your-sites.html
To contact the owners of this group, write to rw-website-...@googlegroups.com
---
You received this message because you are subscribed to the Google Groups "RootsWeb-Website-Help" group.
To unsubscribe from this group and stop receiving emails from it, send an email to rw-website-he...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/rw-website-help/ea776d91-6c52-4e34-b371-0ed577c15086%40gmail.com.