locked
changing mouse to touch screens RRS feed

  • Question

  • User-605499000 posted

    I am trying to change my program pages from mouse to touch screens so that the tablets will work.  I have a page file that opens up with a mouse.  I have been studying the touch screen program and now I need to incorporate them in my programs.

    I have two files the page file and a touch screen file. I have put an (x  next to where the mouse is used) how do I replace the mouse with touch

    page.js

    var PageMouseCoords = { x: 0, y: 0 };    (* is this okay or do I need to change this line)
    //var OnLoadArray = new Array();

    PageOnLoad = function () {
    for (i = 0; i < OnLoadArray.length; i++)
    eval(OnLoadArray[i]);
    };

    PageScreenSize = function () {
    var _width = 0;
    var _height = 0;

    if (typeof window.innerWidth === "number") {
    //Non-IE
    _width = window.innerWidth;
    _height = window.innerHeight;
    }
    else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
    //IE 6+ in 'standards compliant mode'
    _width = document.documentElement.clientWidth;
    _height = document.documentElement.clientHeight;
    }
    else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
    //IE 4 compatible
    _width = document.body.clientWidth;
    _height = document.body.clientHeight;
    }

    return { width: _width, height: _height };
    };

    PageGetObjStyle = function (obj, value) {
    if (obj.currentStyle)
    return obj.currentStyle[value.replace(/-/g, '')];
    else
    return document.defaultView.getComputedStyle(obj, null).getPropertyValue(value.toLowerCase());
    };

    PageGetObjStyleInt = function (obj, value) {
    if (obj.currentStyle)
    return parseInt(obj.currentStyle[value.replace(/-/g, '')]);
    else
    return parseInt(document.defaultView.getComputedStyle(obj, null).getPropertyValue(value.toLowerCase()));
    };

    Page = function () {
    this.StartListeners();
    };

    Page.prototype.StartListeners = function () {
    window.onresize = this.OnWindowResize;

    document.onmousemove = this.OnMouseMove;  (* do I add touch here and take out the mouse moves?)
    //document.onmouseup = this.OnMouseUp;
    //document.onmouseout = this.OnMouseOut;
    //document.onmousedown = this.OnMouseDown;

    document.onkeydown = this.OnKeyDown;  (* do I remove this once I put in touch)
    document.onkeypress = this.OnKeyPress;

    document.oncontextmenu = function () { return false; };
    };

    Page.prototype.OnWindowResize = function () {
    //var headerWrapper = document.getElementById("headerWrapper");
    //headerWrapper.style.width = PageScreenSize().width + "px";
    //headerWrapper.style.position = "absolute";

    //var bodyWrapper = document.getElementById("bodyWrapper");
    //bodyWrapper.style.width = PageScreenSize().width + "px";
    //bodyWrapper.style.position = "absolute";

    HeaderOnResizeAnimationTop();
    };

    Page.prototype.OnMouseMove = function (e) {  (* what do I put here?
    e = e || window.event;

    if (e.pageX || e.pageY)
    PageMouseCoords = { x: e.pageX, y: e.pageY };
    else if (document.documentElement.clientLeft)
    PageMouseCoords = { x: e.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft, y: e.clientY + document.documentElement.scrollTop - document.documentElement.clientTop };
    else
    PageMouseCoords = { x: e.clientX + document.body.scrollLeft - document.body.clientLeft, y: e.clientY + document.body.scrollTop - document.body.clientTop };
    };  (* what do I put here)

    Page.prototype.OnMouseUp = function (e) { e = window.event || e; /* e.button / };  ( same question)
    Page.prototype.OnMouseOut = function (e) { e = window.event || e; /* e.button */ };
    Page.prototype.OnMouseDown = function (e) { e = window.event || e; /* e.button */ };

    Page.prototype.OnKeyPress = function (e) { e = window.event || e; /* e.keyCode */ };
    Page.prototype.OnKeyDown = function (e) { e = window.event || e; /* e.keyCode */ };

    Page.prototype.Maximize = function () {
    top.window.moveTo(0, 0);

    if (document.all) {
    top.window.resizeTo(screen.availWidth, screen.availHeight);
    }
    else {
    if (document.layers || document.getElementById) {
    if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
    top.window.outerHeight = screen.availHeight;
    top.window.outerWidth = screen.availWidth;
    }
    }
    }
    };

    PageIsMouseOutOrOver = function (e, handler) {  (* do I put in a touch handler here/)
    if (e.type !== 'mouseout' && e.type !== 'mouseover' && e.type !== 'mousemove')
    return false;

    //var relTarget = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;

    var relTarget = null;

    if (e.relatedTarget)
    relTarget = e.relatedTarget;
    else if (e.type === 'mouseout')
    relTarget = e.toElement;
    else
    relTarget = e.fromElement;

    while (relTarget && relTarget !== handler)
    relTarget = relTarget.parentNode;

    return relTarget !== handler;
    };

    PageChildNodeIdxByClass = function (obj, className) {
    for (idx = 0; idx < obj.childNodes.length; idx++) {
    var classAttributeIe = null;
    var classAttributeFf = null;

    try // Fix Firefox Bug // class does not exist
    {
    classAttributeIe = obj.childNodes[idx].getAttribute('className');
    classAttributeFf = obj.childNodes[idx].getAttribute('class');
    }
    catch (error) {
    //empty
    }

    var classAttribute = classAttributeIe || classAttributeFf;

    if (classAttribute !== null && classAttribute.match(className))
    return idx;
    }

    return -1;
    };

    Page.prototype.DetectPopUpBlocker = function () {
    var _popUp = window.open("", "detectPopUpBlocker", "width=100,height=100,top=5000,left=5000,scrollbars=no");

    if (_popUp === null || typeof _popUp === "undefined")
    return true;

    _popUp.close();
    return false;
    };

    Page.prototype.AlertPopUpBlocker = function () {
    if (this.DetectPopUpBlocker())
    alert('We have detected that you are using popup blocking software.\nThis easy article can show you how to detect this using Javascript...');
    };

    var webpage = new Page();

    touch screen file

    Page.addEventListener('touchstart', process_touchstart, false);
    Page.addEventListener('touchmove', process_touchmove, false);
    Page.addEventListener('touchcancel', process_touchcancel, false);
    Page.addEventListener('touchend', process_touchend, false);
    // touchstart handler
    function process_touchstart(ev) {
    // Use the event's data to call out to the appropriate gesture handlers
    switch (ev.touches.length) {
    case 1: handle_one_touch(ev); break;
    case 2: handle_two_touches(ev); break;
    case 3: handle_three_touches(ev); break;
    default: gesture_not_supported(ev); break;
    }
    }

    // Create touchstart handler
    Page.addEventListener('touchstart', function (ev) {
    // Iterate through the touch points that were activated
    // for this element and process each event 'target'
    for (var i = 0; i < ev.targetTouches.length; i++) {
    process_target(ev.targetTouches[i].target);
    }
    }, false);

    // touchmove handler
    function process_touchmove(ev) {
    // Set call preventDefault()
    ev.preventDefault();
    }

    question I can't just add this file I need to go into every file that has mouse programs and change it to touch or do I just add the touch to each file?

    Thanks,

    Jen

    Tuesday, November 12, 2019 8:50 PM

