I'm making a one page website and I'm trying to get the navbar links to reflect what section of the page you're on. I've tried using it through HTML with no success.
I had this code on the container that contains my different sections
<div class="container" data-spy="scroll" data-target="#navbar">
and the body is set to relative.
Since that wasn't working I tried using Scrollspy with javascript using this
$('.container').scrollspy({ target: '#navbar' })
Also with no luck. I have the jQuery CDN before the bootstrap CDN but I'm getting this error in the console. Uncaught TypeError: $(...).scrollspy is not a function
CodePen: https://codepen.io/kjardine/pen/VqEbaz
If you check your console, you’ll see an error. Bootstrap 4 (at the moment) requires an additional js script to run properly. Add popper.js before Bootstrap 4 js file and the Scrollspy should work just fine. Here’s the cdn: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js.
I also suggest to add a little bit of offset to compensate for the navbar’s height. This way the links will light up at the right time while scrolling or clicking. You can do it in your JS like so:
$('body').scrollspy({ target: '#navbar-example', offset: 50 });
I had the same problem migrating from bootstrap 4.5 to 5.0. the fix was to replace:
$('body').scrollspy({ target: '#navbar-example' })
with:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
see bootstrap documentation:
https://getbootstrap.com/docs/5.0/components/scrollspy/#methods
Related
I'm trying to use owl carousel in a wordpress ACF custom block.
owl carousel works if I don't put jQuery(document).ready in my script.
But if I have jQuery(document).ready, the console tells me "jQuery (...). OwlCarousel is not a function".
Then i don't know if there is link beetwen both but i have thumbnail gallery to click for launch slider on specific image and that code :
jQuery('.single_image_gallery').click(function(){
mySlide = parseInt(jQuery(this).attr('data-slide'));
jQuery(mySlider).trigger("to.owl.carousel", [mySlide, 1,true])
})
not working at all.
i know there is problem with jQuery migrate for wp 5.5 but I tried with the plugin "Enable jQuery Migrate Helper" and the result is the same....
Try doing this.. Sometimes plugins can interfere with jQuery
jQuery(function($) {
// then use it like this
$('.single_image_gallery').click(function(){
mySlide = parseInt($(this).attr('data-slide'));
$(mySlider).trigger("to.owl.carousel", [mySlide, 1,true])
});
});
This way you import $ locally and it should prevent it from interfering with other global scripts or plugins
I added a class (format-date) to a custom field in Post Grid but I can't seem to apply any JS to it.
<div class="vc_gitem-post-meta-field-_EventStartDate format-date vc_gitem-align-left"> 2015-10-08 07:30:00</div>
Simple jQuery test:
$('.format-date').addClass('test')
Code is in the footer and I've tried $(window).load(function() $(document).ready(function(). No JS errors in Fire Bug.
I suspect it's due to the loading animation applied to the posts. How can I call my JS after this has loaded?
This worked:
$(document).ajaxStop(function() {
// your code here
});
I am trying to put nivo-slider on my drupal home page. Although all images are showing but they are not sliding and when I check consol, I see an error in nivo-slider.js file i.e.
"Uncaught TypeError: undefined is not a function"
My nivo-slider.js code is-
(function ($) {
Drupal.behaviors.nivoSlider = {
attach: function (context, settings) {
// Initialize the slider
$('#slider').nivoSlider({ *//here I am getting error mentioned above*
'effect': Drupal.settings.nivo_slider.effect, // Specify sets like: 'fold,fade,sliceDown'
'slices': Drupal.settings.nivo_slider.slices, // For slice animations
'boxCols': Drupal.settings.nivo_slider.boxCols, // For box animations
'boxRows': Drupal.settings.nivo_slider.boxRows, // For box animations
'animSpeed': Drupal.settings.nivo_slider.animSpeed, // Slide transition speed
'pauseTime': Drupal.settings.nivo_slider.pauseTime, // How long each slide will show
'startSlide': Drupal.settings.nivo_slider.startSlide, // Set starting Slide (0 index)
'directionNav': Drupal.settings.nivo_slider.directionNav, // Next & Prev navigation
'directionNavHide': Drupal.settings.nivo_slider.directionNavHide, // Only show on hover
'controlNav': Drupal.settings.nivo_slider.controlNav, // 1,2,3... navigation
'controlNavThumbs': Drupal.settings.nivo_slider.controlNavThumbs, // Use thumbnails for Control Nav
'pauseOnHover': Drupal.settings.nivo_slider.pauseOnHover, // Stop animation while hovering
'manualAdvance': Drupal.settings.nivo_slider.manualAdvance, // Force manual transitions
'prevText': Drupal.settings.nivo_slider.prevText, // Prev directionNav text
'nextText': Drupal.settings.nivo_slider.nextText, // Next directionNav text
'randomStart': Drupal.settings.nivo_slider.randomStart, // Start on a random slide
'beforeChange': Drupal.settings.nivo_slider.beforeChange, // Triggers before a slide transition
'afterChange': Drupal.settings.nivo_slider.afterChange, // Triggers after a slide transition
'slideshowEnd': Drupal.settings.nivo_slider.slideshowEnd, // Triggers after all slides have been shown
'lastSlide': Drupal.settings.nivo_slider.lastSlide, // Triggers when last slide is shown
'afterLoad': Drupal.settings.nivo_slider.afterLoad // Triggers when slider has loaded
});
}
};
}(jQuery));
Help me to sought out this error..thanks!!
Include jquery.js main file in header before any js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
When you use two different versions of jquery (which is not recommended), you can use
jQuery.noConflict
api.jquery.com/jQuery.noConflict/
I had encountered a similar problem before. This issue can be fixed by making use of Jquery Update module in Drupal 7 & setting the version of jquery library to 1.9 & above.
Do let me know in case of any doubts
Also please note that in Drupal you should never add Jquery library explicitly because Drupal core by default adds a jquery library.
When you try to add a jquery.js in the head
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
There will be 2 jquery libraries now & which will conflict.
So we need to use jquery update module to upgrade the library
Another likely candidate is referring to jQuery with $ (dollar):
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#main-content").fitVids();
});
If you instead use the no-conflict reference in your script, as below, this may fix the error
jQuery(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
jQuery("#main-content").fitVids();
});
I just ran into some issues configuring Nivo View Slider on Drupal 7.
I didn't read the module's documentation at first but it looks like Nivo Slider's library isn't included in the package, you need to upload it manually to your server.
Here is the documentation : https://www.drupal.org/project/views_nivo_slider
To sum it up :
install/enable Library API
download Nivo Slider libs from https://github.com/gilbitron/Nivo-Slider/downloads
unzip the archive to sites/all/libraries/nivo-slider
At step 2, you'll have to choose between version 2.x or 3.x
On the module's project page, it says that version 3.x might be broken on Google Chrome, I didn't have any issue myself...
So I have a simple carousel made on bootstrap and what I want is when we enter the carousel the slide to stop.
Everything works but when the mouse enters a problem happens. The div that has to disappear doesn't slide but disappears
<script>
$(document).ready(function() {
$('#myCarousel').carousel({interval: 1000})
.on('slid', function (e) { $(this).carousel({interval:false}); });
});
</script>
Example: http://jsfiddle.net/Ferkp/
After a bit of research, it seems that this was a known bug in Bootstrap 2.x.
By upgrading to Bootstrap 3.0, the appearance of the carousel gets changed, but the bug is fixed. You can grab the CSS and JS from a CDN:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Oh, and you might still want to include the result from the other answer (that's now deleted, it seems) and change $(this).carousel({ interval: false }); to $(this).carousel('pause');, otherwise that piece of code doesn't do anything.
And if upgrading to Bootstrap 3.0 isn't an option for some reason, there's a method provided on the bug report page to edit the Bootstrap Javascript itself to fix the bug in 2.x.
JSFiddle demo
I've downloaded Fraction Slider from #jacksbox and have gone through the documentation countless times now and cannot figure out why my slider won't show the effects it's supposed to. This is the site I'm working on: http://pacificdesignacademy.com/NEW/2 and this is an example of what the slider is supposed to do: http://jacksbox.de/stuff/jquery-fractionslider/.
Here is the path to my js: ../NEW/2/fractionslider/jquery.fractionslider.js
And here is the path to my css ../NEW/2/fractionslider/fractionslider.css
All of the images are just stacking on top of one another regardless of me defining overflow:hidden on the containing element.
Not sure what else to do here, so any help is greatly appreciated. I'm supposed to launch this site September 1st... eep!
Thanks!
A simple check in the browser's console showed you have a syntax error on line 594 of your page. You have a closing parenthesis instead of an opening brace.
UPDATE After you fixed that, you're now getting the error :
Uncaught ReferenceError: jQuery is not defined
I suggest you move your code and place it after you've included both jQuery and the slider plugin, so your page should look like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="fractionslider/jquery.fractionslider.js"></script>
<script type="text/javascript">
jQuery(window).load(function(){
$('.slider').fractionSlider({
'fullWidth': true,
'controls': true,
'pager': true,
'responsive': true,
'dimensions': "1200,400",
'increase': false,
'pauseOnHover': true
});
});
</script>
You are missing an opening parenthesis when calling the plugin.
Change
$('.slider').fractionSlider()
To
$('.slider').fractionSlider({
On line 593
FractionSlider is garbish! Use LiquidSlider instead!
What one doesn't have but exist in the other:
well formated object oriented code,
automatic hardware acceleration with the new CSS3 transforms if the browser supports it (no js animation here!),
keyboard navigation,
hash linking where user can bookmark a specific slide or land to a page that opens slider to a specific slide,
many effects,
mobile 'swap' support
user extensible.
Of course it uses some other libraries and code snipets 'stolen' from here and there (https://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/ but actually it's reduntant as the use of Moderniz library in responsive designs makes the detection as simple as a one-line command, http://easings.net/ for the easing equations, https://daneden.me/animate/ for the transformations etc.)
The idea behind FractionSlider is indeed unique but the implementation sucks!