I have a problem with BxSlider. After initialization I tried to call default methods from BxSlider, but in console I'm getting error "TypeError: mainSlider.reloadSlider is not a function". Also with console.dir I'm not getting default methods from object, just jQuery methods. Any Help?
$(document).ready(function(){
var singleSlide = $('.bxslider li').length == 1;
var sliderSpeed = $('.bxslider').data('speed')?$('.bxslider').data('speed'): 5000;
//bx-slider function
mainSlider = $('.bxslider').bxSlider({
auto: !singleSlide,
touchEnabled: true,
pause: sliderSpeed,
adaptiveHeight: true,
onSliderLoad: function(){
$('.bxslider').css("visibility", "visible");
resizeHomeSlider();
}
});
mainSlider.reloadSlider();
}
Changes:
Added var to mainSlider to keep it in local scope not global
auto is a Boolean
- pause is an Interger (Took a second look, and I see that's ok.)
Define resizeHomeSlider outside the bxSlider scope then callback from within the bxSlider scope.
This is of course untested since not every detail was provided.
$(document).ready(function() {
var singleSlide = $('.bxslider li').length;
var sliderSpeed = $('.bxslider').data('speed') ? $('.bxslider').data('speed') : 5000;
//bx-slider function
var mainSlider = $('.bxslider').bxSlider({ // Include a var so mainSlider is not global
auto: true, //------auto is a Boolean (true/false, 0/1...)[it operates on it's own.]
touchEnabled: true,
pause: sliderSpeed,
adaptiveHeight: true,
onSliderLoad: resizeHomeSlider
});
// Define the function outside of bxSlder block
resizeHomeSlider(idx) {
// It doesn't matter if you use idx, but you should have it declared.
$('.bxslider').css("visibility", "visible");
// Do resizing magic...
}
mainSlider.reloadSlider();
});
<link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<ul class="bxslider" data-speed='5000'>
<li></li>
Related
i want lo listen to event but it's not working for me
as you can see i try to use console.log(pages); to listen to number of pages but when i open console i don't get any response
var owl = $('.owl-carousel');
owl.owlCarousel({
onDragged: callback,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items: 1,
loop: true,
autoplay: false,
nav: true,
dots: true
});
function callback(event) {
var pages = event.page.count; // Number of pages
console.log(pages);
}
Could you please help?
Callbacks
Instead of attaching an event handler you can also just add a callback to the options of Owl Carousel.
$('.owl-carousel').owlCarousel({
onDragged: callback
});
function callback(event) {
...
}
Data
Each event passes very useful information within the event object . Based on the example above:
function callback(event) {
// Provided by the core
var element = event.target; // DOM element, in this example .owl-carousel
var name = event.type; // Name of the event, in this example dragged
var namespace = event.namespace; // Namespace of the event, in this example owl.carousel
var items = event.item.count; // Number of items
var item = event.item.index; // Position of the current item
// Provided by the navigation plugin
var pages = event.page.count; // Number of pages
var page = event.page.index; // Position of the current page
var size = event.page.size; // Number of items per page
}
From:
http://www.owlcarousel.owlgraphic.com/docs/api-events.html
Your example looks fine to me, just print after and before to make sure your property will be taken by owlCarroussel. Did you add the right jQuery header?
jQuery
<script src="jquery.js"></script>
<script>
var owl = $('.owl-carousel');
alert('before')
owl.owlCarousel({
onDragged: callback,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items: 1,
loop: true,
autoplay: false,
nav: true,
dots: true
});
alert('After')
function callback(event) {
var pages = event.page.count; // Number of pages
console.log(pages);
}
</script>
I am using BxSlider plugin of jQuery in my page, but it behaves very strange, when I use this code to make slider using BxSlider only the slider works nothing else work even my custom functions. Meaning all the other functions stop working without throwing errors in console. I am stuck! I have tried many things but no success, Is there anything wrong my this BxSlider code or something else?
Code for my BxSlider is:
var perLink = jQuery('#qc-per');
var nextLink = jQuery('#qc-next');
var CustomPager = jQuery('#qc-custom-pager');
var BxSlider;
var ActualPager;
window.onload = function() {
console.log('ready');
BxSlider = jQuery('.bxslider').bxSlider({
infiniteLoop: false,
touchEnabled: true,
pager: true,
pagerType: 'short',
pagerShortSeparator: ' de ',
nextText: 'SIGUIENTE',
prevText: 'ANTERIOR',
hideControlOnEnd: true,
slideWidth: 690,
adaptiveHeight: true,
autoControls: true,
onSlideAfter: function (slideElement, oldIndex, newIndex) {
var total = BxSlider.getSlideCount();
var current = newIndex + 1;
if (total == current) {
nextLink.css('visibility', 'hidden');
} else {
nextLink.css('visibility', 'visible');
}
if (current <= 1) {
perLink.css('visibility', 'hidden');
} else {
perLink.css('visibility', 'visible');
}
CustomPager.text(ActualPager.text());
}
});
ActualPager = jQuery('.bx-default-pager');
CustomPager.text(ActualPager.text());
perLink.css('visibility', 'hidden');
}
function doNext() {
BxSlider.goToNextSlide();
}
function doPerv() {
var slideNr = BxSlider.getCurrentSlide() - 1;
BxSlider.goToSlide(slideNr);
}
I have included the "jquery.bxslider.js" also, but the other functions stops working only if I use/insert the above code to make the slider.
I am using jquery-1.11.3.min.js and BxSlider v4.1.2. Also I have Mootools in the site too.
Thank you and please let me know if my question is not clear.
After spending 2 days on the same code and same page I found that the first slide of BxSlider was replecating all the page in it everytime and it was causing the js libraries load again within each time slider load.
The first slide or BxSlider was looking something like
<img src="...." >WHOLE PAGE WAS LOADING AGAIN IN IT WAS CAUSING PROBLEM</img>
I still do not know if its a bug of BxSlider or due to my both libraries, I a using Mootools and Jquery at the same time due to some reasons.
To resolve this I used
window.onload = function() {
//CODE ------
}
Instead of
jQuery(document).ready(function () {
//CODE ------
});
I hope it will help someone.
I'm working with Flexslider and I'm running into a bit of trouble with some of the controls. I have a pretty simple configuration although I want to change the position of one of the direction arrows when the .flex-disabled class isn't present on it's adjacent control. First call is to flexslider, pretty typical. Then the second call is something I wrote but does not seem to fully function. Any help would be appreciated.
<script>
$(window).load(function() {
var $flexslider = $('.flexslider');
$flexslider.flexslider({
animation: "fade",
animationLoop: false,
animationSpeed: 500,
//controlsContainer: ".content",
directionNav: true,
manualControls: ".flex-control-nav li",
nextText: "View Next Property",
prevText: "View Previous Property",
slideshow: false
});
});
</script>
<script>
$(window).load(function(){
var previousControl = $('.flex-nav-prev a');
var nextControl = $('.flex-nav-next a');
if(previousControl.hasClass('.flex-disabled')){
nextControl.parent().css('left','.5em')
} else {
nextControl.parent().css('left','5em')
}
});
</script>
Try removing the period in the if:
if(previousControl.hasClass('flex-disabled')){
nextControl.parent().css('left','.5em')
} else {
nextControl.parent().css('left','5em')
}
I know in the first version of owl carousel we do it like this :
var $carousel = $('#carousel');
var owl = $carousel.data('owlCarousel');
owl.reinit({touchDrag: false, mouseDrag: false;});
Ok, but how we do it in the second version, i don't know how they renamed it.
For some reasons $('#your_carousel').trigger('destroy.owl.carousel') is not working correctly. it does not remove all classes which are needed to reinit the plugin again.
You'll need to remove them completely to destroy the "owl carousel 2". like described here in this issue on github: https://github.com/smashingboxes/OwlCarousel2/issues/460
To destroy the owl function use:
$('#your_carousel').trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
$('#your_carousel').find('.owl-stage-outer').children().unwrap();
This worked perfect for me:
// find element
$owl = $('body').find('#your_carousel');
// set the owl-carousel otions
var carousel_Settings = {
touchDrag: false,
mouseDrag: false
};
function initialize(){
var containerWidth = $('body').find('.navbar').outerWidth();
if(containerWidth <= 767) {
// initialize owl-carousel if window screensize is less the 767px
$owl.owlCarousel( carousel_Settings );
} else {
// destroy owl-carousel and remove all depending classes if window screensize is bigger then 767px
$owl.trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
$owl.find('.owl-stage-outer').children().unwrap();
}
}
// initilize after window resize
var id;
$(window).resize( function() {
clearTimeout(id);
id = setTimeout(initialize, 500);
});
// initilize onload
initialize();
You can do that with destroy but you have to use latest develop branch:
$('#carousel').owlCarousel('destroy');
$('#carousel').owlCarousel({touchDrag: false, mouseDrag: false});
Or with direct access to the plugin:
$('#carousel').data('owl.carousel').destroy();
$('#carousel').owlCarousel({touchDrag: false, mouseDrag: false});
Now, you can destroy it like that:
var simple = $('#simple');
simple.owlCarousel(); // created
simple.owlCarousel('destroy'); // destroyed
This definitly works:
if (container.hasClass("owl-carousel")) {
container.owlCarousel({
touchDrag: false,
mouseDrag: false
});
container.data('owlCarousel').destroy();
container.removeClass('owl-carousel owl-loaded');
container.find('.owl-stage-outer').children().unwrap();
container.removeData();
}
And the plugin itself:
if (this.settings.responsive !== false) {
window.clearTimeout(this.resizeTimer);
$(window).off('resize.owl.carousel');
this.off(window, 'resize', this.e.onThrottledResize);
}
in Owl.prototype.destroy = function()
I am not sure, have you tried the replace?
As per the OwlCarousel documentation, listed here http://www.owlcarousel.owlgraphic.com/docs/api-events.html, the event to trigger is "replace.owl.carousel". You can implement it like this :
var $carousel = $('#carousel');
var owl = $carousel.data('owlCarousel');
owl.trigger('replace.owl.carousel', [{touchDrag: false, mouseDrag: false;}]);
Hope that helps!
If use v1.3 I make next
$('#OwlWrapper').owlCarousel({option...});
$('#OwlWrapper').append('<div><img class="img-fluid" src="demo_files/images/1200x800/5-min.jpg" alt=""></div>');
$('#OwlWrapper').data('owlCarousel').reinit();
It's work for me.
$('#your_carousel').trigger('destroy.owl.carousel').removeClass('owl-carousel
owl-loaded');
$('#your_carousel').find('.owl-stage-outer').children().unwrap();
Just do this to destroy the owl carousel and then use the general init function to reinit.
For Owl Carousel v2.3.4 version,
// Slider element.
let sliderElement = $('#msg-slider');
// Destroy first.
sliderElement.trigger('destroy.owl.carousel');
// Then empty whole owl div.
sliderElement.empty();
// Re-init owl slider.
sliderElement
.owlCarousel({
loop:true,
margin:0,
nav:false,
dots:true,
responsive:{
0: {
items: 1
},
600: {
items:1
},
1000: {
items:1
}
}
});
Hopefully, this will help someone. Thanks.
Following code is a pretty simple and complete JQuery Dialog. Everything works.
Problem is as mentioned at the title in js1.js: (see its comment)
It always try to load the page by calling horsedlgcontainer.load('page2.html'); never hits the else horsedlg.dialog('open'); statement.
Any idea please? Thank you very much!
page1.html ...
<!DOCTYPE html>
<head>
<link href="Site.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.8.21.custom.css" rel="Stylesheet" type="text/css" />
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
<script src="js1.js" type="text/javascript"></script>
</head>
<body>
<div id="horse-link">
[<a id="horse-link-show-dialog">Click Me</a>]
</div>
<div id="horse-link-dialog-container"></div>
</body>
page2.html ...
<script src="js2.js" type="text/javascript"></script>
<div id="horse-dialog" title="Horse!">
Q: When is a horse not a horse?<br />
A: It depends, when a white horse is not a horse.<br />
</div>
js1.js ...
$(document).ready(function () {
var horselnk = $('#horse-link'),
horsedlg = $('#horse-dialog'),
horsedlgcontainer = $('#horse-link-dialog-container'),
showdlgbtn = $('#horse-link-show-dialog');
$.ajaxSetup({ cache: false });
showdlgbtn.click(showHorseDialog);
function showHorseDialog() {
if (horsedlg.length==0)
horsedlgcontainer.load('page2.html');
else //to improve performance, open it again, don't load the same page
horsedlg.dialog('open'); //Why never come here?!?
}
});
js2.js ...
$(document).ready(function () {
var horsedlg = $('#horse-dialog'),
horselnk = $('#horse-link');
horsedlg.dialog({
modal: true, autoOpen: true, resizable: false,
height: 500, width: 350, closeOnEscape: true,
show: {effect:'puff',percent:150,duration:250},
hide: {effect:'puff',percent:110,duration:250}
});
});
You're only evaluating horsedlg = $('#horse-dialog') once, and it's before the content is loaded, so its .length property is always zero.
I suspect you'll also run into problems with loading a secondary JS file when you load the dialog content. A single JS file would be cleaner:
$(document).ready(function () {
var options = {
modal: true, autoOpen: true, resizable: false,
height: 500, width: 350, closeOnEscape: true,
show: {effect:'puff',percent:150,duration:250},
hide: {effect:'puff',percent:110,duration:250}
};
var loaded = $.Deferred();
$('#horse-link-show-dialog').on('click', function() {
var state = loaded.state();
if (state === 'resolved') {
$('#horse-dialog').dialog('open');
} else if (state === 'pending') {
// do nothing
} else {
$('#horse-link-dialog-container').load('page2.html')
.fail(loaded.reject);
.done(function() {
$('#horse-dialog').dialog(options);
loaded.resolve();
});
});
}
});
});
This uses a jQuery deferred object to indicate whether the dialog box has finished loading or not.
NB: code untested - jsfiddle isn't good for testing AJAX.
As metnioned by #Alnitak the issue is you are trying to search for #horse-dialog even before the element is available in the dom..in your case it will be available after the page2.html load.
Tweak your code to as below and you can do away with js2.js:
$(document).ready(function () {
var horsedlgOptions = {
modal: true, autoOpen: true, resizable: false,
height: 500, width: 350, closeOnEscape: true,
show: {effect:'puff',percent:150,duration:250},
hide: {effect:'puff',percent:110,duration:250}
};
var horselnk = $('#horse-link'),
horsedlg = $('#horse-dialog'),
horsedlgcontainer = $('#horse-link-dialog-container'),
showdlgbtn = $('#horse-link-show-dialog');
$.ajaxSetup({ cache: false });
showdlgbtn.click(showHorseDialog);
function showHorseDialog() {
if (horsedlg.length==0)
horsedlgcontainer.load('page2.html');
horsedlg = horsedlgcontainer.find("#horse-dialog");
horsedlg.dialog(horsedlgOptions);
else //to improve performance, open it again, don't load the same page
horsedlg.dialog('open');
}
});
The variable horsedlg is locally defined within the first $(document).ready function - so when that code is executed horsedlg.length equals 0 as the DOM element with the id of horse-dialog isnt present on the page.
You cannot change that locally defined variable - so the length always equals 0.
You could do this instead :
function showHorseDialog() {
var horsedlg = $('#horse-dialog');
if (horsedlg.length == 0) {
horsedlgcontainer.load('page2.html');
} else { //to improve performance, open it again, don't load the same page
horsedlg.dialog('open'); //Why never come here?!?
}
}