I am using Owl carousel to create slider I created one horizontal slider but I need one vertical one as well with three items at a time.
I searched but no answer or related post found.
Update:
I used slick slider that time and that was working as i want. But in owl, I am not able to do that.
In css you should add:
.item {
transform: rotate(-90deg);
}
.owl-carousel{
transform: rotate(90deg);
}
In js add :
$('.owl-carousel').owlCarousel({
loop: true,
items: 3,
animateOut: 'slideOutUp',
animateIn: 'slideInUp'
});
Here is a CodePen that has vertical owl slider:
https://codepen.io/thirdender/pen/aOYyGb
$(".owl-carousel").owlCarousel({
loop: true,
autoplay: true,
items: 1,
nav: true,
autoplayHoverPause: true,
animateOut: 'slideOutUp',
animateIn: 'slideInUp'
});
Related
I have a line graph that I would like to have two different Y-axes (this is usually accomplished by having one set of labels on the left, and one on the right). So I can have two different types of related data on the same graph, but with different scales. Is this possible with RGraph?
<canvas id="cvs" width="750" height="250" style="border: 1px solid #ccc">[No canvas support]</canvas>
<script>
data = [4,8,6,8,6,3,5];
data2 = [15,18,14,24,35,22,31];
new RGraph.Line({
id: 'cvs',
data: data,
options: {
spline: true,
marginInner: 10,
xaxis: false,
yaxis: false,
colors:['blue']
}
}).draw();
new RGraph.Line({
id: 'cvs',
data: data2,
options: {
spline: true,
marginInner: 10,
xaxis: false,
yaxis: false,
backgroundGrid: false,
yaxisPosition: 'right'
}
}).draw();
</script>
Richard (the developer) helped me out. To achieve this, you combine two graphs, giving each graph the same ID target. The second graph will be written over the first. Which means, if everything lines up, there will be (what looks like) a single graph, just be sure everything lines up between the two (margins, labels, etc.).
The code is the example Richard gave me.
Is it possible to specify the position of the tooltips that noUiSlider draws? It appears that by default it places the first one over the slider, and the second below. I understand the usability goal here, but I'd like to put both above or below.
Example (with tooltips above and below): http://jsfiddle.net/leongersen/z83oz9np/2/
noUiSlider.create(div, {
start: [0, 50], // 2 handles
range: {
'min': 0,
'max': 50
},
tooltips: true // 2 tooltips but how to position?
});
I don't believe there is an option to specify the position of the labels. In the css version you're using there's
.noUi-horizontal .noUi-handle-upper .noUi-tooltip {
bottom:-32px
}
Which you can override to be the same as the other label:
.noUi-horizontal .noUi-handle-upper .noUi-tooltip {
top: -32px;
bottom: initial;
}
See your updated fiddle: http://jsfiddle.net/z83oz9np/20/
Think that's the best thing to do here. In the latest version on github I've noted this styling is missing, so take this into account if you ever update it.
You can overwrite the attribute "bottom" from the css class ".noUi-horizontal .noUi-tooltip"
for example to do the tooltip go below the slider:
.noUi-horizontal .noUi-tooltip {bottom: -130%;}
For others that find themselves here, this will give you more consistent positioning than negative pixel positioning:
.noUi-vertical .noUi-handle-upper .noUi-tooltip {
right: unset;
left: 120%;
}
This removes the right: 120%; from the tooltip and repositions it with respect to the left, like the bottom tooltip.
for me none of this solution worked so I ended up with my own:
.noUi-horizontal .noUi-tooltip
{
left: unset !important;
}
.noUi-target
{
direction: unset !important;
}
done.
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
I have a grid with data, contained in a panel which also hold a title and a smaller summary grid.
the panel has layout fit and therefore the title and first grid, which is the summary grid, are displayed just fine. But the grid in question has more records than can be shown on the screen and its component height is not adjusted to the size of the panel which always fits with the height of the browser window.
What I would like to have is that the grid component's height, like the panel, is adjusted to its parent so that the scrollbar inside the grid body will show up.
My code is similar to this (initComponent is of an extension to Ext.panel.Panel):
(header in this code means the summary grid)
initComponent: function (config) {
var config = {
border: false,
hidden: false,
hideMode: "display",
padding: '5',
layout: "fit"
}
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.callParent(arguments);
title = Ext.create("Ext.panel.Panel", {
html: '<h2>title</h2>',
padding: '5',
border: false
});
// the stores for the grids are created here
var storeHdr = DataStoreFactory.CreateStore("GetHeaderP", DataStoreFactory.fieldsCollection.Default);
var storeBdy = DataStoreFactory.CreateStore("GetBodyP", DataStoreFactory.fieldsCollection.Default);
var grdHeader = Ext.create("Ext.grid.Panel", {
store: storeHdr,
columns: getHeaderColumns(),
columnLines: true,
autoHeight: false,
autoWidth: false,
enableHdMenu: false,
enableColumnMove: false,
enableColumnResize: false,
disableSelection: true,
trackMouseOver: false,
sortable: false
});
var grdBody = Ext.create("Ext.grid.Panel", {
id: id,
store: storeBdy,
columns: getBodyColumns(),
columnLines: true,
autoHeight: false,
autoWidth: false,
autoScroll: true,
scroll: "vertical",
enableColumnMove: false,
enableColumnResize: false,
enableHdMenu: false,
trackMouseOver: false,
disableSelection: true
});
},
var headerGridContainer = Ext.create("Ext.panel.Panel", {
layout: "fit",
border: false,
items: [grdHeader]
});
var bodyGridContainer = Ext.create("Ext.panel.Panel", {
layout: "fit",
border: false,
items: [grdBody]
});
this.add(title);
this.add(headerGridContainer);
this.add(bodyGridContainer);
storeHdr.load();
storeBdy.load();
this.doLayout();
}
I hope someone can help me with this. Thanks in advance
edit - screenshots how it is and how it should be. Realtime Data is removed or blotted out, since it is private and doesn't matter for the problem.
this is how it is
this is how it should be
You're using layouts in a wrong way. First, your main container has layout 'fit' which supposed to be used when you have single item inside - http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Fit - and you have few items.
Second, try to avoid over-nesting. You're wrapping your grids into panels and then put these panels inside container. Is there a reason for that?
Please post a screenshot of what you have and what you want to have and we will help you figure out layouts that you need to use for this.
Update:
Try to use layout: 'hbox' in your main container. And specify flex: 1 for the main (bottom) grid if you want it to fill the rest of the screen. Son basically you would have something simliar to this (in you main container):
{
layout: 'hbox',
..
items: [{
xtype: 'panel', // header
height: 100,
},
{
xtype: 'grid', // first grid
height: 200
},
{
xtype: 'grid', // second grid
flex: 1
}]
}
Given the following javascript code :
var layoutFull = new YAHOO.widget.Layout({
units: [
{
position: 'left',
header: 'Right',
width: 300,
resize: true,
collapse: true,
scroll: true,
body: 'right1',
animate: true
},
{
position: 'center',
body: 'Da center...'
}
]
});
layoutFull.render();
I can have a full layout with a collapsible left pane. But there is a fine line between left and center parts. I would like to be able to drag this line for resizing both left and center part as in this example : http://developer.yahoo.com/yui/examples/layout/page_layout_source.html.
Which property should I enable in the layout configuration ? Looking at sample or the API doc didn't give me any luck.
I'm wondering if the following two libraries need to be included ...
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../../build/resize/resize-min.js"></script>
Without 'seeing' the html, its rather hard to guess. Some 'magic' might occur by adding these two. Just a hunch. :)