CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mndn
mndn

Reputation: 73

jquery script doesnt work when I change the folder

I have header.html and footer.html in root .my main page is in the folder "MainPages".I use script to call header.html and footer.html. but I can not see Header.html and footer.html when I double click on the the page . here is my folders and my Mainpage("bio.html")(bio.html is in the MainPages"folder). project folders

<head>
    <title></title>
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <link href="../Content/normalize.min.css" rel="stylesheet" />
    <link href="../Content/font-awesome.min.css" rel="stylesheet" />

    <script src="../Scripts/jquery-1.10.1.min.js"></script>
    <script src="../Scripts/bootstrap.min.js"></script>

    <link href="../Content/css/animate.css" rel="stylesheet" />

    <script src="../Scripts/modernizr-2.6.2.min.js"></script>
    <script src="../Scripts/revealOnscroll.js"></script>
    <link href="../Content/ava.css" rel="stylesheet" />
    <script>
        $(function () {
            $("#Header").load("../Header.html");
        });
    </script>
    <script>
        $(function () {
            $("#Footer").load("../Footer.html");
        });
    </script>

</head>

<body style="background-image: url(../images/sample_bg.jpg);">

    <!--header-part-->
    <div id="Header"></div>

    <br /><br /><br /><br /><br /><br /><br /><br />

    <div class=" container-fluid col-md-offset-2 row col-md-8 col-md-offset-2  "
         style=" font-family: Mitra;background-image:url(../images/bio/bio-2.jpg);background-size:500px,500px;
        background-repeat: no-repeat;background-position-x:right;background-position-y:top;
            background-color:#fff ;clear:none;padding: 0px;">
        <div class="container-fluid ">
            <div class="row ">


                <div class=" col-md-offset-1 col-md-9 ">
                    <div class="row">

                        <div class="bio-contex-1">

                            <span>

                                this is my main page for testing
                            </span>

                        </div>


                    </div>
                    <br />
                </div>

            </div>

        </div>
    </div>

    <!--footer-->

    <div id="Footer"></div>

    </body>
</html>

Upvotes: 0

Views: 85

Answers (2)

bhansa
bhansa

Reputation: 7504

You need to run a local webserver, as you might be getting problems loading file in jquery underfile:///

Set up a webserver and then try to load them again.

Use npm : http-server

Upvotes: 1

Vindhyachal Kumar
Vindhyachal Kumar

Reputation: 1794

change ../ to /

e.g

  <link href="/Content/bootstrap.min.css" rel="stylesheet" />

Upvotes: 0

Related Questions