I tried this simple example:
$.magnificPopup.open({
gallery: {
enabled: true
},
items: [
{src: "tracks/" + p[0]},
{src: "tracks/" + p[1]}
],
type: 'image'
});
Only the first slide (0) pops up and there is no gallery - just a single slide. What is wrong?
You should never give up: Problem is solved. I isolated the code from the gallery example of the homepage of Magnific Popup and put it into a page of my own. The result was the same as described above i.e. gallery was not working. I then downloaded Magnific Popup again and noticed that the library file was bigger than my previous library file. So the library file was corrupted in some way - probably my fault. Now gallery is working...
Related
I am trying to take a picture using camera in Sencha Touch 2. Here i have one button 'Take a Picture', when i will press it, camera should start. As i am new to this sencha touch 2, i am unable to figure it out, how to do this?
For this i used the below code:
Sencha Fiddle Link
Please help me. I do not want to use Phone gap.
You have to add device folder of Sencha Library in root directory
and add below code in
Ext.require('Ext.device.Camera');
and use this code for capture image using camera
Ext.device.Camera.capture({
success: function(image) {
imageView.setSrc(image);
},
quality: 75,
width: 200,
height: 200,
destination: 'data'
});
If you want to use purely sencha, then you can check this code:
xtype: 'button',
handler: function(button, event) {
Ext.device.Camera.capture({
source: 'camera',
destination: 'data',
success: function(imagedata) {
var img = Ext.getCmp('theimage');
img.setSrc('data:image/jpeg;base64,' +imagedata);
},
failure: function() {
Ext.Msg.alert('Error', 'There was an error when acquiring the picture.');
},
scope: this
});
But if you want to use phonegap camera features, may be you have to change the code. As sencha is giving the default feature to handle the camera, i wish not to go with phonegap. Hope it will help..
I just updated my Sencha Touch to Sencha Touch 2.0.1 and my home screen icon is no longer working. Previously I could inspect my code and see the correct <link> tags generated by Sencha. I no longer see these tags. I have my home screen icon set up with the following code:
Ext.application({
name: 'example',
phoneIcon: '/example/resources/icons/app_icons/114x114.png',
I have also tried changing "phoneIcon" to "icon", and I have also tried using an object after "icon" instead of a string. Any ideas?
The icon property works fine for me:
Example application: http://www.senchafiddle.com/#f15tv
With Sencha Touch, i want to use some of the icons in the directory resources/themes/images/default/pictos/ for iconCls in my footer navigation. But from what I've read, it says I need to set up a ruby on rails server just to compile the right stylesheets and javascript files to use them?
I don't have the least bit knowledge of how to set up my own servers or set up my own RoR server. Is there anyway else to do this? I just want 3 icons from that directory...setting up a whole server seems a bit overkill.
Yes, you need to install Ruby and RubyGems (only if you're on Windows because they are pre bundled on Mac)
Then you just need to open the right scss file in touch/resources/sass (depending on what them you're using) and to add the following line to it :
#include pictos-iconmask(PICTOS_NAME);
Finally you need to open a terminal in that folder and to execute the following command :
compass compile // Run it every time you change something in the .scss
or
compass watch // Will automatically recompile every time you save
More information about Sencha-Touch Theming here
I used the following CSS
/* TV icon for Videos */
/* USED IN SENCHA TOUCH V2*/
.x-tab .x-button-icon.tv,.x-button .x-button-icon.x-icon-mask.tv{-webkit-mask-image:url(/resources/themes/images/default/pictos/TV.png)}
Actually... to be perfectly honest, I didn't map my CSS to the image, but rather converted the image to Base64 and embedded it in the CSS. The reason for this was that I only needed 4 of the icons and I didn't want to move them all around every time.
/* TV icon for Videos */
/* USED IN SENCHA TOUCH V2*/
.x-tab .x-button-icon.tv,.x-button .x-button-icon.x-icon-mask.tv{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAFmUlEQVRoBe2aX6hURRzH75p/qCjLMLKk7CoZEgmikHjLSxbqWz30B6SXzF6ieujPg0FFfzB66KUSfO4hJAqKKDSp25USi6hESCoKUyr6Z4lalnn7fJadbTxnz+7Zc3fv3T34gw8zZ87Mb+Y7c87MnNmtjI2NDbRrlUplJmVugfNhKxzAT/uOKJjXqLNC3rlwOxyCV6nSsD2zne1CDY/A76DIj2AIzmjXT978+q7VMUponYfhybzl43xTKFjE5lNoeq3gMsLNsJRBKOqv5iod1HwurtVxbS3HVMKL07lzpMTq88ZxuwI+hRNgj8t+WAfT8vpplU9f4CP8DYR6rNO6V7Qq3+h+249zcEKFy2EX/AuhMb8S3wAzQr6ioT7ADtRn8H+S+GewvLDfogUthw3CCMQjfZTrTTCrqG/KOhnq4wgEsdYxAvOL+q22eTyFqw4GBhbQiNfgHwiN+5P4Fpjdrn/KzILn4S8I/vT9Bixo118yf+FHOnZEQ84CJ67jEBpp+DpcEudtFifvXLDzYh/61PfMZmXz3uuIYCvDHJlH4RjEDd7JdcvHkDy+HtsTZX1SnoHCr0eyIzomuCbaWfU++A1i0a7VVyYrD9fcWwi7E2Vc5++HcU+AoZ5qG+OLTsVp5M3gUuKsGoTvMz1ZB2lrYW+UzzKWvQs6tsSFejs6wsGpIbYGvoZY9Hdc3xDyEV8JpoVOMa/r+eqQp9Nh1wTXRF9N4z+MBCnsF3gYHoIfIYg13AVLOi0y9tdVwTXRVyBC0fFIOxlJEOu9z2Fh3LhuxCu1Rg2wZz2TCt2j+lXSSVPMHHgBboSkf0W/A/fC9zAFOmn6P4FOO3hgKkKnEw6DjXEd7HSFuKzuxAwV75dPbKZpj4Ed3mnT/wF0voXoEZ3fCgchPF5lDb9C4xpHcwiKfWpRsI9skLauVXA33tte7Ae1TsvzzpzogdbnaWeuZjZz9AUetsFP4HudnF1JmhCz7nNhNSwZb41Zgj/GsZuDUWa2MIuOt67C5Zlh7ewt8BzcBD6ehSyr4Jt429sLYlVFOxzlg+Bafhhic0D2w+OwEq6BjeD+PGVZI/wlOY+kck9ugqJtk0dKwRTrq3c37KZfqvd4ID7h+l14Cq6H+sDWIyTG5q4kdhzfm8x4sr3uyxW1K4i1ccSdaD3oexYcvLolHdRv9EHEY5898AECHf1TjKS/SXD0345v9LNgR/EH8Owry7znQULd+lmw889cOLuuJh3xrM08detnwR4nLYbhupoowsTl15/r9qoo+f/ZK07so/hM2vog4objNnM9g+ulsB4G43tZy1Kcp5fjfmougq2I3E64E1xhroNVcDmcYv0uWDHuwi6EdeDhocupW9GGVgbBQZjCm01g1XxlEuzy4yN9HIbgIkhZP8/SsZg/uNgMfljcAU/DIUhZGQS7y/oZXmZ3dRLcbLwP+yBlZRDsu3seDDNTeyjpzD0P5kPKyvIOX4CyjTAPPLC4E5y5U1YWwY7yHHggpTCRUIZHOiGp+eVpwc37p//vnh7h/h/D5grKMksfQ+YO8GdZ12G3lf4XNLW9LINgd1r+sL4J/J+IS9RV4PdwKQWjq/oz7FG2lYofY7fl8a2krEyTliPb0sokuKVYM5RJcOpsulEPZAnOVbiRw0lKU0dyAm74iCczhfZ66pfVGSHPZISeVyUHQ2GzYT2T1SuEYZa+lHjKsgRfRk4PsT0u6RVTiMeyjdp8Dun31CDItqxRvI0ii+ixrPvZHrt3x5PIDaC4wtaot3Tmov0ivIRo/zDmSDd8J0jvtlnvIKyHZeBOqrBlCdahP2O4Y2m4gJthAk3RzdqauymtnNib4+rR3C2ZoIy+oz6uvfjjd6e7QI3HFTwK/sex7HYAgTt8XL8FBftl4Ulfq8ecLH1lfjq+B0/Atv8AOeLFDQ1OlmYAAAAASUVORK5CYII=);}
Now, when you're creating your TabPanel you want do do something along these lines.
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBar: {
docked: 'bottom',
layout: {
pack: 'center'
}
},
items: [{
title: 'Video',
iconCls: 'tv' // the icon class string is appended to the CSS
// '.x-icon-mask.[iconCls string]'
// in this case
// '.x-icon-mask.tv'
// as seen in the CSS above
}]
});
EDIT
Looking over my old Sencha Touch V1 code base (as per your comment below) you will want to use the following CSS for Sencha Touch V1
/* TV icon for Videos */
/* USED IN SENCHA TOUCH V1*/
.x-tab img.tv,.x-button img.x-icon-mask.tv{-webkit-mask-image:url('/resources/themes/images/default/pictos/TV.png');}
Edit: Upon further examination I discovered that I hadn't included certain namespaces. Adding the relevant name spaces now gives the error:
'myapp.mainpanel has no method setActiveItem'
I am trying to build a sencha touch web app using the card layout mechanism. I make use of the following handler on a button on the landing page:
handler:function(){
myapp.mainpanel.setActiveItem(myapp.cards.vehicleSearchResults, { type: 'slide', cover: false, direction: 'left'})
}
But when I click on the button I get the error: Sencha Touch error: 'myapp.mainpanel has no method setActiveItem'
Does this mean myapp.cards.vehicleSearchResults is undefined?
I define it here:
myapp.cards.vehicleSearchResults = new Ext.Panel({
scroll:false,
layout:{
type:"vbox",
align:"stretch"
},
id: "vehicle-search-results-card",
dockedItems: [myapp.toolbars.searchResultsTitle, myapp.toolbars.searchResultsNav, myapp.toolbars.searchResultsCaption]
})
Any clues as to what I am doing wrong based on the above code?
The setActiveItem() method is only available if the panel has a card layout. Make sure you add the 'card' layout property in your panel definition.
Is there an option in DOJO where files can be uploaded by Drag and Drop from desktop to the browser?
No I dont believe so. As outlined here and here its not really possible to do without using a plugin.
Old post, but still one of those posts being found by google easily. For those interested how to do this:
Have a look at this SO answer
Dojo overview of how to use its Uploader (styled as a button)
Use addDropTarget to link a dropArea for that uploader (for HTML5-enabled browsers -- see also first link))
To make the drop target visibly react to drag events, I had to connect directly to browser events like ondragenter or ondragleave (see code snippet below)
createUploader: function() {
// ... define uploader and droptarget
d_on(this.dropArea, "dragover", d_lang.hitch(this, this.dropAreaOver));
d_on(this.dropArea, "dragleave", d_lang.hitch(this, this.dropAreaLeave));
d_on(this.dropArea, "drop", d_lang.hitch(this, this.dropAreaLeave));
}
dropAreaOver: function(evt) {
evt.preventDefault();
domClass.add(this.dropArea, "dropAreaOver");
},
dropAreaLeave: function(evt) {
evt.preventDefault();
domClass.remove(this.dropArea, "dropAreaOver");
}