I'm trying to use a tiny context menu library, to provide context menu to events, however, the menu position always shows off in the bottom corner instead of by the event were "right-click" took place.
In this example, I have tried using FullCalendar with React component, I have also tried using vanilla javascript version and got the same issue.
Here is my sandbox
https://codesandbox.io/s/fullcalendar-react-7nggi?fontsize=14
Any ideas on how I can go about fixing such issue?
I managed to resolve this issue with a workaround, by taking the coordinates of right-click event and re-position the menu accordingly.
$('.fc-event').on('contextmenu', function (e) {
$('.bootstrapMenu').offset({ top: e.pageY, left: e.pageX })
});
Related
This one is getting tricky for me.I have the google map in my page which is working properly ,above it lies a canvas. I need to make the google map clickable .i.e when i click on the canvas ,the map should behave normally .I have added pointer-events:none;attribute.It works properly in Firefox ,chrome and IE11.
However my requirement is I need to make it clickable in IE9 on wards,which am unable to replicate. How to do that?
If any one can replicate the behavior in a fiddle ,that will be really helpful to me.
There's an old jQuery hack that simulates pointer-events:
Listen for a click event on the canvas and in the click handler:
Hide the canvas: $(this).hide();
Ask the document to get the element at the clicked xy: var $map=$(document.elementFromPoint(event.clientX,event.clientY); (Adjust clientX/Y by any offset to the map/canvas elements) If the map is the only element under your canvas, you could define $map at the start of your app and avoid this step.
trigger the same event on the google map: $map.trigger(event);
redisplay the canvas: $(this).show();
I am using kinetic-v4.3.0-beta2.js
I want to handle mobile touch event on group for ios & android.
I am binding event such as following
group.on('touchstart', function (evt) {
$('#onpopMenu').popup("open", { x: leftPosition, y: topPosition });
});
I tried 'touchend', 'touchstart' and 'tap'
Got partial success in "Tap" but in that case, shape is draggable so tap event is not properly fire because object will move from it's place.
but if shape is not draggable then it will work fine.
I tried 'touchend' and 'touchstart' event also but popup menu is close after event fire in iOs and android as I am opening Jquery Mobile Popup by Touching group!
The popup menu will only open for 2-3 seconds when the touchstart event fired.
Anyone faced the same problem with kinetic JS Mobile events? How to handle only "Click" or "Touch" event with it.
I checked this http://www.html5canvastutorials.com/kineticjs/html5-canvas-mobile-events/ for reference but had no luck!
I am developing application with Phonegap + JQM + Kinetics JS
Thanks in advance!
Keep in mind that your application is running inside a webview. This is why you've got these 2/3 seconds of delay on touch/click event.
This is why in all my PhoneGap dev, I use Fastclick.js. FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.
You can find it here https://github.com/ftlabs/fastclick.
It's easy to use (if you're using jQuery) :
<script type='application/javascript' src='/path/to/fastclick.js'></script>
<script>
$(function() {
FastClick.attach(document.body);
});
</script>
I made a jsfiddle for you to test out the click/touch events.
From what I understand, you have a Kinetic.Group node that is draggable but you want to open up a popup using jquery mobile.
You are right that when you drag an object, the tap event does not fire. But you said otherwise the tap event works fine if the shape is not draggable. This leads me to believe:
You want a popup on "tap"
You want a popup on "dragend"
If so, all you need is to use both events like this:
group.on('tap dragend', function (evt) {
$('#onpopMenu').popup("open", { x: leftPosition, y: topPosition });
});
Please let me know if my assumptions are wrong, and I can work with you to get the right solution. I am guessing when you want to popup, so if you let me know exactly when you want a popup to occur that will help a lot.
You might want to also look into using evt.cancelBubble = true; http://www.html5canvastutorials.com/kineticjs/html5-canvas-cancel-event-bubble-propagation-with-kineticjs/
I have created a jQuery window scroll-bar detector but when I re-size the browser window, in-turn changing the scroll-bar status, either from visible to not visible or vice-versa, the status notifier remains static. How can I keep the status notifier continuously updated on every re-size in a simple way without AJAX calls, via strictly javascript?
For further context, I am basically trying to come up with a solution for semi-infinite-scrolling if the content dosn't exceed the window size. If one of you guys figures this out it will be very benifical for a lot of UI developers trying to incorporate the highly demanded and popular load-on-scroll effect. Thanks in advance. Here is my demo.
$(window).resize(function () {
///????
});
You can use so-called functions to achieve this. In Javascript, functions are actually objects and can be simply stored in variables and passed around as parameters.
Take this example:
//first define your function - maybe give it a better name than I did :)
var detectScrollbar = function () {
if($(window).height() >= $(document).height()){
$('#statusNotifier1').fadeIn("slow");
$('#statusNotifier2').hide();
}
else
{
$('#statusNotifier1').hide();
$('#statusNotifier2').fadeIn("slow");
}
};
//call it initially
detectScrollbar();
//pass it to .resize() so it will be called when the event fires
$(window).resize(detectScrollbar);
You could put this whole thing into your $(document).ready();.
Have fun with the jsFiddle Demo. I hope all those sad UI developers will be dancing around with smiles on their face, celebrating :).
I am using Tabs and CCK Fieldgroup Tabs module to put node GMap CCK location map in a tab.
When I put GMap location map in one of the node tabs (Tabs module) other than first one (default), the map view does not centre properly the marker. It slides one width off the screen to the east (right). I need to press "scroll right" arrow once on the map controls to have the marker centred properly.
I have read all the Drupal threads touching this issue and all I found are suggestions to play with resizeMap() function.
Anyone knows where exactly to play with it? Where to apply the change to the code to accomplish the task in the least invasive way?
Attached screenshots:
What solved my problem was to override tabs ccs styles from drupal-tab.css:
.ui-tabs-hide {
left:-15000px;
position:absolute;
top:-15000px;
visibility:hidden;
}
to:
.ui-tabs-hide {
position:absolute;
visibility:hidden;
left: 50%;
top:-15000px;
}
in my theme css.
The crucial part is to override left css property of position:absolute.
Works for firefox, safari and google chrome. Not tested in IE as I am sitting on Mac ;-)
If anyone knows better solution for this map display issue please share.
I've got a pure AS3 (no Flex) project that uses Flare to display and interact with a data visualization. I just implemented some panning behavior, so you can click and drag the visualization around, and now I'd like to give the user a visual indicator that this is possible, by switching the arrow cursor with a nice grabby-looking hand icon.
The user can click and drag at any time except when the mouse is over a clickable node (at which time the cursor swaps to a pointer - this behavior is already in place).
So...
1) Do I need to create my own custom bitmap/sprite or is there a palette of built-in cursors I can use? (I'm not using Flex.)
2) Is there a way to simply replace the default arrow with the pan cursor project-wide, or do I need to attach the swapping to mouse events on display objects? Can I use the stage object to make this behavior apply everywhere?
3) How do I perform the swap? Do I use the Cursor object directly or do I need to get involved with the CursorManager?
Any guidance, pseudo-code, or words of wisdom is greatly appreciated!
I don't think there's a CursorManger in flash, only flex. The way i'm doing is with a custom class which hides the cursor and drags the customized cursor at mouse_move. You have to set it to mouseChildren=false, otherwise will flickr or the buttons will not be clickable. One problem i found is with custom contextual menus. Try this link http://abrahamyan.com/2009/03/23/as3-cursormanager/
A few things I learned (all pretty newby, really). Firstly, there are some built-in cursor options you can set by setting Mouse.cursor to any of the options of MouseCursor.TYPE. The Mouse object is a singleton available app-wide, so anywhere you change it in your code, the change persists until another change is triggered.
For my simple case, I did this:
//on init, start with the "hand"
Mouse.cursor = MouseCursor.HAND;
//on clickable items, change to "pointer", then back to "hand"
myClickableNode.addEventListener(MouseEvent.ROLL_OVER, function(evt:Event):void {
Mouse.cursor = MouseCursor.BUTTON;
});
myClickableNode.addEventListener(MouseEvent.ROLL_OUT, function(evt:Event):void {
Mouse.cursor = MouseCursor.HAND;
});
The result is you always have the "hand" until you rollover something clickable, then you get the "pointer".