Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 76 total)
  • Author
    Posts
  • in reply to: jquery passing argument to functions?. #299333
    uxfed
    Participant

    I’m noticing a trend in these forums where a relevant question is posted, then after a reply it’s re-posted with links in, with the text “thanks my issue has been fixed”. I think these are fake questions with the sole goal to get people to click those links.

    uxfed
    Participant

    When you say “allow for text to flow around it comfortably”, it sounds like what you’re wanting is “float” on the image, with a margin around it.

    I’d advise against paddings for images because the padding is “inside” the boundary of the image, making the image appear smaller. The margin is “ouside”, giving space around the image without altering its size. Depending on which way you’re floating you may want margin-left/margin-right and probably margin-top/margin-bottom.

    in reply to: Rotate Text – Possibly Impossible? Impossibly Possible? #299330
    uxfed
    Participant

    Your transform: rotate will work, but you may also need to fiddle with white-space: nowrap on the text, as well as setting a fixed width on the table cells so the text doesn’t blow it out (I’m guessing that’s a table)?

    A codepen of your progress would mean we wouldn’t have to guess at a solution.

    in reply to: FOUC Subsequent to Incorporating Critical.css #298199
    uxfed
    Participant

    I didn’t actually look last time but I’m not seeing a critical.css or critical_min.css file being served. I see what is likely a malformed attempt at it. Check how to use link tags at https://www.w3schools.com/CSS/css_howto.asp.

    As for the JS loader, you should be either starting it immediately (without the current wait) or get rid of it. It kinda just gets in the way otherwise.

    To your more general question, FOUC is bad and looks very unprofessional. FOUT (flash of unstyled text) can be okay if it’s not too jarring – I do that on some sites while fonts are loading.

    in reply to: Line and button placement on top of images #298143
    uxfed
    Participant

    I think I see what you’re trying to do with the line, but not the button. Anyway I think I’ve inferred enough to give you some starting advice.

    • What you’ve started doing with the position: absolute style is correct – you’ll need that to position your lines in the correct spots. One extra step you’ll need though is to set position: relative on the .thumbnail element. This says that the line will be absolutely positioned relative to the thumbnail element.
    • Then on the lines, set top and left styles. You’ll want to work in percentages rather than pixels to account for responsiveness.
    in reply to: Help troubleshooting css issue #298110
    uxfed
    Participant

    This code is the culprit. I’m not actually sure why it’s a problem though. I figured transforms off the page wouldn’t cause scroll issues – maybe it’s the 3d nature of it:

    [data-aos=fade-up-left] {
    transform: translate3d(100px,100px,0);
    }

    in reply to: FOUC Subsequent to Incorporating Critical.css #298107
    uxfed
    Participant

    There are two ways off the top of my head in which you could tackle this issue.

    1. (probably the easiest) You seem to already have a JS loader, where the content will show after fully loading, but said JS isn’t loading early enough, hence why you’re seeing the FOUC before the JS loader has… loaded.

    2. (what I would do) Get rid of the JS loader and amend your critical.css to include styles relating to everything “above the fold”. This means styles for all the content you see when you first load the page before scrolling. Anything below can load later.

    in reply to: Make only div scrollable when using transform scale #297979
    uxfed
    Participant

    Transform won’t work for zooming in the way you desire. You’d probably want to increase font-size when zooming. Its container should have overflow: auto; so a scroll bar will appear when there’s insufficient room for the content.

    in reply to: High Level Guidance on transitions and transforms #297956
    uxfed
    Participant

    I’m guessing you’ve done some more work to it because that’s not what’s happening now. It’s just including -left: 100px.

    I tried what I described last week by tweaking your codepen at the time and it works. You just needed to change the keyframes of moveContentRight so they’re the reverse of moveAndScale. The trick is the starting position of the second animation is the same as the end position of the first one so it won’t jump around.

    in reply to: High Level Guidance on transitions and transforms #297850
    uxfed
    Participant

    You could include animation: moveContentRight 1s forwards; as an inline style on image-container. Just make its keyframes a reverse of the left one.

    One thing you’ll also need to look at is how to get the image-container to line up with the left side of the screen. You might have to replace translateX with right: calc(100vw – whatever the image-container width is);.

    in reply to: High Level Guidance on transitions and transforms #297814
    uxfed
    Participant

    That’s a really good start!

    What I’d suggest is breaking this up a bit. So starting with the image-container content, it looks like in the dribble they have two blocks of content inside image-container, and as the image-container is transitioning across the page the content inside it is also transitioning in the other direction. So you won’t actually be “changing” the content inside image-container, instead you’ll be moving one block of content out, and another block of content in.

    For the width of the image-container iself, I’d use a CSS animation. It looks like you started doing this because you have “animation-name: moveAndScale;” in there. It’d be something like:

    @keyframes moveAndScale {

    0% {
    transform: scaleX(1);
    }

    50% {
    transform: scaleX(1.5);
    }

    100% {
    transform: scaleX(1);
    }
    }

    You’ll need to apply that animation directly to a separate element which contains the background though, because you don’t want to transform the text inside the block, only the background.

    in reply to: High Level Guidance on transitions and transforms #297665
    uxfed
    Participant

    A codepen with your progress would be useful, so we can see specifically where you’re having trouble.

    in reply to: FlexBox mobile and Desktop ordering Help! #295987
    uxfed
    Participant

    A code pen would really help here.

    in reply to: Linking to anchor tags within HTML #295115
    uxfed
    Participant

    I’m not actually seeing a problem. Some email providers may mess with the URLs you feed them, which is why the link looks different, but it seems to be redirecting correctly to the anchor link you started with.

    in reply to: Body Padding and Initial Caps #295114
    uxfed
    Participant

    Yeah that’s fine dustnik.

    1. I’m not actually seeing a problem. It’s a lot more noticeable if you bump up the amount of padding there but it’s applying all around the background element.

    2. I’d suggest using the style line-height: 1; on the style #workskin .cap

Viewing 15 posts - 1 through 15 (of 76 total)