We Keep Coding

How to change the cursor on an image on mouse move

In an Angular 7 application, I'm trying to implement left and right arrows for an image slideshow. If the mouse is hovered on the left half of the image, it should show a left arrow, and a right arrow on the right half. Clicking the image then will take the user to either the next or previous image in the array of images. Something like this: https://wells-demo.squarespace.com/human-nature-wells/uml9t64gkm48jijkt8y6slmtd0jush
<img src="url" (click)="navigate()">
I tried to set up something with #HostListener, but can't quite figure out how to progress.
urls = [url1, url2, url3, ....url10];
currIndex = 2;
url = urls[currIndex];
#HostListener('mousemove', ['$event'])
onMouseMove(event: MouseEvent) {
//console.log(event.pageX);
//console.log(this.el.nativeElement.offsetLeft);
//not completely sure what to do here...
}
navigate() {
if (leftHalf) { //how to figure this out?
prevImage();
} else {
nextImage();
}
nextImage() {
this.url = this.urls[this.currIndex + 1];
}
prevImage() {
this.url = this.urls[this.currIndex - 1]
}
1) How do I change the mouse cursor to a left arrow based on the position?
2) How to detect if left half or right half was clicked on?
Appreciate any help I can get on this!

Make use of offsetWidth of the element and offsetX of the mousemove event.
if(event.offsetX > element.offsetWidth / 2) {
// right half
} else {
// left half
}
To change the pointer's you have to make use of add/remove class using the cursor property. Refer this https://css-tricks.com/using-css-cursors/

check out the below code for adding arrows as per your requirement
.left_div{
cursor:w-resize;
float:left
}
.right_div{
cursor:n-resize;
float:right
}
<div class="left_div">this is left div</div>
<div class="right_div">this is right div</div>

How can I detect when an element scrolls into the viewport using in-view.js

I am building a one-page website where I need to detect when an element scrolls into view. Essentially trying to build a black/white colour changing menu based on the opposite of the element's background color.
I found a javascript utility called in-view that seems to do what I want. But there are issues;
It works when scrolling down... but...
It wont work when scrolling back up. This is due to giving it an offset of the window height (because I want it to trigger once it reaches the menu).
Panels < height of the page don't trigger the plugin when you reach the bottom.
This is my JS code:
var winHeight = $(window).height()-75;
inView.offset(winHeight);
inView('.panel-content')
.on('enter', function(el){
var color = $(el).attr('data-color');
if (color === 'dark') {
$('#masthead').removeClass('light').addClass('dark');
} else if (color === 'light') {
$('#masthead').removeClass('dark').addClass('light');
} else {
$('#masthead').removeClass('light').addClass('dark');
}
});
...and this is the structure of my HTML:
Note the panel height depend on content but vary from about 400 – 900.
<div id="masthead">logo, nav etc...</div
<div class="panel-content" data-color="light" style="background-colour:#222"></div>
<div class="panel-content" data-color="dark" style="background-colour:#ddd"></div>
<div class="panel-content" data-color="dark" style="background-colour:#ddd"></div>
<div class="panel-content" data-color="light" style="background-colour:#222"></div>
<div class="panel-content" data-color="dark" style="background-colour:#ddd"></div>
<div class="panel-content" data-color="light" style="background-colour:#222"></div>
<div class="panel-content" data-color="dark" style="background-colour:#ddd"></div>
Thanks in advance for any help :-)

I found the solution! I first tried detecting the scroll direction; so if scrolling down the page set the offset to the window height, otherwise set offset to 0... – and that worked.
The need to detect the direction led me back to the in-view documentation because I thought there had to be a better way. Turns out you can also specify an object containing the bounds (top, right, bottom, left), otherwise it uses the single value for each values! Which explains why I had the issues.
My final JS code:
jQuery(function($) {
var $target = $('#masthead');
var winHeight = $(window).height()-1; //1px less so it triggers using nav links
inView.offset({
top: 0,
right: 0,
bottom: winHeight,
left: 0
});
inView('.panel-content')
.on('enter', function(el){
var color = $(el).attr('data-color');
if (color === 'dark') {
$target.removeClass('light').addClass('dark');
} else if (color === 'light') {
$target.removeClass('dark').addClass('light');
} else {
$target.removeClass('light').addClass('dark');
}
});
});
note that the HTML is as before.
Hope this helps others who are trying to achieve a similar colour changing nav, or similar.

How to change logo when scroll down?

I have one issue that I cant resolve myselft, so I need your help. On my site, I have integrated JQuery that change header background and color when scroll down, and works well. But issue is that I also want logo to change to black version when someone scroll down. I have tryed this JQ:
jQuery(document).scroll(function(){
if(jQuery(this).scrollTop() > 300)
{
jQuery('#navigation').css({"background":"white"});
jQuery('.menu-item').css({"color":"black"});
jQuery('.site_logo').css({"-webkit-filter":"invert(.8)"});
jQuery('.site_logo').css({"filter":"invert(.8)"});
} else {
jQuery('#navigation').css({"background":"transparent"});
jQuery('.menu-item').css({"color":"white"});
}
});
what invert white color to black, but red color invert to green, so its not as I expected. I have black version of logo, so I'm asking you, how to change black logo when someone scroll down?