Answers

  • User-605499000 posted

    Thank you this will help. The developer article will be very helpful.  It looks like I will need to use both touch and mouse since I am using both computers and tablets.

    I am not a real programmer and have been updating the program that I had built in 1999 and it has been very tough. So I really appreciate all the help that I have gotten.

    Thanks again,

    Jen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 15, 2019 1:52 AM

All replies

  • User2053451246 posted

    I have a question.  Why do you need to do any of this?  I have written two touch screen point-of-sale applications by just making the buttons bigger.  Touching the screen is a mouse click.  Why all this extra stuff?

    Tuesday, November 12, 2019 9:03 PM
  • User-474980206 posted

    most touch browser implement mouse events for touch events (with the exception of hover). You typically add the touch event handlers for the multi-finger gestures like zoom and pinch.

    generally you can use a touch library which will generate psuedio events for common gestures.

    Tuesday, November 12, 2019 9:20 PM
  • User-605499000 posted

    I have a magazine and I can't turn the pages or play the games. The pages and games are JavaScript.  I do not have a problem with point of sale as that is fine.  I need to know if there is a program out there that I can use or study. Or do I have to go into my page JavaScript and change the mouse to touch and the same for the games.

    If you go to bumples.com and then press issues, the issue does not open in apple tablets and probably other tablets.  So I am not getting to the magazines.

    Thanks for getting back to me and hope you can help me

    Jen

    Thursday, November 14, 2019 1:05 AM
  • User-474980206 posted

    you are adding click event handlers to a div. with mobile safari only clickable elements (buttons, links) fire fake mouse events. if you want to use div, you will need to use the touch event handlers. see:

    https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

    Thursday, November 14, 2019 4:38 PM
  • User-605499000 posted

    Thank you this will help. The developer article will be very helpful.  It looks like I will need to use both touch and mouse since I am using both computers and tablets.

    I am not a real programmer and have been updating the program that I had built in 1999 and it has been very tough. So I really appreciate all the help that I have gotten.

    Thanks again,

    Jen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 15, 2019 1:52 AM