I am newbie to Splidejs.
I want to make slides in my web page to be autoplayed when page loaded.
I tried with this code but it doesn't accomplish my task
(I set autoplay property to true).
document.addEventListener( 'DOMContentLoaded', function () {
new Splide('#image-slider').mount() , {
autoplay:true,
type : 'loop',
cover : true,
height : '1000rem',
perPage:3,
};
} );
I just changed the code to the following code and the problem solved.
<script>
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#image-slider', {
arrows :'false' ,
type : 'loop',
perPage : 1,
autoplay: true,
cover: false,
height : '100rem',
}).mount();
});
</script>
Related
I have a chrome extension that works perfectly when I'm using it in one tab. Then I go to another tab and extension still works, but here's the strange thing that I can't understand. When I come back to first tab and I click on browser action to show the extension or close (if I left it open), nothing happens. I need to click browser action second time and then extension starts working.
Part of my background.js where the browser action button is defined:
chrome.browserAction.onClicked.addListener(function (tab) {
if (page_loaded == true) {
chrome.tabs.query({ active: true, currentWindow: true, highlighted: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, { greeting: "browser_action_clicked" }, function (response) {
if (response.found == 'N') {
chrome.tabs.executeScript(null, { file: "src/injection.js" }, function () {
chrome.tabs.executeScript(null, { file: "src/extension.js" }, function () {
chrome.tabs.executeScript(tab.id, { code: "$('.cheap-watcher' ).animate({ 'right': '0px' }, 'slow');" }, function () {
sidebarActive = true;
});
});
});
}
else {
if (sidebarActive == true) {
chrome.tabs.executeScript(tab.id, { code: "$('.cheap-watcher' ).animate({ 'right': '-370px' }, 'slow');" }, function () {
sidebarActive = false;
});
}
else {
chrome.tabs.executeScript(tab.id, { code: "$('.cheap-watcher' ).animate({ 'right': '0px' }, 'slow');" }, function () {
sidebarActive = true;
});
}
}
});
});
}
});
Did I wrote something wrong? Or is it chrome bug?
Your sidebarActive is stored as a global state variable (and same with page_loaded). So here's what you have as an example:
You click the button on your first tab; sidebar is shown, sidebarActive is set to true.
You do something with the second tab that results, eventually, in sidebarActive being false - no longer reflecting the state of the old tab.
You click the button on your first tab; since sidebarActive is false, you attempt to show the sidebar; however, it is already shown, so it gives an impression of doing "nothing".
However, now sidebarActive is actually in sync with the tab, so subsequent clicks "work".
This will not work at all, since the state is really per-tab. You have to either:
Save the state in the content script, not the background script, or
Save the state per-tab, e.g. as an array indexed by tab IDs: sidebarActive[tab.id]
In this case, you may still need to do some cleanup on the array when tab updates happen.
I have a few problems with displaying angular material elements and C3.js charts.
With new version of the angular material, in widgets appeared scroll bar.
Does anybody knows how to disable it? I want to show widgets with their fixed size.
Please take a look at the plunker.
The second problem is connected with C3 graphs.
After I open app in browser (at the plunker is also the case) and open the dialog the charts is displaying. Then I close the dialog and open again, the charts are broken.
What could be the cause of this problem? I use a lot of libraries in my project (ngAnimate, ngAria, ngCookies, ngResource, ngTouch, ui.router, ngMaterial,ngMdIcons,ui.grid,ui.grid.selection,ui.grid.cellNav,ui.grid.pagination,ui.grid.resizeColumns, leaflet-directive, bootstrap, jQuery, c3, d3). Do I need to take attention to the order that they are included?
Here is the controller for C3 chart (data come from external source - DB):
angular.module('app')
.controller('ChartCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
$scope.param = $stateParams.param_1;
d3.json('/chart1/'+$stateParams.param_1, function(err, data){
if(err){ throw err; }
$scope.data = data;
//console.log(data);
$scope.$apply();
$scope.chart = c3.generate({
bindto: '#chart1',
/*size: {
height: 350
},*/
data: {
json: $scope.data,
//columns: $scope.data,
keys: {
value: ['data1', 'data2'],
},
type: 'bar'
},
bar: {
width: {
ratio: 0.4 // this makes bar width 50% of length between ticks
}
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});
});
}]);
And the html template which is included in panel-widget directive:
<div id="chart1" ng-controller="ChartCtrl">
<div id="chart1"></div>
</div>
You can do something like this to fix the size of the graph displayed in tab 1.
In side Tab1, make an SVG with fixed size and height like below:
<div id="tab1" ng-controller="GraphCtrl">
<svg id="chart1" width="100" height="100"></svg>
</div>
Bind the SVG to the graph like this:
$scope.chart_grid_lines = c3.generate({
bindto: d3.select('#chart1'), //binding to svg
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
type: 'spline'
},
legend: {
show: false
}
});
Working code here
Hope this helps!
I'v got jwplayer source code from github. I want to change some scripts and built the player. So, i need to change file source from javascript in flash. In javascript i'm setting some params "host" and "flv_id":
jwplayer("mediaplayer").setup({
autostart: false,
controlbar: "none",
displayclick: "none",
smoothing: true,
stretching: "exactfit",
icons: false,
flashplayer: "/jwplayer.swf",
file: "/videos/3aae1ef41d.flv",
flv_id: "115554",
host: "<?php echo $host; ?>",
provider: "http",
startparam: "start",
height: 400,
width: 650,
events: {
onComplete: function() {
},
onPause: function(event) {
},
onError: function() {
}
}
});
In flash i have some class, which can make post-request:
var post:Post = new Post("http://"+someparameters["host"]+"/video/flv");
post.variables.id = someparameters["flv_id"];
post.Send(Go);
Go - is success callback function that returns some flvlink.
Go(link:String):void {
//link - is source, that i need to play
}
The player is playing the "/videos/3aae1ef41d.flv". But i want to play the source from Go(); I have class "Post", but i don't know the place to paste my code. Now, i haven't any changes in default source code. I don't know which file of player source code to edit. So, i need to know, how i can use my "Post" class to play video from Go function.
I am learning Sencha Touch. I am having a strange issue. A view using select field is not showing it on Android emulator, but it does in Google Chrome. It worked fine before, I cannot guess what changed to "break" it.
In the emulator logcat I can see these three messages:
E/ActivityThread(243): Failed to find provider info for android.server.checkin
W/Checkin(243): Can't update stat BROWSER_SNAP_CENTER: java.lang.IllegalArgumentException: Unknown URL content://android.server.checkin/stats
D/CordovaLog(243): undefined: Line 1 : TypeError: Result of expression 'c' [null] is not a constructor.
Sometimes only the third is shown.
Hereafter the view code:
(function() {
var setSettingValue = function(component, query, value) {
var c = component.query(query);
if (c && value && (c.length > 0)) {
c[0].setValue(value);
}
};
var createToolbar = function () {
return Ext.create('Ext.Toolbar', {
xtype: 'toolbar',
docked: 'bottom',
layout: { pack: 'center' },
items: [
{
iconMask: true, ui: 'normal', iconCls: 'info',
itemId: 'infoButton'
},
{ xtype: 'spacer' },
{
iconMask: true, ui: 'normal', iconCls: 'reply',
itemId: 'backButton'
}
]
})};
Ext.define('MyWF.view.Settings', {
extend: 'Ext.Container',
initialize: function ()
{
this.setItems([createToolbar()]);
this.callParent();
},
config : {
layout : 'vbox',
padding : '0 10',
scrollable: {
direction: 'vertical'
},
onBackAction: function () { console.log('back'); },
onInfoAction: function () { console.log('info'); },
listeners: [{
delegate: "#backButton",
event: 'tap',
fn: 'onBackAction'
},
{
delegate: "#infoButton",
event: 'tap',
fn: 'onInfoAction'
},
{
event: 'show',
fn: function(component, eOpts) {
setSettingValue(component, 'selectfield[name=windMU]','kmh');
setSettingValue(component,'selectfield[name=temperatureMU]','C');
}
}],
items : [{
xtype : 'fieldset',
title : 'Measure units',
items : [{
xtype : 'selectfield',
name : 'temperatureMU',
label : 'Temperature',
labelAlign: 'top',
listeners : {
change : function(selectField, newData, oldData, eOpts) {
alert('Your choice is: ' + newData);
}
},
options : [{
text : 'Celsius',
value : 'C'
}, {
text : 'Farenheit',
value : 'F'
},]
}, {
xtype : 'selectfield',
name : 'windMU',
label : 'Wind speed',
labelAlign : 'top',
listeners : {
change : function(selectField, newData, oldData, eOpts) {
alert('Your choice is: ' + newData);
}
},
options : [{
text : 'Kilometers per hour',
value : 'km/h'
}, {
text : 'Meters per second',
value : 'm/s'
}, {
text : 'Miles per hour',
value : 'MPH'
}, {
text : 'Knots',
value : 'kn'
}]
}]
},]
}
});
})();
Thanks for any suggestion
Well I got some time to fix the issue.
First of all I add a lacking information to the question: I was running the app with a custom build of the Sencha Touch library, the library version is 2.0.1.1.
On Google Chrome the select field (Ext.field.Select) creates by default an Ext.dataview.List instance for the list of choiches, while on a phone an Ext.picker.Picker is created.
But Ext.picker.Picker also creates an Ext.TitleBar, that was lacking in my custom build of sencha library, while the Ext.dataview.List class is in.
So the application can show the select field in Chrome, but it cannot in the emulator, and it gives the unclear message, because the libary build is compressed and obfuscated.
There are two solutions:
you can force the use of a list also in the emulator or phone. The class Ext.picker.Picker has a creation option for this: "usePicker: false", by default set to "auto".
or, better, add an explicit reference to the title bar component in the app file: "Ext.require('Ext.TitleBar');" to include it in the library build.
I saw the problem forcing the use of the picker in Chrome, by setting the picker configuration "usePicker: true", and running the app with the debug library build "sencha-touch-debug.js", see http://docs.sencha.com/touch/2-0/#!/api/Ext.Loader, and http://docs.sencha.com/touch/2-0/#!/guide/building .
Then in the Chrome console, as well in the Android emulator logcat, I saw the clear message:
[WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.TitleBar';
consider adding 'Ext.TitleBar' explicitly as a require of the corresponding class
A suggestion: in the logcat is better to filter the many messages, for example writing "Ext.Loader" in the filter mask.
Im new to sencha touch and going through the obligatory hair pulling and head2desk pounding.
Im trying to display a List but Im having a problem.
Im using a beforeshow event to load my json store before the list is displayed. But it's not firing the event. If any can help it is MOST appreciated.
My code is as follows: *note- this code is AS/400 centric so the /%...%/ is for that
function doList() {
var List1 = new Ext.List ({
id : List1,
renderTo : 'panel',
fullscreen: true,
showAnimation: {
type: 'slide',
duration: 250
},
cls: 'demo-list',
width: Ext.is.Phone ? undefined : 300,
height: 500,
store: ListStore,
itemTpl: '<strong>{SCEQPT}</strong>',
grouped: true,
indexBar: true,
onItemDisclosure: function(record, btn, index) {
doPopUp(record);
},
listeners: {
'beforeshow': function () {
alert('beforeshow');
var StoreList = Ext.StoreMgr.get('ListStore'
StoreList.load({
params: {
screfr: Ext.getCmp('SCREFR').getValue(),
scptyp: scptyp,
user : '/%SCUSER%/'
}
});
}
}
});
}
beforeshow listener is triggered only when you are displaying an item with show() method.
Try using the listeners
'render','beforerender' and 'afterrender'. instead.