Solved

Simulate touch-screen double-tap on page load?

Posted on 2013-06-09
49
653 Views
Last Modified: 2013-06-20
Is there a way to simulate a touch screen event, such as double-tap, on page load?   Part of my website relies on a frameset, and there is a scaling issue when navigating away from a zoomed child page and loading another child page.  I'd like to restore scale=1 when a new child page opens.
0
Comment
Question by:ddantes
  • 27
  • 21
49 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39233446
https://github.com/mckamey/doubleTap.js/blob/master/README.md

But going from your previous questions I still don't know why you are using frames.
0
 

Author Comment

by:ddantes
ID: 39233531
Thank you.  Well, I tried to get the online reservation system to work without the frameset.  But the pages which a user must navigate, and populate forms, are loaded by cgi script which refers to the frameset.  And the program, itself, is filled with references to MainFrame, etc.  So I couldn't get it working as ordinary html pages.

Afterwards, I felt that the issue was unimportant, because users can just double-tap the touch screen to restore scale=1.  But then, there are some pages which look very similar, and unless the user has perspective on the entire page, they may be confused after tapping a link.  

For example, suppose a user is on the availability page, and zooms in to select a date for his reservation.  If that date is not available, a page will load which explains how to proceed.  But if that page loads, already zoomed, the user won't see the page title, and it may appear that they are still on the same page.   Loading the new page at scale=1 would mitigate that.

Anyhow, that's a long-winded response to your very reasonable question.  I looked at the article from your link, and I could use some guidance in implementing it.  Here is what I'm hoping to accomplish:

1. If a child window is not zoomed, don't do anything special when the next child window opens, and it will open at scale=1.

2. If a child widow is zoomed, emulate a double-tap when the next child window opens, which should restore scale=1.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39233559
Found this on another site http://adactio.com/journal/4470/
[i]if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}[/i]

Open in new window

0
 

Author Comment

by:ddantes
ID: 39233952
Thank you.  That viewport bug was apparently corrected in the latest iOS release, and I'm not experiencing it.  The scale is maintained through orientation changes.

Regarding your previous question as to detecting the zoom state, I think that can be done by determining if the ration of screen.width to window.innerWidth is different than 1.0.

Can you instruct me on how to apply this?  setZoomScale:1.0
0
 
LVL 58

Expert Comment

by:Gary
ID: 39235336
Did you read thru the link? You disable zoom in your meta tag and then re-enable it with javascript so there is no zoom active at page load
0
 

Author Comment

by:ddantes
ID: 39235353
I did try that, but I haven't gotten it working.  User scaling is disabled by the viewport meta tag, and the js,  which is supposed to restore it after a touch gesture, doesn't restore it.  rezeasy.html
0
 

Author Comment

by:ddantes
ID: 39235977
With respect to your question about determining whether a page is zoomed, here is an article describing how to get the viewport scale on iPhone or iPad.  http://menacingcloud.com/?c=viewportScale

When possible, could you check the code in the embedded page (previous comment)?  I'd like to see if that solution would help.
0
 

Author Comment

by:ddantes
ID: 39238457
Update on removing frames...   I've been able to replace the frameset with a div.  My stumbling block is this:  each (former) child window has a line of code similar to

<script language="javascript" type="text/javascript">if(!parent.frames['MainFrame']){parent.location.href='/cgi-bin/rsv50load.pl?0001/ab0001.html';}</script>

If that line of code is removed, the program doesn't function.  Links may work, and layout works, but the system is broken.  And if that line of code remains, then the window will not open (Internet Explorer cannot display this page).
0
 
LVL 58

Expert Comment

by:Gary
ID: 39238484
Do you mean you have now eliminated the frameset completely?
Can you attach the page code
0
 

Author Comment

by:ddantes
ID: 39238748
div-replace-frameset.zip

Thank you for your continued interest.  If you are willing...
1. unzip the attached zip file.
2. rename rsv50load.txt (embedded separately from the zip file) to rsv50load.pl and insert it in the cgi-bin folder
3. Now you can test both the frameset and non-frameset version...
    a. To test the frameset version, open rezeasy.html  and you should be able to navigate to the availability page, display a calendar, enter reservation dates, etc.  On the New Booking page, you should be able to select dates and proceed to a checkout page where contact information is entered.  The pages which are populating the frameset are in the 0001 subfolder.
     b. To test the non-frameset version, open rezeasy-ab.html.  You can navigate to Availability, New Booking, etc.   The former frameset child pages from the 0001 folder are now in the root folder, named rezeasy-ab.html, rezeasy-bf.html, etc. instead of ab0001.html, bf0001.html, etc.    Although you can open these pages directly, or navigate to them from rezeasy-ab.html,  the system will not work because the program and data are no longer integrated.
rsv50load.txt
0
 
LVL 58

Expert Comment

by:Gary
ID: 39238799
In rsv50std.js replace all occurences of MainFrame. with nothing

