JS doesn't load - javascript

Ok so I found the hamburger I want on codepen, the html and css works perfectly but the js won't load for some reason.
This is the link to the codepen codepen.io/sergioandrade/pen/onkub
and my files and folders are in order. My question is do I just copy the js as it is or should I add something I don't understand why this isn't working.
Thank you all in advance

It looks like this Codepen uses jQuery (by the use of the $ function). Have you included jQuery in your code? You can do so by including the following line in the <head> section of your HTML:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Related

How can I get the jQuery I worked on in jsfiddle to my website?

I'm working on a website mostly just for fun and am using HTML and CSS. I have some limited knowledge of these languages, but have never used jQuery before. But for only one page of the website, I wanted to have "linked sliders," which I found could be created using jQuery. I found a jsdiddle with some sliders and modified them to fit my project.
Here's the jsdiddle with the end product that I'd like to be embedded on one page of my site: http://jsfiddle.net/7e8xwjer/8/
I looked up how to add jQuery to a page, and took the following steps:
1) Downloaded jquery-1.12.3.js and renamed it jquery.js.
2) Added the following line of code in the head of the page:
<script type="text/javascript" src="jquery.js"></script>
3) Created a new .js file called js1.js with all the jQuery code from the jsdiddle.
4) Added the following line of code in the head of the page (in addition to the first):
<script type="text/javascript" src="js1.js"></script>
5) Added the CSS styling and HTML table from the diddle as needed.
The CSS and HTML table work fine, but none of the jQuery works. I'm sure I've made a simple error here, but I can't figure it out! Please let me know what other steps I need to take to get the jQuery script functioning on the site.
Thanks in advance for the patience and help.
JSFiddle, usually, (depends on the settings you choose [see image, point 1]) encloses all JS code into a document ready event so your js1.js should look something like:
$(document).ready( function(){
// your code from JSFiddle here
});
EDIT:
looking at your Fiddle, you are using JqueryUI [see image, point 2] so have to include it as others said in comments.
EDIT 2
your fiddle is set "onLoad" [see image, point 3] so to reproduce exactly the same condition you would have to replace $(document).ready with $(window).load; however I'm not sure that in your case you need to wait until all resources are loaded... So don't change it unless needed.
jQuery is a library of functions. You need to import them. When you download the library, you need to point the src= correctly. The directory where jquery is in relation to the overall file structure.
myharddrive
\ myfolders
\ mysubfolders
\ jquery
index.html
mycss.css
\ myfolders
src=/jquery/jquery.min.js

Error: Bootstrap's JavaScript requires jQuery

When i run my site on mozilla i got this error above.Here some code snippet which might be helpful
<script src="http://www.iclubz.com/js/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://www.iclubz.com/js/readmore.min.js"></script>
<script src="http://www.iclubz.com/js/chosen.jquery.js"></script>
<script src="http://www.iclubz.com/js/jquery.validate.min.js"></script>
<script src="http://www.iclubz.com/js/fileinput.min.js"></script>
But it's work fine on chrome.I don't know why this problem are showing.I'll helpful if anyone tell me the reason
Thanks in advance
Edited : i forgot to mention that all my javascript are called in the bollom of the page
Make sure to load jquery.js file before loading bootstrap.
This solved my problem.
That error can only be caused by one of three things:
Your JavaScript file is not being properly loaded into your page
You have a botched version of jQuery. This could happen because someone edited the core file, or a plugin may have overwritten the $ variable.
You have JavaScript running before the page is fully loaded, and as such, before jQuery is fully loaded.
You should check the Firebug net panel to see if the file is actually being loaded properly.
If not, it will be highlighted red and will say "404" beside it. If the file is loading properly, that means that the issue is number 2.
Make sure all javascript code is being run inside a code block such as:
$(document).ready(function () {
//your code here
});
Your first load jquery.js(min) then boostrap load
<script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>

Why doesn't vendored jQuery load for Sinatra framework?

I'm following a tutorial for vendoring jQuery in a Sinatra app and I can't seem to get jQuery to function. I usually use Google's CDN to load jQuery and it works every time but I can't seem to load it by vendoring and I don't know why. I'm more than certain this is something very trivial but I don't see it. Here are the directions I've followed as suggested by my tutorial.
Create a public/vendor/jquery.js file
Copy and paste the the UNCOMPRESSED jquery 1.11 into jquery.js
Create a javascripts/rating.js file and include this code to verify if jquery loaded.
$(function(){
console.log("loaded...");
});
When I use the inspect element tool and click on the Network tab, it says that jquery can't be found. What's going on? Oh and this is my index.html.erb file:
<body>
<h1>Rate It</h1>
<div id="rating-container"></div>
<script src="public/vendor/jquery.js" type="text/javascript"></script>
<script src="javascripts/rating.js" type="text/javascript"></script>
</body>
Help would be greatly appreciated. Thanks guys.
I finally got it. The tutorial has a typo in it! Referencing vendor/jquery.js instead of public/vendor/jquery.js worked. Geez.

my code doesn't work with the script i am calling from the base file

I have previously posted this: previous post about having problems to check and uncheck multiple elements with jquery.
The thing is that i have tried the code on fiddle and it's working perfect thanks to all the people who helped me: my fiddle but it is not working on my site.
I have a base.php that automatically loads core plugins, script and so... it's even calling:
<script src="{site_url()}assets/plugins/jquery-1.10.1.min.js" type="text/javascript"></script>
from the view file, i call the js function i use like this: (i use smarty template)
{block name='custom_javascript'}
<script src="{site_url()}assets/scripts/backend/filter-options.js"></script>
{/block}
The thing is that the check/uncheck function is not working. It only works when i call (again) the jquery library like this:
{block name='custom_javascript'}
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="{site_url()}assets/scripts/backend/filter-options.js"></script>
{/block}
even though it works, the style is not the same, because boxes and text appear not in line.
Am i doing something wrong with the library or what the problem could be? thanks on advance.
From your comments, the problem is that your scripts are getting loaded like this:
<!-- page -->
...template header (from base.php)
...your template code
<script src="...filter_options.js"></script> <-- coming from your template
...template footer (from base.php)
<script src="...jquery"></script> <-- coming from base.php
So from this you can see that jQuery does not get loaded until AFTER your script. The problem here is that your script (filter_options.js) depends on jQuery and requires it to be loaded before it can be used.
I would move the jQuery script to the head of your base.php. Ideally, you would move the jQuery script to the head, and leave all other scripts in the footer. This gives you the benefit of always knowing you have jQuery available for use, no matter where you place scripts in your template files.

Basic Javascript Image Gallery

I'm trying to setup a very basic jQuery image gallery.
You can see my attempts here: http://training.customstudio.co.uk/portfolio/detail/ee_project_four
I've duplicated the code from another site we created, have changed all the relevant div reference, but can't for the life of me get it working.
The images seem to be loading, but the jQuery effects not working.
Hopefully one of you guys can see the problem.
Thanks in advance,
Tom Perkins
This question is beyond simple.
Check in your head tag and find this..
<script type="text/javascript" src="-/js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="-/js/jquery-1.4.3.min.js"></script>
Correct them because they do not refer to actual javascript files but Html files

Categories

Resources