As stated in the title i want to remove the mousewheel capability of the dijit.form.Slider since it sometimes triggers the slider when scrolling the page and the cursor hits the slider.
But it seems that the onmousewheel events are connected in the dojo source and we cannot replace or modify the dojo files.
Anyone knows a short solution (optimally a declarative one)?
Thanks
The quickest way to do this would be to clobber the _mouseWheeled method of the slider widget.
Declarative example:
<div dojoType="dijit.form.VerticalSlider" name="vertical1" id="slider2" ... >
<script type="dojo/method" event="_mouseWheeled"></script>
...
</div>
Programmatic example, single instance:
dijit.byId('mySlider')._mouseWheeled = function() {};
Programmatic, ALL instances:
dojo.extend(dijit.form.HorizontalSlider, {
_mouseWheeled: function() {}
});
(This will cover both Horizontal and Vertical sliders since VerticalSlider inherits from HorizontalSlider.)
Related
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 a top 10 chart that works (using a fake group) how all other bar-charts work with cross-filter. If I select one of the things on the top 10 chart it filters all the other charts which is not what I want to have happen. I just want the chart display the chart.title text (the hover-text) while disabling its ability to be clickable.
So far I've looked into dc.js itself to see if there was a configuration for the bar-chart to get what I need and I couldn't find anything.
I've tried using this
ng-click="stopClick($event)"
$scope.stopClick = function (event) {
event.preventDefault();
event.stopPropagation();
};
That didnt do anything to the chart.
I've tried using inline css for the chart
style="pointer-events: none;"
But that disables the hover-text completely.
Any help would be greatly appreciated.
Huh, you would expect .brushOn(false) to do this, but I guess it has no effect for bar charts with ordinal x scale.
Instead, you can disable the event handler manually:
chart.on('pretransition', function(chart) {
chart.selectAll('rect.bar').on('click', null);
});
I wasn't having luck with the chosen answer but Gordon's answer to a different question did work https://stackoverflow.com/a/50702979
chart.onClick = function() {}
I am using the Alloy Diagram Builder to create and display network topology.
I would like to remove default click and drag events attached to each nodes, so viewers would not have the ability "build" diagrams but only view diagrams that I have generated.
http://alloyui.com/examples/diagram-builder/real-world/
I have tried these but it does not work.
// detach click event to all nodes with class aui-diagram-node.
Y.all('.aui-diagram-node').detach("click");
// unbind
$(".aui-diagram-node").each(function(){
$(this).unbind();
});
I believe the event is attached to the container .aui-diagram-builder-drop-container via delegate() and the event would be mousedown.
Merely by accident I found a hack that might work for this. I was adding tooltips to my page on which I had a diagram builder, well apparently the tooltips layer a div over the page and simply set the opacity on it to be clear and the object still resides. After a tooltip had come up i was unable to interact with the piece of the diagram builder the tooltip had popped up over.
So based of this concept, why not try overlaying a div over the entire canvas of the diagram and give it a high z-index so that it sits on top. It should effectively not allow interaction with the canvas.
Yes it's a kludge but it just may work.
To make a DiagramBuilder read-only, you can detach() events from all of its children recursively:
/*
* Readonly the diagram
*/
function ReadonlyDiagram(diagram) {
function detachRecursively(node) {
node.get('children').each(detachRecursively);
// You may also want to set the cursor to the default since it will
// change based on which elements the mouse is over.
// node.setStyle('cursor', 'auto');
// You may want to detach specific events such as 'click' or
// 'mousedown' if you do not want to disable all events.
node.detach();
};
diagram.on('render', function (event) {
detachRecursively(diagram.get('boundingBox'));
});
}
Now, you must be post diagramBuilder object to ReadonlyDiagram function like below codes:
YUI().use('aui-diagram-builder', function (y) {
var diagram = new y.DiagramBuilder(
{
availableFields: data,
boundingBox: '#' + containerId,
fields: nodes,
srcNode: '#' + builderId
}).render();
diagram.connectAll(connections);
if (callBackDiagram !== undefined) callBackDiagram(diagram);
if(isReadonly === true) ReadonlyDiagram(diagram);
});
});
Reference
Currently I have a page which on load scatters draggable divs randomly over a page using math.random
Using media queries however the page uses packery to display the same images for browser widths under 769px in a grided fashion.
I had the idea that it could be interesting to create a 'sort/organize' button which would rearrange these divs using packery and remove the draggable class already applied, however i have no idea if this is possible or how to go about it. If there is any method of animating this process that would also be a bonus!
If anyone could at the very least point me in the right direction i would be extremely thankful!!
Hopefully this gives you a bit of a starting point.
I would read up on JQuery as it has some useful helpers for DOM manipulation.
I don't think this is the most efficient way to do it, and I think you will need to rethink your test harness for doing this in the future, but hopefully this gets you started.
Firstly I've added a button to trigger the sort
<div class="rotate" id="contact">Contact</div>
<div id="logo">Andrew Ireland</div>
<button id="sort">sort</button>
Then updated the script to override the css setting to switch between draggable view and item view.
// general wait for jquery syntax
$(function(){
// trigger the layour to sort get the packery container
var container = document.querySelector('#container.packery');
var pckry = new Packery( container );
//button function
$("#sort").click(function(){
//Hide all the dragged divs
//ui-helper-hidden is a jquery ui hider class
if($('.box').css('display') == 'block') {
$('.box').css({'display':'none'});
//Show all the item class's
$('.item').css({'display':'block'});
//show the container
$('#container').css({'display':'block'});
// trigger the layour to sort
pckry.layout();
} else {
//hide all the item class's
$('.item').css({'display':'none'});
//hide the container
$('#container').css({'display':'none'});
//show the draggable box's
$('.box').css({'display':'block'});
}
});
$( ".pstn" ).draggable({ scroll: false });
$(".pstn").each(function(i,el){
var tLeft = Math.floor(Math.random()*1000),
tTop = Math.floor(Math.random()*1000);
$(el).css({position:'absolute', left: tLeft, top: tTop});
});
});
As I said this is more to get started. The packery documentation details how to trigger its layout functions so another approach would be to only have the draggable elements, and put these inside a packery container. Then when you want to sort them you can just trigger that the packery.layout() function.
I hope this is helpful, I am only just getting started on stack overflow so any feedback would be appreciated.
As the title says. I want to make a list of div elements inside a div. I want to be able to scroll the list up and down, and when the list is not scrolling anymore, i want to be able to click the listed elements do to something. I cant figure out how to do this.
the touchmove event executes whenever the user touches the div, even if the div its scrolling. THen i cant figure out how to make let the program know that the div isnt scrolling anymore, so the next touch on the elements will trigger a non scrollable event.....
EDIT:
what i have so far is this... However this is a quick "fix" and its not working as intended. For example if you scroll quickly up and down, then the div will think you pressed on one of the elements..
exerciseWrapper is the elements inside the scrolling div. Each element is wrapped around exerciseWrapper.
$('.exerciseWrapper').on('touchstart',function(){
touchstart=true;
setTimeout(function(){
touchstart=false;
}, 100);
});
$('.exerciseWrapper').on('touchend',function(){
if(touchstart)
{
$('.exerciseWrapper').not(this).css('border-color','black');
$(this).css('border-color','orange');
}
});
Ok so i finally figured this one out.. Reason why i couldnt wrap my minds around the solution on this, was because i couldnt get other events then eventstart and event end to work... At the time of writing i still cant get the other events like eventcancel and eventleave to work. However eventmove works and i solved the problem using this event. eventmove keeps updating the element its linked when you move your finger. Then i had a variable of touchmove to constantly be true if i am scrolling my div (with touchmove event). WHen i stop moving i can clik on selected element again and use a normal eventstart event.. This is my working code:
var touchmove=false;
function AddExercisesEvents()
{
$('#exerciseMenu').on('touchmove',function(){
touchstart=true;
$('h1').text("move");
});
$('.exerciseWrapper').on('touchend mouseup',function(event){
event.stopPropagation();
event.preventDefault();
// $('.exerciseWrapper').off();
if(event.handled !== true)
{
touchstart=false;
//ENTERING editExercise Menu..!
if(!touchstart)
{
//insert magic here
alert($(this).attr('id'));
}
}
return false;
});
}