Solved

Replacing iFrame technology

Posted on 2013-06-05
19
292 Views
Last Modified: 2013-06-06
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
Comment
Question by:ddantes
  • 9
  • 6
  • 3
  • +1
19 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39224038
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
 

Author Comment

by:ddantes
ID: 39224160
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
 
LVL 6

Expert Comment

by:Robert Saylor
ID: 39224165
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
 

Author Comment

by:ddantes
ID: 39224178
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
 
LVL 58

Expert Comment

by:Gary
ID: 39224197
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
 

Author Comment

by:ddantes
ID: 39224236
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
 
LVL 58

Expert Comment

by:Gary
ID: 39224241
Ok, but you only seem to have one Frame...?
0
 
LVL 6

Expert Comment

by:Robert Saylor
ID: 39224252
I will send some example prototype calls tomorrow when I get back in the office.
0
 

Author Comment

by:ddantes
ID: 39224290
Thank you both.  Yes, it appears there is only one frame.  However, there is a cgi script which works in that frame.
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 58

Expert Comment

by:Gary
ID: 39224299
So the reason for not just having a normal webpage is...?

p.s.
rsaylor this is jquery not prototype
0
 

Author Comment

by:ddantes
ID: 39224304
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
 
LVL 58

Expert Comment

by:Gary
ID: 39224309
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
 
LVL 6

Expert Comment

by:Robert Saylor
ID: 39224316
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
 

Author Comment

by:ddantes
ID: 39224338
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
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 39224415
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
 

Author Comment

by:ddantes
ID: 39224418
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
 
LVL 58

Expert Comment

by:Gary
ID: 39224467
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
 

Author Comment

by:ddantes
ID: 39224480
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
 

Author Comment

by:ddantes
ID: 39227388
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 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

10 Experts available now in Live!

Get 1:1 Help Now