CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Banzboy
Banzboy

Reputation: 113

Inline Javascript works but not when external

I have this short Javascript code that I want to put in a external file. The reason being is because there will be many .htm pages that would use it. So instead of putting it all inline at every single file, I want to put it in an external file.

But the thing is, it doesn't work. The script is basically a "back to top" button. It works flawlessly when I put the script in the .htm file. Another note by the way, I'm loading the .htm file in a Div, could that cause problems? Edit: The file is loaded through the .load() jQuery function.

I have also tried putting the script inline in my index.html but it fails to work there too.

Here is the code:

$('.backtotopwrapper').click(function(){
  $('body,html').animate({scrollTop: "0px"},1500);
});

Update: I have tested my other .js code and the ones that have nothing to do with the .htm file work. The code that is specific to the elements inside the .htm is the only one that doesn't work.

Upvotes: 1

Views: 5041

Answers (2)

Gash
Gash

Reputation: 81

I had the same problem but didn't perform any solution mentioned here, i actually dicovered what made it work for me when my external scripts werent working but the same code works internally.

Just remove any spaces/special characters from your external script filename e.g instead of calling it "admin-script.js", call it "adminscript.js", without the special characters like the hyphen, then refer to the script with the new name and thats it, it worked for me.

Upvotes: 1

JFK
JFK

Reputation: 41143

OK, 3 files :

  • main.html
  • loremIpsum2.html
  • myScroll.js

1). In main.html I call jQuery and myScroll.js external files Also I have an empty wrapper div (<div id="loader"></div>) where I put the contents of loremIpsum2.html using jQuery .load() so

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>link to external js file</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="myScroll.js"></script>
  <script>
  /* <![CDATA[ */
   $(document).ready(function() {
     $("#loader").load("loremIpsum2.html");
   }); // ready​​​
  /* ]]> */
  </script>
 </head>
 <body>
  <div id="wrap">
   <div id="loader"></div>
  </div><!--wrap-->
 </body> 
</html>

2). In loremIpsum2.html, I have just a bunch of paragraphs but at the end I have my button :

<a class="backtotopwrapper" href="javascript:;">go to top</a>

3). In myScroll.js i Have the function for my scrolling button :

$(function () {
    $('body').on("click", ".backtotopwrapper", function () {
        $('body,html').animate({
            scrollTop: 0
        }, 1500);
    });
});

Since I am loading the file where the button is via .load(), I am using .on() in its delegated form.

See DEMO and feel free to explore the source code.

NOTE : .on() requires jQuery v1.7+

Upvotes: 3

Related Questions