Forums

Give help. Get help.

  • # November 6, 2018 at 7:41 pm

    Im completely ignorant of js, and i have tried to look at many pens in order to incorporate it to my tabs, but nothing Ive done works. Where do I even insert the code?

    The lil section on the bottom left are the buttons i use to change tabs btw

    # November 6, 2018 at 7:41 pm

    Also just to clarify, i DID try to follow it up with the specific parts of the code im talking about but the generous site wont let me post when i do that.

    # November 6, 2018 at 11:08 pm

    You’ll probably want to streamline the demo some more before folks will take a real look. We just need a very minimal example of the problem – no visual fluff or big chunks of content like what’s provided – we only need just enough HTML, CSS and JS to illustrate the issue.

    However, taking a cursory look at the JS, it appears that the tabs are being switched using display. Unfortunately you can’t animate the display property. With it, an element is either “there” or it’s not. Try looking to different CSS properties to animate between, such as opacity instead.

    # November 7, 2018 at 9:34 am

    Alright I tried to simplify it down:

    I also tried to replace

    $('#base .pages').css({
          'display' : 'none'
        });
    

    with

    $('#base .pages').css({
          'opacity' : '0'
        });
    

    But it didn’t work. Instead it rendered it ineffective.

    # November 7, 2018 at 10:30 am

    It does work, but you have to switch out all the relevant CSS and JS that uses the display property. And the show() method in jQuery uses display too https://codepen.io/anon/pen/eQJBjw

    # November 8, 2018 at 8:02 pm

    In your pen, the divs appear to be lined up beneath one another. So I tried to give .pages an absolute display, only when I do this i cannot highlight the text, or scroll it (I applied your code to my initial pen, and found that i couldnt scroll) because the last div is placed on top of it, tho its invisible. I tried to alter the z-index of the individual tabs, tho it didn’t really make a difference and would prefer not to customize every individual tab if possible

    # November 8, 2018 at 10:50 pm

    You can use the JS to change the z-index at the same time where the opacity is changed. JQuery’s css() method accepts multiple CSS definitions.

    # November 8, 2018 at 11:46 pm

    I actually tried that at the time with 'z-index' : '9999999' and 'position' : 'fixed', both separately and together. It didn’t make a difference so I didn’t bother mentioning it.

    # November 9, 2018 at 12:34 am

    I’m on iPhone but it seems to be working for me here. The panels fade in and out and I can scroll each one, with z-index switching between 0 and 1 (no other modifications).

    # November 9, 2018 at 4:29 pm

    Alright, so I tried fiddling around with it some more, and it worked. Thankyou for the help

    # November 11, 2018 at 6:12 am

    Hey again. I decided to have them slide in too, so I used a completely different code, and I don’t know how to implement fade. Could you pls help me out? I used this pen.

    # November 11, 2018 at 6:38 am

    Why don’t you continue with your original code and look into transforming/animating the translate() property alongside opacity?

    You should also research more about transitions, and keyframe animations, to understand more about what you’re doing, and how to use them effectively.

    # November 11, 2018 at 9:07 am

    I have but I couldn’t get it to work. Heck, I even tried other code but given the specific properties of the divs that i want to use this for, it wouldnt work. My divs would become invisible. It just so happened to only work with this code.

    # November 11, 2018 at 10:09 am

    I have but I couldn’t get it to work.

    Ok – post your slide code modifications and we can offer suggestions as to where you went wrong. I see no reason why it wouldn’t work using translate()

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag