Sourcecode Works for Chrome, not for Firefox and IE

Question

0.00/5 (No votes)

See more:

, +

I'm newbie in web development.

If I use the adress "www.xxxxxx.com/test.html#chgd", the second accordion should be expanding. It works perfectly for Chrome but not for Firefox and Explorer.

What is the problem in the source code that works for Chrome but not for Firefox and Explorer?

I also have used 'window.location.hash;' but unfortunately, same problem occur.

Thanks!

HTML

<pre lang="xml"><!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <link href="C:\Users\h\Desktop\test\bootstrap-theme.css" rel="stylesheet"/>
        <link href="C:\Users\h\Desktop\test\bootstrap.css" rel="stylesheet"/>


        <script src="C:\Users\h\Desktop\test\jquery-1.11.2.min.js"></script>
    <script src="C:\Users\h\Desktop\test\bootstrap.min.js"></script>
    <script>

    jQuery(document).ready(function() {
        var url = = document.location.toString();
        if ( url.match('#') ) {
            var hash = url.split('#')[1];

            // collapse the expanded panel
            $('#accordion .accordion-collapse').removeClass('in');

            // expand the requested panel
            $('#' + hash + '_c').addClass('in');
        }
    });
    </script>
    </head>


<body>



          <div id="accordion" class="accordion-group">
                <div class="panel">
                    <h4 id="cs" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#cs_c">Child Survival: Boosting Immunity and Managing Diarrhoea</a></h4>
                    <div id="cs_c" class="accordion-collapse collapse in">
                        <p>...</p>
                    </div>

                    <h4 id="chgd" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#chgd_c">Child Health, Growth and Development: Preventing Mental Impairment with Iodine and Iron</a></h4>
                    <div id="chgd_c" class="accordion-collapse collapse">
                        <p>...</p>
                    </div>

                    <h4 id="wmnh" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#wmnh_c">Women’s and Newborn Survival and Health: Iron Supplementation and Food Fortification</a></h4>
                    <div id="wmnh_c" class="accordion-collapse collapse">
                        <p>...</p>
                    </div>
                </div>
            </div>



</body>
</html>

Posted 1-May-15 6:25am

deelll

Updated 1-May-15 6:28am

v3

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sebastiaan Meijerink · Answer 1 · 2015-05-03T02:15:00

These paths "C:\Users\h\Desktop\test\" are the problem.

You're not allowed by most browsers to do this.
You're website should be hosted. This is because javascript is running in a 'sandbox' and should not have direct access to the client's filesystem.

The thing you could do first is have them come from a CDN.

replace the jquery url with; https://code.jquery.com/ui/1.11.4/jquery-ui.min.js[^]

And the bootstrap with;

//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js

Then it should work.

However it is better to install IIS on you're computer.
I don't know what version of Windows you're running, but searching on google for install iis on windows.... should get you there.
The process is pretty straight forward.

Sourcecode Works for Chrome, not for Firefox and IE

1 solution

Solution 1

Add your solution here

Preview 0

Sourcecode Works for Chrome, not for Firefox and IE

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us