I want to make an element draggable in a fixed area that has its overflow property set to scroll.
If I use containment property in the draggable element, then the dragging downwards or to the right becomes flickery.
What I mean by this is that when the edge of dragged element hits the edge of the container, it does not scroll until the cursor hits the edge as well.
I can prevent this by not setting the containment property on the draggable setup. However when I drag to the left or top, the dragged element becomes invisible by being dragged to some negative x/y position.
How can I prevent the flicker when using containment property?
Plunkr -> http://plnkr.co/edit/pmGO6lswaSJtwMSC1bXe?p=preview
#container {
border:1px solid red;
min-height:3in;
overflow:scroll;
margin-left:120px;
}
.widget {
background: beige;
border:1px solid black;
height: 100px; width:100px;
}
<div id="container">
<div class="widget"></div>
</div>
$(function(){
$('.widget').draggable({
scroll:true,
containment: '#container' // comment out to see the smoothness on bottom/right edge drags
});
})
Fixed it with this
$(function(){
$('.widget').draggable({
scroll:true,
drag:function(evt, obj) {
if (obj.position.top < 0) {
obj.position.top = 0;
}
if (obj.position.left < 0) {
obj.position.left = 0;
}
}
});
})
Inspired by answer to this question -> jQuery UI draggable, stop drag but let dragging the other way
Related
I can only find questions where people have the opposite problem.
I want my fixed content to go above the iOS keyboard.
Image of the problem:
I want iOS to behave like Android.
Is there a simple way to achieve this?
Parent element css:
.parent{
position:fixed;
top: 0;
left 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
Button css:
.button{
position:fixed;
left 0;
right: 0;
bottom: 0;
width: 100%;
height: 5rem;
}
We can use VisualViewport to calculate keyboard height. So we can set fixed-content pos correct.
Small demo: https://whatwg6.github.io/pos-above-keyboard/index.html
Code snippet:
const button = document.getElementById("button");
const input = document.getElementById("input");
const height = window.visualViewport.height;
const viewport = window.visualViewport;
window.addEventListener("scroll", () => input.blur());
window.visualViewport.addEventListener("resize", resizeHandler);
function resizeHandler() {
if (!/iPhone|iPad|iPod/.test(window.navigator.userAgent)) {
height = viewport.height;
}
button.style.bottom = `${height - viewport.height + 10}px`;
}
function blurHandler() {
button.style.bottom = "10px";
}
html,
body {
margin: 0;
padding: 0;
}
#button {
position: fixed;
width: 100%;
bottom: 10px;
background-color: rebeccapurple;
line-height: 40px;
text-align: center;
}
<input type="text" inputmode="decimal" value="0.99" id="input" onblur="blurHandler()" />
<div id="button">Button</div>
Problems: https://developers.google.com/web/updates/2017/09/visual-viewport-api#the_event_rate_is_slow
Why not innerHeight?: Iphone safari not resizing viewport on keyboard open
Mobile Safari does not support position: fixed when an input focused and virtual keyboard displayed.
To force it work the same way as Mobile Chrome, you have to use position: absolute, height: 100% for the whole page or a container for your pseudo-fixed elements, intercept scroll, touchend, focus, and blur events.
The trick is to put the tapped input control to the bottom of screen before it activates focus. In that case iOS Safari always scrolls viewport predictably and window.innerHeight becomes exactly visible height.
Open https://avesus.github.io/docs/ios-keep-fixed-on-input-focus.html in Mobile Safari to see how it works.
Please avoid forms where you have several focusable elements because more tricks to fix position will be necessary, those were added just for demonstration purposes.
Note that for rotation and landscape mode, additional tricks are necessary. I'm working on a framework called Tuff.js which will provide a full-screen container helping mobile web developers to build web applications much faster. I've spend almost a year on the research.
By the way, to prevent scrolling of the whole window when virtual keyboard is active, you can use this super simple trick
var hack = document.getElementById('scroll-hack');
function addScrollPixel() {
if (hack.scrollTop === 0) {
// element is at the top of its scroll position, so scroll 1 pixel down
hack.scrollTop = 1;
}
if (hack.scrollHeight - hack.scrollTop === hack.clientHeight) {
// element is at the bottom of its scroll position, so scroll 1 pixel up
hack.scrollTop -= 1;
}
}
if (window.addEventListener) {
// Avoid just launching a function on every scroll event as it could affect performance.
// You should add a "debounce" to limit how many times the function is fired
hack.addEventListener('scroll', addScrollPixel, true);
} else if (window.attachEvent) {
hack.attachEvent('scroll', addScrollPixel);
}
body {
margin: 0 auto;
padding: 10px;
max-width: 800px;
}
h1>small {
font-size: 50%;
}
.container {
display: flex;
align-items: top;
justify-content: space-between;
}
.container>div {
border: #000 1px solid;
height: 200px;
overflow: auto;
width: 48%;
-webkit-overflow-scrolling: touch;
}
<h1>iOS Scroll Hack</h1>
<p>Elements with overflow:scroll have a slightly irritating behaviour on iOS, where when the contents of the element are scrolled to the top or bottom and another scroll is attempted, the browser window is scrolled instead. I hacked up a fix using minimal,
native JavaScript.</p>
<p>Both lists have standard scrolling CSS applied (<code>overflow: auto; -webkit-overflow-scrolling: touch;</code>), but the list on the right has the hack applied. You'll notice you can't trigger the browser to scroll whilst attempting to scroll the list
on the right.</p>
<p>The only very slight drawback to this is the slight "jump" that occurs when at the top or bottom of the list in the hack.</p>
<div class='container'>
<div id='scroll-orig'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
</div>
<div id='scroll-hack'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
</div>
</div>
Got this answer from here
This is a well known problem, and unfortunately one must resort to hacky tricks like the accepted answer for now. The W3C is however in the process of specifying The VirtualKeyboard API.
Note: At the time of writing, this answer is not yet ready for prime time. It's important to understand that this specification must also be forward looking, to adapt to the myriad possible virtual keyboards of the future. It may be a few years before reliable cross platform browser support begins to appear and this answer becomes the correct one.
I found an interesting solution to this problem.
The solution is to create a hidden input and focus on it on the touchstart event.
<input id="backinput" style="position:absolute;top:0;opacity:0;pointer-events: none;">
<input id="input" style="position:absolute;bottom:0;">
Using JQuery:
$('#backinput').on('focus',function(e)
{
e.preventDefault();
e.stopPropagation();
const input = document.getElementById('input');
input.focus({ preventScroll: true });
})
$('#input').on("touchstart", function (event) {
if(!$(this).is(":focus"))
{
event.stopPropagation();
event.preventDefault();
$('#backinput').focus();
}
})
Finally, resize the viewport so that the bottom input moves above the keyboard (if needed)
window.visualViewport.addEventListener("resize", (event) => {
$('body').height(parseInt(visualViewport.height));
});
For me it works perfect. I am building a messenger.
I've been trying to using jQuery resizable to resize an element in a container that is scrollable. I need to be able to make the element larger than what fits in the viewport, so therefor the page must scroll during the resize. How do I do that?
Note that the element is also draggable but not by the same handle (I'm not sure if that will affect the solution?)
When I've tried I get an issue with the handle which doesn't follow the mouse when I scroll the page.
First when I resized the element and drags the mouse down, the page didn't scroll. so therefor I've added the following (which might not be correct) on the resize event of the resizable element to scroll when the handle gets close to the upper or lower border:
resize: (event, ui) => {
var container = $(".container");
var pos = ui.originalPosition.top + ui.size.height;
var currentH = container.outerHeight() + container.scrollTop();
if (pos+20 >= currentH) {
container.scrollTop(pos + 20 - container.outerHeight());
}
if (pos-20 <= container.scrollTop()) {
container.scrollTop(pos-20);
}
}
this makes the page scroll but, then I get the problem:
That the handle no longer follow the mouse. And the longer I scroll the longer from the cursor the handle is. I've recreated this issue here based on TJ VanTolls fiddle http://jsfiddle.net/tj_vantoll/YwMXS/:
$('#inner').resizable({
containment: '#outer',
handles: 'all'
});
body { padding: 20px; }
p { line-height: 1.5; margin-bottom: 20px; }
#outer, #inner {
border: 1px solid black;
}
#outer {
width: 400px;
height: 300px;
overflow-y: scroll;
}
#inner {
height: 200px;
width: 200px;
top: 50px;
left: 50px;
}
#content {
height: 2000px;
width: 200px;
}
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p>
When scrolling during resize the handle does no longer follow the mouse.
To recreate: start resizing and during the resize scroll the parent.</p>
<div id="outer">
<div id="inner"></div>
<div id="content"></div>
</div>
So my Question is, do you know a way to fix my first problem without causing the second or if there is a way to fix the second issue?
Thanks in advance!
i know it's a bit late but here's what works for me, the issue is that your css is centering the element so you'll need to double the width and height of the resized elemnt to keep in sync with the mouse:
resize: function (event, ui) {
var newWidth = ui.originalSize.width + ((ui.size.width - ui.originalSize.width) * 2);
//restrict min size if you want
if (newWidth < 50) {
newWidth = 50;
}
var newHeight = ui.originalSize.height + ((ui.size.height - ui.originalSize.height) * 2);
//restrict min size if you want
if (newHeight < 50) {
newHeight = 50;
}
//constrain this to the immediate parent
var parent = $(this).closest(".my-container");
if (parent.length) {
$(this).width(newWidth).position({
of: parent,
my: "center center",
at: "center center"
});
$(this).height(newHeight).position({
of: parent,
my: "center center",
at: "center center"
});
}
}
I have a problem formatting toplevel-nodes in a Vaadin-Tree. I understand using the ItemStyleGenerator to set ccs-Style for particular nodes. I did this with following code:
this.setItemStyleGenerator(new Tree.ItemStyleGenerator() {
#Override
public String getStyle(Tree source, Object itemId) {
if (source.isRoot(itemId)) {
return "toplevel";
} else {
return null;
}
}
});
The CSS is as follows:
.v-tree-node-toplevel {
border: 1px solid #d8d9d9;
background: #fff;
#include border-radius(6px);
}
And the result is, that the root-node and all its child nodes have the same background-color and the border is around the toplevel- and all its child-nodes and the node icon is missing
My goal is to format just the root-node.
When i set the toplevel-style to a child node it is formatted as expected.
Can somebody help? Thanks.
Bernhard
Change your CSS to this:
.v-tree-node-caption-toplevel {
border: 1px solid #d8d9d9;
background: #fff;
#include border-radius(6px);
}
If you only want to style behind the text, and not the whole width of the tree, use this:
.v-tree-node-caption-toplevel span {
CSS stuff...
}
(The text part of the caption is contained within a span inside the v-tree-node-caption element.)
Here's a (not very detailed) explanation of what's occurring:
An expanded node inside a Vaadin tree (with children) is actually made up of about 3 distinct divs. First you have the container div, which is v-tree-node. Then you have the v-tree-node-caption which is an inner div that contains the name and icon of the node, this is probably what you want to style. Last, there is v-tree-node-children which contains all the child nodes underneath. The ItemStyleGenerator not only applies your style to the v-tree-node, but the v-tree-node-caption and v-tree-node-children as well.
This is basically how your HTML will look when you apply the toplevel style to an item:
<div class="v-tree-node v-tree-node-toplevel">
<div class="v-tree-node-caption v-tree-node-caption-toplevel">
node1, the best node!
</div> //end of caption
<div class="v-tree-node-children v-tree-node-children-toplevel">
...
Other divs (child nodes)
...
</div> //end of children
</div> // end of node
You were losing the arrow icon because it's the background image of the v-tree-node. Each v-tree-node (where canHaveChildren() == true) has a background style (transparent, with the arrow image).
.v-tree-node {
url("../reindeer/tree/img/arrows.png") no-repeat scroll 6px -10px transparent;
}
If you override the background style on a v-tree-node, you will lose the image (the arrow). What you could do instead is to use the background-color style to only override the transparent part, but as I pointed out earlier, the v-tree-node element contains both the caption and children elements, so your background color will be visible behind any child nodes (and slightly to the left, even if you style the background-color of the child node).
I'm working on a JQuery Mobile app. I need to enlarge the font used for the title text. Whenever I enlarge the text size, the height of the ui-header bar grows. I do not want it to grow. Instead, I want the ui-header to stay the same size of the default ui-header. I just want to enlarge the text size. Currently, I have the following:
.t1 { color: blue; font-size:24pt; font-weight:normal; }
.t2 { color: white; font-size:24pt; font-weight:normal; }
<div data-role="header" data-position="fixed">
Back
<h1><span class="t1">My</span><span class="t2">App</span></h1>
</div>
How do I change the font size without making the header grow?
You also have to modify .ui-header .ui-title rule changing top and bottom margin values. For example:
.ui-header .ui-title {
margin: 0 30% 0;
}
http://jsfiddle.net/Pwqtm/1/
I need to have elements that are dragged from left-hand side area to be always on top. And they are when I first drag them from left area, however if I drop them into Box 2 and then decide to drag to Box 1, the item I drag appears below Box 1.
Confused? Here's DEMO of what I'm talking about.
Yes, I have added zIndex -- did not help.
Looks like you are doing some editing. :)
The solution is set the two boxes to the same z-index, and then lower the z-index of the sibling (the box the card is NOT over) using the "start" event. The "stop" event should set them equal again. Of course the draggable itself needs a higher z-index.
You can also try the stack option.
EDIT: Working example. Note that its actually the draggable drop event that needs to set the z-indexs equal again.
You'll need to make these changes (omit asterisks in your code, of course):
In dragdrop-client.js
// make the new card draggable
newCard.draggable({
zIndex: 2500,
handle: ".card",
stack: ".card",
revert: "invalid",
start: function() {
$(this).effect("highlight", {}, 1000);
$(this).css( "cursor","move" );
**var $par = $(this).parents('.stack');
if ($par.length == 1) {
console.log('in stack');
$par.siblings().css('z-index', '400');
}**
},
stop: function() {
$(this).css("cursor","default");
$(".stack").css('z-index', '500');
}
});
// make the new stack droppable
newStack.droppable({
tolerance: "intersect",
accept: ".card",
greedy: true,
drop: function(event, ui) {
**$(".stack").css('z-index', '500');**
card = ui.draggable;
putCardIntoStack(card,stackId);
}
});
In dragdrop-client.css
.stack {
width: 300px;
border: 1px dashed #ccc;
background-color: #f5f5f5;
margin: 10px;
float:left;
**z-index:500;**
}
I do what two7s_clash recommends for my drag-drop when elements are inserted dynamically. We have some elements being inserted over a canvas and then we want to drag n drop over everything:
start: function(e) { $('element').css('z-index', -1)}
stop: function(e) { $('element').css('z-index', 0)}