Comments (6)
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.
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.
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.
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.
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.
@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)
- Accordion item should always stay open HOT 5
- BeefUp 1.2.0 animation is choppy + Question HOT 5
- Uncaught TypeError
- No default jsDelivr CDN file set HOT 1
- What is the license of this plugin? HOT 1
- stayOpen can't select the first item HOT 1
- Open through API and 'openSingle: true' HOT 1
- Stop toggle of open item HOT 5
- Hash url HOT 4
- Option to change the position of caret icon. HOT 1
- Start open HOT 1
- openSingle for child accordions not working.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from beefup.