Im fairly new to JavaScript so finding it hard to understand. But Im making a homepage and I want an image slide show and Lightbox together, and I guess there a conflict between the different Js libraries. I also have read things like the No.Conflict script on the jQuery website but I have no idea on how to implement on to my HTML. Heres the code.
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
If some one can help me out that would be amazing. and put it in the simplest form would be super as well, as like I said Im quite new.
Thanks
remove the first script library from google and add only the .js jQuery file with your site
Related
I have this project where I imported bootstrap like this on my header:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
Everything was working fine until I decided to add a carousel.
The carousel shows up properly, but it doesn't rotate and the buttons on the side doesn't work.
I also noticed that my colapsed menu also don't work.
On my research I saw a lot of people suggesting to use reactstrap and some other third party libraries, but I'm wondering if it's possible keep using the link stylesheet.
From what I read the problem is with the jquery and bootstrap being imported in the wrong order, which might cause those elements to break.
Solved the issue using another website as reference:
https://www.bootstrapcdn.com/
Instead of using
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
I used
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
And it is finally working.
but it doesn't rotate and the buttons on the side doesn't work. I also noticed that my colapsed menu also don't work.
there is no functionality on your pages if dont import the js scripts.
add these scripts also and your buttons and collapse menu should start working
**for css link**
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
I've been trying to install Bootstrap into a project that I'm working on, but I'm being hit with Uncaught Error: Bootstrap's JavaScript requires jQuery. I've installed both through Bower, so I'm not sure whether that's related, but it's not having issues finding the files, so I don't think it is. Upon Googling the issue, I realized that the order in which I reference the script files matters, so I changed it to reflect what I had read, but that didn't fix the issue. When I looked into the directories in the file explorer, I saw a file called core.js, but including that didn't help either. I fairly certain that it's something to do with the way I reference files, so I'll provide that code, but feel free to ask if anything more is required.
index.html (root folder, following text is in body):
<script src="./bower_components/jquery/dist/jquery.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-route/angular-route.js"></script>
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-aria/angular-aria.js"></script>
<script src="./bower_components/angular-material/angular-material.js"></script>
<script src="angulator.js"></script>
<script src="./components/calculator/calculator.controller.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
I think you might have confused jQuery with angular. You are not including jQuery, but you are including angular (including angular-material, which is a competing framework to bootstrap).
If you want to use bootstrap with angular, you probably want to use ng-bootstrap instead of the standard Bootstrap JS, since it allows you to interact with Bootstrap components from inside your angular components. If you do this via the "standard" (non ng-bootstrap) JavaScript, things will start falling apart as soon as the Bootstrap JS mutates the DOM. You would also be unable to infer the view state from your component state (since you would need to call the functions of the bootstrap JS instead of data binding), which is pretty much the whole idea of angular.
You need jquery to remove the error
bower install jquery
I don't see you referencing jQuery in the code you provided. You've installed it via Bower, but you will still need to add a reference to it.
<script src="./bower_components/jquery/jquery.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-route/angular-route.js"></script>
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-aria/angular-aria.js"></script>
<script src="./bower_components/angular-material/angular-material.js"></script>
<script src="angulator.js"></script>
<script src="./components/calculator/calculator.controller.js"></script>
Import jQuery script before, like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-route/angular-route.js"></script>
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-aria/angular-aria.js"></script>
...
Bootstrap needs jQuery to work properly
Here is how you should include them both
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css"> <!--Bootstrap CSS-->
<link rel="stylesheet" href="css/main.css"> <!--Your custom css file-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Your content goes here -->
<script src="js/jquery-1.12.4.min.js"></script><!--jQuery -->
<script src="js/bootstrap.min.js"></script><!--Bootstrap js-->
<script src="js/main.js"></script> <!--Your custom javascript file-->
</body>
</html>
I think you have made a mistake while referencing JQuery.
It should be like :
<script src="bower_components/jquery/dist/jquery.min.js"></script>
and also make sure that you have included it before any other script file.
The correct way to include JQuery is also given on bower.io under Use Packages https://bower.io/
I'm building my first WordPress plugin and I've run into some trouble. I first created a custom page template with a contact form I created. It used Bootstrap JS, Bootstrap CSS, jQuery, and then jQuery UI for a datepicker. It also used an external stylesheet. Everything worked really well. I'm now turning this page template into a plugin so that I can use it across several websites easily, and to easier pull the theme's default design. I originally added Bootstrap JS, Bootstrap CSS, jQuery, and jQuery UI in the head of the .php file like this:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/chem-dry-contact/style.css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
I now understand this isn't the best way to link to external stylesheets and scripts for WordPress, and especially not for a plugin. But it did work before.
I was able to get all my html to show up as a plugin with a shortcode and everything, but it doesn't look like all of the external files are working. Here's how I set it up with WordPress's enqueue function:
function add_plugin_scripts() {
wp_enqueue_script( 'jquery-3.2.1', '/wp-content/plugins/ChemDry-PriceQuote/jquery-3.2.1.js', array(), null, true);
wp_enqueue_script('bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array(), null, true);
}
add_action( 'wp_enqueue_scripts', 'add_plugin_scripts' );
function add_plugin_styles () {
wp_enqueue_style('style', '/wp-content/plugins/ChemDry-PriceQuote/style.css');
wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
}
add_action( 'wp_enqueue_scripts', 'add_plugin_styles' );
My external CSS is working, and I think my Bootstrap CSS is working, but I don't think jquery and Bootstrap JS are working. The functionality it provided when I had it set up as a page template is no longer working, and when I tested it out by commenting out the jQuery line in my page template version, I got the exact same result as I'm getting now. I did already try to deregister jquery first and then try to reregister it...but that didn't work either.
Now I've read that WordPress comes with jQuery...but if I don't add it, I don't get the functionality I need. I've looked all over Stack Overflow for an answer but I can't quite seem to get this to work.
Again, this is my first plugin I've developed so I'd appreciate any help. Thank you.
Wordpress come with jquery and you should use JQuery keyword instead of $ at beginning of your statements.
You can check Following links aswell :
jquery is not defined in wordpress
not defined using JQuery
also You can Take look at following link for make $ work again:
Using ‘$’ instead of ‘jQuery’ in WordPress
Try this, order matters, usually you want to load style first. Then you need jQuery loaded, then load bootstrap since bootstrap require jQuery.
// A $( document ).ready() block.
$(document).ready(function() {
console.log("jQuery ready!");
});
<head>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/chem-dry-contact/style.css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
I"m trying to create this demo: http://jqueryui.com/dialog/#modal-message
I first decided to copy the source code and modify the file paths so that everything would match up accordingly. I changed the source path to the following, everything else I kept the same:
<link href="jquery-ui.css" rel="stylesheet" type="text/css">
<script src="jquery-ui.js"></script>
<script src="jquery.js"></script>
And my folder looks like this:
So theoretically I linked them all together correctly. But it doesn't appear to be the case when I click on the html file to test it. It's supposed to look like this:
But instead it looks like this:
And I have no idea why. I was hoping someone could help me replicate the demo that I found online. I'm not having much luck. http://jqueryui.com/dialog/#modal-message If anyone can figure it out I would greatly appreciate it. Thanks.
Change the sequence of the files as given below. Since jquery-ui is dependent on jquery. You need to load the jQuery library first.
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
Everything you are doing is correct except the order in which you are including the scripts.
Do this...
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css">
jQuery must included first, and its dependencies later.
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.