Replace an img src on scroll - javascript

I am trying to replace logo-text-black src attribute so that the svg img changes as the user scrolls. Is it possible to add this to my current script?
img/logo-text-white.svg // Top State
img/logo-text-black.svg // Scroll State
HTML
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<img class="logo" src="img/logo.svg">
<a href="#top"><img class="logo-text" src="img/logo-text-white.svg">
</a>
</div>
</nav>
JS
$(window).scroll(function() {
var value = $(this).scrollTop();
if (value > 100)
$(".navbar-default").css("background", "white"); // Scroll State
else
$(".navbar-default").css("background", "transparent"); // Top state
});

To replace image source you may use jQuery .attr method:
var initialSrc = "img/logo.svg";
var scrollSrc = "img/logo-text-black.svg";
$(window).scroll(function() {
var value = $(this).scrollTop();
if (value > 100)
$(".logo").attr("src", scrollSrc);
else
$(".logo").attr("src", initialSrc);
});
This approach requires only one <img> with logo class in the HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<img class="logo" src="img/logo.svg">
</div>
</nav>

Ignoring the fact that the simple answer to the question asked is that you use the .attr function to change an attribute for an element when using jQuery, this is how I would go about accomplishing the task set forth in your question.
First, I would put all of this in a function (mainly to separate the variables and logic from other page scripts to prevent interference).
My next bit of advice would be to implement the background color change in two or more CSS classes. This has the benefit of simplifying the JavaScript, as well as keeping the styling part in the styling area.
Next, I like to make constant variables for my "magic words", so that if I change the word used later on I only have to change the word once in the code, instead of everywhere the word is used.
// cache the magic words
const DARK = 'dark';
const LIGHT = 'light';
I would put the image sources into an object where the keys are the magic words associated with those sources. This allows for quick and convenient lookup later.
// define our different sources for easy access later
const sources = {
light: "http://via.placeholder.com/150x50/fff/000?text=logo",
dark: "http://via.placeholder.com/150x50/000/fff?text=logo"
};
After that I would pre-load the images to prevent a visual delay the first time the source is changed.
// pre-load the images to prevent jank
document.body.insertAdjacentHTML('beforeend', `
<div style="display: none!important">
<img src="${ sources[LIGHT] }">
<img src="${ sources[DARK] }">
</div>
`);
It is important to note that performing tasks on-scroll can cause problems.
The main problems are:
The effects can be blocking, which means that process heavy tasks will cause "scroll jank". This is where there is a visual inconsistency with how the page scrolls.
It is possible for the scroll event to fire while there is already a scroll event listener executing. This may cause the two executions to interfere with each other.
Combatting these problems is easy:
To prevent scroll-jank, wrap the handler in a setTimeout call. This will move the execution of the handler to the top of the stack to be executed at the next earliest convenience.
To prevent multiple handlers from running simultaneously, define a "state" variable outside of the handler to keep track of execution state.
This variable will be set to true when an event handler is executing and false when there is no event handler execution. When the handler execution begins, check the value of the state variable:
If it is true, cancel the execution of this handler call.
If it is false, set the state to true and continue.
Just make sure that wherever you may be exiting the function, you also reset the state variable.
// define our scroll handler
const scroll_handler = _ => setTimeout(_ => {
// if we are already handling a scroll event, we don't want to handle this one.
if (scrolling) return;
scrolling = true;
// determine which theme should be shown based on scroll position
const new_theme = document.documentElement.scrollTop > 100 ? DARK : LIGHT;
// if the current theme is the theme that should be shown, cancel execution
if (new_theme === theme) {
scrolling = false;
return;
}
// change the values
logo.src = sources[new_theme];
el.classList.remove(theme);
el.classList.add(new_theme);
// update the state variables with the current state
theme = new_theme;
scrolling = false;
});
After that, just assign the event listener.
Here it is all together:
function navbarSwitcher(el) {
// cache the reference to the logo element for use later
const logo = el.querySelector('.logo');
// cache the magic words
const DARK = 'dark';
const LIGHT = 'light'
// define our state variables
let scrolling = false;
let theme = LIGHT;
// define our different sources for easy access later
const sources = {
light: "http://via.placeholder.com/150x50/fff/000?text=logo",
dark: "http://via.placeholder.com/150x50/000/fff?text=logo"
};
// pre-load the images to prevent jank
document.body.insertAdjacentHTML('beforeend', `
<div style="display: none!important">
<img src="${ sources[LIGHT] }">
<img src="${ sources[DARK] }">
</div>
`);
// define our scroll handler
const scroll_handler = _ => setTimeout(_ => {
// if we are already handling a scroll event, we don't want to handle this one.
if (scrolling) return;
scrolling = true;
// determine which theme should be shown based on scroll position
const new_theme = document.documentElement.scrollTop > 100 ? DARK : LIGHT;
// if the current theme is the theme that should be shown, cancel execution
if (new_theme === theme) {
scrolling = false;
return;
}
// change the values
logo.src = sources[new_theme];
el.classList.remove(theme);
el.classList.add(new_theme);
// update the state variables with the current state
theme = new_theme;
scrolling = false;
});
// assign the event listener to the window
window.addEventListener('scroll', scroll_handler);
}
// attach our new plugin to the element
navbarSwitcher(document.querySelector('.wrap'));
body {
height: 200vh;
}
.wrap {
width: 100%;
position: fixed;
}
.wrap.light {
background-color: white;
}
.wrap.dark {
background-color: black;
}
<div class="wrap light">
<img class="logo" src="http://via.placeholder.com/150x50/fff/000?text=logo">
</div>

