How to link jQuery from a CDN and a JS script in HTML code

Question

I am well aware that this is kinda of an idiot question,but I am rather new to JS and JQuery and how to link it to HTML code, but none of the similar threads lead to a solution.

By some miracle, I found and modified some JSFiddle code into this: https://jsfiddle.net/z7L2re8j/

Now, I'm trying to load JQuery from a CDN, and I also have a JS file with the functions to make the HTML (and CSS) work properly.

HTML's file head:

The files old.js and new.css are essentially the code that is written on the corresponding tabs in the JSFiddle link. However, when I run the HTML code with the links as you see, it's not the same as the preview in JSFiddle. And I don't know what I am doing wrong.

So, am I doing the linking of the files correctly, and if not, what are my mistakes?

Thank you in advance

mplungjan · Accepted Answer

If your question is how to link to old.js and new.css, look in the network tab and see where the browser is looking for them

To use CDN for jQuery and Bootstrap and get that information from a JSFiddle you can do this:

Click on resources in JSFiddle

Right click on the links and open in new tab, you will see they are Bootstrap v3.3.7
Go to https://getbootstrap.com/docs/5.0/getting-started/introduction/ and get the latest or search google first for bootstrap CDN: I found for example https://www.bootstrapcdn.com/ and from there you can take the versions you want/need

Alternative since I can see your JSFiddle is not bootstrap 5 compatible:

https://blog.getbootstrap.com/2016/07/25/bootstrap-3-3-7-released/

$('ul.nav li.dropdown').hover(function() {
  var first = $(this).find('.dropdown-menu')[0];
  $(first).stop(true, true).delay(20).fadeIn();
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(20).fadeOut();
});

$('ul.nav li#secondary').hover(function() {
  console.log("reached sub here 1");
  $(this).find('.sub-menu').stop(true, true).delay(20).fadeIn();
  console.log($(this).find('.sub-menu'));
}, function() {
  $(this).find('.sub-menu').stop(true, true).delay(20).fadeOut();
});

$('ul.nav li#third').hover(function() {
  console.log("reached sub here 1");
  $(this).find('.sub-menu').stop(true, true).delay(20).fadeIn();
  console.log($(this).find('.sub-menu'));
}, function() {
  $(this).find('.sub-menu').stop(true, true).delay(20).fadeOut();
});

$('ul.nav li#fourth').hover(function() {
  console.log("reached sub here 1");
  $(this).find('.sub-menu').stop(true, true).delay(20).fadeIn();
  console.log($(this).find('.sub-menu'));
}, function() {
  $(this).find('.sub-menu').stop(true, true).delay(20).fadeOut();
});

.navbar .sub-menu: before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}

.navbar .sub-menu: after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
}

.navbar-toggle {
  z-index: 3;
}

nav.navbar i.fa {
  padding-left: 5px;
  padding-right: 5px;
}

ul.nav li:hover>ul.dropdown-menu {
  display: block;
}

#navbar {
  text-align: center;
}

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  display: none;
  margin-top: -1px;
}

#navbar-collapse-new.navbar-collapse {
  padding-top: 0px;
  padding-right: 38px;
}





  





  
  



  
    

      
      
        
          
            Villas 
            

              1 Bedroom Villas
                
                  
                    Fig Tree Villa
                  
                  
                    Mulberry Villa
                  
                  
                    Grapevine Villa
                  
                
              
              2 Bedroom Villas
                
                  
                    Bougainvillea Villa
                  
                  
                    Margarita Villa
                  
                  
                    Oleander Villa
                  
                  
                    Violeta Villa
                  
                
              
              3 Bedroom Villas
                
                  
                    Jasmin Villa
                  
                  
                    Lemoni Villa
                  
                  
                    Mandarin Villa
                  
                
              
            
          
        
         Contact Us

How to link jQuery from a CDN and a JS script in HTML code

Answers (1)

Related Questions