How i can draw data-id for each column item in my function updateIndices simillar to updateColumnIndices?
I want to make my grid more dynamic.
I using only javascript and Muuri lib for drag and drop.
Thank you for help.
Muuri is a JavaScript layout engine that allows you to build all kinds of layouts and make them responsive, sortable, filterable, draggable and/or animated. Comparing to what's out there Muuri is a combination of Packery, Masonry, Isotope and Sortable. Wanna see it in action? Check out the demo on the website.
My code for this task under spoiler
function setupItemContainer() {
let itemContentContainer = document.querySelectorAll('.board-column-content');
for(let i = 0; i < itemContentContainer.length; i++)
{
if(!itemContentContainer[i].classList.contains('muuri'))
{
itemContainers.push(itemContentContainer[i]);
muuriItems = new Muuri(itemContentContainer[i], {
itemDraggingClass: 'muuri-item-default-dragging',
dragSortHeuristics: {
sortInterval: 10,
minDragDistance: 5,
minBounceBackAngle: Math.PI / 2
},
dragPlaceholder: {
enabled: true,
duration: 100,
easing: 'ease',
createElement: null,
onCreate: null,
onRemove: null
},
items: '.board-item',
layoutDuration: 400,
layoutEasing: 'ease',
dragEnabled: true,
dragSort: function () {
return columnGrids;
},
dragSortInterval: 0,
dragContainer: document.body,
dragReleaseDuration: 400,
dragReleaseEasing: 'ease',
itemPlaceholderClass: 'muuri-item-placeholder'
})
.on('dragStart', function (item) {
item.getElement().style.width = item.getWidth() + 'px';
item.getElement().style.height = item.getHeight() + 'px';
})
.on('dragReleaseEnd', function (item) {
item.getElement().style.width = '';
item.getElement().style.height = '';
columnGrids.forEach(function (muuriItems) {
muuriItems.refreshItems();
});
})
.on('layoutStart', function () {
muuriColumns.refreshItems().layout();
})
.on('move', updateIndices)
.on('sort', updateIndices);
columnGrids.push(muuriItems);
}
}
}
function setupColumnsContainer() {
muuriColumns = new Muuri(gridElement, {
itemDraggingClass: 'muuri-item-column-dragging',
layoutDuration: 400,
layoutEasing: 'ease',
dragEnabled: true,
dragSortInterval: 0,
dragStartPredicate: {
handle: '.board-column-header'
},
dragReleaseDuration: 400,
dragReleaseEasing: 'ease',
})
.on('move', updateColumnIndices)
.on('sort', updateColumnIndices);
}
function updateColumnIndices() {
muuriColumns.getItems().forEach(function (item, i) {
item.getElement().setAttribute('data-id', i);
});
}
function updateIndices() {
muuriItems.getItems().forEach(function (item, i) {
item.getElement().setAttribute('data-id', i);
});
}
I know there are many questions related to this problem. I have read them all but I am not still able to fix my problem. I am getting this error:
jQuery.Deferred exception: Cannot read property 'on' of undefined TypeError: Cannot read property 'on' of undefined
at initCustomDropdown (http://localhost/wordpress/wp-content/themes/****/lib/js/custom.js:116:15)
at HTMLDocument. (http://localhost/wordpress/wp-content/themes/****/lib/js/custom.js:45:2)
at l (http://localhost/wordpress/wp-content/themes/jessica/lib/js/jquery-3.3.1.min.js:2:29375)
at c (http://localhost/wordpress/wp-content/themes/****/lib/js/jquery-3.3.1.min.js:2:29677) undefined
However I am not able to get the point. My custom.js line number 116 is like this:
$(document).ready(function() {
"use strict";
/*
1. Vars and Inits
*/
var menuActive = false;
var header = $('.header');
setHeader();
initCustomDropdown();
initPageMenu();
initDealsSlider();
initTabLines();
initFeaturedSlider();
featuredSliderZIndex();
initPopularSlider();
initBanner2Slider();
initFavs();
initArrivalsSlider();
arrivalsSliderZIndex();
bestsellersSlider();
initTabs();
initTrendsSlider();
initReviewsSlider();
initViewedSlider();
initBrandsSlider();
initTimer();
$(window).on('resize', function() {
setHeader();
featuredSliderZIndex();
initTabLines();
});
/*
2. Set Header
*/
function setHeader() {
//To pin main nav to the top of the page when it's reached
//uncomment the following
// var controller = new ScrollMagic.Controller(
// {
// globalSceneOptions:
// {
// triggerHook: 'onLeave'
// }
// });
// var pin = new ScrollMagic.Scene(
// {
// triggerElement: '.main_nav'
// })
// .setPin('.main_nav').addTo(controller);
if (window.innerWidth > 991 && menuActive) {
closeMenu();
}
}
/*
3. Init Custom Dropdown
*/
function initCustomDropdown() {
var placeholder;
if ($('.custom_dropdown_placeholder').length && $('.custom_list').length) {
placeholder = $('.custom_dropdown_placeholder');
var list = $('.custom_list');
}
if (placeholder) {
placeholder.on('click', function(ev) {
if (list.hasClass('active')) {
list.removeClass('active');
} else {
list.addClass('active');
}
$(document).one('click', function closeForm(e) {
if ($(e.target).hasClass('clc')) {
$(document).one('click', closeForm);
} else {
list.removeClass('active');
}
});
});
}
$('.custom_list a').on('click', function(ev) {
ev.preventDefault();
var index = $(this).parent().index();
placeholder.text($(this).text()).css('opacity', '1');
if (list.hasClass('active')) {
list.removeClass('active');
} else {
list.addClass('active');
}
});
$('select').on('change', function(e) {
placeholder.text(this.value);
$(this).animate({
width: placeholder.width() + 'px'
});
});
}
/*
4. Init Page Menu
*/
function initPageMenu() {
if ($('.page_menu').length && $('.page_menu_content').length) {
var menu = $('.page_menu');
var menuContent = $('.page_menu_content');
var menuTrigger = $('.menu_trigger');
//Open / close page menu
menuTrigger.on('click', function() {
if (!menuActive) {
openMenu();
} else {
closeMenu();
}
});
//Handle page menu
if ($('.page_menu_item').length) {
var items = $('.page_menu_item');
items.each(function() {
var item = $(this);
if (item.hasClass("has-children")) {
item.on('click', function(evt) {
evt.preventDefault();
evt.stopPropagation();
var subItem = item.find('> ul');
if (subItem.hasClass('active')) {
subItem.toggleClass('active');
TweenMax.to(subItem, 0.3, {
height: 0
});
} else {
subItem.toggleClass('active');
TweenMax.set(subItem, {
height: "auto"
});
TweenMax.from(subItem, 0.3, {
height: 0
});
}
});
}
});
}
}
}
function openMenu() {
var menu = $('.page_menu');
var menuContent = $('.page_menu_content');
TweenMax.set(menuContent, {
height: "auto"
});
TweenMax.from(menuContent, 0.3, {
height: 0
});
menuActive = true;
}
function closeMenu() {
var menu = $('.page_menu');
var menuContent = $('.page_menu_content');
TweenMax.to(menuContent, 0.3, {
height: 0
});
menuActive = false;
}
/*
5. Init Deals Slider
*/
function initDealsSlider() {
if ($('.deals_slider').length) {
var dealsSlider = $('.deals_slider');
dealsSlider.owlCarousel({
items: 1,
loop: false,
navClass: ['deals_slider_prev', 'deals_slider_next'],
nav: false,
dots: false,
smartSpeed: 1200,
margin: 30,
autoplay: false,
autoplayTimeout: 5000
});
if ($('.deals_slider_prev').length) {
var prev = $('.deals_slider_prev');
prev.on('click', function() {
dealsSlider.trigger('prev.owl.carousel');
});
}
if ($('.deals_slider_next').length) {
var next = $('.deals_slider_next');
next.on('click', function() {
dealsSlider.trigger('next.owl.carousel');
});
}
}
}
/*
6. Init Tab Lines
*/
function initTabLines() {
if ($('.tabs').length) {
var tabs = $('.tabs');
tabs.each(function() {
var tabsItem = $(this);
var tabsLine = tabsItem.find('.tabs_line span');
var tabGroup = tabsItem.find('ul li');
var posX = $(tabGroup[0]).position().left;
tabsLine.css({
'left': posX,
'width': $(tabGroup[0]).width()
});
tabGroup.each(function() {
var tab = $(this);
tab.on('click', function() {
if (!tab.hasClass('active')) {
tabGroup.removeClass('active');
tab.toggleClass('active');
var tabXPos = tab.position().left;
var tabWidth = tab.width();
tabsLine.css({
'left': tabXPos,
'width': tabWidth
});
}
});
});
});
}
}
/*
7. Init Tabs
*/
function initTabs() {
if ($('.tabbed_container').length) {
//Handle tabs switching
var tabsContainers = $('.tabbed_container');
tabsContainers.each(function() {
var tabContainer = $(this);
var tabs = tabContainer.find('.tabs ul li');
var panels = tabContainer.find('.panel');
var sliders = panels.find('.slider');
tabs.each(function() {
var tab = $(this);
tab.on('click', function() {
panels.removeClass('active');
var tabIndex = tabs.index(this);
$($(panels[tabIndex]).addClass('active'));
sliders.slick("unslick");
sliders.each(function() {
var slider = $(this);
// slider.slick("unslick");
if (slider.hasClass('bestsellers_slider')) {
initBSSlider(slider);
}
if (slider.hasClass('featured_slider')) {
initFSlider(slider);
}
if (slider.hasClass('arrivals_slider')) {
initASlider(slider);
}
});
});
});
});
}
}
/*
8. Init Featured Slider
*/
function initFeaturedSlider() {
if ($('.featured_slider').length) {
var featuredSliders = $('.featured_slider');
featuredSliders.each(function() {
var featuredSlider = $(this);
initFSlider(featuredSlider);
});
}
}
function initFSlider(fs) {
var featuredSlider = fs;
featuredSlider.on('init', function() {
var activeItems = featuredSlider.find('.slick-slide.slick-active');
for (var x = 0; x < activeItems.length - 1; x++) {
var item = $(activeItems[x]);
item.find('.border_active').removeClass('active');
if (item.hasClass('slick-active')) {
item.find('.border_active').addClass('active');
}
}
}).on({
afterChange: function(event, slick, current_slide_index, next_slide_index) {
var activeItems = featuredSlider.find('.slick-slide.slick-active');
activeItems.find('.border_active').removeClass('active');
for (var x = 0; x < activeItems.length - 1; x++) {
var item = $(activeItems[x]);
item.find('.border_active').removeClass('active');
if (item.hasClass('slick-active')) {
item.find('.border_active').addClass('active');
}
}
}
})
.slick({
rows: 2,
slidesToShow: 4,
slidesToScroll: 4,
infinite: false,
arrows: false,
dots: true,
responsive: [{
breakpoint: 768,
settings: {
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
dots: true
}
},
{
breakpoint: 575,
settings: {
rows: 2,
slidesToShow: 2,
slidesToScroll: 2,
dots: false
}
},
{
breakpoint: 480,
settings: {
rows: 1,
slidesToShow: 1,
slidesToScroll: 1,
dots: false
}
}
]
});
}
/*
9. Init Favorites
*/
function initFavs() {
// Handle Favorites
var items = document.getElementsByClassName('product_fav');
for (var x = 0; x < items.length; x++) {
var item = items[x];
item.addEventListener('click', function(fn) {
fn.target.classList.toggle('active');
});
}
}
/*
10. Init ZIndex
*/
function featuredSliderZIndex() {
// Hide slider dots on item hover
var items = document.getElementsByClassName('featured_slider_item');
for (var x = 0; x < items.length; x++) {
var item = items[x];
item.addEventListener('mouseenter', function() {
$('.featured_slider .slick-dots').css('display', "none");
});
item.addEventListener('mouseleave', function() {
$('.featured_slider .slick-dots').css('display', "block");
});
}
}
/*
11. Init Popular Categories Slider
*/
function initPopularSlider() {
if ($('.popular_categories_slider').length) {
var popularSlider = $('.popular_categories_slider');
popularSlider.owlCarousel({
loop: true,
autoplay: false,
nav: false,
dots: false,
responsive: {
0: {
items: 1
},
575: {
items: 2
},
640: {
items: 3
},
768: {
items: 4
},
991: {
items: 5
}
}
});
if ($('.popular_categories_prev').length) {
var prev = $('.popular_categories_prev');
prev.on('click', function() {
popularSlider.trigger('prev.owl.carousel');
});
}
if ($('.popular_categories_next').length) {
var next = $('.popular_categories_next');
next.on('click', function() {
popularSlider.trigger('next.owl.carousel');
});
}
}
}
/*
12. Init Banner 2 Slider
*/
function initBanner2Slider() {
if ($('.banner_2_slider').length) {
var banner2Slider = $('.banner_2_slider');
banner2Slider.owlCarousel({
items: 1,
loop: true,
nav: false,
dots: true,
dotsContainer: '.banner_2_dots',
smartSpeed: 1200
});
}
}
/*
13. Init Arrivals Slider
*/
function initArrivalsSlider() {
if ($('.arrivals_slider').length) {
var arrivalsSliders = $('.arrivals_slider');
arrivalsSliders.each(function() {
var arrivalsSlider = $(this);
initASlider(arrivalsSlider);
});
}
}
function initASlider(as) {
var arrivalsSlider = as;
arrivalsSlider.on('init', function() {
var activeItems = arrivalsSlider.find('.slick-slide.slick-active');
for (var x = 0; x < activeItems.length - 1; x++) {
var item = $(activeItems[x]);
item.find('.border_active').removeClass('active');
if (item.hasClass('slick-active')) {
item.find('.border_active').addClass('active');
}
}
}).on({
afterChange: function(event, slick, current_slide_index, next_slide_index) {
var activeItems = arrivalsSlider.find('.slick-slide.slick-active');
activeItems.find('.border_active').removeClass('active');
for (var x = 0; x < activeItems.length - 1; x++) {
var item = $(activeItems[x]);
item.find('.border_active').removeClass('active');
if (item.hasClass('slick-active')) {
item.find('.border_active').addClass('active');
}
}
}
})
.slick({
rows: 2,
slidesToShow: 5,
slidesToScroll: 5,
infinite: false,
arrows: false,
dots: true,
responsive: [{
breakpoint: 768,
settings: {
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
dots: true
}
},
{
breakpoint: 575,
settings: {
rows: 2,
slidesToShow: 2,
slidesToScroll: 2,
dots: false
}
},
{
breakpoint: 480,
settings: {
rows: 1,
slidesToShow: 1,
slidesToScroll: 1,
dots: false
}
}
]
});
}
/*
14. Init Arrivals Slider ZIndex
*/
function arrivalsSliderZIndex() {
// Hide slider dots on item hover
var items = document.getElementsByClassName('arrivals_slider_item');
for (var x = 0; x < items.length; x++) {
var item = items[x];
item.addEventListener('mouseenter', function() {
$('.arrivals_slider .slick-dots').css('display', "none");
});
item.addEventListener('mouseleave', function() {
$('.arrivals_slider .slick-dots').css('display', "block");
});
}
}
/*
15. Init Best Sellers Slider
*/
function bestsellersSlider() {
if ($('.bestsellers_slider').length) {
var bestsellersSliders = $('.bestsellers_slider');
bestsellersSliders.each(function() {
var bestsellersSlider = $(this);
initBSSlider(bestsellersSlider);
})
}
}
function initBSSlider(bss) {
var bestsellersSlider = bss;
bestsellersSlider.slick({
rows: 2,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
arrows: false,
dots: true,
autoplay: true,
autoplaySpeed: 6000,
responsive: [{
breakpoint: 1199,
settings: {
rows: 2,
slidesToShow: 2,
slidesToScroll: 2,
dots: true
}
},
{
breakpoint: 991,
settings: {
rows: 2,
slidesToShow: 1,
slidesToScroll: 1,
dots: true
}
},
{
breakpoint: 575,
settings: {
rows: 1,
slidesToShow: 1,
slidesToScroll: 1,
dots: false
}
}
]
});
}
/*
16. Init Trends Slider
*/
function initTrendsSlider() {
if ($('.trends_slider').length) {
var trendsSlider = $('.trends_slider');
trendsSlider.owlCarousel({
loop: false,
margin: 30,
nav: false,
dots: false,
autoplayHoverPause: true,
autoplay: false,
responsive: {
0: {
items: 1
},
575: {
items: 2
},
991: {
items: 3
}
}
});
trendsSlider.on('click', '.trends_fav', function(ev) {
$(ev.target).toggleClass('active');
});
if ($('.trends_prev').length) {
var prev = $('.trends_prev');
prev.on('click', function() {
trendsSlider.trigger('prev.owl.carousel');
});
}
if ($('.trends_next').length) {
var next = $('.trends_next');
next.on('click', function() {
trendsSlider.trigger('next.owl.carousel');
});
}
}
}
/*
17. Init Reviews Slider
*/
function initReviewsSlider() {
if ($('.reviews_slider').length) {
var reviewsSlider = $('.reviews_slider');
reviewsSlider.owlCarousel({
items: 3,
loop: true,
margin: 30,
autoplay: false,
nav: false,
dots: true,
dotsContainer: '.reviews_dots',
responsive: {
0: {
items: 1
},
768: {
items: 2
},
991: {
items: 3
}
}
});
}
}
/*
18. Init Recently Viewed Slider
*/
function initViewedSlider() {
if ($('.viewed_slider').length) {
var viewedSlider = $('.viewed_slider');
viewedSlider.owlCarousel({
loop: true,
margin: 30,
autoplay: true,
autoplayTimeout: 6000,
nav: false,
dots: false,
responsive: {
0: {
items: 1
},
575: {
items: 2
},
768: {
items: 3
},
991: {
items: 4
},
1199: {
items: 6
}
}
});
if ($('.viewed_prev').length) {
var prev = $('.viewed_prev');
prev.on('click', function() {
viewedSlider.trigger('prev.owl.carousel');
});
}
if ($('.viewed_next').length) {
var next = $('.viewed_next');
next.on('click', function() {
viewedSlider.trigger('next.owl.carousel');
});
}
}
}
/*
19. Init Brands Slider
*/
function initBrandsSlider() {
if ($('.brands_slider').length) {
var brandsSlider = $('.brands_slider');
brandsSlider.owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 5000,
nav: false,
dots: false,
autoWidth: true,
items: 8,
margin: 42
});
if ($('.brands_prev').length) {
var prev = $('.brands_prev');
prev.on('click', function() {
brandsSlider.trigger('prev.owl.carousel');
});
}
if ($('.brands_next').length) {
var next = $('.brands_next');
next.on('click', function() {
brandsSlider.trigger('next.owl.carousel');
});
}
}
}
/*
20. Init Timer
*/
function initTimer() {
if ($('.deals_timer_box').length) {
var timers = $('.deals_timer_box');
timers.each(function() {
var timer = $(this);
var targetTime;
var target_date;
// Add a date to data-target-time of the .deals_timer_box
// Format: "Feb 17, 2018"
if (timer.data('target-time') !== "") {
targetTime = timer.data('target-time');
target_date = new Date(targetTime).getTime();
} else {
var date = new Date();
date.setDate(date.getDate() + 2);
target_date = date.getTime();
}
// variables for time units
var days, hours, minutes, seconds;
var h = timer.find('.deals_timer_hr');
var m = timer.find('.deals_timer_min');
var s = timer.find('.deals_timer_sec');
setInterval(function() {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
console.log(seconds_left);
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
hours = hours + days * 24;
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
if (hours.toString().length < 2) {
hours = "0" + hours;
}
if (minutes.toString().length < 2) {
minutes = "0" + minutes;
}
if (seconds.toString().length < 2) {
seconds = "0" + seconds;
}
// display results
h.text(hours);
m.text(minutes);
s.text(seconds);
}, 1000);
});
}
}
});
My custom.js line number 45 is and all the functions have been defined with these names.
initCustomDropdown();
initPageMenu();
initDealsSlider();
initTabLines();
initFeaturedSlider();
featuredSliderZIndex();
initPopularSlider();
initBanner2Slider();
initFavs();
initArrivalsSlider();
arrivalsSliderZIndex();
bestsellersSlider();
initTabs();
initTrendsSlider();
initReviewsSlider();
initViewedSlider();
initBrandsSlider();
initTimer();
Any recommendations? Thanks in advance
You need to fix this part.
var placeholder was declared inside if block which makes it inaccessible outside if block.
var placeholder;
if ($('.custom_dropdown_placeholder').length && $('.custom_list').length) {
placeholder = $('.custom_dropdown_placeholder');
var list = $('.custom_list');
}
if (placeholder) {
placeholder.on('click', function(ev) {
if (list.hasClass('active')) {
list.removeClass('active');
} else {
list.addClass('active');
}
$(document).one('click', function closeForm(e) {
if ($(e.target).hasClass('clc')) {
$(document).one('click', closeForm);
} else {
list.removeClass('active');
}
});
});
}
I have a few sliding screens that are triggered by clicking on images. The first time the image is clicked it seems to work fine but the third time the click is not working for some reason.
JS:
$(document).ready(function () {
var sliding = false;
var introButtons = anime({
targets: '.introButtons',
scale: 0.95,
duration: 800,
easing: 'easeInOutQuart',
direction: 'alternate',
elasticity: 200,
loop: true
});
//Energy Track
$('#for-energy').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#screen1').fadeOut('slow', function () {
$('#screen2').toggle('slide', {
direction: 'right'
}, 800, function () {
var twoRotation = anime({
targets: 'td img',
delay: 300,
opacity: 1,
rotate: '2turn'
});
sliding = false;
});
});
}
});
//Energy back
$('.energy .backButton').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#screen2').toggle('slide', {
direction: 'left'
}, 800, function () {
$('#screen1').toggle('slide', {
direction: 'right'
}, 800);
//Remove Anime
var removeAnime = anime({
targets: 'td img',
delay: 100,
opacity: 0,
rotate: '0'
});
sliding = false;
});
}
});
//For health
$('#for-health').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#screen1').fadeOut('slow', function () {
$('#health').toggle('slide', {
direction: 'right'
}, 800, function () {
var twoRotation = anime({
targets: 'td img',
delay: 300,
opacity: 1,
rotate: '2turn'
});
sliding = false;
});
});
}
});
//Health back
$('.health .backButton').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#health').toggle('slide', {
direction: 'left'
}, 800, function () {
$('#screen1').toggle('slide', {
direction: 'right'
}, 800);
//Remove Anime
var removeAnime = anime({
targets: 'td img',
delay: 100,
opacity: 0,
rotate: '0'
});
sliding = false;
});
}
});
//For fun
$('#for-fun').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#screen1').fadeOut('slow', function () {
$('#fun').toggle('slide', {
direction: 'right'
}, 800, function () {
var twoRotation = anime({
targets: 'td img',
delay: 300,
opacity: 1,
rotate: '2turn'
});
sliding = false;
});
});
}
});
//For fun back
$('.fun .backButton').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#fun').toggle('slide', {
direction: 'left'
}, 800, function () {
$('#screen1').toggle('slide', {
direction: 'right'
}, 800);
//Remove Anime
var removeAnime = anime({
targets: 'td img',
delay: 100,
opacity: 0,
rotate: '0'
});
sliding = false;
});
}
});
});
I believe the issue is with the sliding variable, I just can't figure out which instance of the variable is causing the issue.
When clicking back and forth from bowls to smoothies to juices and selecting a few options it works the first few times you select a new product and then every third or so time it seems to stop working, i.e. it won't let you select any image. Clicking on the image does nothing.
You can see it in action here: http://ameliarthompson.com/development-works/Jamba-Juice-Nutrition-Facts%202/
I'm currently using the sliding variable to keep the toggle from being toggled twice if a user double clicks. See this question for more on what I'm talking about: jQuery slide toggle fires twice on double click
in some function you miss to make sliding = false
and i think you need to put it outside the toggle for example in #island you shoud write it like this and put sliding =false out side the toggle
$('#island').on('click dblclick', function(){
if(!sliding){
sliding = true;
$('.guide').fadeOut('slow', function(){
$('#islandFacts').toggle('slide', {direction: 'right'}, 800, function(){
sliding = false;
});
});
}
});
I am displaying jqplot meter gauge inside modal window and I want to update it after every 5 seconds. I wrote the following code but it is not working
$(document).ready(function(){
s1 = [Math.floor(Math.random()*(401)+100)];
plot3 = $.jqplot('meter',[s1],{
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
min: 100,
max: 500,
intervals:[200, 300, 400, 500],
intervalColors:['#66cc66', '#93b75f', '#E7E658', '#cc6666'],
smooth: true,
animation: {
show: true
}
}
}
});
$('a[href=\"#yw1_tab_3\"]').on('shown', function(e) {
if (plot3._drawCount === 0) {
plot3.replot();
}
});
windows.setInterval(function() { plot3.destroy();
s1 = [Math.floor(Math.random()*(401)+100)];
plot3.replot();
}, 5000);
});
How can I update meter gauge every 5 seconds without updating whole page?
here is the fix: JsFiddle link
$(document).ready(function () {
var s1 = [Math.floor(Math.random() * (401) + 100)];
var plot3 = $.jqplot('meter', [s1], {
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
min: 100,
max: 500,
intervals: [200, 300, 400, 500],
intervalColors: ['#66cc66', '#93b75f', '#E7E658', '#cc6666'],
smooth: true,
animation: {
show: true
}
}
}
});
setInterval(function () {
s1 = [Math.floor(Math.random() * (401) + 100)];
plot3.series[0].data[0] = [1,s1]; //here is the fix to your code
plot3.replot();
}, 1000);
});