Related

*ngIf not detecting changes on variable change on swiper.js (slideChange) event but detects on swiperRef.slideTo(index ) call

iam passing an array of object containing photo url to swiper container,
for unverified photo iam showing a a text,
on each slide change i have to check photos verification status
the variable is changing to true or false but dom is not updating even when i inspect it shows
ng-reflect-ng-if :'true;
but i have to scroll to a specific slide on user clicking on specific thumbnail
for that iam using
this.photoPopupSlider.swiperRef.slideTo(RowIndex, sliderSpeed);
at this time onSlidChange event triggers updates the dom correctly
my component.html 👇
<div style="padding: 0">
<swiper
[config]="sliderConfig"
class="sliderBox"
[pagination]="false"
(slideChange)="onSlideChange($event)"
#photoPopupSlider
>
<ng-template swiperSlide *ngFor="let pic of myPhotos">
<div
class="slide_wrap"
style="height: 68vh; background: #f3f4f9"
>
<img
[src]="pic.image"
class="slide_img"
style="height: auto; width: auto; max-width: 100%"
/>
</div>
</ng-template>
</swiper>
<span
id="photo_under_verification"
*ngIf="underVerification"
class="ph_uv"
>Photo under verification</span
>
</div>
my component.ts file 👇
underVerification = false;
onSlideChange([swiper]: any) {
const index = swiper.activeIndex;
this._ps.sliderIndex = index;
this.sliderIndex = index;
console.log("sliderChanged", this.sliderIndex);
const photoShowingInSlider = this.myPhotos[index];
const isPhotoUnderVerification =
photoShowingInSlider?.photostatus == "0" ? true : false;
this.underVerification = isPhotoUnderVerification;
console.log("under", isPhotoUnderVerification);
// const photUnderVerifyMsg = document.getElementById(
// "photo_under_verification"
// ).style;
// if (isPhotoUnderVerification) photUnderVerifyMsg.display = "inline";
// else photUnderVerifyMsg.display = "none";
}
actually i was able to implement the logic by using document.getElemntById
those commented lines of code ( i thing it is a bad way in angular to access dom that way )
how can implement this login in angular way ( means not accessing dom directly ) ?
Well, you have to tell Angular to run change detection as the code under onSlideChange (and other events) runs outside of Zone
Note that Swiper Angular component all events emits outside of NgZone
for better perfomance. Dont forget to use ngzone.run or
ChangeDetector if you need to change view (e.g slides) in event
handlers (e.g slideChange).
import the ChangeDetectorRef in the constructor and call the detectChange method in onSlideChange method
this.cd.detectChanges()
Here is the working code. I just take a random stackblitz link so adapt to your swiper version: https://stackblitz.com/edit/swiper-angular-example-rmgv2b

How to permanently swap a darkmode logo with javascript?

