JavaScript file not applying to HTML

Question

I am attempting to use the "Transformer Tabs" shown here.

My code is as follows:

<head>

    <link href="tabs.css" rel="stylesheet" >
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="tabs.js"></script>

</head>

<body>
    <div class="tabs">

      <nav role='navigation' class="transformer-tabs">
        <ul>
          <li><a href="#tab-1">Important Tab</a></li>
          <li><a href="#tab-2" class="active">Smurfvision</a></li>
          <li><a href="#tab-3">Monster Truck Rally</a></li>
          <li><a href="http://google.com">Go To Google &rarr;</a></li>
        </ul>
      </nav>

      <div id="tab-1">
        <h2>Tab 1</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cum non iure magnam dolores earum nemo quo tempora ab unde! Nesciunt ea iste impedit suscipit cupiditate quam earum explicabo quas veniam doloribus sed aut aliquam repellendus deleniti laudantium molestias fuga nihil quidem voluptatum atque sapiente perferendis facilis. Tempora mollitia odio?
      </div>

      <div id="tab-2" class="active">
        <h2>Tab 2</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur est natus esse minima nihil quidem tenetur alias pariatur. Obcaecati repudiandae temporibus provident sapiente iure doloribus praesentium voluptates dolores quia eos velit fugit cum ipsam. Deleniti fugiat maxime vel tempore illum esse illo fugit quam recusandae aut aperiam omnis at quaerat!
      </div>

      <div id="tab-3">
        <h2>Tab 3</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores numquam cupiditate aliquam quisquam repellendus fugit eaque asperiores voluptatem ut accusamus soluta corporis in facere quae provident itaque magni eum repellat ducimus dolore. Beatae aperiam accusamus at voluptatem ad sunt mollitia perspiciatis tempora numquam rerum aliquam deserunt illum necessitatibus nisi omnis.
      </div>

      <div id="tab-4">
        <h2>Tab 4</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste officiis impedit ut culpa quaerat error pariatur voluptatum sapiente alias quasi itaque voluptas expedita necessitatibus odio dolorem totam veniam quisquam nulla vero placeat corporis cupiditate assumenda amet inventore mollitia quidem similique laudantium maxime aperiam ea reprehenderit iusto a ad tempora harum.
      </div>

    </div>

</body>

The "tabs.css" and "tabs.js" are in the same directory. While the "tabs.css" is applied, the "tabs.js" is not, and the result is simply a linear page with no tabs.

I have tried with and without jquery, and inserting the script manually into the head, and end of the body. The JS and CSS files are copied exactly from the working example. My browser has javascript enabled. The script file is definitely uploaded to the server. I am extremely stumped here, although I suspect the issue may be something silly.

Did you check the console for errors? Do you need to call a function in javascript to trigger the functionality? — brso05, Aug 13 '15 at 18:04
Well, did you use the jQuery for initiating the plugin? `Tabs.init();` — rrk, Aug 13 '15 at 18:10
I'm very new to JS, so I don't know how to do that. As for the function call again I'm not sure, I just copied the code in the working example. — jaycarleton, Aug 13 '15 at 18:11
To Rejith, yes, that was included at the bottom of the "tabs.js" file — jaycarleton, Aug 13 '15 at 18:15

score 3 · Accepted Answer · edited May 23 '17 at 10:26

3

The problem here is with your css file, check the example link properly, its not normal css they have used, its scss. so you first need to compile your scss file to css and then you can use it.

How to include SCSS file in HTML

You can take help from this link

edited May 23 '17 at 10:26

Community

1
1

answered Aug 13 '15 at 18:40

priya vyas

195
1
1
10

Thank you so much! I'd somehow never even heard of SCSS until now, I'll have to do some research. – jaycarleton Aug 13 '15 at 18:43
1

If you don't want to waste your time, You can directly get the compiled css file from your example link itself... and you are welcome! happy to help :) – priya vyas Aug 13 '15 at 18:49
1

Also i would like to point out that the current jquery lib you have loaded will give you console error. load google cdn instead src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" – priya vyas Aug 13 '15 at 18:55

rrk · Answer 2 · 2015-08-13T18:20:09.093

Add the following to your code. This is from the link you have provided.

<script>
    $(document).ready(function(){
        var Tabs = {
            init: function () {
                this.bindUIfunctions();
                this.pageLoadCorrectTab();
            },

            bindUIfunctions: function () {
                // Delegation
                $(document)
                    .on("click", ".transformer-tabs a[href^='#']:not('.active')", function (event) {
                    Tabs.changeTab(this.hash);
                    event.preventDefault();
                })
                    .on("click", ".transformer-tabs a.active", function (event) {
                    Tabs.toggleMobileMenu(event, this);
                    event.preventDefault();
                });
            },

            changeTab: function (hash) {
                var anchor = $("[href=" + hash + "]");
                var div = $(hash);

                // activate correct anchor (visually)
                anchor.addClass("active").parent().siblings().find("a").removeClass("active");

                // activate correct div (visually)
                div.addClass("active").siblings().removeClass("active");

                // update URL, no history addition
                // You'd have this active in a real situation, but it causes issues in an <iframe> (like here on CodePen) in Firefox. So commenting out.
                // window.history.replaceState("", "", hash);

                // Close menu, in case mobile
                anchor.closest("ul").removeClass("open");
            },

            // If the page has a hash on load, go to that tab
            pageLoadCorrectTab: function () {
                this.changeTab(document.location.hash);
            },

            toggleMobileMenu: function (event, el) {
                $(el).closest("ul").toggleClass("open");
            }
        }

        Tabs.init();
    });
</script>

Hi Rejith, unfortunately I already tried adding in the script as inline code. — jaycarleton, Aug 13 '15 at 18:18
yes.I also tried again directly copying this code, but no luck. — jaycarleton, Aug 13 '15 at 18:28

Andy Yong · Answer 3 · 2015-08-13T18:23:12.263

0

Place your javascript include statement at the bottom of the page (not in the header) or put the javascript in a document ready statement. Loading and running your javascript early causes jquery to attempt binding the tabs functionality to nothing (since the html markup hasn't been loaded yet).

Something like this

<head>
  <link href="tabs.css" rel="stylesheet" >
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
  // Tab stuff here
  <script src="tabs.js"></script> // this essentially does what $(document).ready(function ...) does
</body>

edited Aug 13 '15 at 18:23

answered Aug 13 '15 at 18:17

Andy Yong

41
6

1

can you post the code in tabs.js? To check the console on Chrome, [read this](https://developer.chrome.com/devtools). Post the errors you get there if any – Andy Yong Aug 13 '15 at 18:42
Hi Andy, unfortunately the problem turned out to be something else(see accepted answer). However, thank you for showing me how to use the console, this will come in handy in the future. – jaycarleton Aug 13 '15 at 18:58
Yeah I found that bug right before the answer was posted. I erased all the javascript from the codepen site and the preview didn't change. Then I realized, they were using scss. – Andy Yong Aug 13 '15 at 19:03

JavaScript file not applying to HTML

3 Answers3