Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I'm trying to load jQuery library following videos but it does not work. When I'm trying to load some jQuery function, it writes that jquery is not defined. I also tried CDN.
<title>
GRID
</title>
<link rel="stylesheet" href="grid.css">
<link href="https://fonts.googleapis.com/css?
family=Ubuntu&display=swap" rel="stylesheet">
<script src="jquery-2.1.1.min.js"></script>
<script src="script.js"></script>
</head>```
You need to put jquery-2.1.1.min.js file into same location where your quoted file is if we are talking about local purposes.
If your prefer to download it each time, you can use for example Google Hosted Libraries in following way:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Like so <script src="jquery-2.1.1.min.js"></script>, jquery have to be in the root of your domain, like your script.js.
If you want CDN, use:
<script rel="prefetch" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>
Or official jQuery CDN:
<script
rel="prefetch"
src="https://code.jquery.com/jquery-2.1.1.min.js"
integrity="sha256-h0cGsrExGgcZtSZ/fRz4AwV+Nn6Urh/3v3jFRQ0w9dQ="
crossorigin="anonymous">
</script>
Related
I am building a website on Visual Studio Code and I'm using Bootstrap 5.3, but the functions are not working - buttons not expanding, carousel not rolling, etc. I'm a beginner, so I've been struggling to understand why :(
Do someone know what's the issue or had the same problem?
Many thanks!
I used the CDN from here: https://getbootstrap.com/docs/5.3/getting-started/download/
This is what I have in head - these are followed by my own css file only.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
*I didn't start my own JavaScript yet, only have the html and css files.
You will need to include both of the required resources. Put them both in your <head> element.
The Bootstrap5 css (style) bundle
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
The Bootstrap5 JavaScript Bundle
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
Source: https://getbootstrap.com/docs/5.3/getting-started/download/
If you edit your post to contain the html itself then we can have a look and see what the issue is. This will most likely lead to better answers for you.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have created some Restaurant website, that's got single Menu page containing different food items. The problem is that above mentioned page is loading too slow on first load. Firstly, i thought that when u enter the Menu page, all items with appropriate images (about 200 images) are loading and this is the root cause of the problem, but then i set up JS trigger which clicks certain menu-item on page-load and loads only 6 images. However, it didn't help. So please, describe some ways of optimizing my page for fast loading.
Thanks a lot in advance! :)
Even if only 6 images are loaded, depending on the size of the images, it'll be slow.
COnsider resize your images to optimize the speed.
You can do it using Gimp / Photoshop or this website: https://tinypng.com
[EDIT]
Don't use all these separated files in Production:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/nivo-lightbox.css">
<link rel="stylesheet" href="css/nivo_themes/default/default.css">
<link rel="stylesheet" href="css/hover-min.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/style.css">
the CSS inside the HTML
And do you really need THAT many JS files?
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script src="js/isotope.js"></script>
<script src="js/imagesloaded.min.js"></script>
<script src="js/nivo-lightbox.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.parallax.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/custom.js"></script>
Don't use in this way, minify all and be sure that you are using the minified version of jquery, not the jquery.js.
Check it here: https://code.jquery.com/
Give a try to Grunt to help you with the automation and minification of the code: https://gruntjs.com/
Or just use this website: https://www.minifier.org/
You should optimize you all images:
You can use online tool for this:
Compress jpeg
url : https://compressjpeg.com/
Compress png
url: https://compresspng.com/
You can upload many picture on it and this will zip folder of compress images.
After optimize all images you site speed will increase.
Use java script ajax and create pagination for listing. i.e you will get data from database and display only 10 values at once. and for images.. pick some of your common images and create sprite .. these 2 things help you the most. in your every single project..
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
For some reason my HTML file is not picking up my custom CSS files for Bootstrap. Code below:
<head>
<title>Site Name</title>
<!-- METAs -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<!-- Stylesheets -->
<link href="bootstrap.min.css" rel = "stylesheet">
<link href="styles.css" rel = "stylesheet">
</head>
<body>
This loads the default Bootstrap CSS, but not the styles.css file. The file is in the same directory, and there is code in it. For the life of me I can't figure this out and my only guess is it is somewhere in this head portion. I can provide other snippets if need be, and I have tried other paradigms like LESS with no luck either.
This snippet will eventually go into a PHP include file for easier editing. I have my java script saved in a similar type file at the foot of the site with the footer.
I was going to guess it was a host side issue until I tested it locally and the issue still did not resolve.
Any suggestions to help me keep my sanity would be most appreciated!
Are you positive that it isn't loading? What does the console say?
If it is throwing a 404, then there's something wrong with the path you're specifying.
If it isn't throwing a 404, then it is loading and just not overriding what you want it to override.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have seen a few questions that are similar but they didn't seem to have the answers that helped me. So, I come to you with hat in hand.
My site was working perfectly under a test URL and then when I moved all the files to the parent url, no code changed, just a simple copy and paste with all the links updating themselves, all of a sudden I get no javascript plugins working.
Everything else came over just fine, it is only the javascript that is giving me problems. When I look at the site through firebug, it doesn't seem to show any problems. I am absolutely pulling my hair out on this one.
This is the setup I have right now:
<!-- /// CSS Stylesheets //////// -->
<link type="text/css" href="../style.css" rel="stylesheet" media="all" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
<!-- /// jQuery //////// -->
<script type="text/javascript" src="../_layout/js/jquery-1.8.0.min.js" ></script>
<!-- /// SelectNav //////// -->
<script type="text/javascript" src="../_layout/js/selectnav/selectnav.min.js"></script>
<!-- /// Imagebox //////// -->
<link rel="stylesheet" type="text/css" href="../_layout/js/imagebox/imagebox.css" />
<script type="text/javascript" src="../_layout/js/imagebox/jquery.imagebox.min.js"></script>
<!-- /// FlexSlider //////// -->
<link rel="stylesheet" type="text/css" href="../_layout/js/flexslider/flexslider.css" />
<script type="text/javascript" src="../_layout/js/flexslider/jquery.flexslider.min.js"></script>
<!-- /// Carousel //////// -->
<link rel="stylesheet" type="text/css" href="../_layout/js/carousel/carousel.css" />
<script type="text/javascript" src="../_layout/js/carousel/jquery.carousel.min.js"></script>
<!-- /// Validity //////// -->
<link rel="stylesheet" type="text/css" href="../_layout/js/validity/css.validity.css" />
<script type="text/javascript" src="../_layout/js/validity/jquery.validity.js"></script>
<!-- /// Custom JS //////// -->
<script type="text/javascript" src="../_layout/js/scripts.js"></script>
<script type="text/javascript" src="../_layout/js/plugins.js"></script>
Again, everything worked before the move, so I don't think that there is anything wrong with the individual javascript files themselves. If you don't see anything wrong here, then it might be the DOM? Full disclosure, I know nothing about the DOM, if anybody has a good source for learning about configuring the DOM for beginners, please do let me know.
I appreciate any time that any of you can give to this problem.
I suspect the problem is caused by the fact that you are using relative URLs, and perhaps your new web server setup has changed. Have you tried going to the NET tab in Firebug to see if all of the JavaScript files load successfully (make sure you arent getting an HTTP 404 error)?
Make sure you're pointing to correct location. If you were in /web_root/test/ and you just moved everything to /web_root/, you'll need to update the src attribute of all your imported scripts to reflect this change. Assuming you just moved your files up one directory, you can simply get rid of the first ../. For example,
<script type="text/javascript" src="../_layout/js/jquery-1.8.0.min.js" ></script>
Would be
<script type="text/javascript" src="_layout/js/jquery-1.8.0.min.js" ></script>
It would be helpful to know the directory structure for your site, specifically the directory you were in while testing everything, and the directory you moved everything into.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have my "good.html" and "jquery.js" file in a folder on desktop called "jquery2."
Here is my code
<!doctype html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
console.log('ready');
});
</script>
</body>
</html>
Your
<script type="text/javascript" src="jquery.js"></script>
is not referencing the file on your desktop.
In order to make this work, you should upload the files to a server.
You don't need a server but you do need to use a good path to the javascript file on your desktop, on windows like so:
<script type="text/javascript" src="C:\Users\username\Desktop\jquery2\jquery.js"></script>
works for me on windows 7 with chrome browser. console shows ready.
If I make the path bad, console shows "Uncaught ReferenceError: $ is not defined" followed by a red X box next to
GET file:///C:/Users/wrongusername/Desktop/jquery2/jquery.js
Its issue with your Javascript path... put on same folder of your code or
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
more info
Where do you include the jQuery library from? Google JSAPI? CDN?
<script type="text/javascript">
$(document).ready(function(){
alert('ready');
});
</script>