Horizontal DIV with children elements to be scrolled to by Id - javascript

I have an ASP.NET Core Razor Page where is a collection of elements scroll-able horizontally on touch or on nav button click.
I am not js specialist and I need one more functionality:
On button click, I need to "JUMP" to element that has given ID.
How can I achieve that on horizontal scroll div?

This answer here can help.
This is a quote from that answer
call this when you need to scroll the screen to an element which has id="yourSpecificElementId"
window.scroll(0,findPos(document.getElementById("yourSpecificElementId")));

Related

css allow div to scroll anywhere, but pan with Hammer if at the top

First i would describe what I'm trying to achieve:
Basically I have a simple scrollable div as a container. But once it is scrolled to the top, I want the entire div to be pan-able (eg. to swipe the container down) - when i attempt to swipe it down. But I want to retain the scrolling in the case that I swipe it upwards (scrolling downwards), it scrolls normally downwards. Check out Facebook's container element when it opens a container on their app.
I am currently using a simple div with panning from Hammer and a scrollable div, but i encounter a problem:
Once I allow the entire div to be pannable, I cannot scroll the div now.
Hence, I cannot detect whether a user is attempting to swipe down or up the div to pan and scroll the div respectively.
I am wondering what are some suggestions to approach this conflicting issue! Thank you!

How to make HTML elements slide up into place automatically

I want to make three or four inline elements slide up into place when the user scrolls down to the position they will be.
How do I do this?
Thanks!

Bootstrap scroll on divs depending on device height

Is there a way to have a scrollbar appear on a div depending on the devices height?
This menu is opened by a hamburger drawer on the side.
Drawer contains 3 divs - login div, menu div and social media div
You can reorder all 3 divs on your liking.
My menu div is customization on how many items it will show.
My problem is that of there are about 10 items in the menu and is viewed on a phone. It overlays over the bottom div if there is one.
I would like it not to overlay other divs.
I tried using
Css - Overflow-y:scroll but that requires a fixed height.
I tried using JS as well with this example
http://jsfiddle.net/6WAnd/20/
But my header and footer can vary so it won't work
P.S Maybe check if the div exist or not first? How would i implement this?
Is there another way i can achieve this?

CSS Show active element above the div with overflow:hidden

I have a scrolling pane div with overflow:hidden. Please check it here. There are products as images with captions shown in the scrolling pane. When I move mouse cursor over a product div, it gets light-yellow background and changes its height - I just add a class to the div using jQuery and it works fine. The problem I need to solve some way is to show the expanded div for the active product as a separate div that appears above the scrolling pane, though now it appears inside that pane and extends it in its height. I want to make it look in similar way to this one. Here you move mouse cursor over the product and get an extended div showing you details. Surely, my task is a little harder because of that scrolling pane.
Shouldn't be too difficult if you use the .offset() method on hover of a .product. What you can do is the following:
In your .product hover event handler, get the offset of the product. This will give you the position of your product in relation to the document.
Next create your overlay product information div and append it directly to the <body>.
Set the overlay div to position: absolute and use the values returned from the offset call to position it.
Lastly make sure your overlay has a higher z-index than the scrolling pane and you should be in business.

Div mouse hover

Work on ASP.NET 2.0 C# on the web. In my site, I have three divs. Each div contain several elements. When I mouse hover a div then it expands on vertically, initially, all div are in Collapsible. How to write this mouse hover event. How to set all div content in collapsible. I want Accordion but the Accordion header takes place vertically not horizontally.
Sounds like you want an Accordion
You can use a jquery Accordion.
To make the sections expand and collapse on mouse over, use this:
$('.selector').accordion({ event: 'mouseover' });

Categories

Resources