I was able to then proceed with a booking (where available)
0
 

Author Comment

by:ddantes
ID: 39238833
That's wonderful.
I haven't been able to duplicate your results.  Can you upload your revised rsv50std.js?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39238891
Attached
rsv50std.js
0
 

Author Comment

by:ddantes
ID: 39238927
Thank you.  I don't know what I'm overlooking.

Are you saying that you are using the non-frameset pages, and you can make a reservation?  If I try to display the calendar on the Availability tab, the dates are all grey X's.  If I plug in available dates in the form on the right, and it says "would you like to make a booking?", the next page has a form with today's date, not the date I selected, and neither the "calculate" nor "continue" buttons have an effect.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39239015
Ok never noticed that, will look at it now.
Missing file rsv50conf.pl
0
 

Author Comment

by:ddantes
ID: 39239054
The grey X's in the calendar were due to a path error to the icons.  I'll attach the corrected file.rezeasy-cl.htmlThe missing file is for making changes to the program.  I don't think it's needed, but I'll attach it in text form.

.
rsv50conf.txt
0
 

Author Comment

by:ddantes
ID: 39239078
Sorry -- the calendar page with corrected path to icons no longer loads from the Availability page.  I'm trying to correct that.
0
 

Author Comment

by:ddantes
ID: 39239152
Gary, I keep finding pathway errors, or references to the cgi-path in the files I have uploaded.  I'm sending one more zip, with files which I think are cleaned up.  Very sorry for redundant work...corrected.zip
0
 
LVL 58

Expert Comment

by:Gary
ID: 39239333
I've made some changes to a few pages (attached) can you check if they work ok.
I'm sure more changes will be needed...
The calendar page shows all dates available - is that correct? Because when I check availability it only seems to be a few dates available

p.s. cannot believe what they charge for this software.
rsv50std.js
rezeasy-av.html
rezeasy-bf.html
0
 
LVL 58

Expert Comment

by:Gary
ID: 39239353
Do you have php on the server?
0
 

Author Comment

by:ddantes
ID: 39239411
Yes to PHP.

Something strange was happening with the new html files.  It was resolved by copying their contents to a blank html template.

The program is still not working.   If I enter a date on the booking form, and the date is available, a blank page opens.

On the "No Rooms" form, entering an available date and pressing continue doesn't have an effect.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39239451
Have you got them in the same folder as they were i.e. you don't have them separate.
0
 

Author Comment

by:ddantes
ID: 39239467
They are in the same location as they were before.
0
 

Author Comment

by:ddantes
ID: 39242015
I'm thinking this may require more effort than is justified.  It was worthwhile testing the system without frameset, but it may be difficult to associate the program and the data without frames.  I'm willing to continue, but I don't want you to feel obligated.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 58

Expert Comment

by:Gary
ID: 39242037
I am still working on it but the obfuscated js makes it harder...
0
 
LVL 58

Expert Comment

by:Gary
ID: 39242099
Attached is an update js file.
To start go to the rezeasy-av.html page
It won't link correctly from the rezeasy.html page because of the cgi.

This works fine for me to check dates, proceed with booking and calculate price.
Let me know how you get on
rsv50std.js
0
 

Author Comment

by:ddantes
ID: 39242158
Thank you, Gary.  This is improving.  There is still the phenomenon of opening a blank window when the month on the booking form is changed.  But, after closing that window, I can "continue" to the checkout page and enter form data.  After that, "submit" doesn't have an effect.  Also, on the availability page, "display calendar" shows all dates available and the "working" icon flashes indefinitely.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39242166
Will look at it now.
0
 

Author Comment

by:ddantes
ID: 39242168
Also, if I choose a date, such as Oct. 1, 2014, it says "rooms available, would you like to make a booking?"  Selecting yes results in the "sorry" (rezeasy-nr.html) opening.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39242437
If I change the month I don't get any new window and if I select Oct. 1, 2014 it works fine.
I've attached all files this time as I made several changes.
Still looking at the calendar code.
cg.zip
0
 
LVL 58

Expert Comment

by:Gary
ID: 39242580
Something screwy with the code for the calendar, when I looked at it it didn't matter what the value of the days was (0 or 1) it was passing because the code was checking if the value was equal to or greater than 0 so always showing Yes.

Attached new files.
rezeasy-cl.html
rsv50std.js
0
 

Author Comment

by:ddantes
ID: 39242612
One step closer.  No more blank page when changing date on form.  "Submit" button loads the page which says "one moment..."  but it doesn't load the page from our secure web server.

The calendar is grey x's.

If a booking hasn't been submitted, it should appear in "My Bookings", but it doesn't.

If unavailable dates are input, the rezeasy-nr.html loads, as it should.  But if available dates are input from that page, and the popup says they are available, "OK" to making a booking returns to rezeasy-nr.html with the date reset to Jan. 1, 2013.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39242631
Grey x's are not found image, they should be in the icons folder

