Viewing 28 posts - 1 through 28 (of 28 total)
  • Author
    Posts
  • #739719

    Hi Dear Enfold Friends!,

    I’m trying to make first steps to create my website and have 3 questions.

    1. I’m working with “Accordion” Toggle – Content Element and asking myself if it would be possible to make the toggle_content animation a bit smoother. I found already few Threads about this Topic, but none of them seems to work for me.
    Is “Toggle” animation actually broken on Enfold?

    2. I’m wondering, if there would be any CSS solution for changing “width” and “hight” of particular
    (content surface and Title spaces) Toggle elements?

    3. Is it posible to show Toggle content through “mouse hover” action?

    Best Regards, Ioio

    #741057

    Hey ioiobit,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    #741413

    Hi Rikard,

    I appreciate your fast answer!

    I already solved animation problem of my toggle, but I have another one:) Padding of the toggle content picture doesn’t changed after implementing CSS code. There is still black field on the top and bottom of my content test pictures.
    The “Maximum Container width” doesn’t take any influence on my layout when using Enfold backend (only CSS works).
    Since I’m not a programmer, it is possible I made some coding mistakes:)
    I’m still looking for solution of 2nd and 3rd question. Thank you of Your help!
    Best Regards, Ioio

    My quick css:

    #top.boxed, .html_boxed.html_header_sticky #header, .container {
    max-width: 1210px;
    width: 100%;
    }

    .active_tc.toggle_wrap {
    display: none;
    }

    .toggle_content {
    padding: 0!important;
    margin-bottom: 20px;
    border: none;
    }

    .js_active .toggler {
    font-size: 15px;
    font-weight: bold;
    padding-left: 50px;
    }

    .av_toggle_section .toggler {
    background: rgba(1,1,1,0.4) !important;
    transition: all .2s linear !important;
    border-radius: 0px !important;
    border: 2px solid;
    border-right: none;
    border-left: none;
    border-bottom: none;
    }

    .av_toggle_section .toggler:hover {
    background-color: #000000!important;
    border-radius: 0px!important;
    border-color: #f2ff00!important;
    }

    .toggle_icon {
    background: none!important;
    border-style: solid;
    border-width: 2px;
    top: 10px;
    left: 10px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    }

    .toggle_icon .vert_icon {
    border-left-width: 2px;
    height: 12px;
    top: 2px!important;
    left: 7px!important;
    }

    .toggle_icon .hor_icon {
    width: 12px;
    border-top-width: 2px;
    left: 2px!important;
    top: 7px!important;
    }

    .toggle_icon, .toggle_icon .vert_icon, .toggle_icon .hor_icon {
    border-color: #c94e8e!important;
    }

    #742150

    Hi,

    Ok, great you got it working and thanks for the feedback. So it’s the space between the image in the content and the title bar you want to remove? If so then please try this:

    .toggle_wrap p {
      margin:0 !important;
    }

    Best regards,
    Rikard

    #742455

    Hi Rikard,
    Thank you for your fast response!
    Yes, I want to remove the space between image and the title bar.
    The margins are now a little bit shorter but unfortunately they didn’t disappear.

    Regards, Ioio

    #744272

    Hi,

    Try adding this css code:

    .av_toggle_section .toggle_content img {
        display: block;
        margin-top: 0;
    }

    Hope this helps :)

    Best regards,
    Nikko

    #744536

    Hi Nikko!
    Thank you for you fast help!
    It worked, but in the case where “toggle content” is linked the top-line still exist.
    Best Regards, Marcin

    #745638

    Hi,

    Are you referring to the black lines?

    Best regards,
    Nikko

    #746350

    Hi Nikko,

    No, I’m referring to the last “linked” section of the toggle. It is called “l 2010 l roller l”.
    If you try to hover over the picture, the blue balk will appear on the upper side of this “linked” section.
    Best Regards, Marcin

    #747076

    Hello?:) I would appriciate some advice:)

    • This reply was modified 8 years, 1 month ago by ioiobit.
    #747936

    Hello? Anyone there?

    #748318

    Hi,

    Sorry I missed this thread :( Try this css code:

    .toggle_content {
        background: transparent !important;
    }

    Best regards,
    Nikko

    #748499

    Dear Nikko,
    I already tried this one.
    Background disappeared, but the linked picture is still moving up and down on mouse hover.
    Do you have any idea, how to get rid of this “jumpy”content behavior?

    Best regards, Marcin

    • This reply was modified 8 years, 1 month ago by ioiobit.
    #749492

    Hello?

    #749557

    Hi,

    I tried to check your site again (link below in Private Content), however I couldn’t find the toggle in the page and I only get this:

    Nothing Found
    Sorry, the post you are looking for is not available. Maybe you want to perform a search?

    Cheers!
    Nikko

    #749594

    Hi Nikko,
    Ok! The Site should work now.
    Regards, Marcin

    #749604

    Hi,

    Thanks, try adding this css code:

    #top .toggle_content a:hover img {
        margin-top: 0 !important;
    }

    :)

    Best regards,
    Nikko

    #749616

    Wow! Finally it works! I really appreciate your help!
    I would like to ask you two more questions, if you doesn’t mind.

    1. Is it posible to expose Toggle content just through “mouse hover” action?
    2. Is it possible to change the position of toggle from horizontal to vertical ?

    Many, many thanks, Marcin

    #749640

    Hi Marcin,

    1. I’m not really sure what you mean by expose? I was wondering if you meant to be visible? if yes it should be the default since toggle hides/shows content :)

    2. It is possible but it’s not compatible with all browsers unfortunately :(

    Best regards,
    Nikko

    #749647

    Hi Nikko,
    1. I mean showing content through “hover” action (Like in the case of accordion slider).
    2. Shit:) I’m really missing this function!:)
    By the way, there is still some minor problem with “linked” overlay of the content.
    The overlay is jumping about 2px from left to right while hovering.

    Best Regards, Marcin

    #749650

    Hi Marcin,

    1. Try adding this css code:

    .av_toggle_section:hover .toggle_wrap {
        display: block !important;
        position: static;
        visibility: visible;
        left: 0;
        width: auto;
        z-index: 1;
    }

    As for the overlay “jumping” issue, I can’t see it on my end. Can you post a screenshot of it with the issue?

    Best regards,
    Nikko

    #749663

    Hi Nikko,

    The overlay “jumping issue is pretty subtile. As I sad it is about 2 or maybe 3px jump from left to right.
    I was just curious about the reason of this behavior. You could just zoom overlayed picture in your browser and hover your mouse over the picture few times. I couldn’t manage making screenshots while hovering.

    Your code worked. Anyway, without easing and proper transition the movement is a bit chaotic.
    Anyway thanks lot for your Code proposition.

    Best Regards, marcin

    • This reply was modified 8 years ago by ioiobit.
    #749820

    Hi Marcin,

    You’re welcome :) I think you are referring to the issue during hovering the image, which should be fixed with the code I gave. Let us know if I’m mistaken and the issue is still there :)

    Best regards,
    Nikko

    #751173

    Dear Nikko,

    Sorry for my late reply!
    I think i’m really happy with the present state of the accordion toggles. I have one more question. I need CSS for making several toggles just inactive (locked like).I would like to use them as “info” sections. My problem is, I want to use two accordions on the same page. How can I change properties of one toggle “title” section in the first or second accordion.

    Example scheme: first title field of the first accordion is blue and locked.

    Best Regards, Marcin

    #751840

    #753295

    Hi Marcin,

    I’m not sure if I really get what you are trying to achieve but I could imagine that it would probably need to know the page id + nth-child in css, and would have lots of codes, unless there is a pattern on which the toggles are inactive.

    Best regards,
    Nikko

    #753659

    Hi Nikko,

    I locked the toggle several “title fields” with this css:

    p[data-fake-id=’#toggle-id-1′] {
    background-color: rgba(242,255,0,0.3)!important;
    pointer-events: none;
    }

    p[data-fake-id=’#toggle-id-9′] {
    mix-blend-mode: screen!important;
    background-color: rgba(0,115,255,0.3)!important;
    pointer-events: none;
    }

    p[data-fake-id=’#toggle-id-13′] {
    background-color: rgba(0,115,255,0.3)!important;
    pointer-events: none;

    }

    Is there any better solution for this? How can I get page-id? What is nth-child.
    Sorry, I have very minor programming skills.

    Best Regards, Marcin

    • This reply was modified 8 years ago by ioiobit.
    #755044

    Hi,

    The solution we would give you will probably look the same as the one you posted (slightly different code but similar in a sense it will be a long list of css code). As for the things I mentioned try to open your site using google chrome, right click to anything on your site and click Inspect (it should look similar to the link I posted in Private Content), you find the body and look at the class, you should find the page id there, as for the nth-child, you can refer here for definition and usage: https://www.w3schools.com/cssref/sel_nth-child.asp but the method you used above will work as well, the only thing page-id-xx can do is to help you limit where it applies or make it specific.

    For example this code:

    p[data-fake-id=’#toggle-id-1′] {
    background-color: rgba(242,255,0,0.3)!important;
    pointer-events: none;
    }

    would be changed to this:

    .page-id-3402 .togglecontainer.avia-builder-el-2 p[data-fake-id='#toggle-id-1'] {
    background-color: rgba(242,255,0,0.3)!important;
    pointer-events: none;
    }

    which should target the 1st toggle in the 1st accordion in the homepage only (the code you used will affect other toggles not only in the page but in other pages as well).

    Cheers!
    Nikko

Viewing 28 posts - 1 through 28 (of 28 total)
  • You must be logged in to reply to this topic.