Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • January 30, 2019 at 1:20 pm #1060467
    evabo

    Hi guys,
    If the content of a toogle is very long, the content of the next disappear upwards. Logical but this is very confusing.
    Is there a way to position the start of a toggle in the visible area?

    thanks for your help
    eva

    January 31, 2019 at 5:58 am #1060773
    Nikko

    Hey eva,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    #top .toggle_content {
    max-height: 200px;
    overflow-y: auto;
}

    Hope it helps.

    Best regards,
    Nikko

    January 31, 2019 at 11:19 am #1060885
    evabo

    Thank you but that’s not what I want.

    Here I found a code (in german), but I do not know exactly where to go:
    “Nach dem Öffnen eines Elements automatisch zu dessen Anfang scrollen”
    https://blog.kulturbanause.de/2011/11/elemente-mit-jquery-auf-und-zufahren-lassen-slide-toggle-und-parallel-das-icon-austauschen/

    $(document).ready(function(){
    $(‘.accordion-title’).click(function(event) {
    event.preventDefault();
    $(this).toggleClass(‘open’);
    $accordion_title = $(this);
    $accordion_content = $(this).next(‘.accordion-content’);
    $(‘.accordion-content’).not($accordion_content).slideUp();
    $(‘.accordion-content’).not($accordion_content).prev(‘.accordion-title’).removeClass(‘open’);
    $accordion_content.stop(true, true).slideToggle(400);
    if ($(this).hasClass(‘open’)) {
    ScrollToTop();
    }
    });
    });

    function ScrollToTop() {
    setTimeout(function() {
    $(‘html, body’).animate({
    scrollTop: $($accordion_title).offset().top – 5
    }, 600);
    }, 600);
    }

    Many thanks for your help
    eva

    January 31, 2019 at 2:09 pm #1060984
    Nikko

    Hi eva,

    I see, you can go to functions.php and add this code at the bottom:

    //-------------------------------
// Custom script in footer 
//-------------------------------

function custom_script_name(){
?>
<script>
// Your script here
</script>
<?php
}
add_action('wp_footer', 'custom_script_name');

    then replace // Your script here with the script you posted.
    For more information with this you can check on our documentation: https://kriesi.at/documentation/enfold/add-custom-js-or-php-script/#add-a-script-to-footer-section

    Best regards,
    Nikko

    February 1, 2019 at 1:03 pm #1061513
    evabo

    That’s it. It works wonderfully, but the header is in the way.
    How can I move the scroll top down 120px?

    My PHP knowledge needs to be improved.

    Best regards,
    Eva

    February 1, 2019 at 3:55 pm #1061589
    evabo

    nothing happens when you increase the number
    scrollTop: $($accordion_title).offset().top – 100

    February 1, 2019 at 5:42 pm #1061627
    Vinay

    Hi,

    Thank you for writing to us.

    Please refer to the documentation to align the scroll to top button.

    Best regards,
    Vinay

    February 2, 2019 at 12:29 pm #1061970
    evabo

    ok, but it just explains to change the box size and arrow position.
    Do you know the problem? If a toogle has a long content and I scroll while reading and then open the next toggle, the beginning of the content jumps to that of the highly scrolled closed toggle and the text begins subtracting from the scrolled content of the previous toggle.
    The code works and the Toogle jumps at the top but unfortunately below the header. So somehow the code has to be integrated that jumps the new Toogle top minus 150px!

    I need to change the position automatically scroll to its beginning after opening an accordion toogle.
    The code works, but I can’t change the position. It should work changing the number here: scrollTop: $($accordion_title).offset().top – 150
    but it does not change anything.

    Do you have an idea?

    Best regards
    Eva

    February 6, 2019 at 7:40 am #1063483
    Ismael

    Hi,

    Did you compress the scripts and stylesheets? Try to disable the minification and then test it again. And I think you should add something to the scrolltop value instead of decreasing it.

    scrollTop: $($accordion_title).offset().top + 150

    Best regards,
    Ismael

    February 6, 2019 at 12:39 pm #1063583
    evabo

    Thank you Ismael,
    ok, I disable this but nothing happen.
    I can write in the code whatever I want, it doesn’t work.
    Could you check the code?
    Best regards,
    Eva

    February 7, 2019 at 10:24 am #1063984
    Ismael

    Hi,

    Thanks for the update.

    I just noticed that the script was not created for the theme’s accordion element, so I had to modify it a bit. Please don’t forget to remove the browser prior to checking the page. 

    function ava_script_accordion_pos(){
    ?>
    <script>
    (function($) {
        $(document).ready(function(){
            $('.toggler').on('click', function(event) {
				console.log('toggle');
                var toggler = $(this);
                scrollToTop( toggler );
            });
        });

    function scrollToTop( toggle ) {
        setTimeout(function() {
            $('html, body').animate({
                scrollTop: $( toggle ).offset().top - 200
            }, 600);
        }, 600);
    }
    })(jQuery);
    </script>
    <?php
    }
add_action('wp_footer', 'ava_script_accordion_pos');

    Best regards,
    Ismael

    February 7, 2019 at 10:44 am #1063997
    evabo

    Hi Ismael,
    thanks a lot. It works fine.
    You certainly can not hear it anymore, but you really are the best.

    Best regards
    Eva

    February 8, 2019 at 6:07 am #1064419
    Ismael

    Hi,

    Glad it worked. And thank you for the kind words.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘beginn of a toogle with long content’ is closed to new replies.