-eve Comments - Answer Overflow

-eve

•Created by VishuTheGrt on 8/11/2023 in #front-end

Help needed for this Design *please explain the approach*

Would need some calculations for the percentages (probably with fr) of each different grid heights for each new cell though as well.

31 replies

KPCKevin Powell - Community

•Created by VishuTheGrt on 8/11/2023 in #front-end

Help needed for this Design *please explain the approach*

Maybe put each block into their own div with a grid on it, and then put those four divs into a div that wraps all of them? And then use flexbox on that outer div to align them up horizontally. (With added align/justify/direction where needed).

31 replies

KPCKevin Powell - Community

•Created by -eve on 4/11/2023 in #front-end

Flickering responsive nav menu on screen resize

So, I managed to make a JS solution to this problem as well. I noticed that the glitching only happened when my media query triggered so I focused towards that. I split the transition css seperate, and using data-attributes (with setAttribute) instead of classes, I added it to a JS media query (same width as my regular mq). This solved the issue in Chrome and Edge. Firefox was still being glitchy unless I resized my browser really really slow. The CSS added was: (before mq)

[data-nav-links-transition="off"] {
    transition: none;
}

[data-nav-links-transition="off"] {
    transition: none;
}

(mq)

[data-nav-links-transition="active"] {
    transition: transform 250ms ease-out;
}

[data-nav-links-transition="active"] {
    transition: transform 250ms ease-out;
}

For Firefox I had to add a setTimeout/clearTimeout, the timeout set to 0, this helped with the glitching here. Final JS code for the glitch fix:

const mediaQueryNavWidth = window.matchMedia('(min-width: 78.5em)');

function transitionToggle(mediaQueryNavWidth) {
    if (mediaQueryNavWidth.matches){
        clearQuickTimer()
        NavItemsBox.setAttribute('data-nav-links-transition', 'off');
    } else {
        quickTimerSetAttribute();   
    }
}

function quickTimerSetAttribute() {
    setTimeout( e=> {        
        NavItemsBox.setAttribute('data-nav-links-transition', 'active');
    }, 0 ); 
}

function clearQuickTimer() {
    clearTimeout(setTimeout);  
}

transitionToggle(mediaQueryNavWidth);

mediaQueryNavWidth.addEventListener('change', transitionToggle);

const mediaQueryNavWidth = window.matchMedia('(min-width: 78.5em)');

function transitionToggle(mediaQueryNavWidth) {
    if (mediaQueryNavWidth.matches){
        clearQuickTimer()
        NavItemsBox.setAttribute('data-nav-links-transition', 'off');
    } else {
        quickTimerSetAttribute();   
    }
}

function quickTimerSetAttribute() {
    setTimeout( e=> {        
        NavItemsBox.setAttribute('data-nav-links-transition', 'active');
    }, 0 ); 
}

function clearQuickTimer() {
    clearTimeout(setTimeout);  
}

transitionToggle(mediaQueryNavWidth);

mediaQueryNavWidth.addEventListener('change', transitionToggle);

Here's a codepen with the live code: https://codepen.io/-evecodes/pen/QWZyXEB In summary, my best guess for this glitching happening was that the added classes/attributes weren't acting fast enough when the media query triggered? From what I noticed the data-attributes were the fastest, but I read online that usually classes are? It's a bit of a headscratcher for sure haha.

6 replies

KPCKevin Powell - Community

•Created by -eve on 4/11/2023 in #front-end

Flickering responsive nav menu on screen resize

Ah, I didn't know that, thanks! I'll look into a JS based solution.

6 replies

KPCKevin Powell - Community

•Created by -eve on 4/11/2023 in #front-end

Flickering responsive nav menu on screen resize

Managed to fix it. I removed the translateX, and used the left/right/etc properties instead. Also added the transition on those.

    .nav-items-box {
        position: fixed;
        overflow: hidden;        
        top: 0;
        left: -60%;
        right: auto;        
        bottom: 0;
        flex-direction: column;        
        background-color: var(--main-color-90percent);    
        align-items: start;
        z-index: 1500;        
        transition: left 250ms ease-out;
    }

    [data-nav-mobile="active"] {        
        left: 0;
    }

    .nav-items-box {
        position: fixed;
        overflow: hidden;        
        top: 0;
        left: -60%;
        right: auto;        
        bottom: 0;
        flex-direction: column;        
        background-color: var(--main-color-90percent);    
        align-items: start;
        z-index: 1500;        
        transition: left 250ms ease-out;
    }

    [data-nav-mobile="active"] {        
        left: 0;
    }

6 replies

KPCKevin Powell - Community

•Created by -eve on 12/20/2022 in #front-end

Complex HTML setup and layout question

Thanks for your thoughts! I'll have a go at trying some stuff out. If the switching out through JS would be done with display none, that will affect CEO if I'm not mistaken? Since all of the text will be hidden/unreadable. I've also found sites that use PHP (with asp?) for this kind of thing, but that's currently outside my scope of knowledge. (And JS with loading in pages is possible too, but I'll have to read up on it more to learn how that works.)

3 replies

KPCKevin Powell - Community

•Created by -eve on 9/27/2022 in #ui-ux

Looking for design feedback

Thank you for your feedback, good points I can work with! thumbup

4 replies

Gaming

Programming