I have a slick-carousel that a have some accordion tabs inside.
I need to be able to react to the bootstrap accordion collapse/expansion and adjust the height of the carousel.
It adjusts with the adaptive height correctly but only once done a full rotation.
How would I go about this.
so have established this so far. I are actually using velocityjs for the accordion.
if ($(this).hasClass('active')) {
toggleActivePanel.find('.content-collapse').attr('aria-expanded', false).velocity('slideUp', {
easing: 'easeOutQuad'
}, { complete: resize_slider() });
$(this).attr('aria-expanded', false).removeClass('active');
} else {
toggleActivePanel.find('.content-collapse').attr('aria-expanded', true).velocity('slideDown', {
easing: 'easeOutQuad'
}, { complete: resize_slider() });
$(this).attr('aria-expanded', true).addClass('active');
}
function resize_slider() {
var sliderAdaptiveHeight = function () {
var heights = [];
let items = $('.slick-active')
items.each(function () {
heights.push($(this).height());
});
$('.slick-list').height(Math.max.apply(null, heights));
}
sliderAdaptiveHeight();
$('.slider').on('afterChange', function (event, slick, currentSlide, nextSlide) {
sliderAdaptiveHeight();
});
}
the resize_slider function is being triggered however the height adjustments are back to front.
ie when expanding the slick slider height retracts and when collapsing the slick slider expands.
any thoughts
Related
I seem to be encountering issues when attempting to scroll between a regular scrollify panel and interstitialSection. I need to add the elements within the interstitialSection to the standardScrollElements as they need to be scrollable.
When you scroll quickly on a desktop there is flickering and when using a mobile it exhibits other issues like not enabling scrollify on scrolling. When you clear the 'StandardScrollElements' it stops the flickering but doesn't allow scrolling of the content on the slide mainly on mobile.
$.scrollify({
section: ".slide",
scrollbars: true,
easing: "easeOutExpo",
scrollSpeed: 800,
updateHash: false,
standardScrollElements: ".footer-content,.news",
interstitialSection: ".slide-content,.clients,footer",
before: function () {
},
after: function (i) {
$.scrollify.current().find("[data-animated]").each(function () {
var animClass = $(this).attr("data-animated");
$(this).addClass("animated");
$(this).addClass(animClass);
});
},
afterRender: function () {
$.scrollify.current().find("[data-animated]").each(function () {
var animClass = $(this).attr("data-animated");
$(this).addClass("animated");
$(this).addClass(animClass);
});
}
});
I'm looking to change the column color and the line color for the same series across multiple charts based on the click of either the legend or the actual column/line.
On the individual charts I have color changing based on clicking/hovering and I can show hide based on the clicking of the first legend. I just can't seem to get the color to work. I'd like to convert the show hide functionality into color change.
Fiddle: http://jsfiddle.net/jlm578/asdgqzgk/4/
This is the chunk of code I'd like to convert or replace:
events: {
legendItemClick: function (event) {
var visibility = this.visible ? 'visible' : 'hidden';
var series = $('#veiOverallAllLine').highcharts().series[this.index];
if (this.visible) series.hide();
else series.show();
return true;
//return false;
}
}
I hope that I understood your question properly :)
Anyway, you can "convert" the event into color change by first preventing the default action to be executed (which is obviously hiding the chart).
This could be done easily using
event.preventDefault() within the event itself.
Than you can use a general function to handle the color change, which takes the series as parameter, find its 'sibling' and than changes the colors:
function updateColor(series){
if(series == undefined) return;
var color = series.color == '#ffffff' ? '#851E20' : '#ffffff';
var sibling = $('#veiOverallAllLine').highcharts().series[series.index];
series.update({color:color});
sibling.update({color:color});
}
(More generalization could be done here but its up to you..)
Than, the whole plotOptions should look like that more or less:
plotOptions: {
series: {
allowPointSelect: true,
states: {
select: {
color: '#851E20'
}
},
events: {
click: function(){
updateColor(this);
},
legendItemClick: function (event) {
event.preventDefault();
updateColor(this);
return true;
}
}
}
},
Here you can see an example: http://jsfiddle.net/a366e89c/2/
NOTE! in the example only the upper chart changes the color of both charts, you just need to copy the lines into the second chart...
I am attempting to have a view where after every fetch of 20 different products from my backend (.fetch()), the DOM will display a product ad. The problem I am running into is that every time the collection fires the add event, the CompositeView is re-rendered.
How can I add Children Views to a CompositeView without re-rendering the whole parent?
define(["marionette", "lodash", "text!fonts/products/template.html",
'fonts/products/item-view', 'fonts/products/model', 'eventer'],
function(Marionette, _, templateHTML, ProductItemView, ProductsModel, eventer) {
'use strict';
var ProductsView = Marionette.CompositeView.extend({
template: _.template(templateHTML),
childView: ProductItemView,
childViewContainer: '.items',
productsLimit: 150,
initialize: function() {
this.listenTo(eventer, 'sort:products', this.sortCollection, this);
this.listenTo(this.collection, 'reset sort add', this.render, this);
this.listenTo(this.collection, 'sync', this.setupSync, this);
},
sortCollection: function(field) {
this.collection.sortByKey(field);
},
setupSync: function() {
this.setupWindowScrollListener();
this.render();
},
productsEnd: function() {
eventer.trigger('products:end');
},
setupWindowScrollListener: function() {
var $window = $(window),
$document = $(document),
that = this,
collectionSize = that.collection.length;
if(collectionSize <= that.productsLimit) {
$window.on('scroll', _.throttle(function() {
var scrollTop = $window.scrollTop(),
wHeight = $window.height(),
dHeight = $document.height(),
margin = 200;
if(scrollTop + wHeight > dHeight - margin) {
eventer.trigger('fetch:more:products');
$window.off('scroll');
}
}, 500));
} else {
that.productsEnd();
}
},
});
return ProductsView;
});
Generate Ad Code
Here is the code I am using to try to generate ads
https://gist.github.com/dennismonsewicz/aecf9bd0befe63e96ee6
What's causing your parent view to re-render, is that you're calling a render on a collection add event :)
this.listenTo(this.collection, 'reset sort add', this.render, this);
Unless you really want to re-render that parent CompositeView you don't need this listener at all because Marionette handles:
collection#add: _onCollectionAdd will render and place new childviews in the default (based on a comparator, if none then id) sort order
collection#reset: Marionette already has a listener on your CompositeView that will call this.render for you if your collection is reset
collection#sort: If you provide your view { sort: true } as an option to your CompositeView, it will handle 'sort' events on your collection. The default is to sort the children views and then call render on the CompositeView. If you don't want your CompositeView to be re-rendered, pass { reorderOnSort: true } and the children view will be efficiently reordered without re-rendering anything (parent nor children), simply moving the children DOM elements in the sort order dictated by the collection.comparator.
I want to know the coordinates of the mouse pointer when I r-click on CKEditor
I added a few items to the context menu of CKEditor.
i want when I select a certain item, the other a notice appeared also in place i r_click
$(document).ready(function () {
var ck = CKEDITOR.replace('txtNoidungBR', 'vi');
var $DK = $('#divAddDK');
/*Thêm điều kiện*/
ck.on('instanceReady', function (e) {
ck.addCommand("addDK", {
exec: function (ck) {
/*I want to set coordinates to $DK = coordinates of context menu when i r-click*/
$DK.css({ 'left': 600, 'top': 400 }).toggle(300);
}
});
ck.addMenuGroup('BRDT');
var addDK = {
label: 'Thêm điều kiện',
command: 'addDK',
group: 'BRDT'
};
ck.contextMenu.addListener(function (element, selection) {
return {
addDK: CKEDITOR.TRISTATE_OFF
};
});
ck.addMenuItems({
addDK: {
label: 'Thêm điều kiện',
command: 'addDK',
group: 'BRDT',
order: 1
}
});
});
});
help me. thaks
You'll need to track the mouse yourself, as ckeditor doesn't give you the mouse event.
See this answer for details on that:
How to get the mouse position without events (without moving the mouse)?
Iam using the waypoints plugin, but am open for others.
so far i have managed to get the div to fadeIn when iam scrolling down and its rached 30%:
element.waypoint(function(){
$(this).animate({ opacity: 1 }, 500);
},{
offset: '30%'
});
But iam not able to make it fadeout again, when its getting out of view again.
Thanks for the help.
is this a too hard question for mighty stackoverflow? ...
You can do different things depending on the direction you are scrolling when you cross that waypoint trigger spot using the direction parameter that is passed to the function:
element.waypont(function(direction) {
if (direction === 'down') { ... }
else { ... }
}, { offset: '30%' });
You can also create multiple waypoints with different offsets, so you can react to the element hitting different parts of the page:
element
.waypoint(function(direction) {
$(this).toggleClass('visible');
}, { offset: '10%' })
.waypoint(function(direction) {
$(this).toggleClass('visible');
}, { offset: '90%' });