Skip to content

Bottom footer navbar button extend

Solved Customisation
32 2 7.9k 1

Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • Coding question: fetch vs $.ajax call from Shopify

    Solved Performance javascript
    4
    3 Votes
    4 Posts
    1k Views
    @Panda You should be able to use {% javscript %} as shown in this video - it’s quite the watch, but very educational, and provides insight as to how this works - see below screenshot for an example [image: 1690282186734-cdb160e9-d955-498c-b921-982db2986e2b-image.png]
  • hover link effect

    Solved Customisation css link hover
    18
    1
    6 Votes
    18 Posts
    3k Views
    @DownPW Looking at the underlying code, class start is being added on hover by jQuery in this function document.querySelectorAll(".button-gradient, .button-transparent").forEach((button) => { const style = getComputedStyle(button); const lines = document.createElement("div"); lines.classList.add("lines"); const groupTop = document.createElement("div"); const groupBottom = document.createElement("div"); const svg = createSVG( button.offsetWidth, button.offsetHeight, parseInt(style.borderRadius, 10) ); groupTop.appendChild(svg); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); lines.appendChild(groupTop); lines.appendChild(groupBottom); button.appendChild(lines); button.addEventListener("pointerenter", () => { button.classList.add("start"); }); svg.addEventListener("animationend", () => { button.classList.remove("start"); }); }); }) The CSS for start is below .button-gradient.start .lines svg, .button-transparent.start .lines svg { animation: stroke 0.3s linear; } And this is the corresponding keyframe @keyframes stroke { 30%, 55% { opacity: 1; } 100% { stroke-dashoffset: 5; opacity: 0; } } It’s using both CSS and SVG, so might not be a simple affair to replicate without the SVG files.
  • chat list navbar

    Solved Customisation css navbar chat menu
    30
    2
    3 Votes
    30 Posts
    6k Views
    No no it’s ok @phenomlab I just comment the 2 lines mentionned aboves
  • background color of the footer area

    Solved Customisation nodebb
    7
    1
    7 Votes
    7 Posts
    1k Views
    @phenomlab thank you very much
  • 2 Votes
    10 Posts
    2k Views
    @DownPW We just have to change the cycles automatically according to each period ? Yes, this is by far the safest I think it is possible to achieve the goal, I have already seen this kind of thing on a site without any perf problems. It’s certainly possible, but not without issues or impact to performance (in my view)
  • 4 Votes
    8 Posts
    4k Views
    @DownPW done
  • [NODEBB] Reply Button/arrow answer

    Solved Customisation css nodebb
    25
    4
    4 Votes
    25 Posts
    6k Views
    Topic open https://sudonix.com/topic/207/nodebb-help-for-my-custom-css
  • [NODEBB] Scroll Button

    Solved Customisation css javascript html scroll button
    7
    1
    0 Votes
    7 Posts
    2k Views
    @downpw ooops. Forgot that. Thanks for adding.