• Welcome to Simple Machines Community Forum. Please login or sign up.
December 01, 2021, 04:50:24 AM

News:

Want to get involved in developing SMF, then why not lend a hand on our github!


Adapting go to top/bottom css navigation bars

Started by spiros, January 25, 2021, 08:06:16 AM

Previous topic - Next topic

spiros

I have adapted the go to top/bottom css navigation bars by Antechinus for the Sunrise theme and it seems to work fine with the code further down.

I am also trying to adapt it for a Mediawiki theme with no luck so far, trying to use the following classes for bottom (#privacy)/top (#firstHeading), as seen in the Mediawiki source:

<li id="privacy"><a href="/wiki/LSJ:Privacy_policy" title="LSJ:Privacy policy">Privacy policy</a>
<h1 id="firstHeading" class="firstHeading">Page title</h1>


#top {
position: absolute;
top: 0
}

a[href="#bot"],
a[href="#lastPost"],
a[href="#top"] {
position: fixed;
top: 50%;
right: -4px;
width: 1.25em;
height: 20vh;
overflow: hidden;
z-index: 9999;
padding: 0 0 10vh;
background: linear-gradient(to right, #8e9db13d, #3b32151a);
color: #8e9db17d;
font-size: 2em;
font-weight: 700;
line-height: 20vh;
text-align: center;
white-space: nowrap;
border-radius: 0 0 0 .5em;
opacity: .7
}

a[href="#top"] {
top: auto;
bottom: 50%;
border-radius: .5em 0 0 0
}

a[href="#bot"]:hover,
a[href="#lastPost"]:hover,
a[href="#top"]:hover {
opacity: 1;
box-shadow: 1px 2px 1px #00000017
}

a[href="#bot"]::before,
a[href="#lastPost"]::before,
a[href="#top"]::before {
display: inline-block;
width: 1.25em;
content: '\2193'
}

a[href="#top"]::before {
content: '\2191'
}

Antechinus

This is pretty basic stuff, so it will be something simple, but I'm not sure what I should be looking at on that link. I can't see any obvious anchors to click, and I can't find them in the page's source code.

spiros

Can these work as anchors (privacy, firstHeading)?

<li id="privacy"><a href="/wiki/LSJ:Privacy_policy" title="LSJ:Privacy policy">Privacy policy</a>
<h1 id="firstHeading" class="firstHeading">User:Spiros</h1>


For example, in this page I used them for top/bottom page links
https://lsj.gr/wiki/User:Spiros


https://lsj.gr/wiki/User:Spiros#firstHeading
https://lsj.gr/wiki/User:Spiros#privacy

Antechinus

You can use any anchor as a target as long as it has an id. For non-IE browsers you can even use any HTML element that has an id. The trick is to have the href for the clickable anchors (ie: up/down buttons) set to the id of the target element. As long as you do that it should work.

So, roughly:
<a id="target"></a>
<a href="#target" class="button">Click here</a>

spiros

This is what I tried without success:

a[href="#firstHeading"], a[href="#privacy"] {
    position: fixed;
    top: 50%;
    left: -4px;
    width: 1.25em;
    height: 20vh;
    overflow: hidden;
    padding: 0 0 10vh;
    background: linear-gradient(to right,#323840,#151920);
    color: #777;
    font-size: 2em;
    font-weight: 700;
    line-height: 20vh;
    text-align: center;
    white-space: nowrap;
    border-radius: 0 0 .5em 0;
    opacity: .7;
}

a[href="#privacy"]:hover, a[href="#firstHeading"]:hover {
    opacity: 1;
    box-shadow: 1px 2px 1px #0009;
}


I did not use something like

#firstHeading{
    position:absolute;
    top:0
}


As it ended up distorting the appearance of the heading in the page.

Antechinus

Without seeing it live it's a bit hard to diagnose what is wrong.

Advertisement: