Im creating an object to drag with "touchmove" in Y but i want it only to be dragged in one direction, up!
But it also makes it go down.. How can i solve this?
In each interval of Y some actions will take place there and the objective is to drag the item only in one way disabling the possibility to the user dont go to the previews actions.
Here is the code:
var moveMe = function(e) {
e.preventDefault();
var orig = e.originalEvent;
var y = event.touches[0].pageY;
if(y<=600 && y>420){
$(this).css({
top: orig.changedTouches[0].pageY
});
if(y<570 && y>=540){
}else {
if(y<540 && y>=510){
}else {
if(y<510 && y>=480){
}else {
if(y<480 && y>=450){
}else {
if(y<450 && y>=420){
}
}
}
}
}
}
};
$("#draggable").bind("touchstart touchmove", moveMe);
Not tested, but is it possible that you have a mistake in the following line?
var y = event.touches[0].pageY;
shoudn't you use here "e" instead of "event"?
hope it helps.
Related
I am having two viewers in my application and want both of them to orbit the same with the same positions and camera angles and also follow the same while zooming in and out.
Is there any way?
I've applied the below solution but it's delayed by one second.
viewer2.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, function()
{
if(!viewer1CameraChangeMutex) {
clearTimeout(viewer2CameraChangeMutex);
viewer.restoreState(viewer2.getState());
viewer2CameraChangeMutex=setTimeout(function(){viewer2CameraChangeMutex=undefined},1000)
}
});
viewer.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, function()
{
if(!viewer2CameraChangeMutex) {
clearTimeout(viewer1CameraChangeMutex);
viewer2.restoreState(viewer.getState());
viewer1CameraChangeMutex=setTimeout(function(){viewer1CameraChangeMutex=undefined},1000)
}
});
You can stop unnecessary event ping-pong b/w viewers, e.g. change view on viewer1 --> change event on viewer 1 then set view state to viewer2 --> change event on viewer 2 then change viewer 1 state --> change event on viewer 1 ....., by comparing viewport status and set view status to other viewer only when viewport status is not in same status.
Below is example code snippet for above explanation.
function compare(stateA, stateB)
{
var viewportA = stateA["viewport"] || {};
var viewportB = stateB["viewport"] || {};
//compare all members of viewportA and viewportB, return true when all members are same.
if( viewportA["name"] !== viewportB["name"] ||
viewportA["projection"] !== viewportB["projection"] ||
viewportA["isOrthographic"] !== viewportB["isOrthographic"] ||
.......//compare all other members of viewport.
//Please note you need to afforded small numeric error for numeric value comparison.
)
{
return false;
}
return true;
}
var sfilter = {
viewport: true
};
viewer3d1.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, function () {
var v1state = viewer3d1.getState(sfilter);
var v2state = viewer3d2.getState(sfilter);
if (!compare(v1state, v2state)) {
viewer3d2.restoreState(viewer3d1.getState(sfilter), sfilter, true);
}
});
viewer3d2.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, function () {
var v1state = viewer3d1.getState(sfilter);
var v2state = viewer3d2.getState(sfilter);
if (!compare(v1state, v2state)) {
viewer3d1.restoreState(viewer3d2.getState(sfilter), sfilter, true);
}
});
I have searched high and low and tried many different options from here, but i need a point in the right direction now :)
On this site:
http://www.michael-smith-engineers.co.uk
On the main nav, (in mobile view) if you click on Pumps, there should be further dropdown options, but i can not get this working. Any ideas would be appreciated.
I have tried adding the following script, without any luck...
<script>
// see whether device supports touch events (a bit simplistic, but...)
var hasTouch = ("ontouchstart" in window);
var iOS5 = /iPad|iPod|iPhone/.test(navigator.platform) && "matchMedia" in window;
// hook touch events for drop-down menus
// NB: if has touch events, then has standards event handling too
// but we don't want to run this code on iOS5+
if (hasTouch && document.querySelectorAll && !iOS5) {
var i, len, element,
dropdowns = document.querySelectorAll("#nav-site li.children > a");
function menuTouch(event) {
// toggle flag for preventing click for this link
var i, len, noclick = !(this.dataNoclick);
// reset flag on all links
for (i = 0, len = dropdowns.length; i < len; ++i) {
dropdowns[i].dataNoclick = false;
}
// set new flag value and focus on dropdown menu
this.dataNoclick = noclick;
this.focus();
}
function menuClick(event) {
// if click isn't wanted, prevent it
if (this.dataNoclick) {
event.preventDefault();
}
}
for (i = 0, len = dropdowns.length; i < len; ++i) {
element = dropdowns[i];
element.dataNoclick = false;
element.addEventListener("touchstart", menuTouch, false);
element.addEventListener("click", menuClick, false);
}
}
</script>
This script above is ridiculous for what i was trying so, tried this:
<script type="text/javascript">
function is_touch_device() {
return (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
}
if(is_touch_device()) {
jQuery('.toggle-menu').on('click', function(){
jQuery(this).toggleClass('activate');
jQuery(this).find('ul').slideToggle();
return false;
});
}
</script>
</head>
Still no luck tho?!!!!
I am trying to build a seating reservation web app using SVG. Imagine, I've created rectangles in the svg, which represents an empty seat. I want to allow user to drop an html "image" element on the "rect" to reserve the seat.
However, I couldn't get the droppable to work on the SVG elemnets. Any one has any idea why this is so? Here is the code:
$('#target').svg();
var svg = $("#target").svg('get');
svg.rect(20, 10, 100, 50, 10, 10, { fill: '#666', class: "droppable" });
$('rect')
.droppable({
accept: '.product',
tolerance: 'touch',
drop: function (event, ui) {
alert('df');
}
}
I looked in to the jQuery-ui source and figured out why it wasn't working with SVGs. jQuery thinks they have a width and height of 0px, so the intersection test fails.
I wrapped $.ui.intersect and set the correct size information before passing the arguments through to the original function. There may be more proportion objects that need fixing but the two I did here are enough to fix my :
$.ui.intersect_o = $.ui.intersect;
$.ui.intersect = function(draggable, droppable, toleranceMode) {
//Fix helper
if (draggable.helperProportions && draggable.helperProportions.width === 0 && draggable.helperProportions.height === 0) {
draggable.helperProportionsBBox = draggable.helperProportionsBBox || $(draggable.element).get(0).getBBox();
draggable.helperProportions = draggable.helperProportionsBBox;
}
//Fix droppable
if (droppable.proportions && droppable.proportions.width === 0 && droppable.proportions.height === 0) {
droppable.proportionsBBox = droppable.proportionsBBox || $(droppable.element).get(0).getBBox();
droppable.proportions = droppable.proportionsBBox;
}
return $.ui.intersect_o(draggable, droppable, toleranceMode);
};
With jQuery UI 1.11.4 I had to change Eddie's solution to the following, as draggable.proportions is now a function:
$.ui.intersect_o = $.ui.intersect;
$.ui.intersect = function (draggable, droppable, toleranceMode, event) {
//Fix helper
if (draggable.helperProportions && draggable.helperProportions.width === 0 && draggable.helperProportions.height === 0) {
draggable.helperProportionsBBox = draggable.helperProportionsBBox || $(draggable.element).get(0).getBBox();
draggable.helperProportions = draggable.helperProportionsBBox;
}
if (droppable.proportions && !droppable.proportions().width && !droppable.proportions().height)
if (typeof $(droppable.element).get(0).getBBox === "function") {
droppable.proportionsBBox = droppable.proportionsBBox || $(droppable.element).get(0).getBBox();
droppable.proportions = function () {
return droppable.proportionsBBox;
};
}
return $.ui.intersect_o(draggable, droppable, toleranceMode, event);
};
If you want to restrict the drop on svg elements to hit on visible content only (for example in polygons) you might want to use this addition to Peter Baumann's suggestion:
$.ui.intersect_o = $.ui.intersect;
$.ui.intersect = function (draggable, droppable, toleranceMode, event) {
//Fix helper
if (draggable.helperProportions && draggable.helperProportions.width === 0 && draggable.helperProportions.height === 0) {
draggable.helperProportionsBBox = draggable.helperProportionsBBox || $(draggable.element).get(0).getBBox();
draggable.helperProportions = draggable.helperProportionsBBox;
}
if (droppable.proportions && !droppable.proportions().width && !droppable.proportions().height)
if (typeof $(droppable.element).get(0).getBBox === "function") {
droppable.proportionsBBox = droppable.proportionsBBox || $(droppable.element).get(0).getBBox();
droppable.proportions = function () {
return droppable.proportionsBBox;
};
}
var intersect = $.ui.intersect_o(draggable, droppable, toleranceMode, event);
if (intersect) {
var dropTarget = $(droppable.element).get(0);
if (dropTarget.ownerSVGElement && (typeof (dropTarget.isPointInFill) === 'function') && (typeof (dropTarget.isPointInStroke) === 'function')) {
var x = ( draggable.positionAbs || draggable.position.absolute ).left + draggable.margins.left + draggable.helperProportions.width / 2,
y = ( draggable.positionAbs || draggable.position.absolute ).top + draggable.margins.top + draggable.helperProportions.height / 2,
p = dropTarget.ownerSVGElement.createSVGPoint();
p.x = x;
p.y = y;
p = p.matrixTransform(dropTarget.getScreenCTM().inverse());
if(!(dropTarget.isPointInFill(p) || dropTarget.isPointInStroke(p)))
intersect = false;
}
}
return intersect;
};
In case if anyone has the same question in mind, droppable doesn't work in jquery SVG. So in the end, I did the following to create my own droppable event:
In draggable, set the target currently dragged been dragged to draggedObj ,
In the mouse up event, check if the draggedObj is null, if it's not null, then drop the item according to the current position. ( let me know if you need help on detecting the current position)
Etc: if I press "space" key, inventory opens.But if I press "space" again, inventory should close.What should I use for this kind of thing?I can open it, but cant close.Thanks, sorry for bad english.(P.S: Im using flashdevelop+flixel)
Yes, this is completely possible.
var isInventOpen:Boolean = false;
function openCloseInvent(e:KeyboardEvent):void
{
if(e.keyCode == Keyboard.SPACE && isInventOpen == false)
{
//Open Inventory
isInventOpen = true;
}
if(e.keyCode == Keyboard.SPACE && isInventOpen == true)
{
//Close Inventory
isInventOpen = false;
}
}
More info on KeyCodes can be found here: KeyCodes, if you need it.
You should give yourself a boolean, like so:
var menuOpen:Boolean = false;
function yourEventHandler(e:KeyboardEvent):void {
if (menuOpen) {
menuOpen = false;
//close your menu here
} else {
menuOpen = true;
//open menu here
}
}
I have a standard website, and when the user zooms in (CTRL +), how can I prevent elements from resizing?
There's no way I know of to prevent items from scaling when a user zooms in. There may be a way to catch the zoom event and size elements accordingly, but it won't work in all browsers.
And to state the obvious - people zoom in because they can't read/see it at normal zoom. Pleeeaase don't break standard behaviour. It's there for a reason.
you can disable the cntl button with this:
<script language="JavaScript">
function disableCtrlKeyCombination(e)
{
//list all CTRL + key combinations you want to disable
var forbiddenKeys = new Array(‘+’);
var key;
var isCtrl;
if(window.event)
{
key = window.event.keyCode; //IE
if(window.event.ctrlKey)
isCtrl = true;
else
isCtrl = false;
}
else
{
key = e.which; //firefox
if(e.ctrlKey)
isCtrl = true;
else
isCtrl = false;
}
//if ctrl is pressed check if other key is in forbidenKeys array
if(isCtrl)
{
for(i=0; i<forbiddenkeys .length; i++)
{
//case-insensitive comparation
if(forbiddenKeys[i].toLowerCase() == String.fromCharCode(key).toLowerCase())
{
alert(‘Key combination CTRL + ‘
+String.fromCharCode(key)
+‘ has been disabled.’);
return false;
}
}
}
return true;
}
</script>