Webpage doesn't work in Firefox but works in Chrome and Torch

StackOverflow https://stackoverflow.com/questions/23473775

Question

I have used HTML, CSS, JS (& jQuery) and PHP to make this site. It works flawlessly in Chrome and Torch. But doesn't work in Firefox. Contents in div3_iframe1 and div4_iframe1 are not displayed.......

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Jeewya Medical Center</title>
    <link href="boilerplate.css" rel="stylesheet" type="text/css">
    <link href="myStyle.css" rel="stylesheet" type="text/css">
    <script src="respond.min.js"></script>
    <script src="jQuery/jquery-2.0.3.js" type="text/javascript"></script>
    <script src="jQuery/jquery-ui.js" type="text/javascript"></script>
    <script>
        function resize(obj){
            document.getElementById(obj).setAttribute("height",0);
            document.getElementById(obj).setAttribute("height",frames[obj].document.body.scrollHeight);
        }

        $(window).load(function(){
            $('#loading').hide();
        });

        function register(){
            $("#div3_iframe1").fadeOut("fast");
            $("#div3_iframe1").fadeIn("fast");
            document.getElementById("div3_iframe1").setAttribute("src","registration system 2.4/index.php");
        }

        function appointments(){
            $("#div3_iframe1").fadeOut("fast");
            $("#div3_iframe1").fadeIn("fast");
            document.getElementById("div3_iframe1").setAttribute("src","appointments/appointments.php");
        }

        function reports(){
            $("#div3_iframe1").fadeOut("fast");
            $("#div3_iframe1").fadeIn("fast");
            document.getElementById("div3_iframe1").setAttribute("src","reports/index.php");
        }

        function analyze(){
            $("#div3_iframe1").fadeOut("fast");
            $("#div3_iframe1").fadeIn("fast");
            document.getElementById("div3_iframe1").setAttribute("src","analyze/index.php");
        }

        function inquire(){
            $("#div3_iframe1").fadeOut("fast");
            $("#div3_iframe1").fadeIn("fast");
            document.getElementById("div3_iframe1").setAttribute("src","inquire/index.php");
        }

        function home(){
            $("#div3_iframe1").fadeOut("fast");
            $("#div3_iframe1").fadeIn("fast");
            document.getElementById("div3_iframe1").setAttribute("src","home/home.php");
        }

        function prescriptions(){
            $("#div3_iframe1").fadeOut("fast");
            $("#div3_iframe1").fadeIn("fast");
            document.getElementById("div3_iframe1").setAttribute("src","prescriptions/index.php");
        }

    </script>
</head>
<body>
    <div class="gridContainer clearfix">

        <div id="loading">
            <img id="loading-image" src="images/loading.gif" alt="Loading..." />
        </div>

        <div id="LayoutDiv1">
            <iframe src="slider/index.html" style="width:1152px; height:200px;max-width:100%;overflow:hidden;border:none;padding:5px;margin:0 auto;display:block;" marginheight="0" marginwidth="0" scrolling="no" frameBorder="0"></iframe>
        </div>

        <div id="LayoutDiv2">
            <!-- Button Set -->

            <img src="button set/register/1.png" style="z-index:-1; position:absolute;" width="175px" id="btn1" name="btn1"/>
            <img src="button set/register/text.png" onmouseover="btn1.src='button set/register/2.png'" onmouseout="btn1.src='button set/register/1.png'" onclick="register(); btn1.src='button set/register/3.png'" width="200px" id="text1"/>
            <br/>
            <img src="button set/appointments/1.png" style="z-index:-1; position:absolute;" width="175px" id="btn2" name="btn2"/>
            <img src="button set/appointments/text.png" onmouseover="btn2.src='button set/appointments/2.png'" onmouseout="btn2.src='button set/appointments/1.png'" onclick="appointments(); btn2.src='button set/appointments/3.png'" width="200px" id="text2"/>
            <br/>
            <img src="button set/reports/1.png" style="z-index:-1; position:absolute;" width="175px" id="btn3" name="btn3"/>
            <img src="button set/reports/text.png" onmouseover="btn3.src='button set/reports/2.png'" onmouseout="btn3.src='button set/reports/1.png'" onclick="reports(); btn3.src='button set/reports/3.png'" width="200px" id="text3"/>
            <br/>
            <img src="button set/prescriptions/1.png" style="z-index:-1; position:absolute;" width="175px" id="btn4" name="btn4"/>
            <img src="button set/prescriptions/text.png" onmouseover="btn4.src='button set/prescriptions/2.png'" onmouseout="btn4.src='button set/prescriptions/1.png'" onclick="prescriptions(); btn4.src='button set/prescriptions/3.png'" width="200px" id="text4"/>
            <br/>
            <img src="button set/analyze/1.png" style="z-index:-1; position:absolute;" width="175px" id="btn5" name="btn5"/>
            <img src="button set/analyze/text.png" onmouseover="btn5.src='button set/analyze/2.png'" onmouseout="btn5.src='button set/analyze/1.png'" onclick="analyze(); btn5.src='button set/analyze/3.png'" width="200px" id="text5"/>
            <br/>
            <img src="button set/inquire/1.png" style="z-index:-1; position:absolute;" width="175px" id="btn6" name="btn6"/>
            <img src="button set/inquire/text.png" onmouseover="btn6.src='button set/inquire/2.png'" onmouseout="btn6.src='button set/inquire/1.png'" onclick="inquire(); btn6.src='button set/inquire/3.png'" width="200px" id="text6"/>
            <br/>
            <img src="button set/home/1.png" style="z-index:-1; position:absolute;" width="175px" id="btn7" name="btn7"/>
            <img src="button set/home/text.png" onmouseover="btn7.src='button set/home/2.png'" onmouseout="btn7.src='button set/home/1.png'" onclick="home(); btn7.src='button set/home/3.png'" width="200px" id="text7"/>
            <br/>

            <!-- Button Set -->
        </div>

        <div id="LayoutDiv3">
            <iframe id="div3_iframe1" src="home/home.php" scrolling="auto" width="100%" frameBorder="0" onload="resize('div3_iframe1')" onblur="resize('div3_iframe1')"></iframe>
        </div>

        <div id="LayoutDiv4">
            <iframe id="div4_iframe1"src="Registration%20system%202.4/login.php" scrolling="auto" width="100%" frameBorder="0" onload="resize('div4_iframe1')" style="max-height:900px"></iframe>
            <div>
                <p><b>View location with Google Maps</b></p>
                    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?msa=0&amp;msid=211105280369292538191.0004ef7703137975a2b66&amp;gl=US&amp;hl=en&amp;ie=UTF8&amp;t=h&amp;ll=7.079269,79.859659&amp;spn=0,0&amp;output=embed"></iframe><br /><small>View <a href="https://maps.google.com/maps/ms?msa=0&amp;msid=211105280369292538191.0004ef7703137975a2b66&amp;gl=US&amp;hl=en&amp;ie=UTF8&amp;t=h&amp;ll=7.079269,79.859659&amp;spn=0,0&amp;source=embed" style="color:#0000FF;text-align:left">Jeewya Medical Center</a> in a larger map</small>
            </div>
        </div>

        <div id="LayoutDiv5">This is the content for Layout Div Tag "LayoutDiv5"</div>

    </div>
</body>

Was it helpful?

Solution

You need to surround your jQuery functions (because they are in the head of the document) with a document ready handler - 

$(document).ready(function() {
    // jQuery code here
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top