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>
Related
I have a problem with a specific use of javascript. On my development website https://famnabuurs.nl I prepared a simple page with three columns.
I manipulate the mousepointer... On the left and right side the cursor disappears by objective. When I move my mousepointer over the image in the center, the textblock should show up and then follow the mousepointer until the mousepointer leaves the image again.
The moving phase works fine as long as I move the mouse to the left side, but when I move the cursor from left to right over the image the mouse seems to get nervous. Also when I move from top to bottom it goes wrong. The textblock jumps from cursor-position to top of the image and back. I assume I made a mistake in the javascript, but no idea what causes this issue.
This is my relevant code, the part that follows the mousepointer:
function mousemovedimage(e) {
const imageItSelf = document.getElementById(objectnaam);
const titleblock = document.getElementById(objectnaam+'_id');
// on mouseover make the sheet visible
var imageOffset = imageItSelf.getBoundingClientRect();
let xpos = e.clientX - imageOffset.left ;
// do not shift too far to the right
if (xpos > imageItSelf.clientWidth) {
titleblock.style.setProperty('display','none', 'important');
} else {
if (xpos < 0) {
// do not shift too far to the left
titleblock.style.setProperty('display','none', 'important');
} else {
titleblock.style.setProperty('display','block', 'important');
titleblock.style.top = e.offsetY + 'px';
titleblock.style.left = (xpos) + 'px';
}
}
}
This function is added as an eventListener:
objectnaam = 'roel-image-twee-eiken-desktop-tablet';
document.addEventListener('mousemove', mousemovedimage);
The titleblock is the moving textblock.
Could someone give me a hint to solve this issue?
This is caused by the pointer going over the text. Try setting pointer-events: none to the title. Something like:
titleblock.style.setProperty('pointer-events','none');
I am replacing the src of an image when the user has scrolled to a certain point of the page with this jQuery code:
jQuery(function() {
var sticky = jQuery(".sticky-icon-white");
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 115) {
jQuery("#sticky-icon").attr("src", "https://dummyimage.com/100x100/000/fff");
} else {
jQuery("#sticky-icon").attr("src", "https://via.placeholder.com/100/");
sticky.removeClass('not-sticky-icon-white').addClass('sticky-icon-white');
}
if (scroll >= 300) {
sticky.removeClass('sticky-icon-white').addClass('not-sticky-icon-white');
} else {
sticky.removeClass('not-sticky-icon-white').addClass('sticky-icon-white');
}
});
});
This is my HTML:
<div class="sticky-icon-white">
<img id="sticky-icon" src="https://via.placeholder.com/100/">
</div>
The replacing is working fine but I want to apply a slide or push (not sure what to call it) animation on it. Like this one: https://gosimple.com (the leaf icon in the middle).
But I couldn't figure out how. Could someone help me to find a solution, please?
Here is a JSFiddle: http://jsfiddle.net/bzqad296/
Thanks in advance!
I have tried with slideUp(); or slideDown(); but it doesn't work.
EDIT:
In this image, you can see the effect. How the icon changes from white background, green leafs to green background, white leafs:
https://prnt.sc/lgwr3f
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.
I have this :
<div id="randomp" style="position:absolute;top:3px;left:3px;width:165px;height:29px;background:url(/logo2.png) no-repeat;background-size: 165px;"></div>
I want that the propierty "top" and "left" change every time you enter into the page. I mean that some times it appear on the right top corner, right bottom corner, left top corner and left bottom corner..
Here it is what i have tryied:
http://redzer.com.mx/tabla.html
I would probably start with the div styled as position:fixed and with display:none:
<div id="randomp" style="display:none;position:fixed;width:165px;height:29px;background:url(/logo2.png) no-repeat;background-size: 165px;"></div>
Then use jQuery to determine the position CSS to set and turn on visibility
$(document).ready(function() {
// get jQuery object for the div
var $randomp = $('#randomp');
// determine whether to show top or bottom, left or right
var top = Math.round(Math.random()); // generate 0 or 1 value
if (top === 1) {
$randomp.css('top', '3px');
} else {
$randomp.css('bottom', '3px');
}
var left = Math.round(Math.random());
if (left === 1) {
$randomp.css('left', '3px');
} else {
$randomp.css('right', '3px');
}
// show the div
$randomp.show();
});
Of course, you could also use server-side code to do this, but since you asked specifically about javascript/jquery in your tags, I suggested this solution.
I think i got exactly what you need.
EXAMPLE
With javascript i am generating random numbers for the top and left positioning of your image every time you visit the page.
Right now i set them up to get a random number between 0 and 100 but you can change that to whatever you want.
var random1 = Math.ceil(Math.random() * 100);
var random2 = Math.ceil(Math.random() * 100);
$(document).ready(function () {
$('#randomp').css('top', random1);
$('#randomp').css('left', random2);
});
function jsiBoxAdjustTop()
{
var top
if ( jsiBox.preloadImg.height <= 699){
top = 216;
}
else{
top = 17;
}
jsiBox.boxNode.style.top = (top) + 'px';
}
I'm using that function to adjust a div's top position depending on the image that is in it's height. It's on a light box sort of script so every time I click the next button, a new image which could either be taller or smaller appears. It's working alright and it adjusts its position when the image is taller but my problem is it just jumps to that position. I'm really new to javascript so can anyone help me out to make this as if it's travelling/animating to it's position? I tried using setTimeOut but I think I was doing it wrong. I'd really love to know what I'm doing wrong.
Here's the full script if that helps. Link
you can use jQuery or YUI to do animate, such as
jQuery(jsiBox.boxNode).animate({'top': top}, 3000);
or you can write some simple code with setTimeout just for this case;
following code assume the begin top is 0.
var boxStyle = jsiBox.boxNode.style;
function animateTop(to) {
boxStyle.top = parseInt(boxStyle.top, 10) + 1 + 'px';
if (parseInt(boxStyle.top, 10) != to) {
setTimeout(function() {
animate(to);
}, 50);
}
}
animateTop(top);