Drag and Drop takes over my scrollbar - javascript

I have a div and inside my div I have a dojo dijit.layout.BorderContainer. Inside that border container I have 2 more more BorderContainers and finally each of those border containers has one more BorderContainer.
The base div is made movable with dojo.dnd.movable. This works fine and I can move my div about my screen properly. My problem arises in the most nested BorderContaienrs. Each of these contains many buttons and have the overflow:auto. When I grab the scroll bar to scroll down to see more of my buttons the scroll bar doesn't work. Instead when I grab the scroll bar and move it down/up it drags the entire div around the screen. I have checked the z-index and the scroll bar is most certainly above the div.
Here is the hierarchy
div/BorderContainer/BorderContainer/Bordercontainer(with scroll bar)

Related

Resize divs when maximum divs are created

See the diagram below -
On click i create a div of width 680px and height 295px in the top left corner of the screen and go on until the bottom left corner of the screen with javascript. like image below...
Now when the 4th div is created, On the 5th click, i want my application to be able to calculate the space available and if there is no space available it creates a second div next to the first div created and so on in all other divs as seen in image...
Does anyone know how to calculate the space available dynamically everytime a div is created and then accordingly create smaller divs to fit into the spaces in the main container?

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!

ionic 5 Prevent parent scroll when child scroll reach bottom

I have a situation where when child scroll reaches bottom parent scroll takes over and starts scrolling the whole screen.
Basicall I have normal icon page with a horizontal bar at top. When user clicks on top bar a div slid downs showing the list of items covering whole screen except top bar. Because this list is loner than the screen height I have allowed vertical scrolling in div. Now the problem is when the user is scrolling inside div and reaches the bottom of the list, the background page starts scrolling up.
What I want is, inside the div scrolling should not scroll the background/parent page when user reaches bottom of the list.
code sample (in browser you will need to move mouse a bit after reaching bottom)
https://stackblitz.com/edit/ionic-forum-5-jhl2pw
Thanks

jQuery - Show and Hide when element is 190px from the bottom of screen?

So I need an offsetBottom() jQuery function essentially. I have a fixed div that overlays the entire website, but I also have a div at the bottom of each page which contains the exact same content. My goal is to get the fixed overlay to disappear once the TOP of the div at the bottom of the page becomes visible, or is at the same height from the bottom as the overlay, even when the page is resized, then the overlay re-appears when the top of the div goes below the fixed div.
I am sorry I have no code example, I have been trying to use offsetTop() but the pages are of varying heights and it will only show/hide when the div reaches the very top of the web browser.

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.

Categories

Resources