So I have the following code that manages my dark mode (please note I didn't write the original code, I'm just modifying):
if (toggleTheme) {
toggleTheme.click(function () {
darkMode();
});
};
// Theme Switcher
function darkMode() {
const logo = document.getElementById('logo'); // I Added this line
if (html.hasClass('dark-mode')) {
html.removeClass('dark-mode');
localStorage.removeItem("theme");
$(document.documentElement).removeAttr("dark");
logo.src = logo.dataset.logoLight; // I Added this line
} else {
html.addClass('dark-mode');
localStorage.setItem("theme", "dark");
$(document.documentElement).attr("dark", "");
logo.src = logo.dataset.logoDark // I Added this line
}
}
Here's the relative HTML (note, I'm building with Hugo so included is the Go Templating):
{{- $logo := (resources.Get site.Params.logo).Resize "270x webp q100" -}}
{{- $logoDark := (resources.Get "/images/logo-dark.png").Resize "270x webp q100" -}}
<img id="logo" class="logo__image" src="{{- $logo.RelPermalink -}}" data-logo-light="{{- $logo.RelPermalink -}}" data-logo-dark="{{- $logoDark.RelPermalink -}}" alt="{{ .Site.Title }}" height="{{- div $logo.Height 2 -}}" width="{{- div $logo.Width 2 -}}">
I've only added the three lines noted above to the JavaScript.
So that works exactly like I want. When someone toggles the button for dark mode and the logo flips to the darkmode version.
Great.
Except when they click to a new page, the original logo is in place.
Not sure how to store, check for, and retrieve the appropriate logo because I'm not very good with JavaScript (I just kind of hack together what I need).
How would you do this?
There are a couple ways to add the functionality that you're missing, but the most straightforward way given your current implementation is probably to use the theme value from localStorage.
Your code is already using localStorage to store the current theme. The bit you're missing is some JavaScript that checks the theme value in localStorage and then sets the logo path appropriately. You can use that stored value to determine what the theme is when any page loads by putting some JavaScript in the <head> of every page, or by adding it to the JavaScript file where your existing dark mode toggle logic is:
// Define a function that will check localStorage and set the logo path
function checkThemeAndSetLogo() {
const logo = document.getElementById('logo');
const currentTheme = localStorage.getItem("theme"); // get the theme value from localStorage
if (currentTheme === "dark") {
logo.src = logo.dataset.logoDark;
} else {
logo.src = logo.dataset.logoLight;
}
}
// Call the function so that the logo is updated appropriately
checkThemeAndSetLogo();
If you're interested in further reading and additional options for dark mode, I recommend A Complete Guide to Dark Mode on the Web.
i think you can always store a flag var that check if page was toggled to dark-mode, i show you:
// Theme Switcher
function darkMode(){
if (html.hasClass('dark-mode')){
html.removeClass('dark-mode');
localStorage.removeItem("theme");
$(document.documentElement).removeAttr("dark");
localStorage.setItem('dark_mode', 'false');
darkModeLogo();
}else{
html.addClass('dark-mode');
localStorage.setItem("theme", "dark");
$(document.documentElement).attr("dark", "");
localStorage.setItem('dark_mode', 'true');
darkModeLogo();
}
}
//runs everytime the js file is loaded
function darkModeLogo(){
const logo = document.getElementById('logo'); // I Added this line
const DARK_MODE = localStorage.getItem('dark_mode');
if(eval(DARK_MODE)){
logo.src = logo.dataset.logoLight; // I Added this line
}else{
logo.src = logo.dataset.logoDark // I Added this line
}
}
darkModeLogo();

How to iterate with click event through Array of divs

