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.
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..
I m having a problem with Bootstrap Dialog library designed to assist in modal windows.
I would like to use the library in WHMCS but it seems as though the files I need to include break the template.
As indicated by the examples I included:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>
But as soon as I do this the template breaks. It throws litterally everything out of place, including the menus and images in WHMCS. But the popup I excecute does show.
If I remove the <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> the template does go back to normal, but then the command that I call to show the dialog does nothing. I cannot see a response in the console, nor do I see anything happen in the browser anymore.
What could be the cause & a possible solution to this issue?
Is there a way to use this library and/or another similar library?
I would love any and all advice in this matter.
Bootstrap Dialog: https://nakupanda.github.io/bootstrap3-dialog/
Good evening!
I'm writing an application on the mobile platform 'Steroids'. I don't know why, but on each screen of my app the awful debugging 'Loading'. I can't understand, where is it added, it is absent in html DOM (if to check it in google chrome). I also tried to turn off some scripts which are included by he default, but anyway, I could find the reason. Please, share your ideas. The list of scripts, which are added:
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" href="/vendor/ionic/css/ionic.css" />
<link rel="stylesheet" href="vendor/stylesheets/application.css" />
<script src="/javascripts/onerror.js"></script>
<script src="/javascripts/console.log.js"></script>
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script src="/javascripts/application.js"></script>
Fairly new to jQuery, trying to use Autocomplete. Went to http://jqueryui.com/download to build my own download, selected "Autocomplete" from the "Widgets" section. This caused "Core", "Widget", and "Position" to auto-check.
I downloaded my custom jQuery UI, and followed the instructions and included the following in my page.
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.7.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
But, Autocomplete would not function, and firebug revealed no errors. I decided to include:
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
And everything started working! But I am confused, I thought the jQuery builder would have included all necessary code and styling for Autocomplete to function correctly, so why have I needed to add these extra includes to get it working? Thanks
It appears you are using the autocomplete plugin, rather than the one from jQuery UI
See this question for the difference.