Hi i'am using Angular6 in this if i click the button it should scroll to selected div. for this i have used npm install ng2-scroll-to --save plugin but button selector was not working please help me to do this. if there any alternate solution also just tell me.
<a scrollTo href="#main-section">Scroll to main section</a>
<button scrollTo scrollTargetSelector="#test-section">Scroll to test section</button >
<button scrollTo scrollableElementSelector="#container" scrollYTarget="0">Go top</button >
<!-- Further content here -->
<div id="container">
<section id="main-section">Bla bla bla</section>
<section id="test-section">Bla bla bla</section>
<div>
You have to import ScroolModule to app module
// app.module.ts
import {ScrollToModule} from 'ng2-scroll-to';
#NgModule({
imports: [
....,
ScrollToModule.forRoot(),
]
})
After that it should be fine.
Related
I'm using this handy pagination tool called vuejs-paginate and it works just fine in terms of functionality when I click each individual page item, but when I press the navbar brand (which switches to page 1), the pagination tool does not switch the active class to page 1 and the active class just remains on the page you were previously at.
Here's my pagination code:
<template>
<section role="region" class="paginate py-md-5 py-4" id="paginate">
<div class="container">
<div class="row">
<div class="col-12">
<paginate
:page-count="20"
:click-handler="clickCallback"
:prev-text="'<'"
:next-text="'>'"
:container-class="'pagination'"
:page-class="'page-item'"
:page-link-class="'page-link'"
:next-class="'page-item'"
:next-link-class="'page-link'"
:prev-class="'page-item'"
:prev-link-class="'page-link'"
class="justify-content-center mb-0"
>
</paginate>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
methods: {
clickCallback(pageNum) {
this.$router.push({
path: `/page/${pageNum}`
})
}
}
}
</script>
<style lang="scss">
</style>
I was thinking of using some sort of way to programmatically click the first page item of the pagination when clicking on the navbar brand, but I'm not sure how to achieve this. Thanks for the help!
After a lot of debugging, I found out that it was actually where I had placed my pagination component. In my Nuxt app, I had put it inside default layouts. This means that when I had clicked on the navbar brand to go to the first page, the pagination did not remount. So what I did to resolve the problem was to transfer my pagination component to its individual pages. Now, when I switch from route to route, the active class will change because the pagination component remounts to react to the changes.
I know that there are similar questions with jquery, but this is related to vue.js
I'm using uiv which is a boostrap version for vue.js. Checking the docs I'm trying to trigger manually the popover using trigger="manual" with a hover event:
<popover title="Title" v-model="show">
Toggle Popover
<template slot="popover">
<p>Popover content</p>
</template>
</popover>
<script>
export default {
data () {
return {
show: false
}
}
}
</script>
Well, I understand why the popover is being closed due when I leave the button I set show to false.
So my question is: Where do I have to place that #mouseleave event in order to prevent closing the popover when it is being hovered?
Here I have a plunker link: https://plnkr.co/edit/gTsOJE4k8fQUMcMUpqS6?p=preview
I've solved my problem doing this:
<popover trigger="hover" title="Title">
<a href="#" #click.prevent>Toggle Popover</a>
<template slot="popover">
<p>Popover content</p>
</template>
</popover>
Basically, we can use trigger="hover" to prevent closing the popover when it is being hovered.
Take a look at this example: https://plnkr.co/edit/RSjhazfxqBhaNqcKijXe?p=preview
I have a custom element like the nav-bar in the skeleton-navigation except I am not using the router part. I can't seem to get it to fire any events.
Code:
nav-bar.html
<template>
<ul id="topMenu"></ul>
</template>
nav-bar.js
attached() {
alert('test')
}
Containing page:
<template>
<require from="./nav-bar.html"></require>
<div class="desktop" id="container">
<nav-bar></nav-bar>
</div>
</template>
When you load the custom element using .html at the end of the path, Aurelia does not load the .js file. Just change your require element to the following, and it will work as you expect:
<require from="./nav-bar"></require>
I am trying to use the aurelia #children decorator to have all the child element buttons in my parent containers view-model, but that doesn't seem to be working. Does anyone have an example that shows how the #children decorator works?
What I am trying to do is have a parent container element that has a bunch of child elements (buttons) and in the parent container I'm trying to keep track of what buttons have been clicked by having a reference to all the buttons the parent container has so whenever a user clicks a button, I can iterate through the buttons list to see what buttons have already been clicked before.
Currently, the code I have below the page fails to load with a
es6.promise.js:116 Unhandled promise rejection TypeError:.
Commenting out the
#children('button') buttons;
line allows the page to load normally. Thanks for looking!
app.html
<template>
<require from="./custom-element"></require>
<my-custom-element>
<button class="btn btn-default" type="button">On</button>
<div>
This div falls back to <content> since nothing more specific chooses it. <br />
Notice how it is displayed last b/c of this.<br />
Remove <content /> element in custom element and this won't be used in the rendering of the custom element.
</div>
<div class="footer">Footer</div>
<button class="btn btn-default" type="button">Off</button>
</my-custom-element>
</template>
custom-element.html
<template>
<content select="button"></content>
<content select="div.footer"></content>
<content></content>
</template>
custom-element.js
import {customElement, children} from 'aurelia-framework';
#customElement('my-custom-element')
export class MyCustomElement {
#children('button') buttons;
constructor() {
}
bind() {
console.log(this.buttons);
}
}
Here's what I found between sync and children examples that I've found.
#customElement('my-custom-element')
#children({ name: "buttons", selector: "button" })
export class MyCustomElement {
bind() {
console.log(this.buttons);
}
}
There's also an issue for when trying to traverse child elements to find elements.
Not Traversing Child Elements
I am using bootstrap popover with vuejs.
How can I trigger vue functionality?
In below code when I am clicking on add break link, it opens bootstrap popover, with click me button. Now here vuejs doesn't work, if I click on click me, it is not prompting alert.
<a data-toggle="popover" data-placement="top" v-d2d-popover data-content='<button v-on:click="alert(6)">click me</button>' href="javascript:void(0)" class="btn btn-link popover-notitle">
<i class="ace-icon fa fa-plus-circle bigger-120 green"></i>add break
</a>
Can anybody help me?
Since the button is just written in a string, it isn't being compiled by Vue. Here are a couple of ideas to try:
Use Vue for popover as well: https://yuche.github.io/vue-strap/#popover
Create popover content in a separate div (in your component so Vue will compile it) and then fetch the content for the popover:
{
content: $('#myPopoverContent').html(),
html: true
}