In my Ionic2 app, I have an on-tap event on a div inside the <ion-content> block. The page is larger than the viewport and therefore should scroll. However, when trying to scroll by touching the div with the on-tap event the page doesn't move (it does move when scrolling outside the div).
<ion-content>
scrolls
<div on-tap="tapped()">
doesn't scroll
</div>
scrolls
</ion-content>
Does the on-tap event stop event propagation all together?
What am I missing?
Related
I have a <div> in an amp-project (the header of the page) and I like these things happen to it:
1- on scroll down -> the div animates up and out of the view
2- on scroll up -> the div animates down and into the view
I know I have to mix up amp-animation and position-observer but I can't find a proper tutorial in amp site.
There's a collapsible sidebar on my webpage. When I collapse it, I want the svg element on the page to resize to take up all of the new blank space.
The function that resizes the svg is working. However, it is not being triggered when the sidebar is collapsed.
I have tried:
d3.select("#mydivHoldingSVG").on("resize", MyResize)
Where #mydivHoldingSVG is a <div> and MyResize is the function to resize the svg.
When the sidebar is collapsed, the <div> element increases in size (as inspected via Google Chrome developer view), which I thought constituted a "resize".
If the window is resized, that is, if I use:
d3.select(window).on("resize", MyResize)
Then the svg resizes correctly.
I have looked at the list of standard events to see if one can be applied to the div element (#mydivHoldingSVG) but I'm not seeing an obvious "when a div element changes" event.
Is there an eventListener that can be added on a <div> element being resized or changed?
The gist is that you should do it another way: the resize event only pertains to the window and will not fire on any other element.
The cleanest way to solve this problem would be call MyResize when you call whatever function is collapsing your sidebar, rather than trying to indirectly listen for the sidebar being collapsed.
In my app, I have a fixed sidebar that can scroll its overflow content vertically. When I get to the end of the scrollable area, the scroll event bubbles to the main window. I would like to prevent that bubble from happening. I've tried a couple things
<div id="sidebar" can-scroll="scrollMe">
<div id="sidebar" can-onscroll="scrollMe">
I have the scrollMe function in my component's scope, but neither one of the above options binds.
How do I bind to scroll event, or is it even possible using a can-EVENT?
Looks like this was my mistake. The can-scroll event works. My CSS code was set up to allow scrolling on the parent element.
So the simple answer is yes, it's possible to use can-scroll.
Is it possible to prevent a uiwebview from scrolling around, but to also have a div that can scroll?
I have a jquery navbar and want a scrollable div underneath with many images. I'd like to be able to scroll through the images while the navbar remains fixed.
Initially the whole webview was moving around so I used this to stop all scrolling.
webView.scrollView.scrollEnabled = NO;
but now I want the div to still be scrollable.
I have the div style set to
overflow:auto
but it does not seem to move.
I had the wrong div set to overflow:auto.
So it worked after setting the correct one to scroll.
I am using jquery layout plugin and have the following situation that I cannot find a solution. How do I make the center pane increase its size permanently by dragging the div beyond the bottom border.
I have a left pane and a center pane. I dynamically generate div
when the user clicks on the left pane. The divs are generated and
dropped on the center pane. The divs are draggable and resizable.
Everything works fine with dragging and resizing on the visible center
area. The moment I drag the div beyond the bottom, the scroll bar on
the center pane appears and it seems the center pane is extending to
accommodate the new position of the dragged div. But the moment I try
to resize the div or add another div, it jumps to the top section of
the div and resets the scrollbars. I checked the center div height in
firebug and it remains at the same height when initialized
even after dragging the new div beyond the bottom.
Here is the test page html code.
Just copy/paste entirely into a html page. On the left pane, click on the "Add new" button will add new div that is draggable and resizable.
Click on "Add new"
Drag the newly added div beyond the bottom of the center pane.
The center pane shows the scrollbar as it is suppose to.
If you check the center div's height in firebug, it is not changing
Now try resizing the newly added div by dragging its handle
It jumps to the top and the center box loses its scrollbar.
I could not paste the complete html page so here is the reference to the code at the bottom of this thread
http://groups.google.com/group/jquery-ui-layout/browse_thread/thread/ca922aa44c0048ee
And here is the test link http://jsfiddle.net/yZc63/
I am surprised no one has come across this situation before? Even without the layout plugin, my solution is not very pretty. In order to simulate the page without the layout plugin, I had to keep the top and the left pane using position:fixed property in css. And there is no center div at all. I add the new div directly to the body of the html. The reason is I don't want to see additional scrollbars on top the browser scrollbars. In other words the center pane should scroll when the browser scrollbars are moved. I am attaching the solution so you have an idea.
I am open to any solution even without the layout plugin if i can simulate the previous attached file using any other approach. i am attaching my page without the layout plugin but am not sure if that is the only elegant solution left.
You can check the solution here http://jsfiddle.net/c7wrT/
Is adding the dynamic div directly to the html body a good approach?
I ran into same situation and this answer helped.
https://stackoverflow.com/a/33004821/2139859. Updated Fiddle: http://jsfiddle.net/bababalcksheep/yZc63/11/
$(".removalbe-recom").draggable({
appendTo: "body",
helper: "clone",
revert: "invalid",
cursor: "move",
containment: "document",
zIndex: 10000,
scroll:false,
start: function (event, ui) {
$(this).hide();
},
stop: function (event, ui) {
$(this).show();
}
});