I'm working with this scroller
http://coolcarousels.frebsite.nl/c/2/
I have this setup below.
My issue is I have it set to visible: 4 and I have 4 images, so it doesn't scroll. If I set it to visible: 3 then it works as expected. But I want to show all 4 images in one screen when you open the browser full width on a 1920px wide resolution. So the issue seems to be. If I set visible to the amount of images I have then it stops working.
Is there a way to have all 4 images on screen at one time then still scroll through them?
$(function() {
$('#carousel').carouFredSel({
width: '100%',
align: 'left',
items: {
visible: 4,
start: 0,
},
scroll: {
items: 1,
queue : true,
fx: "scroll",
easing: "swing",
duration: 1000,
timeoutDuration: 3000
},
prev: '.prev',
next: '.next',
auto: {
easing: "quadratic",
button: '.play',
pauseOnEvent: 'resume',
pauseOnHover: true
}
}).find(".slide .plusNav").hover(
function() { $(this).find("div").slideDown(); },
function() { $(this).find("div").slideUp(); }
);
});
try this
items: {
minimum: 0,
},
I have resolved this issue by setting minimum to 0.
items: {
minimum: 0,
Actually, setting the minimum attribute to zero forces the scroll bar to be displayed always irrespective of number of items currently displayed.
This was required for me because, automatic enabling of scroll bars was not working on certain screen resolutions- I had to add 2 more items to make the scroll bar visible which was not the expected behavior.
As a work around, I set minimum: 0 - it resolved the issue.
I was able to do this by editing the source :/
If you comment out this lines 554 & 556 in jquery.carouFredSel-6.2.0.js like this...
// not enough items
var minimum = (is_number(opts.items.minimum)) ? opts.items.minimum : opts.items.visible + 1;
if (minimum > itms.total)
{
// e.stopImmediatePropagation();
// return debug(conf, 'Not enough items ('+itms.total+' total, '+minimum+' needed): Not scrolling.');
}
...it worked for me.
Access the wrapper and set its height (assuming all children have the same height):
var carousel = [your_carousel],
carousel_wrapper = carousel.parent();
carousel_wrapper.height(function(){
return (carousel.children('[child_selector]').length) * [child_height];
});
The thing here is, there will be a weird behavior when the carousel animates. This is because the maximum height was done ((n-1) * child_height) intentionally as a mask, along with an overflow: hidden.
Another option would be to duplicate one of the children, but that isn't semantic.
Related
I was wondering if we could change the numbers of the pages ?
Let say I'v got 10K lines rendered by 1000 lines on each page. so we've got 10 pages and I've set 5 buttons so I've got pages 1, 2, 3, 4, 5 and the navigation buttons.
I'd like to insert for exemple "..." instead of the last page button (5 in our case) when I've got more than 5 pages.
Thank you for any help !
const defaultOptions = {
// Datas
columns: tableColumns,
ajaxURL: props.ajaxURL,
// Layout
pagination: 'remote',
ajaxFiltering: true,
ajaxSorting: true,
paginationButtonCount:5,
paginationSize: 50,
paginationSizeSelector: [10, 50, 250, 1000],
layout: "fitColumns", // fitColumns, fitDataTable, fitDataStretch, fitDataFill, fitData,
responsiveLayout: "collapse",
height: '100%',
keybindings: true,
cellVertAlign: 'middle'
}
If you want to change the text of the "last" page button to be "..." you can do this in the localisation options:
const defaultOptions = {
langs:{
default:{
pagination:{
last:"...",
}
}
}
}
Full details can be found in the Localization Documentation
For my highchart column graph, I have 2 series and the values can be very close to each other, so overlap can happen.
On exporting, I'm reducing the fontSize property but with different results:
Internet Explorer : The fontSize remains the same. Ugly.
Firefox : The fontSize is reduced. However, the datalabels is now not centered anymore which is ugly
Chrome : Perfect result ! As I would expect. FontSize reduced and centered.
Is there anything I can do or you can do (next release) ?
See the JSFiddle here :
Open it in IE, Firefox and Chrome and export in any format (PNG in my test)
I'm changing the export like that :
exporting: {
chartOptions: {
plotOptions: {
column: {
dataLabels: {
allowOverlap: true,
style: {
fontSize: 6
},
}
}
}
}
}
Thanks in advance.
Actually I found the answer :).
The fontSize should be declared as "6px" and not 6.
so instead of :
style: {
fontSize: 6
},
change it as
style: {
fontSize: "6px"
},
Like that, it works as I expected on IE, FF, Chrome.
I'm trying to understand how anchors work in QML (Qt Quick 2.0). I've got a simple Item like this:
AddButton.qml:
Item {
Button {
text: "ADD"
width: 100
height: 50
}
}
Which I add to the main QML file like this:
main.qml:
Item {
id: root
width: 800
height: 600
AddButton {
id: addButton
}
}
This works fine. However, as soon as I try to put the button in the bottom right corner using anchors, the button disappears:
main.qml:
Item {
.....
AddButton {
id: addButton
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}
It only comes back if I set a width and height at the main QML file level:
main.qml:
Item {
.....
AddButton {
id: addButton
width: 100
height: 50
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}
So I'm wondering, why does the button disappear when I set the anchors? And is there any way to make it work without setting the width and height in the main QML file (basically to make it use whatever size is set in AddButton.qml?)
The problem is that the encapsulating Item has not an explicit width height. In this case the engine refers to the "natural" witdh/height, i.e. the implicitWidth/implicitHeight properties. Such properties happen to be zero in most cases, even in this specific case. Hence, your custom type has zero dimension.
Therefore the AddButton.anchors.bottom is in fact at the very top of the encapsulated Button, which in turn protrudes the encapsulating Item
There are two things about this:
You don't need to encapsulate the Button with an Item unless you want to hide the internals of the Button.
If the latter is your desire, try this:
Item {
width: 100 //give the object a dimension!
height: 50
Button {
text: "ADD"
anchors.fill: parent
}
}
Now you can anchor it, and it won't be positionated somewhere else.
When hovering over the outer nodes of graph in Cytoscape.js, the qTip dialog is not displayed.
Is there anyway to display the qTip bubbles upon hovering on an outer node? I can have the qtip popup on nodes in the upper half but not much along the sides of the graph. Especially towards the bottom half.
cy.elements('node').qtip({
id: function() {
return this.data('id');
},
content: function() {
return this.data('name') + '<br /><em>$' + this.data('weight') + '</em>';
},
position: {
my: 'bottom right',
viewport: $(etl_cyto_div),
adjust: {
cyViewport: true,
method: 'flip none'
}
},
show: {
cyBgOnly: false
},
hide: {
cyBgOnly: false,
cyViewport: true,
delay: 100
},
style: {
classes: 'qtip-tipsy',
tip: {
width: 16,
height: 8
}
}
});
I suspect your options may be causing the issue. Because this extension is a relatively thin wrapper around qtip, you just use the qTip API and options.
Try leaving options.position.adjust.method default
Try a more permissive options.position.adjust.method; see qtip docs
adjust.cyViewport is expensive (especially on touch) and can be buggy depending on the version of qtip used.
Try all defaults and see if you can reproduce your issue with the events you want. If not, then the issue is due to the set options. If so, please file your example code in an issue
Using this syntax to load Masonry items:
var msnry = new Masonry( "#container-div",
{
columnWidth: 300,
gutter: 10,
isFitWidth: true,
isAnimates: true,
itemSelector: '.items',
animationOptions:
{
duration: 600
}
});
On click of a button or link I need to remove some items with .sample or #sample and this syntax does not works.
msnry.remove('.sample');
How to resolve?
To remove masonry boxes with particular selector use this,
var remove=$('.sample'); // Use your removal class or ID here
msnry.remove(remove); // Attempting removal of the occurrences
msnry.reloadItems(); // Reload the layout