I am trying to change icons of my tab group's tab, but it doesn't show the image.
For iOS
I've used below code:
var win1 = Titanium.UI.createWindow
({
url:'Tab1.js'
});
var tab1 = Titanium.UI.createTab
({
icon:'footer_contactus_hover.png',
window:win1
});
// create controls tab and root window
var win2 = Titanium.UI.createWindow
({
url:'Tab2.js'
});
var tab2 = Titanium.UI.createTab
({
icon:'footer_search.png',
window:win2
});
I am having 4 tabs. Image's size is 81x51 . It shows me only blue rectangle instead of original image.
Also I've tried <property name="ti.android.fastdev" type="bool">false</property>
Whats wrong with the code ?
Assuming that your image does exist at the locations specified my first guess would be that your images are not created properly so that when the get masked all you see is a blue rectangle. I would suggest grabbing some other icon images from http://glyphish.com/ to see if it may be that your images are not created properly (I do not have any affiliation with that except I have used their icons in my projects and they are top-notch).
Also you may want to check out the Human Interface Guidelines as it sets forth specified sizes.
Solved by making images Transparent.
Also found : - Icon needs to be fileld with a color for visible pixels and transparent for the invisible part. The os will apply the blue glowing stuff, so if icon does not have transparent pixels you will only see a rectangle.
Related
If you look at the bootstrap demo that is hosted here And scroll down to the demo that has all 4 buttons. Now click on the left popover, it shows properly. However, When I shrink or extend the screen the popover is no longer anchored to the proper point. Is there a way around this?
This has to do with the container property for the popover.
http://jsfiddle.net/yvkhbw4b/1/
See the attached example. Show both popovers then resize the window from xs breakpoint to sm breakpoint. You will see the top item will seperate from the button as the container defaults to body. (I'm also setting it to body though options). The second item is attached to the parent div so that one remains attached to the element even though the breakpoint changed.
Documentation on popover options
Appends the popover to a specific element. Example: container: 'body'.
This option is particularly useful in that it allows you to position
the popover in the flow of the document near the triggering element -
which will prevent the popover from floating away from the triggering
element during a window resize.
$('#btn1').popover({
'container': 'body'
});
$('#btn2').popover({
'container': '.col-sm-12'
});
Potential Fix: you could add the following code. Currently only handles bottom aligned popovers but you can add options for other alignments.
$(window).resize(function () {
$('.popover.in').each(function () {
var el = $('[aria-describedby="' + this.id + '"]');
if ($(this).hasClass('bottom')){
$(this).css('top',el.offset().top + el.outerHeight(true));
}
});
});
http://jsfiddle.net/yvkhbw4b/2/
I am trying to disable the logo in my metro app live tile so that the last line of text in my tile notification will show. The Windows 8 documentation
says that there is a way to disable this logo in the Package.appxmanifest file. However, it does not specify how. I have set the ShortName in my .appxmanifest and I have also set the "Show name" field to "All Logos"; however, the default logo still appears in the bottom left-hand corner of the live tile and obscures the last line of text in my tile notification. Any ideas?
A live tile can have an image, text, or no branding. The default is the app logo, and you override this when you create a live tile update by specifying branding "none", like this:
var templateContent = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImage);
var imageElement = (XmlElement) templateContent.GetElementsByTagName("image").Item(0);
imageElement.SetAttribute("src", string.Concat(imagePath, "wide_tile.png"));
var bindingElement = (XmlElement) templateContent.GetElementsByTagName("binding").Item(0);
bindingElement.SetAttribute("branding", "none");
var tile = new TileNotification(templateContent);
TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);
You can't have both the last line of text and a short name. It's either logo/shortname or the the last line of text.
http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/d7ed6580-0528-4a28-a475-731b37f2c89b
I am trying to slide a Panel from the bottom, so that it covers the entire viewport, like the Bookmarks panel in iOS Safari. This is similar to the ActionSheet, but fulscreen, and without the dark frame around it.
this.advSearch = Ext.ComponentMgr.create({xtype: 'advanced_search', itemId: 'pnlAdvancedSearch'});
this.advSearch.autoRender = true;
this.advSearch.show({type: 'slide', direction: 'up'});
This sort of works, but the new panel doesn't fill the whole screen, and parts of it appear behind the background panel. I've tried various layouts, including fit, vbox, with varying degrees of ugliness, but the root problem seems to be that the panel doesn't know how tall it needs to be. Maybe because it doesn't have a container?
Any suggestions? Is this even the right approach, or should I try to hack the ActionSheet to expand to fullscreen, and show without the border?
Thanks.
Because your panel is floating (or I presume it is), you will need to give the panel a fixed height in Sencha Touch 1. You are very restricted in that respect. This following code should work:
var sheet = new Ext.Sheet({
html: 'hello',
style: 'color:#fff',
height: window.innerHeight,
stretchX: true
});
// replace this show with your animation
sheet.show();
As you can see, I give it a fixed height of the window and then stretch it on the X axis (y doesn't work).
When I create a new window in Appcelerator I need to change the background image. This is done by setting “barImage”. The window itself is a child of a navigation group and has its own children. When I use the “barImage” parameter it hides the nav bar title text on the initial load of the window. If I navigate to its child window and then back the title text is displayed in the nav bar.
var sectionWindow = Titanium.UI.createWindow({
backgroundColor:'#fff',
fullscreen:false,
title:’My Sub Page',
modal:true,
barImage:'images/nav_bar.png'
});
How can I get the title text to consistently display?
I believe there are known issues with the barImage in the 1.7.2 release, please check the 1.8x CI builds where the issue has been addressed
I've got a problem to render an esri Map with sencha touch. I display a tabPanel with a tab containing the map, and 3 other tabs.
My problem is that when I'm on another tab than the map-tab, when I resize the window (or change orientation of phone), the map diseapears.
I identified the source of the problem. when I resize the window being on another tab, the map tab goes from current size to 0x0 to the new size. Problem is that when the width and height are set to 0x0, the Esri Map require tiles of dimension 0x0, and then the error appears.
I tried to set minWidth and minHeight to my tab but without success.
do you have any clue how i could fix that ??
thank you in advance !
I believe I had the same problem (I didn't really know the exact cause at the time). Whenever the orientation of the screen changed I was manually changing the dimensions of the esri map to match the panel and then firing the map's reposition and resize methods. However, if this was fired from a different panel, the basemaps would drop out of the map.
I was able to fix this by calling the following function every time orientation changed, or the map panel was set as active:
function resizeMapDiv(){
if (appPanel.getActiveItem() === mapPanel){
var mapdiv = document.getElementById('mapDiv');
var mappanel = document.getElementById('mapPanel');
if ((mapdiv != null) && (mappanel != null) && (mapdiv.style.width != mappanel.style.width)){
mapdiv.style.width = mappanel.style.width;
mapdiv.style.height = mappanel.style.height;
map.reposition();
map.resize();
}
}
}