Code Monkey home page Code Monkey logo

Comments (6)

Schascha avatar Schascha commented on August 20, 2024

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.

from beefup.

carterax avatar carterax commented on August 20, 2024

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.

from beefup.

Schascha avatar Schascha commented on August 20, 2024

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'));

from beefup.

carterax avatar carterax commented on August 20, 2024

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}`));
}

from beefup.

Schascha avatar Schascha commented on August 20, 2024

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>

from beefup.

carterax avatar carterax commented on August 20, 2024

@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.

from beefup.

Related Issues (13)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.