Solved

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

Posted on 2014-01-13
3
951 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
Comment Utility
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
Comment Utility
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
Comment Utility
These are both excellent solutions.  Thank you for taking the time to show me how to do this.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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)

772 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