Solved

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

Posted on 2014-01-13
3
973 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
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 52

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

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!

Question has a verified solution.

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

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

749 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