I'm sorry, I speak a little English.
Please see this screenshots:
default view:
enter image description here
slide from left to right:
enter image description here
slide from left to right, fully:
enter image description here
This is my problem: fully hidden the slides. How to modify this? I would like not overslide.
gridSwiper = new Swiper(".articles-grid", {
watchSlidesProgress : true,
watchSlidesVisibility : true,
slidesPerView : 2,
preventClicks : false,
freeMode: true,
spaceBetween: 18,
on: {
click: function () {}
}
});
Related
I'm using gsap and scrolltrigger and what I'm trying to accomplish is to make the images stack over each other when i scroll
Is this possible and how ?
I've accomplished the image sequence and am now able to scroll to show new images, however i want next image to slide up and then just stack over the first image. And continue doing so.
Has anyone done this before or know how i might go on?
https://codepen.io/kevmorales/pen/OJwEgpV
gsap.set('.frame', {xPercent:-50, yPercent:-50})
var wrapImgHeight = document.getElementById('wrap').clientHeight;
var action = gsap.timeline({
scrollTrigger: {
trigger: ".sec02",
scrub: 1,
pin: true,
start: "top top",
end:"+=2000",
}
})
var action = gsap.timeline({
scrollTrigger: {
trigger: ".sec01",
scrub: 1,
pin: true,
start: "top top",
end:"+=2000",
}
})
.to('#wrap', {y:-wrapImgHeight*4, duration:2, ease:'none'},0.5 )
.to({},{duration:0.5})
How do I trigger on the overlays in jqplot only after I click a checkbox (not when the html loads). When I first set overlay option show to false the overlays are not displayed on plot at 1st and when I used my trigger function the overlays do not appear.
Here is the code I use for the plot :
<div id="fastest" style="margin-top:20px; margin-left:20px; margin-right:200px; width:800px; height:400px;">
<script class="code" type="text/javascript">
$(document).ready(function(){
var dataset="too long to be displayed here"
plot1 = $.jqplot('fastest', dataset, {
title: 'Test_figs',
legend: {show:false},
series: [{
showMarker: false,
color: '#ED0E0E',
label: 'R spectrum',
neighborThreshold: -1
}],
axes:{
xaxis:{
label:'Restframe Wavelength'
},
yaxis:{
label:'Flux',
tickOptions:{formatString:'%.3e'}
}
},
cursor:{
show:true,
zoom:true,
tooltipLocation:'sw'
},
Canvasoverlay: {
show: false,
objects: [
{verticalLine: {
name: 'Na-ID',
x: 5893.000000,
lineWidth: 2,
color: '#F0630C',
lineCap:'butt',
yOffset:0,
shadow: true
}}
]
}
});
});
function NaID_trigger() {
var co = plot1.plugins.canvasOverlay;
var line = co.get('Na-ID');
if (line.options.show==false) line.options.show = true;
else line.options.show = false;
co.draw(plot1);
}
</script>
I then use :
<button onclick="NaID_trigger()">Na-ID</button>
to trigger the overlay on or off for instance.
PS: I tried replacing draw by replot as advised didn't work when show=false in overlays options.
I finally found the solution myself :
to not display the overlays when the jqplot loads I set the overall overlays "show" option to true.
Then within each object I set show to false.
Instead of the external to the plot function I used before I switched to an even handler of the form:
$("input[type=checkbox][name=Na-ID]").change(function(){
plot1.plugins.canvasOverlay.get('Na-ID').options.show = this.checked;
plot1.replot();
});
Now the plot display the selected overlay when checkbox is ticked and not at the beginning.
Hope this will help someone who has the same issues.
I have a panel with header set to left of panel body
Ext.each(configs, function (config) {
Ext.createWidget('panel', Ext.applyIf(config, {
renderTo: 'summaryDiv',
bodyPadding: 2,
headerPosition : 'left',
}));
});
what is the config for making the header title of panel to either read up or down?
please see this http://jsfiddle.net/nwMDj/46/
I have a treegrid "templatecolumn" that displays an image based on a condition in an XTemplate.
However, I also would like an html formatted tooltip displayed upon mouseover of the image. I've done this with Ext JS 3.x via ext:qtip metatdata attribute in a renderer, but haven't been able to figure out how to do this in Ext JS 4.1 using tpl and haven't found anything in my searching.
Here's what I have to display the image based on a record value:
var myTemplate = new Ext.XTemplate(
'<tpl if="p > 0">',
'<img src="exclamation.gif" height="16" width="16"/>',
'</tpl>'
);
var schedTree = Ext.create('Ext.tree.Panel', {
...
columns:[
{ header:' ', dataIndex:'p', xtype:'templatecolumn', tpl:myTemplate }
]
}
Has anyone done this or have any suggestions? Is there a better way to do this? Thanks
This isn't a method using XTemplate, but this one works for me:
{
text : 'Zdj',
width: 40,
align : 'center',
dataIndex : 'Name',
sortable : false,
resizable: false,
renderer: function (v, m, r) {
if(r.get('leaf')==true) {
m.tdAttr = 'data-qtip="<img src=services/Images.ashx?id='+r.get('id')+' width=60px height=60px>"';
return '<img src="services/Images.ashx?id='+r.get('id')+'" width="25px" height="25px"/>';
}
}
},
In my example I'm showing a bigger image in tooltip, but there is no problem to show HTML formatted tooltip.
You can add conditions to renderer and in my opinion do more that XTemplate can do.
Your small image should go to return line and tooltip content to m.tdAttr.
You can read more about renderer function here: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-renderer
Hope this helps :)
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
header: 'User Login',
dataIndex: 'user_login',
width:150
},{
header: 'User Name',
dataIndex: 'user_nicename',
width:150
},{
header:'Privledge',
dataIndex:'admin',
width:150
}],
autoScroll: true,
layout:'fit',
selModel: gusersSel,
store: gusersStore
})
Hi I am using above code for the grid Panel in Extjs4.0.2a When I populate data dynamically in the store the scrollbars are not working .
I have also tried using doLayout() for grid Panel but dosent work too .
The grid Panel is in a Window .
Anything that can solve this problem ?
Actually it works for some time but dosen't work all the time .
I've had the same problem. They use custom scrollbar and it's pretty buggy (especialy in chrome). If you are not going to use infinite scroll the possible solution could be to remove custom scrollbar and use native one. To do that just add the following to the grid's config:
var gusersPanel = Ext.create('Ext.grid.Panel', {
scroll : false,
viewConfig : {
style : { overflow: 'auto', overflowX: 'hidden' }
},
// ...
});
I did gusersPanel.determineScrollbars() when i am adding and removing data from store and it is working fine .
The problem with this is the scroll listener is attached to the div element on the afterrender event, but then if the scrollbar is not needed after a layout operation the div element is removed from the dom. Then, when it's needed again it's added back, but only if enough time has passed the garbage collection makes extjs recreate the div node and this time it's added to the dom without attaching the scroll listener again. The following code solves the problem:
Ext.override(Ext.grid.Scroller, {
onAdded: function() {
this.callParent(arguments);
var me = this;
if (me.scrollEl) {
me.mun(me.scrollEl, 'scroll', me.onElScroll, me);
me.mon(me.scrollEl, 'scroll', me.onElScroll, me);
}
}
});
You written code to layout: 'fit'. It did not work autoScroll.
Change the code to some height and remove layout: 'fit' code.
Like this.
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
...........
}],
autoScroll: true,
//layout:'fit',
height: 130,
selModel: gusersSel,
store: gusersStore
It is help you. Cheers.