Do you mean how do you access the src attribute?
$('.site_logo').attr('src', 'BLACKLOGO.png');
jQuery(document).scroll(function(){
if(jQuery(this).scrollTop() > 300)
{
jQuery('#navigation').css({"background":"white"});
jQuery('.menu-item').css({"color":"black"});
jQuery('.site_logo').attr('src', 'http://deilbeatz.com/wp-content/uploads/2016/12/DeilBeatzwhite.png');
} else {
jQuery('#navigation').css({"background":"transparent"});
jQuery('.menu-item').css({"color":"white"});
jQuery('.site_logo').attr('src', 'http://deilbeatz.com/wp-content/uploads/2016/12/Deil-Beatz-‌​menu-logo-black.png');
}
});
Hope that helps, if not let me know what you need and I'll try to help

You're not removing filter after scrolling back to top.
Change your JS like
jQuery(document).scroll(function(){
if(jQuery(this).scrollTop() > 300){
jQuery('#navigation').css({"background":"white"});
jQuery('.menu-item').css({"color":"black"});
jQuery('.site_logo').css({"-webkit-filter":"invert(.8)","filter":"invert(.8)"});
} else {
jQuery('#navigation').css({"background":"transparent"});
jQuery('.menu-item').css({"color":"white"});
jQuery('.site_logo').css({"-webkit-filter":"none","filter":"none"});
}
});
Also there is a better approach (for good look) of changing image on scroll, So you can achieve exactly the same design you want in logo after and before scroll like
jQuery(document).scroll(function(){
if(jQuery(this).scrollTop() > 300){
jQuery('#navigation').css({"background":"white"});
jQuery('.menu-item').css({"color":"black"});
jQuery('.site_logo').attr('src','path/to/logo/after/scroll')
} else {
jQuery('#navigation').css({"background":"transparent"});
jQuery('.menu-item').css({"color":"white"});
jQuery('.site_logo').attr('src','path/to/logo/initially/')
}
});

Replace logo image upon scroll down JS / HTML / CSS wordpress website

I would like to have a logo image change (for the purpose of color) upon scrolling.
The navigation currently changes when scrolling downwards to have a dark bar behind it, does anybody have any suggestions as to what will work best for this image replacement?
I have tried using this as found in another SO question but wouldn't work for me....
$(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 100) {
$('logo_h logo_h__img').fadeOut('slow');
$('#logo-img img')
.css({'width':'184px','height':'33px'})
.attr('src','logo1.png');
}
if($(this).scrollTop() < 100) {
$('logo_h logo_h__img').fadeIn('fast');
$('#logo-img img')
.css({'width':'184px','height':'60px'})
.attr('src','logo2.png');
}
});
});
Filenames replaced for the sake of demonstration.
Thank you!

Thanks to help from #rlemon I have a script that works better, now implementing it is the task I am having trouble with!!
<!-- Logo Scroll -->
var img = document.querySelector('.logo_h__img img'); // get the element
img.dataset.orig = img.src; // using dataset is just being fancy. probably don't do this
document.addEventListener('scroll', function (e) { // add the event listener
if (document.body.scrollTop > 0) { // check the scroll position
img.src = img.dataset.scroll; // set the scroll image
} else {
img.src = img.dataset.orig; // set the original image back
}
});

Scrolling on webpage with mouse location - hover on side elements

So I have this layout here .
<div class="content">
<div class="direction_left"></div>
<div class="direction_right"></div>
<div class="direction_up"></div>
<div class="direction_down"></div>
</div>
<div id="game">
<div id="pos"></div>
</div>
4 divs, if I hover on top it (should) scroll top, if I hover on bottom it (should) scroll bot, left scrolls left and right scrolls right!
On mouse hover on any of the four divs inside the content will scroll the page accordingly.
Important h_amount is horizontal and v_amount is for vertical
function scroll_h() {
console.log('scrolling left and right'+h_amount);
$('#game').animate({
scrollLeft: h_amount
}, 100, 'linear',function() {
if (h_amount != '') {
scroll_h();
}
});
}
function scroll_v() {
console.log('scrolling up and down'+v_amount);
$('#game').animate({
scrollTop: v_amount
}, 100, 'linear',function() {
if (v_amount != '') {
scroll_v();
}
});
}
and then on hover I call
$('.direction_right').hover(function() {
console.log('scroll right');
h_amount = '+=50';
scroll_h();
}, function() {
h_amount = '';
});
$('.direction_up').hover(function() {
console.log('scroll up');
v_amount = '-=50';
scroll_v();
}, function() {
v_amount = '';
});
FULL fiddle here
The problem, I cannot understand why it does not work for up and down. I think my script is correct so am thinking maybe css which is a general weakness of mine might be wrong :D help!

I think I found my answer, please correct me if I am wrong!
Found this question here which asks why his scrollTop() wont animate, and the answer says that window does not have a scrollTop() property, and to use body or html instead (depends on browser, so use both).
Therefore I think my #game div does not have a scrollTop() property either! So I replaced it with html,body and its now working :D.
*
P.S. Don't really know if its actually working or "working".
*
new fiddle here
Also changed that gradient background because it made me dizzy!