I'm not getting a problem with available dates, I get the popup to say available, click ok and the next page loads fine.

If a booking hasn't been submitted, it should appear in "My Bookings", but it doesn't.
Don't understand this
0
 

Author Comment

by:ddantes
ID: 39242640
calendar fixed by correcting paths to images.rezeasy-cl.html
0
 
LVL 58

Expert Comment

by:Gary
ID: 39242671
Think it would have been quicker to just write you a booking system ;o)
0
 

Author Comment

by:ddantes
ID: 39242683
Clearly so.

The My Bookings menu item is supposed to be populated with tentative bookings -- which have been entered into the booking form, without yet clicking "submit".  

As far as the available dates issue, this only happens once you land on the "Sorry" page (rezeasy-nr.html).  From there, if you enter available dates and get the "Rooms are available" popup, then click "OK", for me it reloads the same page ("Sorry!) with the date set to Jan. 1.

I'll try that again, because I sometimes get inconsistent results.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39242736
New availability form (after the Sorry)

Can there be multiple tentative bookings - seems an illogical option to me.
rezeasy-nr.html
0
 

Author Comment

by:ddantes
ID: 39242747
I will test this.  Yes, a person can make several tentative reservations at a large hotel which uses this software (God help them!)
0
 
LVL 58

Expert Comment

by:Gary
ID: 39242772
To be honest there are far superior free php options available rather than this (junk)
0
 

Author Comment

by:ddantes
ID: 39242782
The new nr page resolved the previous issue.

I wouldn't mind evaluating alternative booking engines.  This one has served us for 10 years, and is well-accepted by guests.  It's been configured to account for a variety of variables, including number of guests, discounts for length of stay, different types of taxes applicable, different room types, and it integrates seamlessly with our secure server which accepts credit card data.  I've not been able to find anything comparable, unless it is cloud-based, or hosted by a third party, and I prefer not to use either approach.

Let me know if you've had enough of this.  I'm grateful for your help, but don't want to take it over the line.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39242832
0
 

Author Comment

by:ddantes
ID: 39242859
I will check those.
Your persistence is very generous.
Several of the most recent pages included erroneous file references, to obsolete files in the 0001 folder, or in one case to MainFrame.   I think that may account for my inconsistent findings, because clicking a menu button on a page may have directed me to an old 0001 page which I didn't immediately identify, except that page had bizarre behavior.  I will attach the pages which are purged of those references...booking-list.htmlcheckout.htmlrezeasy-av.htmlrezeasy-bf.htmlrezeasy-cf.htmlrezeasy-nr.html
0
 
LVL 58

Expert Comment

by:Gary
ID: 39242867
Have to go now, will be back tomorrow.
0
 

Author Comment

by:ddantes
ID: 39242897
Another correction to -cl.html: path to Blank.gif was wrong, so the calendar persisted in showing "working...please wait."rezeasy-cl.html

Get some rest...

I think, a couple of outstanding issues are...

1. Booking_List is not populating with My Bookings tentative bookings.  That is probably also the cause for the change form not appearing beneath contact details on checkout.html.

2. loadrsv.txt may have some issues, which prevent a submitted booking from being forwarded to the secure server.

3. Some files have javascript references to cgi-bin/rsv50load.pl?[filename]   and others do not.
0
 

Author Comment

by:ddantes
ID: 39246410
Gary -- I thought I would share my impressions about hoteldruid and code canyon's online-hotel-booking-system.  Hotel Druid isn't designed to accommodate a complex rate structure, with charges for extra guests, discounts applied at different thresholds of length of stay, different taxes applicable to rent, cleaning fee, etc.   Code Canyon's product looks like it has adequate functions, but the Administrative panel rejects my password, even if I let the program auto assign a password.  The "Forgot Password" button just opens a window which says "Captcha error!".   I've reported this to their tech support (in Mumbai) and awaiting reply.

With that in mind, I'm hoping you're up for completing this project, as time permits...
0
 

Author Comment

by:ddantes
ID: 39248550
Update:  rsvconf.pl refers to "0001/ab0001.html" as  "$link_url", and "mauitradewinds.com/RezEasy" as "$base_url".  If either of us want to test the "submit" booking function, I will need to toggle three directories on the server: RezEasy, cgi-bin and scgi.  But I can't leave them "toggled", or potential guests won't be able to book online.  So testing of the form submission will need to be done when we are both engaged with it.
0
 

Author Comment

by:ddantes
ID: 39250395
Further update:  I've gotten WampServer running, which makes testing easier.  Interpreting the results is not something I am skilled about.  I'm attaching the Apache access log for the old and new systems, capturing during the attempted submission of a booking.  It looks like the main difference is that the new system doesn't "POST" rsv50std.cgi.  
access-old-system.logaccess---new-system.txt
0
 

Author Comment

by:ddantes
ID: 39252214
Dear Gary:  I hope all is well.  Checking to see if you are still engaged with this project?  No obligation, but please let me know either way.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now