I'm using for a mobile solution the slider "swipe.js" (https://github.com/bradbirdsall/Swipe). Now i would like to use the api-function getPos to return the actually slide. Unfortunatley my code doesn't work:
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
callback: function() {
var pageNumber = elem.getPos();
alert("P"+pageNumber);
}
});
What's wrong? how doest it work?
thanks for your help
You were almost there:
var pos = mySwipe.getPos() + 1;
alert( pos );
Related
I'm trying to learn Axios and Vue with using Twitch API. I'm fetching data from that API and there is thumbnail_url which is for channel's thumbnail photos but I have to change that data's width and height because it's coming like this;
https://static-cdn.jtvnw.net/previews-ttv/live_user_shroud-{width}x{height}.jpg
And I was trying to do like this;
beforeMount(){
helix.get('streams?language=en').then((response) => {
for(var i=0; i < response.data.data.length; i++){
response.data.data[i].thumbnail_url.replace("width", "40")
}
console.log(response.data.data)
this.results = response.data.data
})
.catch(function (error) {
console.log(error);
});
},
Actually, I didn't understand what that is not working. I know there is a point that I missed. If someone can help me, It'd be great.
And If It is not correct way to do this, what is the correct way?
Thanks a lot.
You should use replace("{width}", "40"); instead
var url = 'https://static-cdn.jtvnw.net/previews-ttv/live_user_shroud-{width}x{height}.jpg';
url = url.replace("{width}", "40");
url = url.replace("{height}", "60");
console.log(url);
In your code change this
var thumbnail_url = response.data.data[i].thumbnail_url;
thumbnail_url = thumbnail_url.replace("{width}", "40");
thumbnail_url = thumbnail_url.replace("{height}", "60");
response.data.data[i].thumbnail_url = thumbnail_url;
As you comment you can do it without variable also
response.data.data[i].thumbnail_url = response.data.data[i].thumbnail_url.replace("{width}", "40").replace("{height}", "60");
I have a problem with module.export on titanium. I tried following https://wiki.appcelerator.org/display/guides/CommonJS+Modules+in+Titanium but it doesn't work at all.
I have 2 little pieces of code. App.js:
var fenetreBase = Titanium.UI.createWindow({fullscreen:true,backgroundColor:"white",exitOnClose:true});
fenetreBase.open();
var vueimage = new (require('UI/viewimage'))();
vueimage.test();
fenetreBase.add(vueimage);
and viewimage.js in the folder UI.
function viewimage() {
var lavue = Ti.UI.createView({backgroundColor:'red' });
var item =...
lavue.add(item...);
return lavue;
}
viewimage.prototype.test = function() {
Ti.API.info("test");
};
module.exports = viewimage;
I have an error saying
Object #<view> has no method 'test' in app.js vueimage.test()
In my mind, I follow the example of "Instantiable Objects" in the wiki above but I may have not understand something. I expect I made a stupid mistake. I tried many other things, each uglier than other and it doesn't work anyway.
Can somebody tell me where the mistake is?
your mistake is assuming that you have an instance of viewimage when you run:
var vueimage = new (require('UI/viewimage'))();
you are getting an instance of
var lavue = Ti.UI.createView({backgroundColor:'red' });
which doesn't have a test property.
Perhaps you could use an object like this instead:
function viewimage() {
var result = {};
var lavue = Ti.UI.createView({backgroundColor:'red' });
var item =...
lavue.add(item...);
result.lavue = lavue;
result.test = function() {
Ti.API.info("test");
};
return result;
}
EDIT
In your App.js:
var vueimage = new (require('UI/viewimage'))();
vueimage.test();
fenetreBase.add(vueimage.lavue);
I am trying to retrieve the line number in dojo data grid. rowIndex function would not help me much because I need the 'line number' and NOT 'row number' when sorted.
The scenario:
I would like to set the focus on one specific row and this focus should remain even after sorting. But if I use the code below, it does not select the correct row.
For example, the index 1 is on the 5th line after sorting. However, the e.item.id still remains as 1, expected is 5.
calendar.on("itemClick", function (e)
{
MyGrid.doclick({ rowIndex: e.item.id });
MyGrid.scrollToRow(e.item.id);
});
Additionally, I also tried...
calendar.on("itemClick", function (e)
{
var identity = MyGrid._by_idx[e.item.id].idty;
var gridItem = MyGrid.getItem(identity);
var gridItemIndex = MyGrid.getItemIndex(gridItem);
MyGrid.doclick({ rowIndex: gridItemIndex });
MyGrid.scrollToRow(e.item.id);
});
Could you please let me know how to get the correct row after fitering? I thank you for your time.
Wishes,
Santosh
Okay, I figured out the answer.
GetGridItemIndexByGridItem = function (gridItem) {
var indexLength = MyGrid._by_idx.length;
var element = null;
var gridItemIndex = -1;
for (var i = 0; i < indexLength; i++) {
element = MyGrid._by_idx[i];
if (element.item.Guid == gridItem.Guid) {
gridItemIndex = i;
}
}
return gridItemIndex;
}
Best Wishes
I have a problem getting my mind round variable scope and could do with some help :)
I'm setting up a module in joomla that will rotate images. I've a bit of code I've used on non Joomla sites that works fine. However I've ported it and I'm running into problems that I think are variable scope issues so any thoughts would be great.
Sorry for the long code but I included the whole function in case (when it works) it might help someone else.
function slideshow(container,containerCaption,previewCode,timer,classis,headerId,thumbOpacity,titlebar){
var showDuration = timer;
var container = $(container);
var images = $(container).getElements('span');
var currentIndex = 0;
var interval;
var preview = new Element('div',{
id: containerCaption,
styles: {
opacity: thumbOpacity
}
}).inject(container);
preview.set('html',previewCode);
images.each(function(img,i){
if(i > 0) {
img.set('opacity',0);
}
});
var show = function() {
images[currentIndex].fade('out');
images[currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0].fade('in');
var title = '';
var captionText = '';
if(images[currentIndex].get('alt')) {
cap = images[currentIndex].get('alt').split('::');
title = cap[0];
captionText = cap[1];
urltoUse = cap[2];
preview.set('html','<span class="lctf1"><ahref="'+urltoUse+'">'
+ title + '</a></span>'
+ (captionText ? '<p>' + captionText + '</p>' : ''));
}
};
window.addEvent('domready',function(){
interval = show.periodical(showDuration);
});
}
window.addEvent('domready',function() {
container = "slideshow-container";
containerCaption ="slideshow-container-caption";
previewCode = '<span ><?php echo $itemtitle[0];?></span><p ><?php echo $itemdesc[0];?></p>';
timer = <?php echo $slidetime*1000;?>;
classis = 1;
headerId = "";
thumbOpacity =0.7;
titlebar = "<?php echo $showTitle;?>";
if($(container)){
slideshow(container,containerCaption,previewCode,timer,classis,headerId,thumbOpacity,titlebar);
}
});
The javascript error being thrown is that preview is undefined.
Your code seems to work, I made a jsfiddle here: http://jsfiddle.net/7E2MX/3/ which runs with no errors.
I did change one line though:
var images = $(container).getElements('span');
to
var images = $(container).getElements('img');
i'm using getCmp('componentid').hide();
its not working.
if (flag_in == 1) {
console.log('inside if of hide');
Ext.getCmp('inboxQueueId').hide();
var el = btn.el;
Ext.getCmp('inbox_hide').setIconCls('show');
flag_in = 0;
Ext.getCmp('queueViewPanel').setWidth('100%');
} else {
console.log('inside else of hide');
Ext.getCmp('inboxQueueId').show();
var element = btn.element;
Ext.getCmp('inbox_hide').setIconCls('hide');
flag_in = 1;
Ext.getCmp('queueViewPanel').setWidth('70%');
}
its coming inside if but Ext.getCmp('inboxQueueId').hide() is not working.
And its not giving error.
Please help me.
Try this,
Ext.getCmp('inboxQueueId').hide('slide', false)
Or something like this,
Ext.getCmp('inboxQueueId').hide(false)
I hope this helps. :)