?
Solved

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

Posted on 2014-01-13
3
Medium Priority
?
1,032 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 1000 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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1000 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

850 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