Accordion disable scroll down - Support | Kriesi.at

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

Author

Posts
August 13, 2015 at 10:24 am #487044
Mark_goessens
Participant
Hi Kriesi,

I’m using the accordion element as a dynamic post container.
Because I want to create links to show up different post content in a container.

For example:
Press button 1 -> post 1 shows up in container
Now, press button 2 -> post 1 hides in container, post 2 shows up in container

Actually, I don’t know how to achieve this without using the accordion element.

You can find my test page here http://www.aarsen.com/test/
You can either click on ‘open info 1’ and/or ‘open info 2’
As you can see, I disabled the visibility of the container titles, so only the content is visible.
When you click on ‘open info 1’ everything is fine.
But when you click on ‘open info 2’ the page scrolls to much down. I know, that’s because the accordion element thinks that ‘info 2’ is located beneath ‘info 1’. So more at the bottom.

This is only a test. When it works the amount of links / accordion fields will be increased to 7 instead of 2.

My question is, is there way to disable the automatic-scroll-down-to-the-content-function?

It’s a little bit difficult to explain in English. But I hope you’ll understand what I’m trying to reach.
- This topic was modified 9 years, 3 months ago by Mark_goessens.
August 13, 2015 at 4:01 pm #487269

Elliott
Inactive Moderator

Hi Mark_goessens!

Have you considered using the tab shortcode? http://kriesi.at/themes/enfold/shortcodes/tabs/

With how your using the toggles it’s pretty much the same thing.

Best regards,
Elliott

August 13, 2015 at 4:10 pm #487276

Mark_goessens
Participant

Hi Elliott,

Thanks for your quick reply. I also could use the tab element.
I haven’t thought about that.

But I just tried it, but then again you see that there is a scroll to a lower section.
What I haven’t told you; when it all works, I want to click on an image, to open the specific tab. So I don’t want to use the regular tab buttons.
Besides that, the first tab is always visible. With the accordion element, the first element isn’t visible at the beginning. And that’s how it have to be.

Do you know how I can solve these things?

Greets Mark

August 14, 2015 at 3:16 pm #487789

Elliott
Inactive Moderator

Hi!

Well the scroll effect should not be happening. Did you do some customization? Let’s try the following.

1. Deactivate all plugins.

2. Completely delete Enfold from your WordPress theme directory before downloading + uploading a fresh copy from themeforest.

If your still having trouble after doing the above two steps then send us a WordPress login and we’ll take a closer look.

Regards,
Elliott

September 9, 2015 at 1:24 pm #500373
Mark_goessens
Participant
Hi Elliott,

There I am again. Sorry for the late response.

I deactivated the plugins and reinstalled the theme. But that doesn’t change anything.
I also tried the same thing on another (complete different) website with the Enfold template. But there the same problem appears.
You can see it here

I found out it only happens when the content in that tab is quite long.
When I click on the actual tab, there is no problem. But when I click on the link with the anchor tag, the page scrolls to the middle of the content.

I also tried this solution, but in my case this isn’t helping.

Maybe there is another solution?

Greets Mark
- This reply was modified 9 years, 2 months ago by Mark_goessens.
September 9, 2015 at 4:45 pm #500534

Elliott
Inactive Moderator

Hi!

I do not know. Perhaps that is the area in the tab title that it links to normally. You just do not see it on the first tab because the end of the page is reached.

Perhaps there is a way by using javascript and e.preventDefault() so the link does not act as an anchor and just activates the tab.

Best regards,
Elliott

September 10, 2015 at 11:39 am #500918

Mark_goessens
Participant

Hi Elliott,

I’m not that much into javascript. Can you describe how to achieve this exactly?

Greets Mark

September 10, 2015 at 4:52 pm #501159
Elliott
Inactive Moderator
Hi!

It’s kind of complex. Here is an example, http://stackoverflow.com/questions/10735423/how-to-triggerclick-on-jquery-tabs-currently-active-tab. It would probably be best to hire a freelancer to help you out with it.

Regards,
Elliott
- This reply was modified 9 years, 2 months ago by Elliott.
September 14, 2015 at 3:24 pm #502806
Mark_goessens
Participant
Okay, I think this is too complex for me.

Nog I’m trying to add a custom jQuery UI script to the page.
This is the script I would like to add.

But I think, again, I’m doing something wrong.
I added this code at the end of the Enfold child theme functions.php
```
add_action( 'wp_footer', 'enfold_customization_custom_js' );
function enfold_customization_custom_js() {
?>
<script type = "text/javascript">
jQuery(function() {
    //$("#tabs").tabs();
    
    var $tabs = $("#tabs").tabs(
        {fx:{opacity: 'toggle', duration: 'fast'}},
        {event: 'mouseover'}
    );
    jQuery("#tab-nav-external li a").mouseover(function () {
        $tabs.tabs('select', $(this).attr('href'));
        return false;
    });         
});
</script>
<?php
}
```
The HTML code I added to the code block in the page.
And after that I pasted this line between the <head></head> tags in header.php:
link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css

Should this have to work?

You can check my test here
- This reply was modified 9 years, 2 months ago by Mark_goessens.
September 15, 2015 at 3:32 pm #503404

Elliott
Inactive Moderator

Hi!

Those links are just going to act as anchors. You need to activate it via javascript. Perhaps this answer on stackoverflow would work for you, http://stackoverflow.com/questions/14383674/how-do-i-open-a-tab-from-with-jquery-ui-tabs-from-an-link-outside-of-the-div.

Best regards,
Elliott
Author

Posts

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

You must be logged in to reply to this topic.