jquery accordion Expand while page loading - javascript

jquery accordion should open while page loading.
after page loading complete accordion should compact automatically.
jQuery().ready(function(){
jQuery('#portslid').accordion({
collapsible: true,
autoheight: false,
alwaysOpen: false,
active: false,
animated: "bounceslide"
//animated: 'easeslide'
});
});

If you want the accordion to be open at page load you should change the active option to the element that you want to be open :
jQuery().ready(function(){
jQuery('#portslid').accordion({
collapsible: true,
autoheight: false,
alwaysOpen: false,
active: 1,
animated: "bounceslide"
//animated: 'easeslide'
});
});
And then at the load you close it :
jQuery(window).load(function(){
jQuery('#portslid').accordion({active: false});
});
EDIT : The jquery accordeon does not support to be all open , but there's work around like here : jQuery Accordion expand all div

Related

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');
});
});

slider not working inside tab inside tab content

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

How to Destory and Initialize Reveal.JS

I am using the Reveal.js for slide show. I have initailized the Reveal using the below code
Reveal.initialize({
history: false,
center: false,
controls: true,
mouseWheel: true,
transition: 'slide',
});
Once the slide show is completed i need to destory the Reveal (Stop/Close) and want to Initalize/Start whenever I want. How can I do this?

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

Prevent jquery fancybox from closing when clicking on link

I have a jquery fancybox with a normal a href link inside it. When I click on that link the fancybox closes. How can I prevent the fancybox to close after I clicked on the link?
This is the code for the fancybox:
$(function(){
$(".booking_module").fancybox({
maxWidth : 550,
topRatio : 0,
fitToView : false,
width : '100%',
height : 'auto',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
centerOnScroll: true,
autoResize: true,
autoCenter: true,
margin : [topmargin, 0, 0, 0],
helpers : {
overlay : {closeClick: false}
}
});
});
This option will disable closing fancybox when clicking on the background
$(document).ready(function() {
$(".booking_module").fancybox({
helpers : {
overlay : {
closeClick: false
} // prevents closing when clicking OUTSIDE fancybox
}
});
});
and this option will disable all default click methods of closing fancybox
$(document).ready(function() {
$(".booking_module").fancybox({
closeBtn : false,
closeClick : false,
helpers : {
overlay : {
closeClick: false
} // prevents closing when clicking OUTSIDE fancybox
},
keys : {
close: null
} // prevents close when clicking escape button
});
});
i think the second option is what you're looking for. Maybe without the "closeBtn"
The problem was that I was using 3 classes for the a href. One of those classes was not used anymore. When I removed that un-used class it didn't close anymore after clicking on that link.

Categories