Example: http://jsfiddle.net/kdMRV/8/
Instructions: drag the drag item at the bottom onto the red content area. The red should change to yellow on successful hover.
Move drag item back to the bottom of the page
Now, scroll the scrollbar as far to the right as it can go. And now the issue arises: if you drag the drag item over the red it turns yellow as expected, but even if you drag the item to the white space to the left of the container div (the one with the scroll bars and overflow: scroll), the red still turns to yellow!
Note, I am using chrome to test this, but I think it happens in at least FF3.6 and IE8
Can someone explain why this happens and how to fix it?
Related
Safari uses "theme-color" to tint its navigation bar at the top.
BBC News uses red color, so the whole browser is red (https://www.bbc.com/news
image
Problem is, if you drag page away from right side or bottom, there is also red color under it.
Is there a way to set "system" (under page) background, besides "theme-color"? Let's say, I want for navigation bar to be red, but background from right to be white.
If going into weird hacking and using negative margins on html/body to stretch content beyond bounds, is there a stable way to compensate scrolling bounds without breaking the whole layout?
Imagine you have nested elements on a webpage like one textfield inside a parent-div-element. The content of the textfield overflows the textfield dimensions. The textfield itself and several different elements are inside a parent-div. All those elements are overflowing the parent-div's dimensions, too.
Now if you will focus the textfield and scroll up or down, the content will scroll to the bottom or top of it's content. But: After the bottom or to is reached, the parent div will scroll to it's bottom or top.
This is an unwanted behaviour and I wonder if there is a way, a shortcut, a setting or extension to prevent the browser / OS from doing that.
The wanted behaviour is: I scroll to the bottom of a textfield and only if the focus changes or at least the mouse cursor leaves the textfield, the parent element shall scroll down.
This occurs in Chrome, Firefox and Safari on OS X High Sierra 10.13.2. In Chrome there is a seamless scrolling, Firefox and Safari will prevent the parent from scrolling unless you initiate scrolling again. On Windows 10 and Firefox it is even more delayed, but still occuring - which makes it even harder to control. On Windows 10 and Edge it's seamless, too.
I have a div that holds multiple draggable elements.
When I drag an elements to the right, the horizontal scroll bar appears and I can scroll the div. This is what it looks like:
However, when I drag the elements left, the horizontal scroll bar doesn't show. Example:
I have the overflow property set to auto.
I understand that this is the deafult behavior of the browser, and that not showing the scroll bar is "correct", however if anyone has any suggestions how to make the overflow also work when moving elements left, it would be greatly appreciated! TIA!
No. When you drag an element to the right you are increasing the page width and triggering a horizontal scrollbar. When you drag an element to the left, you are simply moving it off the page.
You might try dynamically increasing the page width based on how far the element has been dragged outside the left edge of the page.
The browser is working as designed.
I'm looking at a 'drag and drop' script which works for my needs, but I have a couple of problems with the DIV positioning and getting a DIV to be fixed but allow to expand it's parent.
I've created a CodePen example.
Basically I have a list on the left of the page which may grow or shrink. That div expands and contracts correctly.
One the right of the page I have a dropzone the users can drag from the list and fill up the drop zone.
If the list is longer than the page, when the user scrolls down I wan to have the right pane (outlined in YELLOW) to scroll down the page with it. When the user scrolls up I want the YELLOW pane to scroll back up and eventually arrive back at it's original location.
As items are dragged from the left to the right the YELLOW pane expands. But it expands over the DRAG DIV, it should make the drag div expand so the YELLOW pane stays with in it.
Please some one advise how I get this to work.
Thanks :)
add padding to this
#right_container {
padding: 20px;
}
delete position
#right {
position :absolute;
}
what am I misinterpreting this..
I have applied the following tutorial in a JavaScript script:
http://www.html5canvastutorials.com/labs/html5-canvas-interactive-building-map/
It works like a charm in most cases. Whenever I scroll the entire website, everything goes well, hovering over the shapes works perfect.
But whenever I make a div inside the website scrollable with the shape in it, the visible shapes do stay in place (with visible shapes I mean what you're actually seeing), together with the picture, but whenever I hover, I have to hover lower whenever I scroll down, as can be seen on:
http://i45.tinypic.com/28cn7ur.png
(notice the position of the scrollbar and the position of my mouse relative to the blue shape above it)
The div in the center is positioned relative, and within this div I have a canvas-wrapper div (also position relative) and therein the canvas itself.
What is causing this problem?
I was using kinetic version 3.8.2, upgrading to version 3.10.4 fixed the problem.