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
I am using jqplots to show data graphically in my website. I am able to plot the chart as per our requirement. Now I need to place those graphs in jQuery UI tabs.
I am able to get the graph in the first tab which is active on page load.But I am not able to get the remaining graphs, which are present in other tabs, they are invisible.
I am not able to figure out the reason please help me in this regard.
from your questions there is no code attached, so compare your code with this on JSFiddle http://jsfiddle.net/meccanismocomplesso/9fdJm/1/
I hope this could be useful (It is an example of the book "Beginning JavaScript Charts with jqPlot, Highcharts and D3").
It is perfectly working. There are three different type of charts each in a different tab, and they are all visible.
.
Mention the jqPlot code first, followed by the tabs code. Even I faced the same issue, now fixed.
//$.jplot code
//$("#tabs").tabs();
#meccanismo.complesso Interesting! I am using your jsfiddle (http://jsfiddle.net/meccanismocomplesso/9fdJm/1/) to explore the possibility to run as well the jqplot objects into the jQuery UI tabs. As I was facing the same issue of only showing up only the content in one tab (The active initially), and seeing that the provided example has all the logic all together, thought this could help someone in the near future as well..
[http://jsfiddle.net/zpLxbue8/][1]
Rather than just executing the function as soon as it loads after or before the jQuery UI tabs, used the activate and create to trigger the jqplot
http://jsfiddle.net/zpLxbue8/ [jsFiddle working fine example... jQuery UI tabs displaying different types of graphs by using jQplot plugin][1]
The js content -- omitted due to platform abstraction layer.. script type="text/javascript
jQuery(document).ready(function($){
var $=$.noconflict();
function render(){
var bar1 = [['Apples',11],['Oranges',7],['Pears',3],['Bananas',9],['Lemons',5]];
var data1 = [3,1,2,3,5,4];
var data2 = [4,3,3,4,5,6];
var data3 = [9,10,8,7,4,6];
var data4 = [9,8,7,12,9,10];
var pie1 = [
['Black', 212],['White', 140], ['Red', 131],['Blue', 510]
];
var plot1 = $.jqplot ('chart1', [bar1],{
title: 'Example of a bar chart',
series:[{renderer:$.jqplot.BarRenderer}],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: 0,
fontSize: '12px'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
var plot2 = $.jqplot ('chart2', [data1,data2,data3,data4],{});
var plot3 = $.jqplot ('chart3', [pie1],{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'value',
fill: false,
sliceMargin: 6,
lineWidth: 5
}
}
});
}
$("#tabs").tabs({
collapsible: true,
//0 is the first tab´s content
active:1,
hide: { effect: "slideUp", duration: 'slow' },
show: { effect: "slideDown", duration: 'slow' },
create: function( event, ui ) {
return render();
},
activate: function( event, ui ) {
return render();
}
});
});
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)?
I have a very simple Crafty.js script working in Chrome.
in my component file I have this component:
Crafty.c('PlayerCharacter', {
init: function() {
var playerRef = this;
playerRef.bind("KeyDown", function(e)
{
if (playerRef.isDown('LEFT_ARROW')) {
playerRef.x=playerRef.x-16;
myPlayer.sendMessage("LEFT");
} else if (playerRef.isDown('RIGHT_ARROW')) {
playerRef.x=playerRef.x+16;
myPlayer.sendMessage("RIGHT");
} else if (playerRef.isDown('UP_ARROW')) {
playerRef.y=playerRef.y-16;
myPlayer.sendMessage("UP");
} else if (playerRef.isDown('DOWN_ARROW')) {
playerRef.y=playerRef.y+16;
myPlayer.sendMessage("DOWN");
}
});
},
});
And then in my start function of the game, I have :
Crafty.e("2D, DOM, Color, Keyboard, Mouse, PlayerCharacter")
.attr({x: 20*16, y: 20*16, w: 16, h: 16})
.color('rgb(255,0,0)');
As mentioned the Player Character displays and moves as expected in Chrome, however in Firefox it simply displays initially and does not move. There are no errors generated.
If anyone has any ideas or ideas on how to debug this (currently using Firebug, with limited success).
BTW: the following alternate code also works in Chrome and not in Firefox
Crafty.c('Actor', {
init: function() {
this.requires('2D, Canvas, Grid');
},
});
Crafty.c('PlayerCharacter', {
init: function() {
this.requires('Actor, Fourway, Color')
.fourway(4)
.color('rgb(20, 75, 40)');
}
});
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%' });