I am using Flexslider and on ipad it is not userfriendly with mousewheel effect because when user reached to this slider part it is difficult to go ahead to bottom.I want to diable it generally.I tried Flexslider option.Here it is, but it is not working
$('.promotions-slider').flexslider({
animation : 'slide',
slideshow : false,
prevText: "",
nextText: "",
slideshowSpeed: 2000,
mousewheel: false,
animationSpeed: 600,
controlNav : false,
minItems: 1,
maxItems: 1
});
Help me please to fix this.
Ah finally I found a solution.Flexslider had another two optiones touch and useCss.My final code is
$('.promotions-slider').flexslider({
animation : 'slide',
slideshow : false,
prevText: "",
nextText: "",
slideshowSpeed: 2000,
mousewheel: false,
animationSpeed: 600,
touch: false,
useCSS: false,
controlNav : false,
minItems: 1,
maxItems: 1
});
Now it is working 100%.
Related
I went through devExtreme documentation and examples but I can't find a solution for this...
In a Razor view I am loading a dxScheduler as follows (it's bound to a db object where "orders" and "resources" are defined):
<div id="scheduler"></div>
and
<script>
$(function () {
$("#scheduler").dxScheduler({
dataSource: orders,
views: ["timelineDay"],
currentView: "timelineDay",
showCurrentTimeIndicator: true,
shadeUntilCurrentTime: true,
firstDayOfWeek: 0,
startDayHour: 0,
endDayHour: 24,
cellDuration: 15,
groups: ["areaId"],
resources: [{
fieldExpr: "areaId",
allowMultiple: false,
dataSource: resources,
label: ""
}],
height: "100%"
})
});
</script>
It works fine. However, while keeping cellDuration = 15 mins:
I would like the scheduler to be centered around the current time indicator (i.e. the vertical line that represents datetime.now...)
At the same time "startDayHour" has to be "0" and "endDayHour" has to be "24", as they are now.
Any suggestion would be appreciated. Thanks.
It turned out that I was looking at the "Configuration" section only. But there are "Methods" too...
The answer is to use the "scrollToTime" method.
Reference:
https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxScheduler/Methods/#scrollToTimehours_minutes_date.
Updated working example (it's straightforward then to set the argument of "scrollToTime" dynamic).
$(function () {
$("#scheduler").dxScheduler({
dataSource: orders,
views: ["timelineDay"],
currentView: "timelineDay",
showCurrentTimeIndicator: true,
shadeUntilCurrentTime: true,
firstDayOfWeek: 0,
startDayHour: 0,
endDayHour: 24,
cellDuration: 15,
groups: ["areaId"],
resources: [{
fieldExpr: "areaId",
allowMultiple: false,
dataSource: resources,
label: ""
}],
height: "100%",
onContentReady: function (e) {
e.component.scrollToTime(5, 30, new Date());
}
})
});
My requirement is to show an event with time interval. When I try to use this code it seems not working properly. May be I am wrong at timezone selection but not getting exactly what need to do. Please help.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2016-02-12',
defaultView: 'agendaWeek',
editable: false,
eventLimit: true, // allow "more" link when too many events
timeFormat: 'h:mm a',
//timezone: "local",
events: [
{
title: 'Meeting',
start: '2016-02-09T13:00:00-00:00',
end: '2016-02-09T14:00:00-00:00'
}
]
});
I use gridstack (https://github.com/troolee/gridstack.js/tree/master) which uses jQueryUI's "Resizable" behaviour. I am trying to set aspectRatio: true on only one of the widgets (tiles) in the grid but there is no obvious way to do this.
Here's the js to initialize gridstack:
grid = $(".grid-stack").gridstack
({
width: 12,
height: 9,
animate: true,
always_show_resize_handle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
draggable:
{
handle: ".box-title-bar"
},
resizable:
{
aspectRatio: "true",
handles: "se"
}
}).data("gridstack");
Setting resizable: { aspectRatio: "true" } sets it for all tiles in the grid; however, I can't figure out how to set this for only one of the tiles/widgets.
Can i customize caroufredsel to support dragging? something like this http://jsfiddle.net/DRVpe/
The only problem with this is it doesn't loop infinitely when you start dragging it. It should join or loop seamlessly when you move it up or down.
$(function() {
$('#foo0').carouFredSel({
circular: 'true',
infinite: 'true',
direction: 'up',
scroll : {
items: 1,
duration: 1500,
easing: 'linear',
pauseOnHover: 'immediate',
},
auto : {
pauseDuration : 0,
},
});
$( "#foo0" ).draggable({ axis: "y" });
});
If these ain't not possible are there plugins that does what i want?
Thank You!
I'm trying to create a dialog using jQueryUI and I'm running into 2 issues that I didn't expect and haven't found a solution that seems to work for me. Using this code:
$( '<div/>' ).load( $this.attr( 'href' ) ).dialog({
height: 'auto',
maxWidth: 600,
position: 'center',
resizable: false,
title: $this.attr( 'title' ).length > 0 ? $this.attr( 'title' ) : false,
width: 'auto',
resize: function( e, ui ) {
$(this).dialog( 'option', 'position', 'center' );
}
});
I end up with a dialog that's positioned such that the upper left corner is at the center of the screen (or thereabouts) and whose width seems wholly dependent on the text it contains. Is there something obvious that I'm missing? I'd really like for the dialog as a whole to be center aligned on both axes and for the width to not exceed 600px.
Thanks.
Your width: 'auto' is the culprit, I think. Also, the resize function doesn't apply to whether the browser window resizes, that was just if you resize the dialog itself. Since you set resizable to false, that won't happen.
How about setting a minWidth as well?
$( '<div/>' ).attr('id', 'my-dialog').load( 'hello.html' ).dialog({
height: 'auto',
maxWidth: 600,
minWidth: 500,
position: 'center',
resizable: false,
title: $this.attr( 'title' ).length > 0 ? $this.attr( 'title' ) : false,
});
$(window).resize(function(){
$('#my-dialog').dialog( 'option', 'position', 'center' );
});
More in the documentation: http://api.jquery.com/resize/