Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 307
  • Last Modified:

Replacing iFrame technology

I'm retrofitting my website for mobile browsers, and encountering a scaling issue with part of the site which relies on iFrames.  

When mobile visitors use my online reservation system, they must zoom in on a child window, in order to perform tasks, and then tap a link to navigate to another child window, to continue the process.  That new child window loads zoomed, instead of loading at scale=1.  That is not asthetically pleasing, and obliges the user to scale down the page in order to gain perspective.  I would prefer that each new child window load at scale=1, just like the behavior of my non-iFrame pages.

To my understanding, this must be remedied by replacing the iFrames with different technology. The iFrame part of my website starts at http://mauitradewinds.com/Test/RezEasy/rezeasy.html

Can you give me some guidance on how to replace the iFrames with a different approach?  I'm at a beginner level with coding.
0
ddantes
Asked:
ddantes
  • 9
  • 6
  • 3
  • +1
1 Solution
 
GaryCommented:
Jquery AJAX
http://api.jquery.com/jQuery.ajax/

With this you can change/load any content on the fly
Read thru the link and post back any questions.
0
 
ddantesAuthor Commented:
Thank you.  It's a bit daunting, on first reading.  Here is the iFrame page code.  I'd like to accomplish the same behavior without the iFrame...

Parent page --

<FRAMESET COLS="100%,*" ROWS="100%,*" onunload="checkAndSave();">
<FRAME name="MainFrame" SRC="0001/ab0001.html">
</FRAMESET>

Child page --

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

There are other child pages which are loaded with similar language.
0
 
Robert SaylorSenior DeveloperCommented:
yes ajax is your best answer. I will end up having to do this too. I manage an online reservation system for our cruise company.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
ddantesAuthor Commented:
I'm interested in learning, but this seems huge.  If it is appropriate to ask, can you recommend a consultant who could perform this adaptation?
0
 
GaryCommented:
You said iFrames, but you are commenting on Framesets (so 1990's) - they are not really the same.
You usually use iFrames for adding external content within your own page. (e.g. maybe a little box in the sidebar)
No-one in the 21st century uses Frames for a webpage.

And your use of Frames seems somewhat askew as it only seems to be one frame. (going by the source of your link)

Can you explain the logic of what you are trying to do?

p.s. it isn't hard to learn, ajax can be just one line of code.
0
 
ddantesAuthor Commented:
Thank you.  I'm using an online reservation system from 2004.  Although it is obsolete, it works.  We have an atypical rate structure, and the software engineer for the company which produced that online system has adapted the program to our rate structure.  It computes our discounts with accuracy to the penny.  I've also tweaked the appearance of the pages to my satisfaction.  I haven't found another affordable solution, which I can host myself, with those features.  So, I'm trying to preserve it.  However, in the course of adapting our site for mobile visitors, a scaling issue developed -- only with the reservation system pages.

I described the issue in the first posting on this question.  Once a child page is zoomed, whatever the next window may be, it is also zoomed.  I'm trying to avoid that, and open the next window at scale=1.  Nobody has found a way to do that, except to replace the Framesets with another technology.

Thanks for clarifying the distinction between iFrames and Framsets.
0
 
GaryCommented:
Ok, but you only seem to have one Frame...?
0
 
Robert SaylorSenior DeveloperCommented:
I will send some example prototype calls tomorrow when I get back in the office.
0
 
ddantesAuthor Commented:
Thank you both.  Yes, it appears there is only one frame.  However, there is a cgi script which works in that frame.
0
 
GaryCommented:
So the reason for not just having a normal webpage is...?

p.s.
rsaylor this is jquery not prototype
0
 
ddantesAuthor Commented:
Truthfully, I don't know.  Have you visited the portal to the online booking system and navigated around any?  Maybe the answer will be evident to you.   You can try and make a test booking, just don't go all the way with it!   Some dates which are available are June 1-10, 2014 in Tradewinds Suite.
0
 
GaryCommented:
lol
...not evident to me, that's why I was asking you.
Doesn't seem to be any reason for using Frames from what I can see.
0
 
Robert SaylorSenior DeveloperCommented:
Sorry, I don't use jquery. If still interested I will send prototype examples tomorrow.

You can see it in action here. This is my system but this one is not live yet. Well, it works but we have not released it to customers yet.

http://www.liveaboardfleet.com/online/
0
 
ddantesAuthor Commented:
Gary:  Interesting.  I'm going to try to just make this work with regular web pages, and then post back.

rsaylor:  Thanks for your offer.  I'm committed to the existing system, for now.
0
 
Ray PaseurCommented:
Have you considered hiring a professional programmer to help with this?  There is something of a learning curve to any application that uses jQuery or similar JavaScript frameworks.  You might get the results faster if you have a pro on the team.  Just a thought... ~Ray
0
 
ddantesAuthor Commented:
If you can refer me to someone, I'd be happy to speak with them.

Meanwhile, I basically converted all the pages in that system to regular web pages.  In order for the pages to open, I needed to remove a certain line from each of them, such as:
<SCRIPT type="Javascript">if(!parent.frames['MainFrame']){parent.location.href='/cgi-bin/rsv50load.pl?change.html';}</SCRIPT>

Moreover, the program (a js file) is replete with references to "MainFrame".

Having removed that line, the system no longer works.  I can navigate nicely from page to page, but  the program which determines whether dates are available, or calculates rates, etc. does not perform.  How do I replace the function of that javascript code?

The revised reservation system, minus framesets, is at http://mauitradewinds.com/Test/frameset/welcome.html

rsv50std.js
0
 
GaryCommented:
I will get back to this tomorrow...
...but as you have the page now it kinda works fine. So I do not see a need for frames at all!
As for the Continue buttons, like I said I will get back to it tomorrow.
0
 
ddantesAuthor Commented:
The behavior of the windows is what I would like, now.  Just like "ordinary" web pages, new windows open at scale=1, even if the preceding window was scaled.  All it needs now is to function with the program and data.

Get some sleep, and thanks for your interest.
0
 
ddantesAuthor Commented:
Update:  I'm embarrassed to admit, I now think this question is less important than I felt when I posted it.  I am new to mobile technology, and only now discovered that double-tapping the touch screen restores scale=1.  This relieves my concerns about the scaling of pages in my online reservation system, which the user must zoom in order to navigate.  If someone has a solution which gets the "ordinary" web pages to perform their functions, I'll still welcome it, but in the meanwhile I plan to close the question.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 9
  • 6
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now