Comments (10)
Thank you for the help!
from vue-scrollactive.
I've replaced all the spaces with dashes, still the same error.
The link below is the screenshot of my html code.
If you look at the div with href sides-&-sa
, the is-active
class is injected into that div, instead of <a>
https://puu.sh/x50fe/7b69c094af.png
I assumed that inner div is causing the trouble so i took it out, now it's working fine!
from vue-scrollactive.
Ohhh, now that makes sense, this inner div was not expected, I just released a quick fix for that, update the plugin and it should work with no more problems regarding that :)
But keep in mind not to use the IDs with space as that will cause unexpected behavior not from the plugin, but the selector won't find it.
Hope everything works now!
from vue-scrollactive.
Great, I'll keep that in mind, thank you!
from vue-scrollactive.
Can you please provide a fiddle with the error? I'll give it a better look later in the night to see if it's an actual bug with the plugin :)
from vue-scrollactive.
Sorry I don't think I'm able provide a js fiddle that reflects my current setting. I'm using scroll active inside a vue component that isn't root.
I got my some data from an http GET request, then processed the data inside created(){}
.
Do you think the problem might be caused by the v-for?
from vue-scrollactive.
Yes, that might be the problem, I'll try to debug this later based on your settings, but as far as I've tested, it should work with dynamic items, but I didn't try with v-for. I'll perform some tests and let you know if I find something, thanks for the response :)
from vue-scrollactive.
Ok, I've managed to reproduce your error. It fires the error message but works correctly after that, I think the problem you have is because you're using code inside href
, which is not compiled by Vue as it is just an HTML attribute, you should use :href
instead, so this '#' + aCat.substr(0, 10)
will be compiled by Vue as actual code, not a String
. The way you're doing, you'll get the Cannot read property 'substr' of undefined
because the result of that will be a '#' + aCat.substr(0, 10)
string.
I'll patch it soon to remove the error when there aren't elements inside the component yet (as in your case when it's rendered by AJAX), but I think you might be just fine doing as I said.
Let me know if it works :)
from vue-scrollactive.
Thank you and sorry for the typo, I did use :href
and it didn't work.
I reinstalled vue-scrollactive by uninstalling it first. The same problem persists.
The error is triggered by this line still:
var targetDistanceFromTop = this.getOffsetTop(document.getElementById(event.target.hash.substr(1)));
I have some spaces in the ID string, will that cause any problem? it jumps fine under href
without vue-scrollactive
from vue-scrollactive.
Oh, that's probably what's going on here, you must not have any spaces in an ID using HTML. Try running document.getElementById(your ID with spaces)
and see if it's returning anything. It's jumping to the section without the plugin probably because the browser is fixing it automatically.
Let me know if it works :)
Sent from my Motorola Moto G (4) using FastHub
from vue-scrollactive.
Related Issues (20)
- scrollContainerSelector not working as expected HOT 1
- Throws Document Query Selector error if hash starts with Number and the webpage is hard refreshed with such hash in URL HOT 1
- transform: translate(200px, 1000px);
- this.scrollContainerSelector is undefined HOT 1
- vue-scrollactive inside a viutify dialog doesn't work HOT 4
- Have a question HOT 1
- dist/vue-scrollactive.min.js is stuck on old release
- Different offset for different elements HOT 1
- Active class applied on page load
- Previous / next functionality
- data-section-selector does not work HOT 7
- Local Import Get Error HOT 2
- TypeError: Cannot read property 'substr' of undefined HOT 2
- how to prevent replacing the URL with tag HOT 2
- Scroll itemChange event only fired once
- How to realize horizontal scroll active tab position always visible? HOT 1
- Links do not have a discernible name HOT 1
- specifying scrollContainerSelector causes scroll to jump back to the top HOT 1
- Vue 3? HOT 4
- Stops working if container it scrolled to the top HOT 3
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 vue-scrollactive.