Just wondering if anyone can help please.
I'm using Slick Slider on one my WordPress sites, and the slider is currently sliding from right to left. I'd like the slider to slide from left to right when it changes slides.
Does anyone have any suggestions please?
<script type="text/javascript">
$(document).ready(function(){
$('.fadex').slick({
dots: false,
speed: 500,
autoplay: true,
autoplaySpeed: 3500,
infinite: true,
centerMode: false,
initialSlide: 0,
arrows: true,
});
});
</script>
To solve this problem requires you to change the style of the left value
Because it adds a negative to the single-product-image class
Inside the slick.js file at line 866
Add a new line and add this condition
if($("html").attr("dir") == 'rtl'){ var newE = t.slideWidth * o; }else{ var newE = t.slideWidth * o * -1; }
And change this condition
(e = t.slideWidth * o * -1)
to this
(e = newE)
Then the page orientation will be relied upon in the case of RTL or LTR.
rtl : [slick-slider rtl=”true”] (for rtl mode. By default value is “false”. Options are “true OR false”).
Simply use the options provided. By default value is “false”, change this to true, or vice versa to change the direction.
<script type="text/javascript">
$(document).ready(function(){
$('.fadex').slick({
dots: false,
speed: 500,
autoplay: true,
autoplaySpeed: 3500,
infinite: true,
centerMode: false,
initialSlide: 0,
arrows: true,
rtl: true,
});
});
</script>
Related
We have zoom buttons inside a map and I can't manage to fix'em -> When I resize the window, those buttons are not following the right way while the layer switcher button is doing well.
I already tried providing the right css but none of I tried seems to work, and I've done a lot of things with css.
In fact, when I reduce the window size, the buttons are moving the right way, but not enough and consequently they are finally hidden.
Try this
scrollwheel: false,
This option is used for disable zoom on mouse.
scaleControl: false,
This option is used for disable zoom by scale.
draggable: false,
This option is used for disabling drag.
mapTypeControl: false,
This option will hide map type.
Put them as following:
var myOptions = {
center: myLatlng,
zoom: 15,
mapTypeControl: false,
draggable: false,
scaleControl: false,
scrollwheel: false,
navigationControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
https://developers.google.com/maps/documentation/javascript/controls
I have created an owl carousel using the following settings.
$('.owl-carousel').owlCarousel({
autoWidth:true,
loop:false,
items:25,
slidesToShow: 1,
mergeFit:true,
slideBy:1,
center:false,
dots: false,
merge:true,
lazyload:false,
nav:true,
})
An empty space is created at the end of my carousel.I have tried adding margin left and right to individual card items.But none seem to solve my issue.
I have created a codepen. We can see a empty space when we slide to the last item in the carousel.
set autoWidth to false
$('.owl-carousel').owlCarousel({
autoWidth:false,
loop:false,
items:25,
slidesToShow: 1,
mergeFit:true,
slideBy:1,
center:false,
dots: false,
merge:true,
lazyload:false,
nav:true,
})
I want to remove the header of a child window using TIDESDK. I don't know how to use xml settings for a child window. I was successful in creating tiapp.xml file for the parent. Now, I am trying to use the Ti.UI.UserWindow APIs to remove the borders but to no avail.
Here is my unsuccessful piece of code:
var window1 = Ti.UI.createWindow('app://src/filename.html');
window1.setUsingChrome(false);
window1.setSize(400,200);
window1.setTransparency(0.5);
Every other property is accurately getting applied but the 'setUsingChrome' property shows no effect. Can someone advice how to use this property or to create a tiapp.xml file for tidesdk so as to remove the header from the CHILD window
YESSss....found out finally, but realized after finding that it was kind of silly not to try this earlier.
var window1 = Ti.UI.createWindow({
url: 'app://src/client/notifications/notifications.html',
title: "Reminders",
width: 400,
height: 200,
maximizable: false,
minimizable: false,
closeable: false,
resizable: false,
fullscreen: false,
maximized: false,
minimized: false,
usingChrome: false,
topMost: true,
visible: true,
transparentBackground: false,
});
Setting either the transparentBackground property or usingChrome property removes the header and the borders(if present).
I have a DataTable with 3 controls; General Search, Pagination, and Info (i.e. 'Showing 1 to 10 of 88 Entries' ). I want to place these controls in the header/footer of a jQuery Dialog window.
DataTables provides an options called sDOM, which lets one specify where to put DataTable's controls. But, I want to put the controls in the header and footer of a modal, which can not be done with sDOM.
The General Search control can be created with fnFilter, which is easy enough.
I think Pagination, and Info will require writing a custom pagination plugin, which I would like to avoid.
This is my current progress on jsFiddle.
$('#modal').dialog({
modal: true,
"height": 570,
"width": 1170,
autoOpen: false,
auto: true,
dialogClass: "myDialog",
create: function () {
$(".myDialog").append('<div id="dialogFooter" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><div class="dataTables_info" id="DataTables_Table_X_info"></div></div>');
}
});
var dataTableJS = $('#dataTable').dataTable({
"sPaginationType": "full_numbers",
"sDom": 'it<\"F\"p>"',
});
$("#modal").dialog("open");
You are doing it backwards :)
Create the dataTable
Create the modal
Move the autogenerated controls from the dataTable to the footer (or whatever)
forked fiddle -> http://jsfiddle.net/xK3TK/
I Have in the example placed the footer on top and included jQuery UI css (and you have BTW forgotten to close the modal markup </div>)
var dataTableJS = $('#dataTable').dataTable({
"sPaginationType": "full_numbers"
//"sDom": 'it<\"F\"p>"',
});
$('#modal').dialog({
modal: true,
"height": 570,
"width": 770,
autoOpen: false,
auto: true,
dialogClass: "myDialog",
create: function () {
$("#dataTable_info").detach().appendTo('#dialogFooter');
$("#dataTable_paginate").detach().appendTo('#dialogFooter');
$("#dataTable_length").detach().appendTo('#dialogFooter');
$("#dataTable_filter").detach().appendTo('#dialogFooter');
}
});
$("#modal").dialog("open");
I am trying to make a TideSDK application that cannot be closed and minimizes to the system tray.
I have the system tray part figured out for the most part, but when I specify "closeable" in tiapp.xml it doesn't do anything. i.e. I still see the "close" button and it closes the app entirely.
<window>
<id>someApp</id>
<title>Alerts</title>
<url>app://index.html</url>
<width>800</width>
<max-width>800</max-width>
<min-width>800</min-width>
<height>600</height>
<max-height>600</max-height>
<min-height>600</min-height>
<fullscreen>false</fullscreen>
<resizable>false</resizable>
<chrome scrollbars="false">true</chrome>
<maximizable>false</maximizable>
<minimizable>true</minimizable>
<closeable>false</closeable>
</window>
How to make it not closeable?
Have a look at this solution - https://gist.github.com/4639473
I've learned that the most flexible way to manage an app that "minimizes/closes to systray" is to use a hidden main window that launches a secondary window.
Secondary windows appear to be more flexible, plus you have the ability to manage them from the main hidden window.
This is all I left in my main window's code:
<head>
<script src="app://js/jquery.min.js"></script>
<script>
$(function(){
Ti.UI.currentWindow.hide();
var alert_window = Ti.UI.createWindow({
id: "alertWindow",
url: "app://alert.html",
title: "My New Window",
baseURL: "app://alert.html",
x: 100,
y: 100,
width: 500,
minWidth: 500,
maxWidth: 500,
height: 500,
minHeight: 500,
maxHeight: 500,
maximizable: true,
minimizable: true,
center: true,
closeable: false,
resizable: false,
fullscreen: false,
maximized: false,
minimized: false,
usingChrome: false,
topMost: true,
visible: true,
transparentBackground: false,
transparency: false
});
alert_window.open();
alert_window.setTopMost( true );
});
</script>
</head>
<body>
</body>