We're trying to come up with a way to trigger the tool-tip events on jquery charts such as this one from rickshaw by controlling the event from a jquery ui slider along the bottom (x) axis.
Therefore as a user slides the slider along the axis, the chart behaves as though the mouse was being dragged left to right across it. To simplify things the slider and the chart would be the same width. Can anyone suggest a way i might be able to make this happen in jquery/javascript?
Thanks!
Related
I Want to create a slideshow of different images for a project with HTML, JS, and CSS. I want to create a scroll function that will move the image slides from left to right based on the movement of the mouse scroll.
If this sounds confusing this link shows exactly what I'm trying to do but due to my lack of experience, I have no idea how to accomplish this. Any ideas would help.
link: https://robbiecrenshaw.com/ about the halfway mark
thank you
(I'm a beginner in programming)
The animations used on this site are called scroll-based animations, where the animation progress is controlled directly by the scroll position.
They are implemented by listening to the scroll event that is fired when a user scrolls and updating the styles of certain elements dynamically based on the scroll position.
You can create scroll animations from scratch using JavaScript or implement them using a library like GSAP ScrollTrigger (which is what this specific site uses).
I created a demo similar to the effect you're looking for here: https://codepen.io/nickcil/pen/yLVEZPa
This example uses ScrollMagic to track the scroll position and update the transform property of an element to make the squares move left as you scroll down the page.
I've a problem using Angular Material Table combined with Drag and Drop CDK and scrolling
When I'm dragging the line and then scrolling, the line won't be dropped where I drop it.
We can also see that the animation does'nt follow the scroll.
I think this is due to the fact than scrolling with the wheel don't move the mouse, but the row instead.
I've tried to scroll with Javascript ScrollBy and the problem is the same.
Also, it's impossible to force the scroll by going at the bottom of the Table container .
I've replicated the problem on StackBlitz: https://stackblitz.com/edit/angular-pebkne
Does anyone know either how to force scrolling at the end of the container or how to make sure that scrolling through the mouse wheel is working correctly?
So, this was a bug in Angular Material.
It has been corrected since then.
I need a zoom feature inside every slide, so I installed a zoom app (http://www.jacklmoore.com/zoom) in them. But I want to freeze momentarily or disable the swipe when the user is dragging the mouse or touching to see other areas of the image.
The zoom app has functions onZoomIn and onZoomOut that I can add a trigger to an event or anything else, but I could not figure out how to disable the slick carousel.
I know there are many carousels apps, and I would accept suggestions, but I need to use slick, because slick is the only one I tried that didn't change the elements drastically, like stretching or shrinking unless desirable.
So, is there a way disable the dragging on slick?
I have been using the excellent DHTMLX Scheduler for a few days to get on with it, and I found solutions and workarounds for almost every specific things I wanted to achieve.
However, in this particular case, I am using the extension that allows tooltip customisation when hovering on an event (see doc here) which is working fine.
My problem here is the tooltip disappears when hovering out of the event, which is not wrong. The thing is I want to add clickable content in the tooltip, but since it disappears this simple task is rendered impossible.
I've searched through the docs, various forums and even here, but I haven't found any help regarding that matter.
Long story short, how can I prevent tooltips from disappearing when hovering above the tooltip itself (if at all possible)?
Thank you anyway.
The tooltip dissapears (after some delay) when the mouse hovers on an empty space. I.e. if user could move a pointer from an event into the tooltip without pointing to the elements outside both tooltip and event - tooltip won't dissapear.
Try setting some configurations, so tooltip will appear closer to the pointer and user will be able to move cursor into it:
scheduler.tooltip.config.delta_x = 5;
scheduler.tooltip.config.delta_y = -5;
For example; if I had a flot canvas graph and I wanted to be able to view a closeup of one of the areas, I want to be able to zoom into a specific area and have a scrollbar appear for horizontal and vertical panning so every section can be viewed. Is this possible?
You may want to use the zoom CSS property. Here is a little example of it in action.
As for the scroll bars, you could try placing the zoomed element within a parent which has overflow: scroll; set.
I hope this helps.
Anything is possible, but flot doesn't support that by itself. Your best bet would be to use the panning and zooming functions built into flot (via the navigate plugin), but then for the scrollbars, you might have to overlay some fake scrollbars (perhaps using a div with overflow:scroll, as #Wolfy87 suggested) and hook them up to the flot graph.
Flot triggers plotpan and plotzoom events when the graph has moved, so you would use them to keep your scrollbars in sync.
I haven't seen anyone do this before, so I can't point you towards an example. But the code doesn't seem unreasonable to put together.