How to Destory and Initialize Reveal.JS - javascript

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?

Related

jQuery slick slider behaving weird

I am using Slick Slider for my product loop so the products can be a slider.
But on the page load there is a big white gap below the products, when i grab the products en start sliding the height is getting normal. Does any one know why it behaves like this?
Javascript:
$('.product-loop-home').slick({
dots: false,
infinite: false,
autoplay: true,
autoplaySpeed: 8000,
pauseOnFocus: false,
slidesToShow: 4,
slidesToScroll: 1,
});
Website URL: https://www.dev.ruitershopboxmeer.nl/
Thanks for your time!
hope this will help you =>
div.slick-track{
height: 500px !important; // height you want 500 is super
}
happy coding🎉

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

AnythingSlider Fx Transition Flicker

On the first rotation of slides there is small flicker that occurs during the Fx transition. It seems to only occur on the first rotation of slides & goes away after the first repeat.
Demo Page: http://dl.dropbox.com/u/12310886/Work/anythingslider/slide_left.html
Any ideas? I haven't been able to figure it out so far.
Thanks in advance!
Try changing your mode to fade (demo):
$(function () {
$('#slider').anythingSlider({
mode: 'fade',
autoPlay: true,
delay: 2000,
pauseOnHover: false,
buildStartStop: false,
buildArrows: false
}).anythingSliderFx({
'.left .content-wrapper': ['left']
}, {
timeIn: 300,
timeOut: 350,
stopRepeat: true
});
});

jquery accordion Expand while page loading

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

Categories