slider not working inside tab inside tab content - javascript

Im building a web app using the NativeDroid . Everything seems to be working fine but inside a tab panel, when i add a slider it doesnt work.
But it works when i refresh. But when i click the link through the menu it doesnt work until i refresh it
I have uploaded the pages over here Demo from the menu when u click on profile you will see the slider is not working.. There are no jquery errors on my console too.
below is code that i have used for the slider and a chart
$(document).on("pagecreate", ".page_bubble", function () {
$('.demo').percentcircle({
animate: true,
diameter: 100,
guage: 2,
coverBg: '#f4f8f9',
bgColor: '#f4f8f9',
fillColor: '#5c93c8',
percentSize: '19px',
percentWeight: 'normal'
});
$("#owl-demo").owlCarousel({
navigation: true, // Show next and prev buttons
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,
navigationText: ['']
});
});
Can someone tell me what might be causing it?

el.on("click",".nd2Tabs-nav-item:not('.nd2Tabs-active')",function(e) {
e.preventDefault();
_self.switchTab($(this),$(this).data('tab'),$(".nd2Tabs-nav-item").index($(this)[0]));
});
This is the event in nativedroid2.js where you need to add your percentcircle and owlCarousel binding event as below as #rory-mccrossan said on page load content doesn't exist that's reason it's not working change you js like below
el.on("click",".nd2Tabs-nav-item:not('.nd2Tabs-active')",function(e) {
e.preventDefault();
_self.switchTab($(this),$(this).data('tab'),$(".nd2Tabs-nav-item").index($(this)[0]));
$('.demo').percentcircle({
animate: true,
diameter: 100,
guage: 2,
coverBg: '#f4f8f9',
bgColor: '#f4f8f9',
fillColor: '#5c93c8',
percentSize: '19px',
percentWeight: 'normal'
});
$("#owl-demo").owlCarousel({
navigation: true,
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,
navigationText: ['']
});
});
Or You can make a delegate event and trigger that event here for more info please find This Answer

Related

swiper.js start/stop autoplay in loop mode

I have a gallery page with 16 swiper galleries.
I call swiper in loop mode of course with activated lazy-mode.
Now, when I hover over a gallery, I want that only this selected gallery starts the autoplay.
I can only managed to get all galleries to autoplay. But I want that only the activated gallery (mouseover) starts the autoplay.
I've tried "realIndex" or "activeIndex" but I keep getting an error message.
Maybe I'm just not using that correctly.
Here my Swiper setup:
$('.swiperFront').each(function (index) {
var frontSwiper = new Swiper($(this)[0], {
effect: 'fade',
slidesPerView: 1,
spaceBetween: 0,
lazy: true,
allowTouchMove: false,
centerInsufficientSlides: true,
centeredSlides: true,
centeredSlidesBounds: true,
disableOnInteraction: true,
});
$(".swiperFront").mouseenter(function(){
frontSwiper.autoplay.start();
});
$(".swiperFront").mouseleave(function(){
frontSwiper.autoplay.stop();
});
});
I tried following changes:
$(".swiperFront").mouseenter(function(){
frontSwiper[realIndex].autoplay.start();
});
$(".swiperFront").mouseleave(function(){
frontSwiper[realIndex].autoplay.stop();
});
$(".swiperFront").mouseenter(function(){
frontSwiper[activeIndex].autoplay.start();
});
$(".swiperFront").mouseleave(function(){
frontSwiper[activeIndex].autoplay.stop();
});
$(".swiperFront").mouseenter(function(){
frontSwiper.activeIndex.autoplay.start();
});
$(".swiperFront").mouseleave(function(){
frontSwiper.activeIndex.autoplay.stop();
});
$(".swiperFront").mouseenter(function(){
frontSwiper.realIndex.autoplay.start();
});
$(".swiperFront").mouseleave(function(){
frontSwiper.realIndex.autoplay.stop();
});
None of these changes work and I don't want to invoke a separates swiper setups for each gallery.
I already googled for a solution but all the solutions don't refer to the loop variant
Any ideas?

Lazyload cutting off image height when dynamic height is turned on

