I'm working on an app, I've created some slides but I need to show the index number of slides instead of pages.
I want to do something like this:
There's a way of doing this, but you'll need to save your slides in an array in order for this to work. You'll also need a property in your class to show what's the current page.
So in your page .ts file:
export class YourPage {
// the current page number
public page: number = 0;
// your slides
public mySlides = [...your slides...];
// when the slides changes this method is triggered, needs to be +1 since the index starts at 0
slideChanged = ev => this.page = ev.realIndex + 1;
}
And then your page html file
<ion-slides pager="false" (ionSlideDidChange)="slideChanged($event)">
<ion-slide *ngFor="let slide of mySlides ">
<!-- your slides code -->
</ion-slide>
</ion-slides>
<p text-center>{{page}} of {{mySlides.length}}</p>
Hope this helps.
You can write something like:
HTML:
<ion-slides pager="true" paginationType="fraction">
Try this
ionViewWillEnter(){
this.ionSlides.length().then(number => {
console.log(number);
this.allNumber = number;
});
}
sliderDoChange() {
this.ionSlides.getActiveIndex().then(index => {
this.currentNumber = index;
});
}
Related
I'm trying to make active tabs that show content depending on which tab you click.
I absolutely need the first tab to be active by default so i put the "active" class manually in the HTML so the base content is shown.
The issue is, i do that through an empty variable to hold the state but after you've already clicked once. Here is the code :
function homeLoaded() {
menuLoaded();
function menuLoaded() {
const sideMenuChildren = document.getElementById("sidemenu").childNodes;
let currentTab;
for(let i = 0; i < sideMenuChildren.length; i++) {
const tab = sideMenuChildren[i];
tab.addEventListener(
"click",
function() {
if(currentTab) {
sideMenuChildren[currentTab].classList.remove("liactive");
}
currentTab = i;
sideMenuChildren[currentTab].classList.add("liactive");
showContent(tab.id);
console.log("I clicked " + i);
}
);
}
}
let currentPage;
function showContent(menuName) {
const pageContainer = document.getElementById("content");
const element = pageContainer.querySelector("." + menuName);
if(currentPage) {
currentPage.classList.remove("selected");
}
currentPage = element;
element.classList.add("selected");
}
}
Here is the HTML :
<div id="main" style="background-image: url(./images/bg2.png);">
<div id="box">
<ul id="sidemenu">
<li id="profil" class="liactive">Profil</li>
<li id="parcours">Parcours</li>
<li id="contact">Contact</li>
</ul>
<div id="content">
<div class="profil selected"><p>Blabla</p></div>
<div class="parcours"><p>Blablabla</p></div>
<div class="contact"><p>Blablablabla</p></div>
</div>
<div id="bottomnav">
<div id="bottomnavcontent">
</div>
</div>
</div>
</div>
What this does sadly is that when i click another tab...it does not remove the first active tab, so i have 2 active tabs until i re-click the first tab to store it in the variable. I don't know how to fix this.
demo of working codeYou can get event inside the event listener function. There you can get the target.
So,first Remove active class of current tab. Then, set active class for target element.
i.e
tab.addEventListener(
"click",
function (ev) {
const currentab = document.querySelector(".liactive");
currentab.classList.remove("liactive")
ev.target.classList.add("liactive")
}
)
On the homepage, I want users to hover over a span and when they do the content of the span changes and the background changes too.
I've created an array to store the data, the text changing and the background image. I'm going to concat the src files for the background.
I found this code snippet and have adapted it. I'm having an issue with the innerHTML as I'm not using jQuery. I don't know what to do in jsx.
The hover action is working, I did a console log but it's breaking at the innerHTML part.
The array is 2 component levels up.
//-Home.js
//--Hero.js
//---HeroImageItems.js (this is where the code below resides)
export class HeroImageItems extends Component {
loopHeroTitle = () => {
let list = this.props.heroImage.title;
titleSequence(0);
function titleSequence(i) {
if (list.length > i) {
setTimeout(function() {
document.getElementById("hero-image-title").innerHTML = list[i];
titleSequence(++i);
}, 1000);
} else if (list.length == i) {
titleSequence(0);
}
}
};
render() {
return (
<div className="hero-image-bg">
<p
className="hero-image-title"
id="hero-title-span"
onMouseOver={this.loopHeroTitle}
style={this.getActiveText()}
>
{this.props.heroImage.title}
</p>
</div>
);
}
}
HeroImageItems.propTypes = {
heroImages: PropTypes.object.isRequired
};
export default HeroImageItems;
You have the wrong id.
document.getElementById("hero-image-title").innerHTML = list[i];
is where you are setting the innerHTML.
This p tag has an id of "hero-title-span"
Put the correct id in and you should be good to go!
Currently, I'm trying to automatically scroll to the top of the HTML page for which I'm using in my Typescript.
window.scrollTo(0 , 0);
and while trying to automatically scroll down to bottom of the HTML page
window.scrollTo( 0 , document.body.scrollHeight);
I'm trying to scroll top after an HTTP response.
Code
openPDFVievwer(data) {
this.obj= JSON.parse(data._body);
document.getElementById('spinner').style.display = 'none';
window.scrollTo( 0 , 0);
}
when I'm trying to scroll bottom after rendering another component.
Code
searchData(data) {
this.document = data;
this.searchResultDiv = true; // where component will be rendered
window.scrollTo( 0 , document.body.scrollHeight);
}
but, both seem to be not working.
Is there something that I'm doing wrong?
try into html
<div #list [scrollTop]="list.scrollHeight"></div>
Solution 2
In Component
define id into html id="scrollId"
const element = document.querySelector('#scrollId');
element.scrollIntoView();
Answer for angular 2+
It's very simple,
Just create an any element
e.g.
<span id="moveTop"></span> or add just id into the element or use already existed Id where you have to move top, down, mid etc.
and add this method on specific event, like I want to move top when edit as my list list too much.
gotoTop() {
var scrollElem= document.querySelector('#moveTop');
scrollElem.scrollIntoView();
}
or If you want to send Id as Parameter you simply just create Optional Parameter
gotoTop(elementId?: string) {
if (elementId != null) {
var element = document.querySelector(elementId);
element.scrollIntoView();
}
else {
var element = document.querySelector('#moveTop');
element.scrollIntoView();
}
}
Above solution wasn't working for me, Try this
code:
import { Router, NavigationEnd } from '#angular/router';
constructor(private router: Router)
ngOnInit()
{
this.router.events.subscribe((evt) => {
if (!(evt instanceof NavigationEnd)) {
return;
}
document.getElementsByTagName("app-website-nav")[0].scrollIntoView();
});
}
Just wondering How I can do this in Angular 2/4 : This might be easy but I just can't figure out.
Here is my code:
Let me explain it, I have a component which scrolls me to the top of the page, when I am at the bottom. But the floating div i.e, little red arrow always stays visible even when page need not scroll.
In Html:
Each button is dynamically linked to div. So div displays when button is clicked
<div *ngFor="let sampledata of SAMPLEDATA; trackBy: trackId">
<button (click)="transmitInfo(sampledata ,0)" > </button>
<div *ngFor="let data of sampledata .data; trackBy: trackId" >
<button (click)="transmitInfo(data,1)" > </button>
</div>
<!-- This keeps on going -->
</div>
<div>
<div *ngIf="renderdata === 0"> {{Object Data}}</div>
<div *ngIf="renderdata === 1">{{Object Data}}</div>
<div *ngIf="renderdata === 2">{{Object Data}}</div>
</div>
<div id="scroolUpRight">
<img src="../../../content/images/scrollup.png" width="50px" height="50px" (click)="scrollToTop()">
</div>
Let's assume when a user clicks on button 2 or 3, 2nd or 3rd div is displayed based on button clicked, this div's are a huge data. Page automatically becomes scrollable when these are activated.
In Css:
#scroolUpRight {
position: fixed;
bottom: 4%;
right: 2%;
}
#scroolUpRight :hover {
cursor: pointer;
}
In my Component I have this to take me to the top of the page:
ngOnInit() {
this.renderdata = 0;
}
transmitInfo(data, type): void {
if (type === 1) { this.sampleData = data; this.renderdata = 1; }
if (type === 2) { this.dataData = data; this. renderdata = 2; }
}
scrollToTop() {
return window.scrollTo(0, 0);
}
Now I don't know if this works but I did this:
toogleScroolButton(): void {
if (window.screenY > 300 ) {
console.log('window length is 300 +');
}
}
But this is a function. How can I make a function or component that auto detects when page becomes scrollable and display this div, hide it when not scrollable.
Expected Result : Is to make this div visible once person starts to scroll.
Previous Knowledge:
I used Javascript and Jquery before to do the same. But how do I use
angular2,4 or higher for this? Reason I need this is to animate this div when
person starts to scroll.
I do accept recommendations to optimize the above code. Please do let me know if any.. ;)
This Worked. I need to get HostListener to get windows scroll even to see if I can scroll the page.
window.scrollY gives me the scroll page size which helps me in finding out if I am scrolling my page. If scrollY reaches to certain count I can say I am scrolling down i.e, I can trigger an *ngIf to true if I am scrolling bottom else I can make it false. Code Below :)
Add
import { HostListener } from '#angular/core';
export class BlaBlaBla {
//And this did the trick
activateGoTop : boolean;
OnNgInit :: activateGoTop = false /* added Silly Reference please put this in ngOnInit() { --- }*/
#HostListener('window:scroll',[])
onWindowScroll() {
if ( window.scrollY > 100 ) {
this.activateGoTop = true;
} else {
this.activateGoTop = false;
}
}
}
in Html:
//Gets activated when screenY is scrolled for more than 100px
<div id="scroolUpRight" *ngIf="activateGoTop">
<img src="../../../content/images/scrollup.png" width="50px" height="50px" (click)="scrollToTop()">
</div>
Hope this helps someOne .. ;)
You can use a simple *ngIf binding with your method:
<div *ngIf="scrollButton()">
Top <button>up button</button>
</div>
with scrollButton() method simple as that:
public scrollButton():boolean {
return window.screenY > 300;
}
The div will only get rendered if scrollButton() method returns true, this allows you to customize your top button render conditions easily, because you only need to return a boolean from it.
I am using Ionic 2. I have a list of items:
this.firelist = this.dataService.findMessages(this.chatItem).map(items => {
this.updateReadMessages(items);
return items.reverse();
});
Displayed in a list:
<ion-content padding class="messages-page-content">
<ion-list class="message-list">
<ion-item class="message-item" *ngFor="let item of firelist | async">
....
This works, but as you can see, I have a reverse list. So the latest item is at the bottom. As a result, I would like to start the display at the bottom.
I have tried:
window.setTimeout(()=> {this.content.scrollToBottom();}, 2000);
This works, but there is a delay on the scroll, and visually the scroll doesn't look as good as if the list could just start at the bottom, and not have to scroll.
Is this possible?
Thanks
I doubt you will find a very elegant solution for this, but you can try the following:
Try using ionViewWillEnter:
ionViewWillEnter() {
this.content.scrollToBottom(0)
}
You could also try bind to the last item of your ngFor and then fire the scroll as the last item is rendered. Something similar to this:
<ion-item class="message-item" *ngFor="let item of firelist | async; let last = last">
{{ item }}
{{ last ? doScroll() : '' }}
</ion-item>
In your component:
export class somePage{
...
constructor(...) {
setTimeout(() => {
for (let i = 0; i < 100; i++) {
this.items[i] = i
}
}, 300)
}
doScroll(){
this.content.scrollToBottom(0)
}
}