I want text parts to appear, and disappear, on click.
Before the first click you can only see the banner, and no verses yet; on the first click the first verse appears, on second click the second verse appears in place of the first, and so on.
I am trying to achieve this with hiding the elements, placing them in an array, and let them display when the number of times the function gets called fits the index of the verse.
I am new to JavaScript, and don't understand the exceptions thrown. If i try to inspect my code online, I get this Exception when O try to call the function by clicking on the website:
Uncaught TypeError: Cannot read properties of null (reading 'style')
This is my code so far:
const text = document.querySelector(".banner")
document.addEventListener('click', myFunction);
const verse1 = document.querySelector(".verse1")
const verse2 = document.querySelector(".verse2")
const verse3 = document.querySelector(".verse3")
const verse4 = document.querySelector(".verse4")
const verse5 = document.querySelector(".verse5")
const verses = [verse1, verse2, verse3, verse4, verse5]
let versesLength = verses.length;
function myFunction() {
for (let i = 0; i < versesLength; i++) {
text.innerHTML = verses[i].style.display = 'block';
}
}
<div class="banner">
<script src="main.js"></script>
<img src="files/SomeLogo.jpg" alt="We are still building on our Website:-)">
</div>
<div id="verses">
<div class="verse1" style="display: none">Lorem Ipsum</div>
<div class="verse2" style="display: none">Lorem Ipsum2</div>
<div class="verse3" style="display: none">Lorem Ipsum3</div>
<div class="verse4" style="display: none">Lorem Ipsum4</div>
<div class="verse5" style="display: none">Lorem Ipsum5</div>
</div>
I am stuck, and clicked through similar questions for the last hours. Thanks in advance for any help
without changing anything in the HTML, you can do something like this in javascript
const text = document.querySelector(".banner")
document.addEventListener('click', myFunction);
let verses = document.querySelector("#verses").children
let count = 0
function myFunction() {
Array.from(verses).forEach(el=> el.style.display="none")
if(count < verses.length){
verses[count].style.display = 'block'
count ++
if(count===verses.length) count =0
}
}
You can remove the need for an array by giving all the verse elements the same class: verse. We can grab them with querySelectorAll.
Add a data attribute to each verse to identify them.
In order to limit the number of global variables we can use a closure - in the addEventListener we call the handleClick function which initialises the count, and then returns a function that will be assigned to the listener. This is a closure. It maintains a copy of its outer lexical environment (ie variables) that it can use when it's returned.
// Cache the elements with the verse class
const banner = document.querySelector('.banner');
const verses = document.querySelectorAll('.verse');
// Call `handleClick` and assign the function it
// returns to the listener
document.addEventListener('click', handleClick());
function handleClick() {
// Initialise `count`
let count = 1;
// Return a function that maintains a
// copy of `count`
return function () {
// If the count is 5 or less
if (count < verses.length + 1) {
// Remove the banner
if (count === 1) banner.remove();
// Remove the previous verse
if (count > 1) {
const selector = `[data-id="${count - 1}"]`;
const verse = document.querySelector(selector);
verse.classList.remove('show');
}
// Get the new verse
const selector = `[data-id="${count}"]`;
const verse = document.querySelector(selector);
// And show it
verse.classList.add('show');
// Increase the count
++count;
}
}
}
.verse { display: none; }
.show { display: block; margin-top: 1em; padding: 0.5em; border: 1px solid #787878; }
[data-id="1"] { background-color: #efefef; }
[data-id="2"] { background-color: #dfdfdf; }
[data-id="3"] { background-color: #cfcfcf; }
[data-id="4"] { background-color: #bfbfbf; }
[data-id="5"] { background-color: #afafaf; }
<div class="banner">
<img src="https://dummyimage.com/400x75/404082/ffffff&text=We+are+still+building+our+website" alt="We are still building on our Website:-)">
</div>
<div>
<div data-id="1" class="verse">Lorem Ipsum 1</div>
<div data-id="2" class="verse">Lorem Ipsum 2</div>
<div data-id="3" class="verse">Lorem Ipsum 3</div>
<div data-id="4" class="verse">Lorem Ipsum 4</div>
<div data-id="5" class="verse">Lorem Ipsum 5</div>
</div>
Additional documentation
Template/string literals
classList
This should make it:
const verses = document.querySelectorAll('.verse');
const banner = document.querySelector('.banner');
const length = verses.length;
let counter = 0;
document.onclick = () => {
if (counter === 0) banner.classList.add('hide');
if (counter >= length) return;
verses[counter].classList.add('show');
if (verses[counter - 1]) verses[counter - 1].classList.remove('show');
counter++;
};
body {
background: orange;
}
.hide {
display: none !important;
}
.show {
display: block !important;
}
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="banner">
<img
src="files/SomeLogo.jpg"
alt="We are still building on our Website:-)"
/>
</div>
<div id="verses">
<div class="verse1 verse hide">Lorem Ipsum</div>
<div class="verse2 verse hide">Lorem Ipsum2</div>
<div class="verse3 verse hide">Lorem Ipsum3</div>
<div class="verse4 verse hide">Lorem Ipsum4</div>
<div class="verse5 verse hide">Lorem Ipsum5</div>
</div>
<script src="main.js"></script>
</body>
</html>
Fixing the error
The "Cannot read properties of null" error occurs because you try to access the properties of null. Your array holds nulls because you queried for the elements before the browser has inserted them into its DOM.
The browser parses the HTML the same way you would read it: From left to right, and top to bottom.
If the browser encounters a regular <script> element, it halts parsing and first executes the JavaScript. Naturally, some elements may not yet be available in the DOM.
There are multiple ways to defer script execution:
Add attribute defer to <script>: Will execute once the DOM is fully built.
Add attribute type="module" to <script>: Similar to defer, but will also make your code be treated as a JS module. This will also make your code run in strict mode.
Use JS event DOMContentLoaded: Similar to defer, but encapsulated in your JS-file.
Use JS event load: Similar to DOMContentLoaded, but will additionally wait until all resources (e.g. images, videos) have loaded. Prefer DOMContentLoaded if applicable.
Move <script> to the bottom of the HTML: Effectively like defer. Scripts with defer will still load after scripts at the bottom.
The simplest solution would be to use defer, as with it you wouldn't have to change your JS code:
<script src="main.js" defer></script>
By the way: Don't be fooled by the StackOverflow snippets; when using the on-site snippets, the <script> for the code is moved to the bottom of the HTML!
The feature!
Variable lifetimes
Variables in JS only persist for as long as they are used.
Using a variable that is declared outside a function will create a closure around your function and variable. That means, that variable will persist for as long as the function exists that uses it:
let someVariable = 0;
function someFunction() {
// `someVariable` is used, so it will persist across calls!
return someVariable;
}
This means, to have the variable for "keeping track of what verse to show" persist, it has to be declared outside your function.
Show and hide!
By calculating the previous verse's index with the index of the next-to-show verse, we only have to keep one counter. With two counters, they might get out of sync if we don't handle them correctly.
let nextToShow = 0;
function showNextVerse() {
const previousIndex = nextToShow - 1;
// ...
++nextToShow; // Increase counter for next call
}
In our case, the user (or rather, their clicks) will play the role of the loop. They will cause our click handler (the function) to run occasionally, at which point we have to swap the verses.
Swapping the verses can be done in many ways, but we'll stick to your "inline style" way: (Final code)
document.addEventListener("click", showNextVerse);
const banner = document.querySelector(".banner");
const verses = document.getElementById("verses").children; // More on this later
let nextToShow = 0;
function showNextVerse() {
const previousIndex = nextToShow - 1;
// On every call, hide the banner
banner.style.display = "none"; // Use `.style` instead of `.innerHTML` to preserve its HTML!
// Hide previous if valid index
if (previousIndex >= 0 && previousIndex < verses.length) {
verses[previousIndex].style.display = "none";
}
// Show next if valid index
if (nextToShow >= 0 && nextToShow < verses.length) {
verses[nextToShow].style.display = "block";
}
++nextToShow;
}
<div class="banner">
<script src="main.js" defer></script>
<img alt="We are still building on our Website:-)">
</div>
<div id="verses">
<div style="display:none">Lorem Ipsum1</div>
<div style="display:none">Lorem Ipsum2</div>
<div style="display:none">Lorem Ipsum3</div>
<div style="display:none">Lorem Ipsum4</div>
<div style="display:none">Lorem Ipsum5</div>
</div>
Improvements?!
There is no need for the variable versesLength; you can directly replace each of its occurences with verses.length. It doesn't improve on the original name, and is one more potential source for bugs if not synchronized with the original variable.
Correctly use class and id
Currently, your verses use class as if it was id; they each use a different class. This is not wrong, but semantically I would use id for this purpose.
To use the class attribute effectively, you should give each verse the class verse. This way, you can select them more easily via JS (see next section).
Easier getting of elements
As with everything in the coding world, there are many solutions to a problem. You solved getting the elements in a rather tedious way, but there are alternatives: (Non-exhaustive list)
Use document.querySelectorAll().
Rename verses to use same class, and use document.getElementsByClassName().
Use Element.children.
You may have already noticed how I get all the verses. In fact, verses (in the final code) doesn't even reference an array, but an HTMLCollection. It is very similar to an array, with the exception of it updating live to changes:
const elementsWrapper = document.getElementById("elements");
const collection = elementsWrapper.children;
const array = Array.from(elementsWrapper.children);
document.getElementById("bt-add").addEventListener("click", function() {
const newElement = document.createElement("div");
newElement.textContent = "Added later";
elementsWrapper.appendChild(newElement);
});
document.getElementById("bt-log").addEventListener("click", function() {
console.log("collection.length:", collection.length);
console.log("array.length:", array.length);
});
<button id="bt-add">Add new element</button>
<button id="bt-log">Log <code>.length</code></button>
<p>
Try logging first! Then try to add elements, and log again! See the difference?
</p>
<div>Elements:</div>
<div id="elements">
<div>Initially existent</div>
<div>Initially existent</div>
</div>
Alternative way of hiding
Here are ways of hiding the elements:
Use inline styling (this is what you did!).
Use CSS classes.
Use the HTML attribute hidden.
For small style changes I too would use inline styling. But for only hiding elements I would use the hidden attribute.
Also, there are multiple CSS ways of hiding elements:
Using display: none: Will hide the element as if it doesn't exist.
Using opacity: 0: Will hide the element by making it invisible; it still takes up space, and should still be part of the accessibility tree (opinionated).
Moving it off-site with position: fixed and top, left, etc. properties: (Please don't.)
Will move the element off-site, visually. It will still be part of the accessibility tree, and will only work for languages with the intended writing direction (e.g. it won't work for right-to-left languages).
Setting width, height, margin, padding and border to 0: Will hide the element only visually; it will still be part of the accessibility tree, and will stop margin collapse. Screen-reader only classes use this for non-visual elements, very useful.

Track the elements rendered on Scroll

Thanks for your time.
I'm developing a page which has a top Calendar component( which show a week) and below that, a Scroll component which shows information for each one of the days of the week.
This is my page so far:
The problem here is that I need to know what day the scroll is showing to mark it at the calendar, like this example where the user is at day 3 and day 3 is marked at the calendar:
I have seen scroll tracking questions where the solutions are linked to ScrollY and ScrollX position, but in this case I need some info of the DOM element, like id or something, and I don't know if it's possible.
I also have tried onScroll method of the react infinite scroll, but it returns the whole document.
This is the code:
And the console print:
Thank you very much!
You could use the useRef() hook to reference the parent container within the onScroll function passed to the InfiniteScroll component. In that function you could use the parent reference to calculate which element is currently visible (closest to the middle of visible container). Then, pass item's date to a higher order component which is also shared with the calendar component.
Note: you would need to set the scrollableTarget property of the InfiniteScroll (because we want our parent element to be responsible for
scrollbars).
function InfiniteScrollContainer({ setFocusedItem }) {
const container = useRef();
function handleScroll() {
// Calculate which item is currently in the middle of the container
const containerMiddle = container.current.scrollTop + container.current.getBoundingClientRect().height / 2;
const infiniteScrollItems = container.current.children[0].children;
let index = 0;
let itemFound = false;
const itemNo = infiniteScrollItems.length;
while (!itemFound && index < itemNo) {
const item = infiniteScrollItems[i];
const itemTopOffset = item.offsetTop;
const itemBottomOffset = item.getBoundingClientRect().height + itemTopOffset;
if (itemTopOffset < containerMiddle && itemBottomOffset > containerMiddle) {
setFocusedItem(item);
itemFound = true;
}
index += 1;
}
}
useEffect(() => {
handleScroll();
}, [])
/* ... */
return (
<div ref={container} id="container-id">
<InfiniteScroll
<!-- ... -->
scrollableTarget={"container-id"}
onScroll={handleScroll}
>
<!-- ... -->
</InfiniteScroll>
</div>
);
}

Displaying Go To Top button when page becomes scrollable

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.

Categories

Resources