I use LocoScroll to achieve a horizontal scroll.
On my page I also have a mouseover event that i used to show images.
The problem is that my images doesn't change on scroll, and i want to see the images shift as the user scroll through the page. I tried to insert my mouseover function inside locoScroll.on('scroll', (instance) => {}); But it don't seems to be the right direction.
You can find my code here :
https://codepen.io/acds/pen/MWrNeZQ
Related
The task is to keep the tooltip visible on screen upon clicking on chart dot like this
Right now my tooltips disappear when moving mouse, is there any way to achieve this?
I'm essentially making a 'shopping cart' UI and I want it so that when the user hits the 'Add' button, a little tiny box-label appears at the bottom of the screen that says 'Added Item' or something like that.
My question is how to do that with my current set up. I am currently using a nested Grid inside of a Scroll view for the main content of the page. I want the box-label to fade in at the bottom of the screen and stay located at the bottom of the screen ontop of everything else even if you scroll, until the animation fades.
Now i figure it doesn't make sense to add it into the grid since the grid's end will be out of view in the scrolling part of the scroll view, and same for the Scroll View. I am considering nesting the entire scroll view inside of a stack layout but i fear the button will just be located at the end of the stack layout under the scroll view instead of on TOP of the scroll view. How do you recommend I achieve this effect?
I prefer not to use a custom renderer if possible due to my lack of experience in the three separate platforms.
Thanks
Make vertically oriented stack layout. When you need to add you animation add it programmatically to the stack. When it finishes remove it from stack. Your scroll view will not affect animation
Hi this is the extension of the question which i have ask earlier
stop the stackpanel items inside scroll viewer to be at the display left side when scroll to-be-at-the-display-left-side-wh
I can get the horizontal offset value but i need to compare two images offset, if the scroll stops in the middle i need to move the image to get the full view kindly help me
You can't stop the scroll.
By cons, you can display your image and detect the event Flick (gestures WP7) to change the displayed image and use an animation (use blend).
On my website, when someone clicks on an image, it gets enlarged I would like a navigation arrow to appear either side of the photo for people to scroll from photo to another. And photos should get scrolled when navigation arrows are clicked. I've used fancybox to display gallery.
jQuery("#fancybox-left").show();
jQuery("#fancybox-right").show();
this will display both side arrows if you have not intiated them while initiating fancybox.
So if you attach some function on the hover event it won't fire if the mouse is already within th hovering area during page load, and is not moved. You actually have to move the mouse a bit to the event to fire.
Example:
move the mouse to the hover-effect area
hit the mouse with an axe
reload the page with F5
=> hover function not fired :(
Why?
And is there a fix?
This is expected functionality, hover is simply the combination of "mouseOver" and "mouseOut" so if your cursor is over the element on page load, it never technically moves over the element. Unfortunately without a mouse move, there is no way for the javascript to determine the position of the mouse, or the element it is currently over.