I would like to resize a dijit borderContainer on the onClick event of a titlePane but the resize function behavior is very strange (Resize() works only after the second click). This is the code I use :
<div data-dojo-type="dijit.layout.BorderContainer" id="borderContainer">
<div data-dojo-type="dijit.TitlePane" region="top" id="titlePane" title="Title">
<script type="dojo/method">
dojo.connect(dijit.byId("titlePane"), "onClick", function(){dijit.byId("borderContainer").resize()});
</script>
</div>
<div data-dojo-type="dijit.layout.TabContainer" region="center" id="tabContainer">
<div data-dojo-type="dijit.layout.ContentPane" id="contentPane" title="content" selected="true">
This is the content
</div>
</div>
Have you already seen this behavior? Your expertise would be very appreciated. Thanks
Actually, resize() works also the first time, but you cannot see anything happening because you should call resize() not immediately after onClick occurs, but after the titlePane's resize animation finishes (200 ms later by default), because otherwise borderContainer resizes to the same size.
This is what I suggest:
dijit.byId("titlePane").watch("open", function(param, oldValue, newValue) {
var animation = newValue ? this._wipeIn : this._wipeOut;
var handler = dojo.connect(animation, "onEnd", this, function() {
dijit.byId("borderContainer").resize();
dojo.disconnect(handler);
});
});
See a working example at jsFiddle: http://jsfiddle.net/phusick/E5CwV/
EDIT: On second thought, you can also create permanent connections on those two animations, but in my opinion it will lead to less readable code:
var titlePane = dijit.byId("titlePane");
var borderContainer = dijit.byId("borderContainer");
dojo.connect(titlePane._wipeIn, "onEnd", borderContainer, "resize");
dojo.connect(titlePane._wipeOut, "onEnd", borderContainer, "resize");
Related
I have several rowcharts that are connected to each other with dc.js.
These rowcharts have the x axis at the top in a different div, as explained here. However these rowcharts also implement filtering and removing, therefore, whenever I filter in one rowchart, the number of bars in the others reduce, but it maintains the size of the scrollable div, even though there are no bars below what is shown. Also, I'm pretty sure it is easy, but I haven't figured out how to put the reset button below the chart, because it shows between the chart div and the axis div, as seen below.
Is there a way to correct these issues?
This is what I have in each rowchart div:
<div id='axis'></div>
<div id="chart" style="overflow-y:auto; height:200px;">
<div>
<span class="reset" style="display: none;">Phylum seleccionado(s):
<span class="filter"></span>
<a class="reset" href="javascript:Chart.filterAll();dc.redrawAll();" style="display">Reset</a>
</span>
</div>
</div>
And this is what a I have in each rowchart in the main.js:
Chart
.fixedBarHeight(20)
.height(nonEmpty.all().length * 20 + 1)
.margins({top: 0, right: 20, bottom: 0, left: 20})
.width(600)
.xAxis(d3.axisTop())
.elasticX(true)
.ordinalColors(['#e41a1c'])
.gap(1)
.dimension(Dim)
.group(nonEmpty) //this removes the ones that don't match the filter of the other rowchart
.on('pretransition', function () {
Chart.select('g.axis').attr('transform', 'translate(0,0)');
Chart.selectAll('line.grid-line').attr('y2', Chart.effectiveHeight());
});
Partial answer here. Well, it answers what you asked but doesn't answer the next question I expect. :(
You are currently sizing the chart based on the number of bars, and you will need to resize the chart when the number of bars change.
This should be done in a preRedraw handler, but unfortunately preRedraw is currently fired after resizing is done. So currently you have to override .redraw():
dc.override(chart, 'redraw', function() {
chart.height(chart.group().all().length * 21);
return chart._redraw();
})
As for putting the info & controls after the chart, there are two issues and I was only able to solve one of them.
dc.js will append an svg element to the chart div. It'd be nice to have more control over this but I'm not sure what to do. For the moment, the easiest workaround is to re-append the info div:
chart.on('postRender', function() {
chart.root().node().appendChild(chart.select('div.info').node())
})
However, what you really want is probably to pull the info div out of the scrolling div, and I can't figure that out at the moment. The problem is that the chart expects the controls/info to be inside the chart div, and that's the same one that needs to scroll.
I tried to mess around with adding another scrolling div inside the chart div, and then moving the svg under it. This works, but it creates some annoying flashing.
Here's what I got so far. I may return to this later if I think of a better solution.
Update: controls outside of the scroller
To solve this right, we need the controls outside of the chart div.
We can port baseMixin.turnOnControls to a filtered event handler, and do the same showing and populating that the chart would do:
function turnOnControls(_chart, controls) {
var attribute = _chart.controlsUseVisibility() ? 'visibility' : 'display';
controls.selectAll('.reset').style(attribute, null);
controls.selectAll('.filter').text(dc.printers.filters(_chart.filters())).style(attribute, null);
}
function turnOffControls(_chart, controls) {
var attribute = _chart.controlsUseVisibility() ? 'visibility' : 'display';
var value = _chart.controlsUseVisibility() ? 'hidden' : 'none';
controls.selectAll('.reset').style(attribute, value);
controls.selectAll('.filter').style(attribute, value).text(_chart.filter());
}
function filter_function(controls) {
return chart => {
chart.hasFilter() ?
turnOnControls(chart, controls) :
turnOffControls(chart, controls);
}
}
chart.on('filtered', filter_function(d3.select('#info')));
Also, controlsUseVisibility and visibility: hidden is better when the controls will affect layout when shown/hidden.
(fiddle)
It's been a REALLY long time since using Flash and now have to use Adobe Animate for an HTML 5 Canvas project. I created the animation, set all the actions on the timeline to stop the timeline where I need it to be but now I need to know how to play the animation again from outside of another JS file (custom.js) inside my Animate JS file (animate.js)
I've read a ton of articles and most reference the scope of this being the problem.
Here's how I would imagine this would work.
// On scroll of div
<div onscroll="myFunction()">
// inside my custom.js
myFunction() {
this.gotoAndPlay(2);
};
Some have said to set a var of
var that=this;
And then calling that.gotoAndPlay(2);
Many thanks
Animate declares a global (window) variable exportRoot on publish that points to the root timeline.
As a demonstration, if you put this code on the root timeline:
alert(exportRoot === this);
You should see "true".
Thanks to ClayUUID
<script type="text/javascript">
function playTimeLine () {
//alert ("working");
exportRoot.gotoAndPlay(30);
}
</script>
<button onclick="playTimeLine()">PRESS</button>
I have OverlayTrigger with trigger='hover'. Expected behaviour here would be hiding popover when I moved cursor out of it. However, library hides popover when I move cursor out of button, i.e.
<OverlayTrigger trigger='hover' placement='left' overlay={
<Popover>
... content ...
</Popover>
}>
<Button bsStyle='default'>name</Button>
</OverlayTrigger>
So, when cursor out of button on popover content (if I want to click on link there for instance) it disappears.
Any solutions for this?
I am just starting to learn React. My solution to this is to set trigger option as "manual", and add onMouseOver={fn} and onMouseOut={fn} to manually show and hide the PopOver content. Here is my sample code:
var popOver_timer;
var Pop = React.createClass({
mixins: [TimerMixin],
mouseOverhandler: function() {
this.clearTimeout(popOver_timer);
this.refs.pop.show();
},
mouseOuthandler: function() {
popOver_timer = this.setTimeout(
()=> {this.refs.pop.hide();},
50
);
},
render: function() {
return (
<div onMouseOver={this.mouseOverhandler} onMouseOut={this.mouseOuthandler}>
<OverlayTrigger ref="pop" placement="bottom" trigger="manual" container={document.body} overlay={
<Popover onMouseOver={this.mouseOverhandler} onMouseOut={this.mouseOuthandler}>
This Page
</Popover>}>
<a href={this.props.popUsrUrl}>
<button>PopOver</button>
</a>
</OverlayTrigger>
</div>
);
}
});
Besides react-boostrap, I also require react-time-mixin and use the react-setTimeout. It is because when your mouse moves from the button to the popover content, the onMouseOut will be triggered first, then the onMouseOver. Therefore, a time delay for onMouseOut should be set. I set it to 50 ms. Hope it helps.
I am new to swiffy.
It works great the first time an animation is called but I need to reuse the animation later in the same page (a web app). How should I do?
To isolate the problem, I have tried something very basic that does not work:
<button onclick="stage.start();">Start</button>
<div id="swiffycontainer" style="width: 400px; height: 400px">
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject);
</script>
Pressing on the button for the first time does start the animation
When the animation is complete, pressing again does nothing.
Any help?
TIA
From memory you need to do some gotoandplay stuff in your flash file to send the animation back to the start and call into some flag to trigger that with stage.setFlashVars('flag=' + value);
However a quicker solution is to reload the swiffy object.
make your onclick point to a replay function
<script>
var stage;
var swiffyobject = "....whatever";
//your initial load goes here
stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject);
function replay(){
if(stage)
stage.destroy();
stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject);
stage.start();
}
</script>
<button onclick="replay()">Start</button>
It'd be simple to add var myFx = new Fx.Slide(element); to window.addEvent('domready'...), but because I am loading "sub-pages" using AJAX, the mootools objects of these elements inside these pages need to be instantiated after have loaded fully. If I tried using domready, the element would not be found, simple because it doesn't exist yet.
I've been working around this with setTimeout(function() { ... }, 500);, but this leaves a 500ms delay between page load and element effect creation.
i.e.
<div id="foo">TextTextText</div>
<script type="text/javascript">
setTimeout(function() {
var myFx = new Fx.Slide('foo').slideOut();
}, 500);
</script>
When the page is loaded, there is a clunky 500 ms before the element goes to its default state of... erm... "slided in". (slidded in?)
A workaround exists for .hide() and .show() effects, though, since I can simply write in the html <div id="foo" style="display: none;">
I've tried approximating the "slid in" state of an element with <div id="foo" style="height: 0px; overflow: hidden;">, but then the element stays hidden like that forever, and slide() doesn't do a damn thing on it.
I feel as though I am missing something simple.
Have you tried putting the Fx.Slide instantiation in the onComplete method of your XHR call ?
Example :
var myRequest = new Request({
method: 'get',
url: 'requestHandler.php',
onComplete : function() {
var myFx = new Fx.Slide(element);
// etc ...
}
});
I ended up resolving (to my satisfaction, anyway) the problem with a quick workaround.
<div id="foo" style="display: none;">TextTextText</div>
Click me!
<script type="text/javascript">
setTimeout(function() {
var myFx = new Fx.Slide('foo').slideOut();
$('toggler').addEvent('click', function() {
if ($('foo').getStyle('display') == 'none') $('foo').setStyle('display', 'block');
myFx.slideIn();
});
}, 500);
</script>
Element is hidden in initial state, and the slideOut() effect is run after the delay, but user won't notice since element is hidden. When called, element display is set to block (if not set already), and slideIn() is called.
Set initial state:
var myFx = new Fx.Slide('foo').hide();
Then later, when you want it to appear:
myFx.show().slideIn();