I ran into an interesting issue. I'm pretty sure that the answer is very simple, but I just couldn't figure it out so I thought I look for some help.
Basically, my carousel doesn't slide. It just switches image. I even tried copying the exact HTML from the bootstrap site into my own page and it still doesn't slide. In application.js, the initialization is also has no argument.
// carousel demo
$('#myCarousel').carousel()
I notice that next and prev classes are added to each item when clicking pref/next button, but it doesn't seem to do the same thing on mine. I didn't see anything wrong when I debugged either.
What am I missing? I tested this in both latest Chrome and Safari.
You also have to add bootstrap-transition for the sliding to work, like so:
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script>
I was having the same issue but with bootstrap v2.0.3 (which has transition bundled in), ended up adding the slide class to the carousel div
<div id="myCarousel" class="carousel slide">
then you just call:
$('#myCarousel').carousel();
I think you need
$('#myCarousel').carousel('cycle');
Pls also see:
How can I make the Bootstrap js carousel automatically cycle as soon as the page loads?
Here is a working example. It's probably something minor your missing.
http://jsfiddle.net/chapmanc/Vza6F/1/
Do you just put that JavaScript in a <script> tag?
<script>
$('.carousel').carousel({
interval: 1000
});
</script>
check the css files that you have included. Try and add the bootstrap.css file as well in addition to bootstrap.min.css. It worked for me .
Related
I am in the process of creating a Shopify store and would like to go a little beyond what the themes are offering. Specifically I am triyng to add wow.js and animate.css.
As you can see below, I have added the CDN for Animate.css in the head tag of template.liquid.
Next I added the CND for Wow.js and activated is as such:
It seems to be loading the scripts just fine, even adds the animated class as one scrolls to the element, but for some reason none of the aniamtion is taking place.
Any input into alleviating this issue is much appreciated!
Well this was utterly annoying. Anyhow the way to refernce/activate Animation.css animations now seems to be with class animate__animated and NOT just animated like it used to be.
This means that when one is initialising wow.js one must change that animationClass to animate__animated as such:
new WOW({
animateClass: 'animate__animated', // --> WOW default is animated but that does not work anymore
}).init();
And the Animation.css animations must be as such:
<div class="wow animate__fadeInUp">Lorem</div>
It might be that your theme's CSS is overriding animate.min.css since it's being loaded before it. Try loading animate.min.css last, just before the closing </head> tag
I had asked a previous question regarding multiple bootstrap carousels and had received an absolutely fine code from a Stack Overflow user.
You can see the code here: How to place two bootstrap carousels in the same page? Under Last Edit
I am using the same code provided by the user. But the problem is the carousels are freezing up when the page stays open for long.
By freezing up I mean the first slider, stops sliding after the specified interval. If I manually click on the navigation button, it slides.
For the second carousel and the thumbnails, the problem is that when I am clicking on a thumbnail, the respective image is not showing up in the second carousel.
No amount of refreshing or copy pasting the code into the page helps.
There are obviously other elements on my page too, but none have jquery or similar class names. So overlapping of class names or id names is ruled out.
Where is the problem?
Any kind of help would be greatly appreciated. Thanks.
Here you're missing a }); in your code, as I review your jsfiddle, this is a terminator for this jQuery(document).ready(function($) {. Check the jsfiddle now here.
Add the ‘data-interval’ on the first line of code
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000"></div>
1000 is 1 second, and 3000 is 3 seconds. You can replace ‘3000’ with your desired slider speed.
I found that solution, to expand all accordion sections:
http://www.bootply.com/peFUdnwOpZ
I copied the code in Joomla.
Via Gantry I loaded Javascript file. I tried even, to load the javascript within the article.
But It is not working. Can Anybody help?
Background information:
I had to add bootstrap min.js, otherwise, the function "accordion" was not working properly. Template is working with Bootstrap 3.3.6.
I tried even to add the exact same files, loaded in http://www.bootply.com/peFUdnwOpZ.
//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js
//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
Next Try. I loaded script via Joomla plugin. I loaded the script in header and body, before and after head/body tag.
Nothing worked.
I traced it down: On another template, I worked with, I figured out, that the order of loading the 3 javascripts is very important. So, loading manually before end of header is much important! first jquery.min.js than bootstrap.min.js and than custom javascript (see in the example link) worked. But on my own site, it seems, there are some errors in loading jquery and bootstrap javascript properly. Because console says:
null is not an object (evaluating '$('.closeall').click')
So, it misses the link to the other javascript files. Maybe some can help?
I believe you may have forgot to add the following piece of code in your custom js file -
$('.closeall').click(function(){
$('.panel-collapse.in')
.collapse('hide');
});
$('.openall').click(function(){
$('.panel-collapse:not(".in")')
.collapse('show');
});
Hope this may work for you :-)
I’ve created a new version of my website.
I have two problems with the final version.
First problem:
To sum up, I use the Animsition plugin to start the CSS fade transition between pages and when I scroll, I use the WOW library and Animate.css to start the CSS fadeup on my pictures.
My problem, when the page is loaded for the first time, the CSS fadeup have already started. It works perfectly when the page has already been loaded.
May be, is it a problem with the JS code? I don’t find the solution.
Second problem:
It’s about the image hover effects on iOS, I have to tape twice on the screen to start the image link and I would like to tape one.
Many thanks in advance for your assistance.
On Console I have Seen This Error
Uncaught Error: Bootstrap's JavaScript requires jQuery
Try this
Change the order of files it should be like below..
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
Reference :
Bootstrap won't detect jQuery 1.11.0 - Uncaught Error: Bootstrap's JavaScript requires jQuery
I have looked through quite a few posts on here dealing with this issue, but none of them seem to solve my problem.
I have imported the jQuery and Bootstrap js files in the right order. Things such as bootstrap panels are working perfectly fine for me.
My script imports are like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
However, when I try
$('[data-toggle="popover"]').popover();
I get the following message in the Chrome console:
Uncaught TypeError: $(...).popover is not a function
At first I thought maybe popover was not being included in CDN's copy, so I went ahead and downloaded a local copy with all the plugins included from here:
http://getbootstrap.com/customize/
and got the same error message (re-pointed the script tags towards the local js file).
Doing a search for "popover" the bootstrap.min.js file:
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js
Shows that popover is included in the file.
Since you have stated you have included jQuery and the other libraries correctly, 1 possible case is there could be multiple instances of jQuery in the page.
So based on the server technology used, search for a duplicate version of jQuery and if there is any remove them(if not needed else will have to think about noConflict() use).
In case of duplicate jQuery instances the problem is the jQuery version to which the plugin is attached might be different from the one which you are accessing to use the plugin at that point the plugin will not be found.
https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
The order of including bootstrap.js and jquery.js matters. Include the jquery.js BEFORE bootstrap.js
For Bootstrap 5 onwards this is how you add popovers
Code for Button:
<button type="button" class="btn btn-secondary mx-2" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
Your Cart(<span id="cart">0</span>)
</button>
Script:
<script type="text/javascript">
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
</script>
Had the same problem and checked jquery version. Moving to v1.12 helped me
What worked for me, was making a call to $.noConflict() which returned control of $.
That was because some other JavaScript libraries use $ as a function or variable name, just like jQuery does. During jQuery initialization, there are some old references of $ saved. noConflict() restores them.
$noConflict();
jQuery(document).ready(function ($) {
$("#id").popover('hide');
});
Assuming you are correctly added popover script in the your site.
To fixed the "$(...).popover is not a function" bug. Sometime just add a timer delay can be fix it.
$('[data-toggle="popover"]').popover();
Modify to
setTimeout((function() {
$('[data-toggle="popover"]').popover();
}),500);
Sometimes (always) the web page doesn't fully render the content and the POPOVER will gives this error. So, We need 500ms delay starting the popover script. Sometimes 500ms is not enough to wait for rendering, so more delays can be modified as needed.
Even in bootstrap 5 has this issue too
Conclusion
POPOVER script starting need waiting whole page completely render.
So based on the server technology used, search for a duplicate version of jQuery and if there is any remove them(if not needed else will have to think about noConflict() use).
This is Happen due to Differ version of bootstrap
In This case use script of same version as your bootstrap
In other case jquery is not recommended. insted use Advance Css Js
This is also happen cause latest bootstrap doesn'
After hours, I found out that I forgot to attach bootstrap.js file to my page ;)