Javascript not working on jsfiddle

Question

I'm working on jsfiddle but the javascript file doesn't seem to be added to my the html. I'm trying to remove a class from a div on my footer when the screen reaches a certain width. I'm using bootstrap and I have the following footer:

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<body>
<footer>
<div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <h2><b>Heading1</b></h2>
        <p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
        <p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
        <p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <div class="text-right" id="footer-right">
          <h2><b>Heading2</b></h2>
          <p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
          <p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
          <p><small>aaaaaaaaaaaaaaaaaaaaaaa</small></p>
        </div>
      </div>
    </div>
  </div>
</footer>

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>

Now, I want to remove the "text-right" class when the screen is 500px wide:

JAVASCRIPT

var readaptClasses = function(){
  var width = $(window).width();
  alert(width);
  if (width < 500){
    $("#footer-right").removeClass("text-right"):
  }
  else {
    $("#footer-right").addClass("text-right"):
  }
};

$(document).ready(readaptClasses);
$(window).on('resize', readaptClasses);

Nothing happens...

Where is the link to your jsfiddle? I can see that you have your script tage defined outside the `` though, which isn't a great idea. — Rory McCrossan, Apr 20 '15 at 08:58
Where is your custom js code imported ? Can you link your fiddlejs ? — julio, Apr 20 '15 at 08:58
Sorry I didn't want to copy all the html and I copied snippets, the scripts are inside the body. Do I have to add a script tag for the js? I thought it'd be automatically added as well as the CSS, which is the src URL? — Fernando, Apr 20 '15 at 09:04

iCollect.it Ltd · Accepted Answer · 2015-04-20T09:29:05.343

5

By adding parenthesis, (), you are immediately executing your code and are then passing the return value of readaptClasses() to the load function.

Try it this way instead:

$(document).load(readaptClasses)

So that you do not need to worry about where your code is placed, you should use $(document).ready(readaptClasses) and not load.

Note: A nice shortcut DOM ready handler would be just this:

$(readaptClasses);

Update:

Your code also has colons instead of semi-colons terminating a couple of lines. That just gives a syntax error in the console. Fixed version here:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/ebkecb3r/

Note you can simplify your code using toggleClass with a boolean second argument like this:

var readaptClasses = function(){
  var width = $(window).width();
  $("#footer-right").toggleClass("text-right", width >= 500);
};

JSFiddle: http://jsfiddle.net/TrueBlueAussie/ebkecb3r/2/

edited Apr 20 '15 at 09:29

answered Apr 20 '15 at 08:58

iCollect.it Ltd

92,391
25
181
202

Ok, I've changed that (I'm gonna edit the post), but it still doesn't work :\ – Fernando Apr 20 '15 at 09:16
You also have colons in your code instead of semi colons! – iCollect.it Ltd Apr 20 '15 at 09:19
Also, do not use `alert` to debug. `console.log` is your friend :) – iCollect.it Ltd Apr 20 '15 at 09:22
oh my god I didn't notice, sorry, I'm too used to working in environments with compilers on the fly, my bad. – Fernando Apr 20 '15 at 09:33
Use TypeScript (or other hi-level JS wrapper) :) – iCollect.it Ltd Apr 20 '15 at 09:34

score 0 · Answer 2 · edited May 23 '17 at 10:10

0

JavaScript should be executed after DOM has been loaded into browser. Executing it immediately can break it, because you will lack some DOM elements.

You have 3 choices:

Put your code inside $(document).ready() - this jQuery function will do the same -as @trueblueaussie suggested
Put your code at the end of body tag- it will execute after DOM will be parsed
Add defer attribute to your script - this will tell the browser to execute this script after DOM has been loaded.

This approach will also boost your page load, because client will first see some HTML, which will make him happy, and then your script will do the rest:)

Helpful links:

edited May 23 '17 at 10:10

Community

1
1

answered Apr 20 '15 at 09:02

Beri

11,470
4
35
57

As this is a jQuery tagged question, surely the jQuery DOM ready handler should be option #1 (and not use doc ready at all) . Then it does not matter where the code is in the page:) – iCollect.it Ltd Apr 20 '15 at 09:03
Og my mistake, just wanter do go from least to most advanced solution:) Will fix it – Beri Apr 20 '15 at 09:04
If you want most advanced (and most compatible) solution last, add `document.ready()` as option #4 :) – iCollect.it Ltd Apr 20 '15 at 09:05
I did not mean `document.load`... I mean `document.ready()`! Have updated my own answer to clarify these options. – iCollect.it Ltd Apr 20 '15 at 09:07
Option 2 should read "place you code at the end of the `body` tag". Option 3 should have a compatibility warning: http://www.w3schools.com/tags/att_script_defer.asp – iCollect.it Ltd Apr 20 '15 at 09:09
@TrueBlueAussie Once I added w3schools as ref, and I got bad reviews, since then I try to find other sources:/ – Beri Apr 20 '15 at 09:10
That is usually because you only have a link there. That page has the compatibility specs for `defer` (IE 10+ only) so not a good option for real work use (yet). – iCollect.it Ltd Apr 20 '15 at 09:13

Javascript not working on jsfiddle

2 Answers2

Update: