Solved

Help making HTML code valid (iframe doesn't work on FireFox/IE but does in chrome?)

Posted on 2014-01-13
3
982 Views
Last Modified: 2014-01-13
Hi everyone, I'm not a web developer, but I've been trying to put together a jquery accordion which loads some external content in an iframe of each accordion segment.  I tested the code in jsfiddle and seemed to have everything working, and when I tested on Chrome things seemed to work as well.  However, users with IE or FireFox are reporting that the jquery section doesn't load correctly.  In FireFox the height of each accordion section is wrong (doesn't expand to fit section), and in IE each iframe is just an X.  Any help would be greatly appreciated.

Thank you so much,
Bevos


JSFiddle site for code
0
Comment
Question by:Bevos
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 44

Assisted Solution

by:Rainer Jeschor
Rainer Jeschor earned 250 total points
ID: 39776964
Hi Bevos,

did they test in JSFiddle?
If yes, then this could be an issue because you have everything inside the HTML section.
It did not work in FF for me in jsFiddle with your code, so I created a fork and moved elements around (styles to style, script to Javascript) and modified the HTML.
Second I adjusted the jQuery and jQuery UI to use a more current version and finally this all works for me now in Firefox:
http://jsfiddle.net/EE_RainerJ/47axb

Can you test with this fiddle to see if its the code OR the way you used jsFiddle?

Thanks and HTH
Rainer
0
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 250 total points
ID: 39777030
The first thing to check is the validator and you had a lot of errors under xhtml and some general errors.  Please see this revised code  below and sample http://jsbin.com/aqEgEGuV/1/

It works in chrome and firefox. I don't have ie to check.

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
  <style>
    ##PlanReq{height:600px;}
    #VolumeReq,#Workload{height:700px;}
  
  </style>
  
  
  <script>
      $(function() {
            $("#accordion").accordion();
        });
  </script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
    <div id="intro" style="    display: block;
  margin-top: 0.5em;
  font-family: Verdana;
  font-size: .9em;
  font-weight: normal;
  letter-spacing: 0em;
  text-shadow: none;">This page will serve as a Dashboard for reviewing the Rapid Review process. The current visualizations allow for review of submitted Rapid Review Requests from Plans, volume of requests by Plan, and number of reviews assigned to CCE staff.<br><br></div>
  <div id="accordion" style="width:1200px">
             <h3><a href="#">Plan Requests</a></h3> 
            <div id="PlanReq"><object data="https://fs24.formsite.com/res/resultsReportTable?EParam=m%2FOmK8apOTCH3Mo02Zsqg6wTyhGBXFeQwCi9jw02kUTnEaAhlsm0dfMzhoH04BNxJc5Yl9bFi0U%3D" width="1100" height="600" style="overflow:auto;border:5px ridge blue"> </object></div>
             <h3><a href="#">Volume of Requests by Plan</a></h3> 
            <div id="VolumeReq"><object data="https://fs24.formsite.com/res/resultsReportCharts?EParam=m%2FOmK8apOTCH3Mo02Zsqg6wTyhGBXFeQwCi9jw02kUTnEaAhlsm0dfMzhoH04BNxJc5Yl9bFi0U%3D" width="1100" height="700" style="overflow:auto;border:5px ridge blue"> </object>
</div>
             <h3><a href="#">Workload by Staff</a></h3> 
            <div id="Workload"><object data="https://fs24.formsite.com/res/resultsReportCharts?EParam=m%2FOmK8apOTCH3Mo02Zsqg%2FTBZfQjAcbzwCi9jw02kUTgjtiNpF7eV9WSOJDknvzJH%2FlfuVOazH0%3D" width="1100" height="700" style="overflow:auto;border:5px ridge blue"> </object>
</div>
        </div>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:Bevos
ID: 39777734
These are both excellent solutions.  Thank you for taking the time to show me how to do this.
0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses how to implement server side field validation and display customized error messages to the client.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
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…

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