Solved

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

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

863 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

27 Experts available now in Live!

Get 1:1 Help Now