Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

$beefup.open method doesn't scroll to accordion panel or am i missing a config #10

Closed
carterax opened this issue Nov 2, 2019 · 6 comments
Closed

$beefup.open method doesn't scroll to accordion panel or am i missing a config #10

carterax opened this issue Nov 2, 2019 · 6 comments

Comments

@carterax
Copy link

carterax commented Nov 2, 2019 •
edited

Amazing plugin you've got here @Schascha thank you.
I tried opening a panel based on an active ID, it works but it won't scroll to the open accordion.

if(activeSlug.length > 0) {
    $beefup.open($('#' + activeSlug));
}
Schascha added a commit that referenced this issue Nov 2, 2019
@Schascha
#10 Update docs
74e8045
Schascha added a commit that referenced this issue Nov 2, 2019
@Schascha
#10 Update docs
457ee8f
Schascha added a commit that referenced this issue Nov 2, 2019
@Schascha
#10 Fix missing vars in hashchange event
b55b5e0
@Schascha
Copy link
Owner

Schascha commented Nov 2, 2019

Hi @carterax , thx. Please have a look at the hash and the scroll options:

https://schascha.github.io/BeefUp/#example-scroll

In some circumstances there are missing options in the hashchange event. I will publish a new Release soon.

@carterax
Copy link
Author

carterax commented Nov 3, 2019

i added your commit changes to the source code on my local environment and still not working, instead of using hash to scroll to the accordion i am checking if an ID is present on page load and i was under the impression it would automatically scroll once i use the open method.

@Schascha
Copy link
Owner

Schascha commented Nov 3, 2019

Can you please try this example:

<article class="beefup example-scroll" id="example-scroll">
	<h4 class="beefup__head">Item</h4>
	<div class="beefup__body">Content</div>
</article>
var $scroll = $('.example-scroll').beefup({
	scroll: true
});

$scroll.open($('#example-scroll'));

@carterax
Copy link
Author

carterax commented Nov 4, 2019

Still now working, here's my code if it helps

<div id="betterfaq__container" class="betterfaq__plugin betterfaq__hidden" data-betterfaq-page-title="<?php echo $faq_page_title; ?>" data-betterfaq-active-faq="<?php echo $active_slug_transient; ?>" data-betterfaq-url="<?php echo $faq_slug_transient; ?>" data-betterfaq-sitename="<?php echo bloginfo('name'); ?>">
<article class="beefup" id="<?php echo $slug; ?>" data-betterfaq-faqtitle="<?php echo $title; ?>">
	<h2 class="beefup__head">
		<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
	</h2>
	<div class="beefup__body">
		<?php the_content(); ?>
	</div>
</article>
</div>

var 
	activeSlug = $('#betterfaq__container').data('betterfaq-active-faq');

var 
	$beefup = $('#betterfaq__container .beefup').beefup({
	openSingle: true,
	scroll: true,
	scrollOffset: -90
});

// checks if the active slug is set
// opens the specified accordion tab but doesn't scroll to it 
if(activeSlug.length > 0) {
	$beefup.open($(`#${activeSlug}`));
}

@Schascha
Copy link
Owner

Schascha commented Nov 4, 2019

Maybe $active_slug_transient is not equal $slug. If $(#${activeSlug}) is undefined the open method will be trigger all initialized accordion (which can overuse and break the scroll event).

Please update your condition in order to be sure the active accordion exists:

if(activeSlug.length && $(`#${activeSlug}`).length) {
...
}

Example:

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Test</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://schascha.github.io/BeefUp/dist/css/jquery.beefup.css">
</head>

<body>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<div id="betterfaq__container" class="betterfaq__plugin" data-betterfaq-active-faq="foo">
	<article class="beefup" id="foo">
		<h2 class="beefup__head">
			<a href="#">Item</a>
		</h2>
		<div class="beefup__body">
			Content
		</div>
	</article>
</div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<script src="https://schascha.github.io/BeefUp/dist/js/jquery.min.js"></script>
<script src="https://schascha.github.io/BeefUp/dist/js/jquery.beefup.min.js"></script>
<script>
	$(function() {

		var activeSlug = $('#betterfaq__container').data('betterfaq-active-faq');

		var
			$betterfaq = $('#betterfaq__container .beefup').beefup({
			openSingle: true,
			scroll: true,
			scrollOffset: -90,
			scrollSpeed: 1000
		});

		// checks if the active slug is set
		// opens the specified accordion tab but doesn't scroll to it
		if(activeSlug.length && $(`#${activeSlug}`).length) {
			$betterfaq.open($(`#${activeSlug}`));
		}
	});
</script>
</body>
</html>

@carterax
Copy link
Author

carterax commented Nov 4, 2019 •
edited

@Schascha Thank you so much, as it turns a settimeout function blocked the open method from running.
setTimeout(function() { $('.betterfaq__loading').remove(); $('.betterfaq__plugin').removeClass('betterfaq__hidden'); }, 1000);

Thank you so much once again.

@carterax carterax closed this as completed Nov 4, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Schascha @carterax