I am using GSAP v3 with ScrollMagic v2.0.7.
The problem I face is that after the animations are finished and I scroll up (reverse: false), it correctly registers that I don't want to execute the animations again on reverse, but it creates a padding-top equal to the duration of the scene:
const controller = new ScrollMagic.Controller();
const scene = new ScrollMagic.Scene({
triggerElement: "#responsive-divider",
duration: "100%",
triggerHook: 0,
reverse: false
})
.setTween(action)
.setPin("#responsive-divider")
.addTo(controller);
In this case, the height of the element with the id of "responsive-divider" is 311px, so the class "scrollmagic-pin-spacer" gets a padding-top: 311px;
If I inspect element and remove padding-top then everything is OK.
Why is this happening? Is there a way to prevent this?
PS1: if I do not disable "reverse" then it works just fine. But in this case I don't want to get the reverse animation.
PS2: I found a way around this but I don't know if its a hack or the solution. On my timeline I used the "onComplete: removePadding", and I did the following:
function removePadding() {
document.querySelector(".scrollmagic-pin-spacer").style.paddingTop = null;
}
Feels a little bit hacky to me.
Thanks in advance!
Adding triggerHook: 0 resolved the problem for me!
Related
My very first question to stackoverflow, so please be kind.
I have two shapes on a createjs stage. The first one background covers the whole stage and has a listener on click defined. I want to put another shape on this one and this one should not trigger the click-listener defined on the background.
In the following example a click on the red circle triggers the listener of background.
var stage = new createjs.Stage('c');
var rect = new createjs.Shape();
rect.graphics.beginFill('#0000ff').drawRect(0, 0, 50, 50);
var background = new createjs.Shape();
background.graphics.beginFill('#000000').drawRect(0, 0, 500, 500);
background.alpha = 0.7;
background.on('click', function () {
circle.visible = !circle.visible;
stage.update();
});
var circle = new createjs.Shape();
circle.graphics.beginFill('#ff0000').drawCircle(225, 225, 50);
// circle.on('click', function () {});
stage.addChild(rect);
stage.addChild(background);
stage.addChild(circle);
stage.update();
https://codepen.io/anon/pen/rKmPOY
I found, that if I put an empty click listener on the circle, I have what I want, but this feels awkward.
What is the right approach here? This shouldn't be a bubbling issue since background and circle are siblings. Or am I getting this completly wrong?
If something doesn't have a click listener, it will not be evaluated when the mouse is clicked. This is definitely a desired behaviour (it is much more annoying to have things you don't want blocking clicks).
Your workaround adding an empty listener is fine, and pretty typical.
The only other option I can think of is to check what is under the mouse on click, and filter it manually, which is way more work.
Cheers,
I am building a slide menu.
The menu is long and I need to be able to scroll inside of it, so I have set overflow-y: scroll on it.
I am using -webkit-transform (and variants on other browsers) as the transition property.
Now I can't scroll inside the div, using the scrollwheel when on top of the div will make the whole page scroll.
If I change the menu's behavior and transition the right property (setting the menu to right: -320px and animating it back to right: 0), the scroll works.
This bug only happends in Safari, it works fine in Chrome and other browsers. Also works on iOS.
Anybody know a workaround? Anyone experienced this issue before? I can't seem to find any info on it. Thank you.
I had the same issue with the difference that I use an animation instead of a transition and overflow: auto instead of overflow: scroll.
This fixed the issue for me (el is the DOM element to which the animation is applied):
function fixSafariScrolling(event) {
event.target.style.overflowY = 'hidden';
setTimeout(function () { event.target.style.overflowY = 'auto'; });
}
el.addEventListener('webkitAnimationEnd', fixSafariScrolling);
I'm using the dojo mobile scrollable view.
The view scrolls,, but when I release it, the view goes back to top and I can not know why.
Here is an extract of my code :
var node = domConstruct.create("div", {
id: "dtm-dialog-summary-scrollableView",
style: "padding-top: 40px;"
});
var refNode2 = dom.byId("dtm-dialog-summary");
domConstruct.place(node, refNode2);
var view = new dojox.mobile.ScrollableView(null, "dtm-dialog-summary-scrollableView");
view.startup();
//add a component (and many others in the scrollable view)
var divDetailledPlot1 = domConstruct.create("div", {
"class":"div-detailled-plot",
"id":"detailled-display-1"
}, view.containerNode);
Thanks for your help
I've put here:
http://jsfiddle.net/adrian_vasiliu/yjuWz/2/
a modified variant of your code which works for me.
Although I don't think this can have caused the trouble you describe, I removed the padding-top that you set on the ScrollableView, because this (unfortunately) forbids the scrolling to go completely to the bottom. I think this limitation will be removed in Dojo 2. Instead, as you can see in the jsfidle, I have put inside the ScrollableView an intermediate div with the needed padding-top:
var divDetailledPlot1Top = domConstruct.create("div", {
...
style: "padding-top: 40px;"
}, view.containerNode);
If it still does not work for you, please tell the Dojo and browser/OS version, and provide a runnable sample to reproduce.
Edit: alternatively, just style the padding directly on the containerNode of the ScrollableView:
.mblScrollableViewContainer {
padding-top: 40px;
}
This is implemented in http://jsfiddle.net/adrian_vasiliu/yjuWz/3/.
I'm creating a seemingly simple dojo 1.8 web page which contains an app layout div containing a tab container and an alarm panel below the tab container. They are separated by a splitter so the user can select how much of the alarms or the tabcontainer they want to see.
Here's the example on jsfiddle:
http://jsfiddle.net/bfW7u/
For the purpose of the demo, there's a timer which grows the table in the alarm panel by an entry every 2 seconds.
The problem(s):
If one doesn't do anything and just lets the table grow, no scroll bar appears in the alarm panel.
If one moves the splitter without having resized the browser window first, the splitter handle ends up in a weird location.
Resizing the browser window makes it behave like I would expect it to begin with.
Questions:
Am I doing something wrong in the way I'm setting things up and that's causing this problem?
How can I catch the splitter has been moved event (name?)
How do I resize the splitter pane to an arbitrary height? I've tried using domStyle.set("alarmPanel", "height", 300) and this indeed sets the height property... but the pane does not resize!
Any help greatly appreciated!
I forked your jsFiddle and made some modifications to it: http://jsfiddle.net/phusick/f7qL6/
Get rid of overflow: hidden in html, body and explicitly set height of alarmPanel:
.claro .demoLayout .edgePanel {
height: 150px;
}
This tricky one. You have two options: to listen to splitter's drag and drop or to listen to ContentPane.resize method invocation. Both via dojo/aspect:
// Drag and Drop
var splitter = registry.byId("appLayout").getSplitter("bottom");
var moveHandle = null;
aspect.after(splitter, "_startDrag", function() {
moveHandle = aspect.after(splitter.domNode, "onmousemove", function() {
var coords = {
x: !splitter.horizontal ? splitter.domNode.style.left : 0,
y: splitter.horizontal ? splitter.domNode.style.top : 0
}
dom.byId("dndOutput").textContent = JSON.stringify(coords);
})
});
aspect.after(splitter, "_stopDrag", function() {
moveHandle && moveHandle.remove();
});
// ContentPane.resize()
aspect.after(registry.byId("alarmPanel"), "resize", function(duno, size) {
dom.byId("resizeOutput").textContent = JSON.stringify(size);
});
Call layout() method after changing the size:
registry.byId("alarmPanel").domNode.style.height = "200px";
registry.byId("appLayout").layout();
can anyone please explain, with an example if possible, how to load dynamic content inside an iscroll div and assign a new height to it?
I can get it to work but I can't control the height of the scroll for the new content.
I'm new to all this and have no clue were to start.
here's what I'm working on:
http://homepage.mac.com/jjco/test/index7.html
when the page is loaded you see the scroll bar where there's no content...
clicking on print/damm (shows the height I originally set for this content)
clicking on print/fcbarcelona (maintains the same height and position of the scroll you used before) as you see it's not working as it should.
obviously, I don't want the scroll to be there when it's not necessary.
any help would be greatly appreciated.
It's better to use the refresh() method in iScroll, which will recalculate the height.
myScroll.refresh();
I had a similar problem, and just refresh() didn't help, so didn't help destroying and recreating iScroll. In my case I was loading a lot of elements into iScroll div. What did solve the problem is setTimeout(). As MASTERING THE REFRESH() METHOD said adding even 0ms to a setTimeout() would solve a lot of problems. In my case it was 500ms. =
here is code sample:
var myScroll;
function createIScroll(){
myScroll = new iScroll('wrapper');
}
function iScrollRefresh(){
setTimeout(function(){
myScroll.refresh();
}, 500);
}
$ajax(){
//receiving data
}
function someFunction(){
//dynamic content is created
iScrollRefresh();
}
My problem was that refresh() function was executed before content was inserted into DOM, so increasing timeout helped. I hope it helps to beginners like me.
try this, when you insert your new data into iScroll do these steps
//myScroll is a global variable you initialize iScroll on
myScroll.destroy();
myScroll = null;
loaded();//this is a functions where you have have your iScroll initializer
To watch height changes:
setInterval(function () {
var newScrollerHeight = $scroller.innerHeight();
if (newScrollerHeight !== prevScrollerHeight) {
prevScrollerHeight = newScrollerHeight;
myScroll.refresh();
}
}, 500);
Take a look at iScroll4
In iscroll.js, I see experimental option: checkDOMChanges: false,// Experimental You can enable and use it.