When I enable Lazyload on my image slideshow with the dynamic height enabled, it cuts off and only shows a fraction of the photo height, I have attached a screenshot, if the initial load you can view the images perfectly, please use the toggle arrows and you will be able to see what I mean.
I have been trying various fixes to no avail and as this was a html theme I purchased, unfortunately, the theme author has also not been able to help me, your help will be much appreciated.
The JS I have in my custom script file is:
$(".property-carousel").owlCarousel({
rtl: _rtl, items: 1, lazyLoad : true,
responsiveBaseWidth: ".property-slide", dots: false,
autoHeight: true, nav: true, navText: ["", ""], loop: true
});
I also had this problem, "lazyLoad" combined with "autoHeight" cut off some images because the lazy-loaded images' heights weren't taken into account by the owl carousel. For me, this works (modification of the answer from #baduga):
var myCarousel = $(".property-carousel").owlCarousel({
lazyLoad : true,
autoHeight: true
});
myCarousel.on('loaded.owl.lazy', function(event) {
myCarousel.trigger('refresh.owl.carousel');
});
try to add auto height on function
owlCarousel({
items: 1,
loop: true,
autoHeight: true
});
set auto height true
autoHeight: true
You need to set lazyload true in OwlCarousel:
lazyLoad: true
Go to the documentation for more.
Here's my solution of the problem:
gallery.owlCarousel({
margin:5,
loop:false,
autoHeight:true,
items:1,
nav: false,
dots: false,
lazyLoad:true
});
gallery.on('loaded.owl.lazy', function(event) {
$(this).find('.owl-item.active img').one('load', function () {
gallery.trigger('refresh.owl.carousel');
});
});

Set fancybox to open on a different fancybox close

Is there a way to set a fancybox to open whenever a separate fancybox closes?
I have tried the following
$('a.linkEditClass').fancybox({
href: "#editClassPanel",
closeClick: false,
autoDimensions: true,
autoScale: false,
afterClose: function() {
$.fancybox({
href: "#classInfoPanel"
});
}
});
But this doesn't seem to be doing anything. Here is my other fancybox code for reference
$('a#linkClassInfo').fancybox({
href: "#classInfoPanel",
// maxHeight: 350,
// maxWidth: 425,
closeClick: false,
autoDimensions: false,
autoScale: false
});
They both target div's.
When you close fancybox, it takes a little while for it to clean up and complete the closing process so, opening another fancybox while the clean up process is running may trigger a js error that voids the second box from opening.
Just give it a little bit of time and it should work so
afterClose: function () {
// wait for this box to close completely before opening the next one
setTimeout(function () {
$.fancybox({
href: "#classInfoPanel"
});
}, 300);
}
See JSFIDDLE

jQuery does not work when reload the page content via ajax

I use Bootstrap to display a popover, until there is with all this code below everything works normal.
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
I only need to load the content of the page via ajax, then I changed the code because when I load the content dynamically I need to delegate events, changed the code and it looked like this:
$('body').on('click','.emoticons',function()
{
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
});
Now my troubles started. The code works however when I click the first time it does not work, so it works when I click more than once on the link. What to do?
What's happening is that when you are clicking on the .emoticons and executing your popover function, it is at that moment that you are binding it to your click. That's why it doesn't work the first time, but it works afterwards. It starts listening to the click event after that.
Ideally, the solution is to run the .popover function when the new content is loaded (on your AJAX callback).
If you want to just copy paste my code and see if it works, you can do this:
$('body').on('click','.emoticons',function()
{
// Convert this element into a popover and then display it
$(this).popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {
return $('.emoticonimg').html();
}
}).popover('toggle');
});
But, I would NOT recommend this code specifically, since you are re-initializing your popover every time you click on it.
It's better and more clear if you bind all popovers after your AJAX request is done:
$.ajax( "BlaBlaBla.php" )
.done(function() {
// Convert all emoticons to popovers
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {
return $('.emoticonimg').html();
}
});
});
It doesn't work the first time because the first click if firing off the body onclick handler which binds your popover.
Try something like this in your $(document).ready() function.
$(".emoticons").click(function(){
$(this).popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
});

jQuery Dialog Popup showing, but not popping up

I have a Login Control I'd like to popup. The control is rendering, in a UI-dialog box even, but it's rendering on the page itself, not in a dialog popup. This is my first project using jQuery UI dialogs, but I haven't had a problem in other locations.
Because my access check is all code side I have attempted to simply the issue with
autoOpen: true,
Here is the jQuery:
function OpenLoginDialog() {
$("#divLoginOpen").dialog({
autoOpen: true;
appendTo: "#divSurveyMainPage",
modal: true,
dialogClass: "no-close",
width: 650,
height: 400,
title: "Login Please",
show: {
effect: "size",
duration: 800
},
hide: {
effect: "clip",
duration: 800
},
closeOnEscape: false
}).css('z-index', '1005');
return false;
}
My JSfiddle (below) has the HTML included, I've also moved the control HTML into the div where it belongs.
http://jsfiddle.net/p10bcxuq/
Please help! Thanks!
Actual Example: http://www.codelogically.com/Forms/Surveys/Surveys.aspx
I have updated your fiddle here - it had a lot of server side stuff which needed to be removed. You also need an opener.
$( "#opener" ).click(function() {
OpenLoginDialog();
});

Categories